/* ===== css/base.css ===== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../assets/fonts/manrope-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  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-display: swap;
  font-weight: 200 900;
  src: url(../assets/fonts/unbounded-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(../assets/fonts/unbounded-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(../assets/fonts/unbounded-latin-wght-normal.woff2) format('woff2-variations');
  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;
}

/* IOTICS - global shell: page tokens, the slide deck, the fixed header and the slide navigator.
   Every slide brings its own palette inside its own @scope block (css/s1..s8.css); the tokens
   below are the ones the shell itself needs, taken from the hand-off tokens/theme.css. */

/* ---------- dark theme (default) ---------- */
:root,
:root[data-theme="dark"] {
  --bg: #04060C;
  --bg2: #0B1730;
  --text: #F2F5FA;
  --muted: #A3ACBD;
  --line: rgba(242, 245, 250, .10);
  --faint: rgba(242, 245, 250, .10);
  --hl: #86B4FF;
  --accent: #5E9BFF;
  --accent2: #A8E6FF;
  --navText: #E6EAF2;
  --glass: rgba(16, 24, 44, .46);
  --glassLine: rgba(170, 200, 255, .16);
  /* непрозрачный: сквозь выпадающие меню не должно просвечивать содержимое страницы */
  --menu: #0B1121;
  --menuHover: rgba(134, 180, 255, .12);
  --logoMark: #F2F5FA;
  --stepOn: #5CE1FF;
  --stepsBg: rgba(4, 6, 12, .86);
  --page-bg: radial-gradient(110% 85% at 68% 62%, var(--bg2) 0%, var(--bg) 58%);
  color-scheme: dark;
}

/* ---------- light theme ("daylight" palette) ---------- */
:root[data-theme="light"] {
  --bg: #EDF3FF;
  --bg2: #FFFFFF;
  --text: #0E1C45;
  --muted: #4E5C86;
  --line: rgba(31, 79, 224, .12);
  --faint: rgba(14, 28, 69, .07);
  --hl: #1F4FE0;
  --accent: #1F4FE0;
  --accent2: #3D7BFF;
  --navText: #16265A;
  --glass: rgba(255, 255, 255, .60);
  --glassLine: rgba(31, 79, 224, .20);
  --menu: #FFFFFF;
  --menuHover: rgba(31, 79, 224, .09);
  --logoMark: #2645A1;
  --stepOn: #1F4FE0;
  --stepsBg: rgba(236, 242, 255, .92);
  --page-bg:
    radial-gradient(50% 45% at 92% 2%, rgba(120, 165, 255, .75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95, 200, 255, .5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175, 155, 255, .32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255, 255, 255, .9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
  color-scheme: light;
}

/* Official module wordmarks used in navigation, the platform catalogue and the form. */
.module-wordmark {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 12px;
  max-width: 100%;
  object-fit: contain;
}
:root[data-theme="dark"] .module-wordmark {
  filter: brightness(0) invert(.94);
}
.platform-marker .module-wordmark { height: 10px; }

/* ---------- page ---------- */
* { box-sizing: border-box }

/* Keep document and panel scrolling native while hiding their scrollbars. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

html, body { height: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit }
a:hover { color: inherit }

:focus-visible { outline: 2px solid var(--stepOn); outline-offset: 3px }

/* ---------- the deck: one gesture = one slide ---------- */
.deck {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  /* переход между слайдами анимирует js/app.js, поэтому собственная плавная прокрутка
     браузера здесь только мешала бы присвоениям scrollTop */
  scroll-behavior: auto;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none }

.slide {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.slide#s1 { min-height: 760px }

/* Каждый слайд несёт десятки бесконечных анимаций: пакеты по проводам, дыхание подсветки,
   бегущие кромки карточек. Все восемь слайдов разом держали главный поток занятым постоянно -
   кадр в простое стоил 33 мс вместо 16, а переход между слайдами выдавал десять кадров вместо
   пятидесяти. Поэтому анимации идут только на том слайде, который на экране (класс live ставит
   js/dc.js), и замирают на время перехода (класс shifting ставит js/app.js).

   Пауза, а не отмена: анимация продолжается с того места, где её остановили, поэтому слайд
   выглядит так же, как если бы она шла всё время. */
.slide:not(.live), .slide:not(.live)::before, .slide:not(.live)::after,
.slide:not(.live) *, .slide:not(.live) *::before, .slide:not(.live) *::after,
.shifting .slide, .shifting .slide::before, .shifting .slide::after,
.shifting .slide *, .shifting .slide *::before, .shifting .slide *::after {
  animation-play-state: paused !important;
}

/* Below the mobile breakpoint - and on any viewport too short to hold a slide as designed -
   the deck stops behaving like a presentation and becomes ordinary scrolling sections, so no
   content is ever clipped out of reach. js/app.js disables the one-gesture-per-slide jump with
   the same condition. */
@media (max-width: 960px), (max-height: 720px) {
  .deck { scroll-snap-type: none; scroll-behavior: auto }
  .slide, .slide#s1 { min-height: 0 }
  /* слайд, который js/app.js ещё не собрал, держит высоту экрана, иначе лента во время
     первой сборки подпрыгивала бы по высоте */
  .slide:empty { min-height: 100vh }
  .slide > div { height: auto; min-height: 100vh }
}

/* Shared site header */
#shell {
  --nav-height: 72px;
  --nav-surface: rgba(4, 6, 12, .82);
}
:root[data-theme="light"] #shell { --nav-surface: rgba(237, 243, 255, .88); }
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--nav-height, 72px);
  background: var(--nav-surface);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  animation: navIn .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes navIn { from { opacity: 0; transform: translateY(-12px) } }

.nav-in {
  height: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav-links { display: flex; align-items: center; gap: 4px }
.nav a.link {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--navText);
  opacity: .78;
  transition: opacity .2s;
}
.nav a.link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 1px;
  background: var(--hl);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.nav a.link:hover { opacity: 1 }
.nav a.link:hover::after { transform: scaleX(1) }

/* ---------- «Платформа»: выпадающий список модулей ----------
   Кнопка выглядит как остальные пункты меню шапки (.nav a.link), но это button: она ничего
   не открывает по ссылке, а раскрывает список. Сам список — из js/site.js. */
.plat { position: relative }
.plat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  background: none;
  border: 0;
  color: var(--navText);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  opacity: .78;
  cursor: pointer;
  transition: opacity .2s;
}
.plat-btn:hover, .plat-btn.on { opacity: 1 }
.plat-btn svg { width: 14px; height: 14px; transition: transform .25s ease }
.plat-btn.on svg { transform: rotate(180deg) }

/* Панель прибита к окну, а не к кнопке: только так она тянется во всю ширину. Верхний отступ —
   прозрачный мостик от кромки кнопки до низа шапки: без него курсор, идущий вниз к панели,
   попадал бы в просвет, и меню закрывалось бы на полпути. */
.plat-menu {
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  padding-top: 14px;
  animation: menuIn .2s ease both;
}
.plat-sheet {
  background: var(--menu);
  border-top: 1px solid var(--glassLine);
  border-bottom: 1px solid var(--glassLine);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .6);
}
/* внутренняя колонка совпадает с шапкой: пункт меню стоит ровно над заголовком списка */
.plat-in {
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 56px 20px;
  color: var(--text);
}
.plat-head { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 12px }
.plat-head b { font-size: 14px; font-weight: 600; letter-spacing: -.01em }
.plat-head i { flex: 1; font-size: 12px; font-style: normal; color: var(--muted) }

.plat-row { display: flex; align-items: stretch; gap: 16px }

/* Карточка самой платформы нарочно не похожа на модули: тёмно-синяя плашка со знаком IOTICS
   в обеих темах — её видно сразу, и её не спутать с одним из семи модулей. */
.plat-hero {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  color: #FFFFFF;
  text-decoration: none;
  background: linear-gradient(140deg, var(--accent) 0%, #1437A0 45%, #0B1730 100%);
  box-shadow: 0 16px 36px -22px var(--accent), 0 0 0 1px rgba(255, 255, 255, .10) inset;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* цвет повторяется: глобальное a:hover { color: inherit } иначе перебило бы его */
.plat-hero:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 22px 46px -22px var(--accent), 0 0 0 1px rgba(255, 255, 255, .16) inset;
}
.plat-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.plat-logo svg { width: 17px; height: 17px }
.plat-hero b { margin-top: 5px; font-size: 15px; font-weight: 600; letter-spacing: -.01em }
.plat-hero i {
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
  color: rgba(255, 255, 255, .76);
}
.plat-more {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.plat-more svg { width: 14px; height: 14px }

.plat-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.plat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--faint);
  text-decoration: none;
  color: var(--text);
  transition: background-color .2s, border-color .2s;
}
.plat-card:hover { background: var(--menuHover); border-color: var(--glassLine) }
/* модуль, страница которого открыта прямо сейчас */
.plat-card.on { border-color: var(--hl) }
.plat-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--faint);
  color: var(--hl);
}
.plat-ic svg { width: 18px; height: 18px }
.plat-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.plat-code { display: flex; align-items: center; gap: 6px }
.plat-tx b { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--hl) }
/* Названия модулей в разных языках сильно разной длины («Customer Relationship Management»
   против «Работа с клиентами»), поэтому строка переносится, а не обрезается. */
.plat-tx i {
  font-size: 13px;
  font-style: normal;
  line-height: 1.3;
}
/* состояние стоит рядом с кодом модуля, а не справа от названия: иначе длинному названию
   остаётся полоска в полкарточки, и оно ломается на три строки */
.plat-st {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--muted);
  background: var(--line);
}

.plat-all {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--hl);
  font-size: 12px;
  font-weight: 600;
}
/* цвет повторяется: глобальное a:hover { color: inherit } иначе перебило бы его */
.plat-all:hover { color: var(--hl); text-decoration: underline }
.plat-all svg { width: 13px; height: 13px }

/* На узких экранах четыре колонки стали бы уже названия модуля, поэтому их меньше,
   а карточка платформы ужимается. */
@media (max-width: 1400px) {
  .plat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .plat-hero { flex-basis: 268px }
}
@media (max-width: 1120px) {
  .plat-hero { flex-basis: 236px }
  .plat-card { padding-left: 8px; padding-right: 8px; gap: 8px }
}

.logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-right: 100px;
  border-radius: 50%;
  color: var(--logoMark);
  text-decoration: none;
}
.logo::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--glassLine);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.logo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--accent2);
  animation: spin 6s linear infinite;
  opacity: .8;
}
@keyframes spin { to { transform: rotate(360deg) } }
.logo svg { position: relative; width: 22px; height: 22px }
.logo svg.wm {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  width: 88px;
  height: 14px;
  margin-top: -7px;
}

.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 4px }
.ibtn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--navText);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .2s;
}
.ibtn:hover { background: var(--faint) }
.ibtn svg { width: 18px; height: 18px }
.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }

.lang { position: relative }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  margin: 0 4px;
  background: var(--glass);
  border: 1px solid var(--glassLine);
  color: var(--navText);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lang-btn:hover { border-color: var(--hl) }
.lang-btn svg { width: 15px; height: 15px }
.lang-menu {
  position: absolute;
  top: 50px;
  right: 0;
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  background: var(--menu);
  border: 1px solid var(--glassLine);
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
  animation: menuIn .22s ease both;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) } }
.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.lang-item:hover { background: var(--menuHover) }
.lang-item svg { width: 16px; height: 16px; color: var(--hl) }
.lang-code { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 600 }

/* ---------- вход в кабинет и кнопка «Связаться» ----------
   Адрес кабинета и список мессенджеров — в js/contacts.js. Если адреса кабинета нет,
   js/site.js не отдаёт разметке hasAccount и кнопка «Войти» не рисуется вовсе. */
/* Только значок, без подписи, и стоит после переключателя темы — поэтому выглядит и
   занимает место так же, как соседние круглые кнопки шапки (.ibtn). Название кабинета
   остаётся в title и aria-label, иначе кнопка была бы безымянной для экранного диктора. */
.signin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--navText);
  text-decoration: none;
  opacity: .85;
  transition: background-color .2s, opacity .2s;
}
.signin:hover { background: var(--faint); opacity: 1 }
.signin svg { width: 18px; height: 18px }

.reach { position: relative }
.reach-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  margin: 0 2px;
  background: var(--hl);
  border: 1px solid var(--hl);
  border-radius: 999px;
  color: #FFFFFF;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.reach-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px var(--hl) }
.reach-btn svg { width: 16px; height: 16px }
.reach-btn .ico { stroke: currentColor }

.reach-menu {
  position: absolute;
  top: 50px;
  right: 0;
  width: 318px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  background: var(--menu);
  border: 1px solid var(--glassLine);
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
  animation: menuIn .22s ease both;
}
.reach-head { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 3px }
.reach-head b { font-size: 14px; font-weight: 600; letter-spacing: -.01em }
.reach-head i { font-size: 12px; font-style: normal; color: var(--muted) }

.reach-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: background-color .2s;
}
.reach-item:hover { background: var(--menuHover) }
.reach-ic {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--faint);
  color: var(--hl);
}
.reach-ic svg { width: 19px; height: 19px }
.reach-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.reach-tx b { font-size: 13px; font-weight: 500; letter-spacing: -.005em }
.reach-tx i {
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reach-go { flex: none; width: 14px; height: 14px; color: var(--muted); opacity: .6 }
.reach-item:hover .reach-go { opacity: 1; color: var(--hl) }

/* последний пункт — заявка через форму, её выделяем */
.reach-item.cta { margin-top: 4px; background: var(--faint) }
.reach-item.cta:hover { background: var(--menuHover) }
.reach-item.cta .reach-ic { background: var(--hl); color: #FFFFFF }
.reach-item.cta .reach-ic .ico { stroke: currentColor }

.burger { display: none }

/* mobile menu drawer */
.drawer {
  position: fixed;
  z-index: 55;
  top: var(--nav-height, 72px);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  padding: 8px 16px 16px;
  /* со списком модулей меню стало выше экрана телефона, поэтому прокручивается само,
     не утягивая за собой страницу */
  max-height: calc(100vh - var(--nav-height, 72px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--menu);
  border-bottom: 1px solid var(--line);
  animation: menuIn .22s ease both;
}
.drawer a {
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 15px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.drawer a:last-child { border-bottom: 0 }

/* вход и контакты в мобильном меню — в шапке они не помещаются */
.dr-signin {
  gap: 10px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid var(--glassLine);
  border-radius: 12px;
  font-weight: 500;
}
.dr-signin,
.drawer a.dr-signin { border-bottom: 1px solid var(--glassLine) }
.dr-signin svg { width: 18px; height: 18px; color: var(--hl) }
.dr-title {
  margin: 16px 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.drawer a.dr-reach {
  justify-content: space-between;
  gap: 12px;
  height: auto;
  min-height: 52px;
  padding: 8px 0;
}
.drawer a.dr-reach.cta {
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px solid var(--hl);
  border-radius: 12px;
}
.drawer a.dr-reach.cta .reach-tx b { color: var(--hl) }

/* список модулей в мобильном меню — те же пункты, что в выпадающем списке «Платформа» */
.drawer a.dr-plat {
  gap: 12px;
  height: auto;
  min-height: 64px;
  margin: 4px 0 6px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  color: #FFFFFF;
  background: linear-gradient(140deg, var(--accent) 0%, #1437A0 45%, #0B1730 100%);
}
.drawer a.dr-plat .plat-tx b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #FFFFFF }
.drawer a.dr-plat .plat-tx i { color: rgba(255, 255, 255, .76) }
.dr-go { flex: none; width: 14px; height: 14px; opacity: .7 }
.drawer a.dr-mod {
  gap: 12px;
  height: auto;
  min-height: 56px;
  padding: 8px 0;
}
.drawer a.dr-mod.on .plat-tx i { color: var(--hl) }
.drawer a.dr-all {
  justify-content: space-between;
  gap: 10px;
  height: 48px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid var(--hl);
  border-bottom: 1px solid var(--hl);
  border-radius: 12px;
  color: var(--hl);
  font-size: 14px;
  font-weight: 600;
}
.drawer a.dr-all svg { width: 14px; height: 14px }

/* ---------- помощник в правом нижнем углу ----------
   Отвечает js/ai.js: без настроенного адреса модели — по текстам самого сайта. */
.ai {
  position: fixed;
  z-index: 58;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
/* На главной внизу стоит навигатор слайдов (86px на высоких экранах, 54px на невысоких —
   см. css/compact.css), поэтому садимся на десять пикселей над ним. */
.ai.up { bottom: 96px }

.ai-fab {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #FFFFFF;
  background: linear-gradient(145deg, var(--accent2), var(--hl));
  box-shadow: 0 16px 36px -14px var(--hl), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  transition: box-shadow .2s ease;
  animation: aiFloat 4.5s ease-in-out infinite;
}

/* Кнопку легко не заметить, поэтому она тихо дышит и пускает две волны. Анимируются только
   transform и opacity — их считает видеокарта, на кадр это не влияет. Тень не трогаем:
   её перерисовка стоит дорого, а всю главную мы как раз от этого и избавляли. */
@keyframes aiFloat {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-5px) }
}

.ai-fab::before,
.ai-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent2);
  opacity: 0;
  pointer-events: none;
  animation: aiRing 3.4s ease-out infinite;
}
.ai-fab::after { animation-delay: 1.7s }
@keyframes aiRing {
  0%  { transform: scale(1); opacity: .5 }
  65% { transform: scale(1.8); opacity: 0 }
  100% { transform: scale(1.8); opacity: 0 }
}

/* наведение забирает управление: волны и покачивание замирают, остаётся подсветка */
.ai-fab:hover { box-shadow: 0 22px 46px -12px var(--hl), 0 0 0 1px rgba(255, 255, 255, .2) inset }
.ai-fab:hover,
.ai-fab:hover::before,
.ai-fab:hover::after { animation-play-state: paused }

/* пока окно открыто, привлекать внимание больше незачем */
.ai.open .ai-fab { animation: none; transform: none }
.ai.open .ai-fab::before,
.ai.open .ai-fab::after { display: none }

.ai-fab svg { width: 24px; height: 24px }
.ai-fab .ico { stroke: currentColor; stroke-width: 1.4 }
.ai-fab .spark { animation: aiSpark 2.6s ease-in-out infinite }
@keyframes aiSpark {
  0%, 100% { opacity: .35 }
  50%      { opacity: 1 }
}

.ai-panel {
  width: 384px;
  max-width: calc(100vw - 32px);
  max-height: min(620px, calc(100vh - 160px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
  background: var(--menu);
  border: 1px solid var(--glassLine);
  border-radius: 20px;
  box-shadow: 0 32px 70px -24px rgba(0, 0, 0, .6);
  animation: menuIn .22s ease both;
}

.ai-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}
.ai-mark {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #FFFFFF;
  background: linear-gradient(145deg, var(--accent2), var(--hl));
}
.ai-mark svg { width: 20px; height: 20px }
.ai-mark .ico { stroke: currentColor; stroke-width: 1.4 }
.ai-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.ai-ttl b { font-size: 14px; font-weight: 600; letter-spacing: -.01em }
.ai-ttl i { font-size: 11px; font-style: normal; color: var(--muted) }
.ai-x {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.ai-x:hover { background: var(--faint); color: var(--text) }
.ai-x svg { width: 16px; height: 16px }

.ai-log {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

}
.ai-msg { max-width: 86%; display: flex }
.ai-msg p {
  margin: 0;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 14px;
  white-space: pre-wrap;
}
.ai-msg.bot { align-self: flex-start }
.ai-msg.bot p {
  background: var(--faint);
  border: 1px solid var(--glassLine);
  border-bottom-left-radius: 5px;
}
.ai-msg.me { align-self: flex-end }
.ai-msg.me p {
  background: var(--hl);
  color: #FFFFFF;
  border-bottom-right-radius: 5px;
}
.ai-wait p { color: var(--muted) }
.ai-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle }
.ai-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: aiDot 1.1s ease-in-out infinite;
}
.ai-dots i:nth-child(2) { animation-delay: .18s }
.ai-dots i:nth-child(3) { animation-delay: .36s }
@keyframes aiDot { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

.ai-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px }
.ai-chip {
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--hl);
  background: none;
  border: 1px solid var(--glassLine);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.ai-chip:hover { border-color: var(--hl); background: var(--faint) }

.ai-form {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.ai-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--faint);
  border: 1px solid var(--glassLine);
  border-radius: 999px;
  outline: none;
  transition: border-color .2s;
}
.ai-input::placeholder { color: var(--muted) }
.ai-input:focus { border-color: var(--hl) }
.ai-go {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  color: #FFFFFF;
  background: var(--hl);
  cursor: pointer;
  transition: transform .2s ease;
}
.ai-go:hover { transform: translateY(-1px) }
.ai-go svg { width: 17px; height: 17px }
.ai-go .ico { stroke: currentColor }

.ai-note {
  flex: none;
  margin: 0;
  padding: 0 14px 12px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- slide navigator (bottom) ---------- */
#s8 .contact { margin-bottom: var(--steps-space, 0px); }
.steps {
  transform: translateY(var(--steps-offset, 0px));
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 0 20px;
  background: linear-gradient(0deg, var(--stepsBg) 35%, transparent);
  pointer-events: none;
}
.steps-in {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 22px;
  pointer-events: auto;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 44px;
  padding-top: 4px;
  text-decoration: none;
  color: var(--muted);
  transition: color .25s;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.step .sbar { position: relative; display: block; height: 2px; border-radius: 2px; background: var(--line) }
.step .sbar::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -2px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .55;
  transition: background-color .25s, opacity .25s;
}
.step .sbar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--stepOn);
  transition: width .45s cubic-bezier(.2, .7, .2, 1), opacity .25s;
}
.step.past .sbar i { width: 100%; opacity: .35 }
.step.past .sbar::before { background: var(--stepOn); opacity: .5 }
.step.cur .sbar i { width: 100%; box-shadow: 0 0 12px var(--stepOn); animation: stepFill 1.6s cubic-bezier(.2, .7, .2, 1) .3s both }
.step.cur .sbar::before { background: var(--stepOn); opacity: 1; box-shadow: 0 0 10px var(--stepOn) }
.step.cur .sbar::after {
  content: '';
  position: absolute;
  right: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stepOn);
  box-shadow: 0 0 12px var(--stepOn);
  animation: stepEnd 2.4s ease-in-out 1.9s infinite;
  opacity: 0;
}
.step .slbl {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step .snum { color: var(--stepOn); opacity: .75; font-variant-numeric: tabular-nums }
.step.cur { color: var(--text) }
.step.cur .snum { opacity: 1 }
.step:hover { color: var(--text) }
.step:hover .sbar i { width: 100%; opacity: .75 }
@keyframes stepFill { from { width: 0 } }
@keyframes stepEnd { 0%, 100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.2) } }

/* ---------- hero scroll hint ---------- */
.hint {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 112px;
  pointer-events: none;
  animation: fadeIn 1s ease 1.2s both;
  transition: opacity .4s ease;
}
.hint.off { opacity: 0 }
.hint-in { max-width: 1680px; margin: 0 auto; padding: 0 56px }
.scroll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: auto;
}
.scroll:hover { color: var(--text) }
.mouse { position: relative; width: 24px; height: 38px; border: 1px solid currentColor; border-radius: 14px }
.mouse i {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--accent2);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1 } 80% { transform: translateY(10px); opacity: 0 } 100% { opacity: 0 } }
@keyframes fadeIn { from { opacity: 0 } }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .nav a.link, .plat-btn { padding: 0 9px }
  .plat-in { padding-left: 32px; padding-right: 32px }
  .nav-in, .steps-in, .hint-in { padding: 0 32px }
  .steps-in { gap: 14px }
  .step .slbl { font-size: 11px; gap: 8px }
}

@media (max-width: 960px) {
  .nav-in { grid-template-columns: auto 1fr; padding: 0 16px }
  .nav-links { display: none }
  .nav .search { display: none }
  /* вход и контакты уходят в выпадающее меню */
  .signin, .reach { display: none }
  .burger { display: flex }
  .logo { margin-right: 0 }
  .logo svg.wm { display: none }
  .nav.open + .drawer { display: flex }
  .steps-in { padding: 0 16px; gap: 6px }
  .step .stxt { display: none }
  .hint { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto }
  .nav, .nav *, .steps *, .hint * { animation: none !important; transition: none !important }
  /* кнопка помощника перестаёт качаться и пускать волны: привлекать внимание движением
     там, где человек от движения отказался, нельзя */
  .ai-fab, .ai-fab::before, .ai-fab::after, .ai-fab .spark { animation: none !important }
  .ai-fab { transform: none !important }
}


/* Shared interactive colors. Module accents still identify products and data series. */
:root {
  --action-fill: #94baff;
  --action-hover: #b2ceff;
  --action-pressed: #79a7f5;
  --action-ink: #101d34;
  --control-surface: #142138;
  --control-edge: #788ba8;
  --control-label: #e9eff9;
  --control-muted: #b1bfd2;
  --selection-fill: #203854;
  --focus-ring: #aad6ff;
  --positive-ink: #74dfae;
  --negative-ink: #ffacb7;
}
:root[data-theme="light"] {
  --action-fill: #2456b8;
  --action-hover: #194694;
  --action-pressed: #143974;
  --action-ink: #ffffff;
  --control-surface: #ffffff;
  --control-edge: #748399;
  --control-label: #182740;
  --control-muted: #4c5d74;
  --selection-fill: #e2edff;
  --focus-ring: #124caa;
  --positive-ink: #09643f;
  --negative-ink: #a21c38;
}

:is(#shell, #deck, #about, #page) :is(.reach-btn, .ai-fab, .s1-cta, .pg-cta, .v4-ai-send, .s7 .submit) {
  --button-fill: var(--action-fill);
  background: var(--button-fill);
  border-color: var(--button-fill);
  color: var(--action-ink);
  box-shadow: none;
  filter: none;
}
:is(#shell, #deck, #about, #page) :is(.reach-btn, .ai-fab, .s1-cta, .pg-cta, .v4-ai-send, .s7 .submit):hover {
  --button-fill: var(--action-hover);
}
:is(#shell, #deck, #about, #page) :is(.reach-btn, .ai-fab, .s1-cta, .pg-cta, .v4-ai-send, .s7 .submit):active {
  --button-fill: var(--action-pressed);
}
:is(#shell, #page, #deck, #about) button:disabled {
  color: var(--control-muted);
  background: var(--control-surface);
  border-color: var(--control-edge);
  cursor: default;
}
:is(#page, #about, #deck) :is(.pg-cta-dot, .s1-cta .cta-dot) {
  background: color-mix(in srgb, var(--action-ink) 10%, var(--button-fill));
  color: var(--action-ink);
}
#deck .s7 .submit::after { content: none; }
:is(#page, #deck) :is(.v4-end-cta2, .s7 .chip, .s7 .again) {
  color: var(--control-label);
  background: var(--control-surface);
  border: 1px solid var(--control-edge);
}
:is(#page, #deck) :is(.v4-end-cta2:hover, .s7 .chip:hover, .s7 .chip.on, .s7 .again:hover) {
  color: var(--focus-ring);
  background: var(--selection-fill);
  border-color: var(--focus-ring);
}
#deck .s7 .chip.on .ck { background: var(--action-fill); color: var(--action-ink); }
#deck .s7 .field, #page .mes-lead-form input {
  color: var(--control-label);
  background: var(--control-surface);
  border-color: var(--control-edge);
}
#deck .s7 .field select option { color: var(--control-label); background: var(--control-surface); }
#deck .s7 .field label, :is(#page .mes-lead-form, #deck .s7) :is(input, textarea)::placeholder {
  color: var(--control-muted); opacity: 1;
}
#deck .s7 .field :is(input, select, textarea):focus-visible { outline: none; }
#deck .s7 .field:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 2px var(--focus-ring); }
#deck .s7 .field.bad { border-color: var(--negative-ink); }
#deck .s7 .err { color: var(--negative-ink); }
#page .mes-form-status-msg.status-ok { color: var(--positive-ink); }
:is(#about, #page) :is(.about-projects, .module-intro) a:not([class]),
#page .module-jump { color: var(--focus-ring); }
:is(#shell, #page, #about, #deck, #site-footer) :is(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ===== css/s1.css ===== */
/* IOTICS - slide 01-hero.
   Ported from design-source/01-hero.dc.html.
   Keyframe names are namespaced with the `s1` prefix so all slides can share one document. */

.s1-brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

@scope (.hero) {

/* ================= tokens ================= */
:scope{
  --bg:#04060C; --bg2:#0B1730;
  --text:#F2F5FA; --muted:#A3ACBD; --faint:rgba(242,245,250,.10);
  --hl:#86B4FF; --accent:#5E9BFF; --accent2:#A8E6FF;
  --btn:#F2F5FA; --btnText:#04060C; --btnDot:#2F6BFF;
  --line:rgba(242,245,250,.10); --navText:#E6EAF2;
  --glass:rgba(16,24,44,.46); --glassLine:rgba(170,200,255,.16); --glassHi:rgba(255,255,255,.07);
  --menu:rgba(12,18,34,.94); --menuHover:rgba(134,180,255,.12);
  --ring:rgba(130,170,255,.30); --domeLine:rgba(150,185,255,.38); --domeFill:rgba(70,120,255,.18); --shine:rgba(170,205,255,.20);
  --pin:#6FA8FF; --pinGlow:rgba(80,140,255,.75); --net:rgba(140,185,255,.55);
  --sweep:rgba(130,180,255,.45); --smoke:rgba(200,215,240,.26); --platform:rgba(60,120,255,.42);
  --vignette:rgba(4,6,12,1);
  position:relative; height:100vh; min-height:760px; overflow:hidden; isolation:isolate;
  background:radial-gradient(110% 85% at 68% 62%, var(--bg2) 0%, var(--bg) 58%);
  color:var(--text);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition:color .6s ease;
}
:scope.light{
  --bg:#EDF1F7; --bg2:#FFFFFF;
  --text:#0A1222; --muted:#4A5468; --faint:rgba(10,18,34,.08);
  --hl:#1D4ED8; --accent:#1D4ED8; --accent2:#3B82F6;
  --btn:#0A1222; --btnText:#FFFFFF; --btnDot:#3B82F6;
  --line:rgba(10,18,34,.10); --navText:#1A2335;
  --glass:rgba(255,255,255,.55); --glassLine:rgba(30,60,140,.12); --glassHi:rgba(255,255,255,.7);
  --menu:rgba(255,255,255,.95); --menuHover:rgba(29,78,216,.07);
  --ring:rgba(40,80,190,.30); --domeLine:rgba(60,95,200,.38); --domeFill:rgba(180,198,245,.55); --shine:rgba(255,255,255,.8);
  --pin:#1D4ED8; --pinGlow:rgba(40,100,255,.45); --net:rgba(29,78,216,.42);
  --sweep:rgba(255,255,255,.6); --smoke:rgba(160,170,190,.5); --platform:rgba(40,100,255,.22);
  --vignette:rgba(237,241,247,1);
}

/* ===== daylight palette (light theme), richer ===== */
:scope.light{
  --bg:#EDF3FF; --bg2:#FFFFFF;
  --text:#0E1C45; --muted:#4E5C86; --faint:rgba(14,28,69,.07); --line:rgba(31,79,224,.12); --navText:#16265A;
  --hl:#1F4FE0; --accent:#1F4FE0; --accent2:#3D7BFF;
  --glass:rgba(255,255,255,.6); --glassLine:rgba(31,79,224,.2); --glassHi:rgba(255,255,255,.9);
  --menu:rgba(255,255,255,.97); --menuHover:rgba(31,79,224,.09);
  --vignette:#E9F0FF; --ring:rgba(31,79,224,.3); --net:rgba(31,79,224,.5); --wire:rgba(31,79,224,.34);
  --pk:#2F6BFF; --pkGlow:rgba(47,107,255,.55); --pin:#1F4FE0; --pinGlow:rgba(31,79,224,.45);
  --tileA:#2552E8; --tileB:#9FC6FF; --chev:rgba(31,79,224,.1); --rowHi:rgba(31,79,224,.09);
  --panel:rgba(255,255,255,.55); --panelSolid:#EEF4FF; --orbBg:rgba(120,165,255,.42);
  --good:#1F4FE0; --goodSoft:rgba(31,79,224,.12); --goodGlow:rgba(47,107,255,.45);
  --cardBad:rgba(255,241,243,.94); --cardBadLine:rgba(225,55,75,.32); --cardBadText:#0E1C45; --cardBadMuted:#4E5C86;
  --cardGood:rgba(255,255,255,.84); --cardGoodLine:rgba(31,79,224,.26); --cardGoodText:#0E1C45; --cardGoodMuted:#3F4D78;
  --field:rgba(255,255,255,.8); --fieldLine:rgba(31,79,224,.22); --fieldFocus:rgba(31,79,224,.1);
  --chip:rgba(255,255,255,.78); --chipOn:rgba(31,79,224,.14);
  --btn:#1F4FE0; --btnHover:#1840C0; --btnGlow:rgba(31,79,224,.45); --btnText:#FFFFFF;
  background:
    radial-gradient(50% 45% at 92% 2%, rgba(120,165,255,.75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95,200,255,.5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175,155,255,.32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255,255,255,.9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
}
:scope.light .steps{--stepOn:#1F4FE0; --stepsBg:rgba(236,242,255,.9)}
:scope.light .bgwave{opacity:.6}
:scope.light .wave{opacity:1}
:scope.light .bgwave-v{--bgFade:rgba(236,242,255,.5)}

/* ================= atmosphere ================= */
.wave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none}
.grain{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--faint) 1px, transparent 1.4px); background-size:3px 3px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 70%); mask-image:linear-gradient(180deg, #000, transparent 70%)}
.glow-a{position:absolute; z-index:0; width:900px; height:900px; right:-6%; top:6%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, var(--platform), transparent); filter:blur(40px); opacity:.55; animation:s1_breathe 9s ease-in-out infinite}
@keyframes s1_breathe{0%,100%{transform:scale(1); opacity:.45} 50%{transform:scale(1.08); opacity:.7}}
.vig{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--vignette) 0%, transparent 38%), linear-gradient(0deg, var(--vignette) 0%, transparent 22%)}
:scope.light .vig{opacity:.75}

/* ================= nav ================= */
.nav{position:absolute; top:0; left:0; right:0; z-index:30; height:72px; border-bottom:1px solid var(--line); animation:s1_navIn .59s cubic-bezier(.2,.7,.2,1) both}
@keyframes s1_navIn{from{opacity:0; transform:translateY(-12px)}}
.nav-in{height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav a.link{position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:13px; font-weight:400; letter-spacing:.02em; text-decoration:none; color:var(--navText); opacity:.78; transition:opacity .2s}
.nav a.link::after{content:''; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--hl); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a.link:hover{opacity:1; color:var(--navText)}
.nav a.link:hover::after{transform:scaleX(1)}
.logo{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:var(--text); text-decoration:none}
.logo .lgx{color:var(--text)}
:scope.light .logo .lgx{color:#2645A1}
.logo::before{content:''; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--glassLine); background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.logo::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s1_spin 6s linear infinite; opacity:.8}
@keyframes s1_spin{to{transform:rotate(360deg)}}
.logo svg{position:relative; width:22px; height:22px}
.logo{margin-right:100px}
.logo svg.wm{position:absolute; left:calc(100% + 12px); top:50%; width:88px; height:14px; margin-top:-7px; color:var(--text)}
:scope.light .logo svg.wm{color:#2645A1}
.logo .lg-arc,.logo .lg-stem{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}
.logo .lg-dot{fill:currentColor}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.ibtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--navText); cursor:pointer; border-radius:50%; transition:background-color .2s}
.ibtn:hover{background:var(--faint)}
.ibtn svg{width:18px; height:18px}
.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; margin:0 4px; background:var(--glass); border:1px solid var(--glassLine); color:var(--navText); font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:999px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.lang-btn:hover{border-color:var(--hl)}
.lang-btn svg{width:15px; height:15px}
.lang-menu{position:absolute; top:50px; right:0; min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px; color:var(--text);
  background:var(--menu); border:1px solid var(--glassLine); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); animation:s1_menuIn .22s ease both}
@keyframes s1_menuIn{from{opacity:0; transform:translateY(-6px)}}
.lang-item{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer}
.lang-item:hover{background:var(--menuHover)}
.lang-item svg{width:16px; height:16px; color:var(--hl)}
.lang-code{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:600}
.burger{display:none}

/* ================= copy ================= */
.inner{position:relative; z-index:5; height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:flex; align-items:center}
.copy{position:relative; z-index:6; max-width:min(720px, 50vw); margin-top:-40px}
.eyebrow{display:inline-flex; align-items:center; gap:10px; height:32px; padding:0 14px 0 10px; margin-bottom:32px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glassLine); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.live{position:relative; width:7px; height:7px; border-radius:50%; background:var(--accent2); flex:none; box-shadow:0 0 10px var(--accent2)}
.live::after{content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--accent2); animation:s1_live 2s ease-out infinite}
@keyframes s1_live{0%{transform:scale(.5); opacity:1} 100%{transform:scale(1.7); opacity:0}}
.h1{margin:0 0 44px; font-size:clamp(40px, 4vw, 78px); line-height:1.04; font-weight:300; letter-spacing:-.035em; text-wrap:balance}
.h1 .l1{display:block; font-weight:400}
.h1 .hl{color:var(--hl)}
.h1 .rest{color:var(--text)}
.sub{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.cta{position:relative; display:inline-flex; align-items:center; gap:16px; height:56px; padding:0 8px 0 28px; border-radius:999px;
  background:var(--btn); color:var(--btnText); font-size:15px; font-weight:500; letter-spacing:.01em; text-decoration:none;
  box-shadow:0 0 0 1px var(--glassLine), 0 20px 50px -18px var(--pinGlow); transition:transform .3s ease, box-shadow .3s ease}
.cta:hover{color:var(--btnText); transform:translateY(-2px); box-shadow:0 0 0 1px var(--glassLine), 0 26px 60px -16px var(--pinGlow)}
.cta-dot{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--btnDot); color:#FFFFFF}
.cta-dot svg{width:16px; height:16px; transition:transform .35s ease}
.cta:hover .cta-dot svg{transform:translateX(3px) rotate(-45deg)}
.reveal{animation:s1_fadeUp .72s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.2s}.d3{animation-delay:.36s}
@keyframes s1_fadeUp{from{opacity:0; transform:translateY(28px); filter:blur(8px)}}

/* ================= s1 hero rich layout (matching user reference) ================= */
:root {
  --s1-brand-color: #60a5fa;
  --s1-brand-glow: rgba(59, 130, 246, 0.45);
}

.s1-copy {
  max-width: min(680px, 48vw);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.s1-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
  margin: 0 0 12px 0;
  display: block;
}

.s1-brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px 0;
}

.s1-brand-text {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--s1-brand-color, #60a5fa);
  text-shadow: 0 0 32px var(--s1-brand-glow, rgba(59, 130, 246, 0.45));
  line-height: 1;
}



.h1.s1-h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 2.7vw, 44px);
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.s1-lead {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--muted, #94a3b8);
  margin: 0 0 22px 0;
  max-width: 580px;
}

.sub.s1-sub {
  margin-bottom: 24px;
}

.s1-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 580px;
}

.s1-stat-card {
  background: rgba(13, 20, 36, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.s1-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.15);
}

.s1-stat-val {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.s1-stat-lbl {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  margin-top: 2px;
}

.s1-stat-sub {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
}

/* Light mode adjustments */
:scope.light .s1-brand-text {
  color: #1d4ed8;
  text-shadow: none;
}

:scope.light .s1-stat-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(203, 213, 225, 0.8);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

:scope.light .s1-stat-val {
  color: #0f172a;
}

:scope.light .s1-stat-lbl {
  color: #1e293b;
}

:scope.light .s1-stat-sub {
  color: #64748b;
}

@media (max-width: 1080px) {
  .s1-copy { max-width: 100%; margin-top: 60px; }
  .s1-stats-grid { max-width: 100%; }
}

@media (max-width: 640px) {
  .s1-stats-grid { grid-template-columns: 1fr; gap: 8px; }
  .h1.s1-h1 { font-size: 32px; }
}

/* ================= stage ================= */
/* stage = 1400×900 units: cloud network on top (y 0–240), factory render below (y 240–900) */
/* the stage fills the space right of the headline column and ends on the same content edge
   as the nav, so the left and right page margins are equal and it never touches the text */
.xs{--sw:min(980px, calc(min(1680px, 100vw) - 112px - min(720px, 50vw) - 8px));
  position:absolute; z-index:4; width:var(--sw); aspect-ratio:1400/900; container-type:inline-size;
  right:56px; top:calc(50% - var(--sw) * .3 + 20px); animation:s1_stageIn 1.04s cubic-bezier(.2,.7,.2,1) .1s both;
  --wire:rgba(70,150,255,.85); --wireSoft:rgba(70,150,255,.35); --core:rgba(210,240,255,.95); --pk:#C8F4FF; --pkGlow:rgba(80,160,255,.95);
  --cloudFill:rgba(40,90,220,.16); --panel:rgba(22,70,210,.34); --panelLine:rgba(150,205,255,.85); --panelText:#FFFFFF;
  --cg1:rgba(200,236,255,.62); --cg2:rgba(80,140,255,.30); --cg3:rgba(20,50,160,.16); --edge:rgba(210,240,255,.95); --coreBg:rgba(10,30,95,.78); --capCol:rgba(200,222,255,.8); --hg1:rgba(70,130,255,.55); --hg2:rgba(8,24,80,.75); --fnBg:#0B1C52}
:scope.light .xs{--wire:rgba(29,78,216,.75); --wireSoft:rgba(29,78,216,.25); --core:rgba(255,255,255,.95); --pk:#1D4ED8; --pkGlow:rgba(37,99,235,.55);
  --cloudFill:rgba(219,234,254,.75); --panel:rgba(37,99,235,.20); --panelLine:rgba(29,78,216,.7); --panelText:#1D3A8A;
  --cg1:rgba(255,255,255,.96); --cg2:rgba(191,219,254,.8); --cg3:rgba(147,197,253,.5); --edge:rgba(29,78,216,.85); --coreBg:rgba(29,78,216,.92); --capCol:rgba(29,78,216,.85); --hg1:rgba(191,219,254,.95); --hg2:rgba(96,140,240,.55); --fnBg:#1D4ED8}
@keyframes s1_stageIn{from{opacity:0; transform:translateY(50px) scale(.96)}}
.xs-ground{position:absolute; left:3%; right:1%; top:50%; height:52%; border-radius:50%;
  background:radial-gradient(closest-side, var(--platform), transparent 75%); filter:blur(14px); animation:s1_breathe 7s ease-in-out infinite}
.xs-fac{position:absolute; left:0; top:26.667%; width:100%; height:73.333%}
.xs-fac img{position:absolute; inset:0; width:100%; height:100%; display:block; -webkit-user-drag:none; filter:brightness(.86) saturate(.95) contrast(1.05)}
:scope.light .xs-fac img{filter:drop-shadow(0 30px 40px rgba(20,40,110,.18))}
.xs-shine{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  -webkit-mask:url(../assets/img/factory2.webp) center / 100% 100% no-repeat; mask:url(../assets/img/factory2.webp) center / 100% 100% no-repeat;
  background:linear-gradient(100deg, transparent 40%, var(--sweep) 50%, transparent 60%); background-size:320% 100%; animation:s1_sweep 8s ease-in-out infinite}
@keyframes s1_sweep{0%{background-position:100% 0} 60%,100%{background-position:0% 0}}
.xs-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}

/* blue wires inside the plant */
.w-glow{fill:none; stroke:var(--wire); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; opacity:.55}
.w-core{fill:none; stroke:var(--core); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; opacity:.8}
.w-flow{fill:none; stroke:var(--core); stroke-width:1.2; stroke-dasharray:4 14; animation:s1_wflow 1.6s linear infinite; opacity:.85}
@keyframes s1_wflow{to{stroke-dashoffset:-18}}
.w-pk{fill:none; stroke:var(--pk); stroke-width:4.5; stroke-linecap:round; stroke-dasharray:5 195; opacity:0; animation:s1_wpk 3.2s linear infinite}
@keyframes s1_wpk{0%{stroke-dashoffset:5; opacity:0} 6%{opacity:1} 94%{opacity:1} 100%{stroke-dashoffset:-100; opacity:0}}
.d-base{fill:none; stroke:var(--wireSoft); stroke-width:1.4; stroke-linecap:round}
.d-pk{fill:none; stroke:var(--pk); stroke-width:3; stroke-linecap:round; stroke-dasharray:16 184; opacity:0; animation:s1_wpk 4.6s linear infinite}
/* sky: beams to the cloud */
.b-base{fill:none; stroke:url(#xBeam); stroke-width:1.4}
/* one 6s cycle: 1) plant → hub  2) hub → functions  3) functions → hub  4) hub → plant */
/* asynchronous exchange: every packet has its own speed / phase / direction */
.b-pk{fill:none; stroke:var(--pk); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:7 193; opacity:0; animation:s1_wpk 3.4s linear infinite}
.b-pk.dn{animation-direction:reverse; animation-duration:4.1s}
.b-pk:nth-child(3n){animation-duration:2.9s}
.f-link{fill:none; stroke:var(--wire); stroke-width:1.5; opacity:.75}
.f-link.mm{stroke-width:1.3; stroke-dasharray:5 4; opacity:.65}
.f-link.sub{stroke:var(--wireSoft); stroke-width:1.2; opacity:1}
.ap{fill:none; stroke:var(--pk); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:8 192; opacity:0; animation:s1_wpk 3s linear infinite}
.ap.mm{stroke-width:3}
.ap.sb{stroke-width:2.6; stroke-dasharray:6 194}
.sp-ln{fill:none; stroke:var(--wireSoft); stroke-width:1}
.sp-dot{fill:var(--pk); animation:s1_twinkle 3s ease-in-out infinite}
/* hub */
.hub-aura{fill:var(--wire); opacity:.18; animation:s1_auraP 6s ease-in-out infinite}
.hub-dots{fill:none; stroke:var(--wire); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.01 1.2; opacity:.8}
.hub-seg{fill:none; stroke:var(--wire); stroke-width:7; stroke-dasharray:16 3 5 3 22 5 9 3 4 30; opacity:.75; transform-box:fill-box; transform-origin:center; animation:s1_hspin 40s linear infinite}
.hub-ticks{fill:none; stroke:var(--wireSoft); stroke-width:9; stroke-dasharray:.18 .82}
.hub-ring{fill:none; stroke:var(--wire); stroke-width:1.2; opacity:.85}
.hub-ring.in{stroke:var(--panelLine); stroke-width:1.6}
.hub-arc{fill:none; stroke:var(--pk); stroke-width:4.5; stroke-linecap:round; stroke-dasharray:30 70; transform-box:fill-box; transform-origin:center; animation:s1_hspinR 10s linear infinite; filter:drop-shadow(0 0 4px var(--pkGlow))}
.hub-arc.b{stroke-width:2.5; stroke-dasharray:8 92; animation-duration:6s; animation-direction:normal; opacity:.8}
@keyframes s1_hspin{to{transform:rotate(360deg)}}
@keyframes s1_hspinR{to{transform:rotate(-360deg)}}
.hub-bg{fill:url(#xHubG)}
.hg1{stop-color:var(--hg1)}.hg2{stop-color:var(--hg2)}
.hub-flash{fill:none; stroke:var(--pk); stroke-width:2.4; transform-box:fill-box; transform-origin:center; opacity:0; animation:s1_hubFlash 6s ease-out infinite}
@keyframes s1_hubFlash{0%,22%{transform:scale(.92); opacity:0} 25%{transform:scale(1); opacity:.95} 36%{transform:scale(1.38); opacity:0}
  72%{transform:scale(.92); opacity:0} 75%{transform:scale(1); opacity:.95} 86%,100%{transform:scale(1.38); opacity:0}}
.trace{fill:none; stroke:var(--core); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.55}
.trace-flow{fill:none; stroke:var(--pk); stroke-width:1.4; stroke-dasharray:3 9; animation:s1_wflow 1.2s linear infinite}
.tdot{fill:var(--pk); animation:s1_twinkle 2.4s ease-in-out infinite}
.chip{fill:var(--coreBg); stroke:var(--panelLine); stroke-width:1.5}
.chip-pin{stroke:var(--panelLine); stroke-width:1.5; stroke-linecap:round}
/* function circles */
.fn-glow{fill:none; stroke:var(--pk); stroke-width:6; opacity:0; animation:s1_fnAct 6s ease-in-out infinite}
@keyframes s1_fnAct{0%,46%{opacity:0} 50%,68%{opacity:.85} 74%,100%{opacity:0}}
.fn-dots{fill:none; stroke:var(--wire); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:.01 2.4; opacity:.8}
.fn-bg{fill:var(--fnBg)}
.fn-ring{fill:none; stroke:var(--wire); stroke-width:2.4}
.ic-w{fill:none; stroke:#FFFFFF; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.fn-lbl{fill:var(--capCol); font-family:'Manrope', sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-anchor:middle}
.sf-bg{fill:var(--fnBg)}
.sf-ring{fill:none; stroke:var(--wire); stroke-width:1.6; stroke-dasharray:4 2.5}
.sf .ic-w{stroke-width:1.7}
.sf-lbl{fill:var(--capCol); font-family:'Manrope', sans-serif; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-anchor:middle; opacity:.85}
.sf-lbl.end{text-anchor:end}
.sf-lbl.start{text-anchor:start}
.pillar{fill:none; stroke:url(#xBeam); stroke-width:7; opacity:.55; animation:s1_pillar 3.2s ease-in-out infinite}
@keyframes s1_pillar{0%,100%{opacity:.3} 50%{opacity:.75}}
/* the cloud */
.cl-aura{fill:var(--wire); opacity:.2; animation:s1_auraP 5s ease-in-out infinite}
@keyframes s1_auraP{0%,100%{opacity:.14} 50%{opacity:.3}}
.cl-halo{fill:none; stroke:var(--wire); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:s1_clHalo 3.6s ease-out infinite}
@keyframes s1_clHalo{0%{transform:scale(.85); opacity:.7} 100%{transform:scale(1.35); opacity:0}}
.cl-glow{fill:none; stroke:var(--wire); stroke-width:7; opacity:.75}
.cl-body{fill:url(#xCloudG)}
.cg1{stop-color:var(--cg1)}.cg2{stop-color:var(--cg2)}.cg3{stop-color:var(--cg3)}
.cl-clip{clip-path:url(#xCloudClip)}
.cl-dots{fill:url(#xDots); opacity:.5}
.pd{fill:var(--core)}
.cl-sheen{fill:url(#xSheen); animation:s1_clSheen 5.5s ease-in-out infinite}
.sh0{stop-color:#FFFFFF; stop-opacity:0}.sh1{stop-color:#FFFFFF; stop-opacity:.5}
@keyframes s1_clSheen{0%{transform:translateX(0)} 60%,100%{transform:translateX(290px)}}
.cl-trace{fill:none; stroke:var(--core); stroke-width:1.2; stroke-dasharray:3 4; opacity:.6; animation:s1_wflow 1.4s linear infinite}
.cl-tdot{fill:var(--pk); animation:s1_twinkle 2.4s ease-in-out infinite}
.cl-edge{fill:none; stroke:var(--edge); stroke-width:1.4}
.cl-run{fill:none; stroke:var(--pk); stroke-width:3; stroke-linecap:round; stroke-dasharray:10 90; animation:s1_clRun 5s linear infinite}
.cl-run.b{animation-delay:-2.5s; stroke-dasharray:3 97}
@keyframes s1_clRun{to{stroke-dashoffset:-100}}
.cl-core{fill:var(--coreBg); stroke:var(--panelLine); stroke-width:1}
.cl-logo .lg-arc,.cl-logo .lg-stem{stroke:#FFFFFF; stroke-width:2.6}
.cl-logo .lg-dot{fill:#FFFFFF}
.cl-logo{color:#FFFFFF}
.cl-cap{fill:var(--capCol); font-family:'Manrope', sans-serif; font-size:11px; font-weight:700; letter-spacing:.42em; text-anchor:middle}
/* port under the cloud where the beams converge */
.port{fill:var(--cloudFill); stroke:var(--wire); stroke-width:1.4}
.port-glow{fill:none; stroke:var(--wire); stroke-width:5; opacity:.6}
.port-run{fill:none; stroke:var(--pk); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:16 34; animation:s1_clRun 3s linear infinite}
.port-wave{fill:none; stroke:var(--wire); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:s1_portW 2.4s ease-out infinite}
@keyframes s1_portW{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(1.7); opacity:0}}
.neck{stroke:var(--pk); stroke-width:2; opacity:.7}
.rise{fill:var(--pk); opacity:0; animation:s1_rise 2.5s ease-in infinite}
@keyframes s1_rise{0%{transform:translateY(0); opacity:0} 20%{opacity:1} 100%{transform:translateY(-34px); opacity:0}}
/* orbits */
.orb{fill:none; stroke:var(--wireSoft); stroke-width:1}
.orb.front{stroke:var(--wire); opacity:.65}
.orb-run{fill:none; stroke:var(--wire); stroke-width:1.6; stroke-dasharray:22 78; opacity:.8; animation:s1_clRun 9s linear infinite}
.orb-sat{fill:none; stroke:var(--pk); stroke-width:6; stroke-linecap:round; stroke-dasharray:.1 99.9; animation:s1_clRun 7s linear infinite}
.orb-sat.b{stroke-width:5; animation-duration:9.5s; animation-direction:reverse}
/* side network */
.cn-ln{fill:none; stroke:var(--wireSoft); stroke-width:1}
.cn-link{fill:none; stroke:var(--wire); stroke-width:1.2; stroke-dasharray:3 5; opacity:.55}
.cn-pk{fill:none; stroke:var(--pk); stroke-width:3; stroke-linecap:round; stroke-dasharray:10 190; opacity:0; animation:s1_wpk 3.2s linear infinite}
.cn-dot{fill:var(--pk); animation:s1_twinkle 3s ease-in-out infinite}
@keyframes s1_twinkle{0%,100%{opacity:.25} 50%{opacity:1}}

/* nodes on the roofs */
.xn{position:absolute; width:0; height:0}
.xn::before,.xn::after{content:''; position:absolute; left:-1.4cqw; top:-.7cqw; width:2.8cqw; height:1.4cqw; box-sizing:border-box; border-radius:50%; border:1.5px solid var(--wire); opacity:0; animation:s1_xnRing 2.8s ease-out infinite; animation-delay:inherit}
.xn::after{animation-delay:1.4s}
.xn i{position:absolute; left:-.35cqw; top:-.35cqw; width:.7cqw; height:.7cqw; border-radius:50%; background:var(--pk); box-shadow:0 0 1cqw .35cqw var(--pkGlow)}
@keyframes s1_xnRing{0%{transform:scale(.4); opacity:1} 100%{transform:scale(2.2); opacity:0}}

/* holographic panels above buildings */
.xp{position:absolute; width:0; height:0; animation:s1_xpIn .59s cubic-bezier(.2,.7,.2,1) both}
@keyframes s1_xpIn{from{opacity:0; transform:translateY(1.5cqw)}}
.xp-in{position:absolute; left:0; bottom:1.1cqw; display:flex; align-items:center; gap:.5cqw; padding:.45cqw .6cqw; border-radius:.5cqw; transform:translateX(-50%) skewY(var(--sk)); color:var(--panelText);
  background:linear-gradient(160deg, rgba(255,255,255,.18), transparent 60%), var(--panel); border:1px solid var(--panelLine);
  box-shadow:0 0 1.2cqw -.1cqw var(--pkGlow), inset 0 0 .8cqw rgba(140,200,255,.25); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:s1_xpFloat 5s ease-in-out infinite}
@keyframes s1_xpFloat{0%,100%{margin-bottom:0} 50%{margin-bottom:.4cqw}}
.xp-in::after{content:''; position:absolute; left:50%; top:100%; width:1px; height:1.1cqw; background:linear-gradient(var(--panelLine), transparent)}
.xp-in svg{width:1.5cqw; height:1.5cqw; flex:none}
.xp-in .ico{stroke-width:1.8}
.xb{display:flex; align-items:flex-end; gap:.16cqw; height:1.3cqw}
.xb i{display:block; width:.28cqw; border-radius:.1cqw; background:currentColor; transform-origin:bottom; animation:s1_xbar 1.6s ease-in-out infinite}
.xb i:nth-child(1){height:40%}.xb i:nth-child(2){height:70%; animation-delay:.2s}.xb i:nth-child(3){height:55%; animation-delay:.4s}.xb i:nth-child(4){height:100%; animation-delay:.6s}
@keyframes s1_xbar{0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)}}

/* IOTICS PLATFORM sign on the main hall */
.xsign{position:absolute; left:41.07%; top:54.44%; width:0; height:0; z-index:3}
.xsign-in{position:absolute; left:0; bottom:1.6cqw; transform:translateX(-50%) skewY(-13.4deg); display:flex; flex-direction:column; align-items:center; gap:.15cqw; padding:.7cqw 1.4cqw .6cqw; border-radius:.6cqw; overflow:hidden;
  background:linear-gradient(160deg, rgba(60,120,255,.55), rgba(10,30,110,.85)); border:1px solid var(--panelLine); color:#FFFFFF;
  box-shadow:0 0 2.2cqw -.2cqw var(--pkGlow), inset 0 0 1.2cqw rgba(140,200,255,.35); animation:s1_signIn .72s cubic-bezier(.2,.7,.2,1) .52s both}
@keyframes s1_signIn{from{opacity:0; transform:translateX(-50%) skewY(-13.4deg) translateY(1cqw)}}
.xsign-in b{font-family:'Manrope', sans-serif; font-size:1.9cqw; font-weight:800; letter-spacing:.06em; line-height:1}
.xsign-in small{font-size:.58cqw; font-weight:600; letter-spacing:.42em; opacity:.85}
.xsign-in::after{content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation:s1_signShine 4.5s ease-in-out 2s infinite}
@keyframes s1_signShine{0%{left:-60%} 40%,100%{left:130%}}
.xsign::before{content:''; position:absolute; left:-.9cqw; top:-.45cqw; width:1.8cqw; height:.9cqw; border-radius:50%; background:var(--pk); box-shadow:0 0 1.6cqw .6cqw var(--pkGlow); opacity:.7}
@keyframes s1_breathe{0%,100%{opacity:.45; transform:scale(.96)} 50%{opacity:.75; transform:scale(1.04)}}

.xp.dr{--sk:27deg}
.xp.ur{--sk:-13.4deg}
.xg1{stop-color:var(--wire); stop-opacity:.15}
.xg2{stop-color:var(--pk); stop-opacity:.85}

.smoke{position:absolute; width:0; height:0}
.smoke i{position:absolute; left:-7px; top:-12px; width:14px; height:14px; border-radius:50%; background:var(--smoke); filter:blur(4px); opacity:0; animation:s1_puff 4.5s ease-out infinite}
.smoke i:nth-child(2){animation-delay:1.5s}
.smoke i:nth-child(3){animation-delay:3s}
@keyframes s1_puff{0%{transform:translate(0,0) scale(.5); opacity:0} 15%{opacity:.9} 100%{transform:translate(18px,-70px) scale(2.6); opacity:0}}

/* glass hotspot cards */
.card{position:absolute; z-index:7; display:flex; flex-direction:column; gap:10px; min-width:168px; padding:14px 16px; border-radius:18px; box-sizing:border-box;
  background:linear-gradient(160deg, var(--glassHi), transparent 60%), var(--glass); border:1px solid var(--glassLine); color:var(--text);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4)}
.card.c1{animation:s1_cardFloat 6s ease-in-out infinite}
.card.c2{animation:s1_cardFloat 7s ease-in-out -2s infinite}
.card.c3{animation:s1_cardFloat 6.5s ease-in-out -4s infinite}
@keyframes s1_cardFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.card small{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
.card b{font-size:15px; font-weight:500; letter-spacing:-.01em}
.card-ic{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1px solid var(--glassLine); color:var(--hl)}
.card-ic svg{width:14px; height:14px}
.status{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted)}
.bars{display:flex; align-items:flex-end; gap:3px; height:14px; margin-left:auto}
.bars i{display:block; width:3px; border-radius:2px; background:var(--hl); animation:s1_bar 1.4s ease-in-out infinite}
.bars i:nth-child(1){height:6px}.bars i:nth-child(2){height:12px; animation-delay:.2s}.bars i:nth-child(3){height:8px; animation-delay:.4s}.bars i:nth-child(4){height:14px; animation-delay:.6s}
@keyframes s1_bar{0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)}}
.bars i{transform-origin:bottom}
.tether{position:absolute; z-index:6; width:1px; background:linear-gradient(var(--accent2), transparent); opacity:.6}

/* ================= bottom ================= */
.bottom{position:absolute; z-index:8; left:0; right:0; bottom:112px; animation:s1_fadeIn .65s ease .78s both}
.bottom-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.scroll{display:flex; align-items:center; gap:14px; color:var(--muted); text-decoration:none; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase}
.scroll:hover{color:var(--text)}
.mouse{position:relative; width:24px; height:38px; box-sizing:border-box; border:1px solid currentColor; border-radius:14px}
.mouse i{position:absolute; left:50%; top:8px; width:2px; height:8px; margin-left:-1px; border-radius:2px; background:var(--accent2); animation:s1_wheel 1.8s ease-in-out infinite}
@keyframes s1_wheel{0%{transform:translateY(0); opacity:1} 80%{transform:translateY(10px); opacity:0} 100%{opacity:0}}
.pager{display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.12em}
.pager .now{color:var(--text)}
.pager .track{position:relative; width:120px; height:1px; background:var(--line); overflow:hidden}
.pager .fill{position:absolute; left:0; top:0; height:100%; width:30%; background:var(--hl); box-shadow:0 0 8px var(--hl)}
@keyframes s1_fadeIn{from{opacity:0}}

/* ================= responsive ================= */
@media (max-width: 1200px){ .nav a.link{padding:0 9px} .nav-in{padding:0 32px} .inner,.bottom-in{padding:0 32px} }
@media (max-width: 960px){
  .nav-links,.nav .search{display:none}
  .burger{display:flex}
  .nav{height:64px}
  .nav-in{grid-template-columns:auto 1fr; padding:0 16px}
  .nav-right{justify-content:flex-end}
  :scope{height:auto; min-height:100vh}
  .inner{flex-direction:column; align-items:stretch; padding:112px 16px 120px}
  .copy{max-width:none; margin-top:0}
  .h1{font-size:40px}
  .xs{--sw:116%; position:relative; right:auto; top:auto; width:var(--sw); margin:40px 0 0 -8%}
  .card{min-width:0; padding:10px 12px; gap:6px; border-radius:14px}
  .card b{font-size:12px}
  .card .status{display:none}
  .bottom-in{padding:0 16px}
  .pager{display:none}
  .vig{background:linear-gradient(0deg, var(--vignette) 0%, transparent 22%)}
}
@media (prefers-reduced-motion: reduce){ :scope *, :scope *::before, :scope *::after{animation:none !important; transition:none !important} }
/* ===== slide navigator (shared) ===== */
.steps{--stepOn:#5CE1FF; --stepsBg:rgba(4,6,12,.86); position:absolute; z-index:25; left:0; right:0; bottom:0; padding:22px 0 20px; background:linear-gradient(0deg, var(--stepsBg) 35%, transparent); pointer-events:none}
:scope.light .steps{--stepOn:#1D4ED8; --stepsBg:rgba(238,242,248,.92)}
.steps-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:22px; pointer-events:auto}
.step{position:relative; display:flex; flex-direction:column; gap:14px; min-height:44px; padding-top:4px; text-decoration:none; color:var(--muted); transition:color .25s}
.step .sbar{position:relative; display:block; height:2px; border-radius:2px; background:var(--line)}
.step .sbar::before{content:''; position:absolute; z-index:1; left:-2px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; transition:background-color .25s, opacity .25s}
.step .sbar i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--stepOn); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .25s}
.step.past .sbar i{width:100%; opacity:.35}
.step.past .sbar::before{background:var(--stepOn); opacity:.5}
.step.cur .sbar i{width:100%; box-shadow:0 0 12px var(--stepOn); animation:s1_stepFill 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
.step.cur .sbar::before{background:var(--stepOn); opacity:1; box-shadow:0 0 10px var(--stepOn)}
.step.cur .sbar::after{content:''; position:absolute; right:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--stepOn); box-shadow:0 0 12px var(--stepOn); animation:s1_stepEnd 2.4s ease-in-out 1.9s infinite; opacity:0}
.step .slbl{display:flex; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step .snum{color:var(--stepOn); opacity:.75; font-variant-numeric:tabular-nums}
.step.cur{color:var(--text)}
.step.cur .snum{opacity:1}
.step:hover{color:var(--text)}
.step:hover .sbar i{width:100%; opacity:.75}
.step:focus-visible{outline:2px solid var(--stepOn); outline-offset:6px; border-radius:4px}
@keyframes s1_stepFill{from{width:0}}
@keyframes s1_stepEnd{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.2)}}
@media (max-width: 1200px){ .steps-in{padding:0 32px; gap:14px} .step .slbl{font-size:11px; gap:8px} }
@media (max-width: 960px){ .steps{position:fixed} .steps-in{padding:0 16px; gap:6px} .step .stxt{display:none} }
/* embedded in the one-page site */
:scope.emb > .nav, :scope.emb > .steps, :scope.emb .bottom{display:none}
}
/* ===== css/s2.css ===== */
/* IOTICS - slide 02-challenge-solution.
   Ported from design-source/02-challenge-solution.dc.html.
   Keyframe names are namespaced with the `s2` prefix so all slides can share one document. */

@scope (.s2) {

/* ================= tokens ================= */
:scope{
  --bg:#04060C; --bg2:#0B1730;
  --text:#F2F5FA; --muted:#A3ACBD; --faint:rgba(242,245,250,.10); --line:rgba(242,245,250,.10); --navText:#E6EAF2;
  --bad:#FF6B6B; --badSoft:rgba(255,80,80,.16); --badGlow:rgba(255,60,60,.55); --badLine:rgba(255,107,107,.55);
  --warn:#FBBF24; --warnSoft:rgba(251,191,36,.16); --warnGlow:rgba(245,158,11,.5); --warnLine:rgba(251,191,36,.6);
  --good:#86B4FF; --goodSoft:rgba(94,155,255,.16); --goodGlow:rgba(80,140,255,.7); --accent2:#A8E6FF; --net:rgba(140,185,255,.55);
  --glass:rgba(16,24,44,.46); --glassLine:rgba(170,200,255,.16); --menu:rgba(12,18,34,.94); --menuHover:rgba(134,180,255,.12);
  --cardBad:rgba(28,14,20,.72); --cardBadLine:rgba(255,107,107,.24); --cardBadText:#F2F5FA; --cardBadMuted:#C9B9BE;
  --cardGood:rgba(14,26,52,.62); --cardGoodLine:rgba(134,180,255,.26); --cardGoodText:#F2F5FA; --cardGoodMuted:#B6C3DA;
  --floorBad:rgba(255,107,107,.14); --floorGood:rgba(120,165,255,.20);
  --sweep:rgba(130,180,255,.45);
  position:relative; height:100vh; min-height:620px; overflow:hidden; isolation:isolate;
  background:radial-gradient(60% 70% at 78% 70%, var(--bg2) 0%, transparent 70%), radial-gradient(50% 60% at 18% 72%, rgba(80,16,28,.35) 0%, transparent 70%), var(--bg);
  color:var(--text);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:scope.light{
  --bg:#EDF1F7; --bg2:#FFFFFF;
  --text:#0A1222; --muted:#4A5468; --faint:rgba(10,18,34,.08); --line:rgba(10,18,34,.10); --navText:#1A2335;
  --bad:#B42318; --badSoft:rgba(220,40,40,.10); --badGlow:rgba(240,40,40,.45); --badLine:rgba(200,30,30,.55);
  --warn:#B45309; --warnSoft:rgba(245,158,11,.14); --warnGlow:rgba(245,158,11,.45); --warnLine:rgba(217,119,6,.6);
  --good:#1D4ED8; --goodSoft:rgba(29,78,216,.10); --goodGlow:rgba(40,100,255,.45); --accent2:#3B82F6; --net:rgba(29,78,216,.42);
  --glass:rgba(255,255,255,.55); --glassLine:rgba(30,60,140,.12); --menu:rgba(255,255,255,.95); --menuHover:rgba(29,78,216,.07);
  --cardBad:rgba(30,34,46,.92); --cardBadLine:rgba(255,107,107,.18); --cardBadText:#F2F5FA; --cardBadMuted:#C3C8D4;
  --cardGood:rgba(244,248,255,.82); --cardGoodLine:rgba(29,78,216,.20); --cardGoodText:#0A1222; --cardGoodMuted:#3E4A63;
  --floorBad:rgba(180,35,24,.10); --floorGood:rgba(29,78,216,.14);
  --sweep:rgba(255,255,255,.6);
  background:radial-gradient(60% 70% at 78% 70%, #FFFFFF 0%, transparent 70%), radial-gradient(50% 60% at 18% 72%, rgba(255,210,210,.35) 0%, transparent 70%), var(--bg);
}

/* ===== daylight palette (light theme), richer ===== */
:scope.light{
  --bg:#EDF3FF; --bg2:#FFFFFF;
  --text:#0E1C45; --muted:#4E5C86; --faint:rgba(14,28,69,.07); --line:rgba(31,79,224,.12); --navText:#16265A;
  --hl:#1F4FE0; --accent:#1F4FE0; --accent2:#3D7BFF;
  --glass:rgba(255,255,255,.6); --glassLine:rgba(31,79,224,.2); --glassHi:rgba(255,255,255,.9);
  --menu:rgba(255,255,255,.97); --menuHover:rgba(31,79,224,.09);
  --vignette:#E9F0FF; --ring:rgba(31,79,224,.3); --net:rgba(31,79,224,.5); --wire:rgba(31,79,224,.34);
  --pk:#2F6BFF; --pkGlow:rgba(47,107,255,.55); --pin:#1F4FE0; --pinGlow:rgba(31,79,224,.45);
  --tileA:#2552E8; --tileB:#9FC6FF; --chev:rgba(31,79,224,.1); --rowHi:rgba(31,79,224,.09);
  --panel:rgba(255,255,255,.55); --panelSolid:#EEF4FF; --orbBg:rgba(120,165,255,.42);
  --good:#1F4FE0; --goodSoft:rgba(31,79,224,.12); --goodGlow:rgba(47,107,255,.45);
  --cardBad:rgba(255,241,243,.94); --cardBadLine:rgba(225,55,75,.32); --cardBadText:#0E1C45; --cardBadMuted:#4E5C86;
  --cardGood:rgba(255,255,255,.84); --cardGoodLine:rgba(31,79,224,.26); --cardGoodText:#0E1C45; --cardGoodMuted:#3F4D78;
  --field:rgba(255,255,255,.8); --fieldLine:rgba(31,79,224,.22); --fieldFocus:rgba(31,79,224,.1);
  --chip:rgba(255,255,255,.78); --chipOn:rgba(31,79,224,.14);
  --btn:#1F4FE0; --btnHover:#1840C0; --btnGlow:rgba(31,79,224,.45); --btnText:#FFFFFF;
  background:
    radial-gradient(50% 45% at 92% 2%, rgba(120,165,255,.75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95,200,255,.5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175,155,255,.32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255,255,255,.9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
}
:scope.light .steps{--stepOn:#1F4FE0; --stepsBg:rgba(236,242,255,.9)}
:scope.light .bgwave{opacity:.6}
:scope.light .wave{opacity:1}
:scope.light .bgwave-v{--bgFade:rgba(236,242,255,.5)}
.dots{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--faint) 1px, transparent 1.5px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%)}

/* ================= nav (shared with slide 01) ================= */
.nav{position:absolute; top:0; left:0; right:0; z-index:30; height:72px; border-bottom:1px solid var(--line)}
.nav-in{height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav a.link{position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:13px; font-weight:400; letter-spacing:.02em; text-decoration:none; color:var(--navText); opacity:.78; transition:opacity .2s}
.nav a.link::after{content:''; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--good); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a.link:hover{opacity:1; color:var(--navText)}
.nav a.link:hover::after{transform:scaleX(1)}
.logo{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:var(--text); text-decoration:none}
.logo .lgx{color:var(--text)}
:scope.light .logo .lgx{color:#2645A1}
.logo::before{content:''; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--glassLine); background:var(--glass)}
.logo::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s2_spin 6s linear infinite; opacity:.8}
@keyframes s2_spin{to{transform:rotate(360deg)}}
.logo svg,.core svg.lg{position:relative; width:22px; height:22px}
.logo{margin-right:100px}
.logo svg.wm{position:absolute; left:calc(100% + 12px); top:50%; width:88px; height:14px; margin-top:-7px; color:var(--text)}
:scope.light .logo svg.wm{color:#2645A1}
.lg-arc,.lg-stem{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}
.lg-dot{fill:currentColor}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.ibtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--navText); cursor:pointer; border-radius:50%; transition:background-color .2s}
.ibtn:hover{background:var(--faint)}
.ibtn svg{width:18px; height:18px}
.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; margin:0 4px; background:var(--glass); border:1px solid var(--glassLine); color:var(--navText); font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:999px}
.lang-btn:hover{border-color:var(--good)}
.lang-btn svg{width:15px; height:15px}
.lang-menu{position:absolute; top:50px; right:0; min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px; color:var(--text);
  background:var(--menu); border:1px solid var(--glassLine); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); animation:s2_menuIn .22s ease both}
@keyframes s2_menuIn{from{opacity:0; transform:translateY(-6px)}}
.lang-item{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer}
.lang-item:hover{background:var(--menuHover)}
.lang-item svg{width:16px; height:16px; color:var(--good)}
.lang-code{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:600}
.burger{display:none}

/* ================= layout ================= */
.wrap{position:relative; z-index:5; box-sizing:border-box; height:100%; max-width:1680px; margin:0 auto; padding:128px 56px 142px;
  display:grid; grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:0; row-gap:24px}
.txt{max-width:600px}
.txt.r{grid-column:3}
.eyebrow{display:flex; align-items:center; gap:12px; margin:0 0 16px; font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase}
.eyebrow.bad{color:var(--bad)}
.eyebrow.good{color:var(--good)}
.eyebrow .tag{font-size:10px; font-weight:600; letter-spacing:.16em; padding:5px 10px; border-radius:999px; border:1px solid currentColor; opacity:.8}
.h2{margin:0 0 16px; font-size:clamp(30px, 2.5vw, 48px); line-height:1.06; font-weight:300; letter-spacing:-.03em}
.h2 span{display:block}
.h2 .a1{font-weight:400}
.h2 .bad{color:var(--bad)}
.h2 .good{color:var(--good)}
.p{margin:0; max-width:560px; font-size:16px; line-height:1.55; color:var(--muted); text-wrap:pretty}

.reveal{animation:s2_fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.39s}
@keyframes s2_fadeUp{from{opacity:0; transform:translateY(24px); filter:blur(6px)}}

/* ================= panels ================= */
.panel{position:relative; align-self:center; width:100%}
.panel.r{grid-column:3}
/* the scene is capped by the window height so the whole slide always fits the browser;
   cards are sized in container units so they scale together with the plant */
.scene{position:relative; width:min(100%, max(480px, calc((100vh - 470px) * 1.85))); aspect-ratio:1000/540; container-type:inline-size}
/* scenes sit on the outer edges, so the page margins match slide 01 */
.panel.l .scene{margin:0 auto 0 0}
.panel.r .scene{margin:0 0 0 auto}
.floor{position:absolute; left:-6%; right:-6%; top:38%; height:70%; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--fl) 1px, transparent 1px), linear-gradient(90deg, var(--fl) 1px, transparent 1px); background-size:44px 44px;
  transform:perspective(700px) rotateX(64deg); transform-origin:center top;
  -webkit-mask-image:radial-gradient(ellipse 50% 60% at 50% 30%, #000, transparent 75%); mask-image:radial-gradient(ellipse 50% 60% at 50% 30%, #000, transparent 75%);
  animation:s2_floorMove 6s linear infinite}
.panel.l .floor{--fl:var(--floorBad); animation-duration:14s}
.panel.r .floor{--fl:var(--floorGood)}
@keyframes s2_floorMove{to{background-position:0 44px}}
.halo{position:absolute; left:15%; right:15%; top:35%; height:55%; border-radius:50%; z-index:0; filter:blur(40px); pointer-events:none}
.panel.l .halo{background:radial-gradient(closest-side, var(--badSoft), transparent)}
.panel.r .halo{background:radial-gradient(closest-side, var(--goodSoft), transparent); animation:s2_breathe 7s ease-in-out infinite}
@keyframes s2_breathe{0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)}}

.fac{position:absolute; left:13.9%; top:20%; width:72.2%; height:61.9%; z-index:1}
.fac img{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; -webkit-user-drag:none}
.panel.l .fac img{filter:grayscale(1) brightness(.58) contrast(1.12)}
:scope.light .panel.l .fac img{filter:grayscale(1) brightness(.92) contrast(.95)}
.panel.r .fac img{filter:brightness(.88) saturate(.95) contrast(1.05) drop-shadow(0 0 30px rgba(80,140,255,.30))}
:scope.light .panel.r .fac img{filter:drop-shadow(0 24px 34px rgba(20,40,110,.18))}
.fac .sweep, .net .pk { display:none }
.net{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.net .ln{fill:none; stroke:var(--net); stroke-width:1.2; stroke-dasharray:3 7}
.net.broken .ln{stroke:var(--badLine); stroke-dasharray:14 22 4 30; opacity:.55}

/* tethers + pins (positions in % of the scene) */
.tether{position:absolute; z-index:2; height:1px; transform-origin:0 50%; pointer-events:none}
.panel.l .tether{background:repeating-linear-gradient(90deg, var(--badLine) 0 4px, transparent 4px 8px); opacity:.85}
.panel.r .tether{background:linear-gradient(90deg, var(--good), var(--accent2)); opacity:.6; overflow:hidden}
.panel.r .tether::after{content:''; position:absolute; top:-1px; left:0; width:24px; height:3px; border-radius:2px; background:var(--accent2); box-shadow:0 0 8px var(--accent2); animation:s2_run 2.6s linear infinite}
@keyframes s2_run{from{transform:translateX(-30px)} to{transform:translateX(420px)}}
.pin{position:absolute; z-index:3; width:0; height:0}
.pin .dot{position:absolute; left:-8px; top:-8px; width:16px; height:16px; box-sizing:border-box; border-radius:50%; border:3px solid #FFFFFF}
.pin::before,.pin::after{content:''; position:absolute; left:-10px; top:-10px; width:20px; height:20px; box-sizing:border-box; border-radius:50%; opacity:0; animation:s2_pinPulse 2.6s ease-out infinite}
.pin::after{animation-delay:1.3s}
.pin .blob{position:absolute; left:-34px; top:-22px; width:68px; height:44px; border-radius:50%; filter:blur(10px)}
.panel.l .pin .dot{background:#E5262A; box-shadow:0 0 12px 3px var(--badGlow)}
.panel.l .pin::before,.panel.l .pin::after{border:2px solid var(--bad)}
.panel.l .pin .blob{background:var(--badGlow); animation:s2_alarm 1.6s ease-in-out infinite}
.panel.r .pin .dot{background:#1D4ED8; box-shadow:0 0 12px 3px var(--goodGlow)}
.panel.r .pin::before,.panel.r .pin::after{border:2px solid var(--good)}
.panel.r .pin .blob{background:var(--goodGlow); opacity:.55}
.panel.r .pin .beam{position:absolute; left:-1px; bottom:8px; width:2px; height:64px; border-radius:2px; background:linear-gradient(to top, var(--accent2), transparent); transform-origin:bottom; transform:scaleY(0); animation:s2_beam 4.2s ease-in-out infinite}
@keyframes s2_pinPulse{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(3); opacity:0}}
@keyframes s2_alarm{0%,100%{opacity:.35; transform:scale(.9)} 50%{opacity:.9; transform:scale(1.1)}}
@keyframes s2_beam{0%,100%{transform:scaleY(0); opacity:0} 35%{transform:scaleY(1); opacity:.9} 70%{transform:scaleY(1); opacity:0}}
.pin.q1 .blob,.pin.q1::before,.pin.q1 .beam{animation-delay:.3s}
.pin.q2 .blob,.pin.q2::before,.pin.q2 .beam{animation-delay:.7s}
.pin.q3 .blob,.pin.q3::before,.pin.q3 .beam{animation-delay:1.1s}
.pin.q4 .blob,.pin.q4::before,.pin.q4 .beam{animation-delay:1.5s}
.pin.q5 .blob,.pin.q5::before,.pin.q5 .beam{animation-delay:1.9s}
.pin.q6 .blob,.pin.q6::before,.pin.q6 .beam{animation-delay:2.3s}

/* system cards */
.cards{position:absolute; inset:0; z-index:4}
.card{position:absolute; width:22%; box-sizing:border-box; display:flex; flex-direction:column; gap:max(5px, .8cqw); padding:max(9px, 1.3cqw); border-radius:max(12px, 1.8cqw);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 26px 50px -28px rgba(0,0,0,.65);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; animation:s2_cardIn .59s cubic-bezier(.2,.7,.2,1) both}
.card:hover{transform:translateY(-4px); z-index:5}
@keyframes s2_cardIn{from{opacity:0; transform:translateY(14px) scale(.97)}}
.panel.l .card{background:var(--cardBad); border:1px solid var(--cardBadLine); color:var(--cardBadText)}
.panel.l .card:hover{border-color:var(--bad); box-shadow:0 26px 50px -24px var(--badGlow)}
/* problems appear, stay readable for a few seconds, then fade away; hovering a card freezes it on screen */
.panel.l .card{animation:s2_probCycle 14s ease-in-out infinite both}
.panel.l .card:hover{animation-play-state:paused; z-index:6}
.panel.l .tether{animation:s2_probTether 14s ease-in-out infinite both}
@keyframes s2_probCycle{
  0%{opacity:0; visibility:hidden; transform:translateY(10px) scale(.95); filter:blur(4px)}
  1%{visibility:visible}
  7%{opacity:1; transform:none; filter:none}
  58%{opacity:1; transform:none; filter:none}
  66%{opacity:0; transform:translateY(-6px) scale(.98); filter:blur(3px); visibility:visible}
  67%,100%{opacity:0; visibility:hidden; transform:translateY(10px) scale(.95); filter:blur(4px)}}
@keyframes s2_probTether{0%,3%{opacity:0} 9%,56%{opacity:.85} 64%,100%{opacity:0}}
.panel.r .card{background:var(--cardGood); border:1px solid var(--cardGoodLine); color:var(--cardGoodText)}
.panel.r .card:hover{border-color:var(--good); box-shadow:0 26px 50px -24px var(--goodGlow)}
.c-top{display:flex; align-items:center; gap:max(7px, 1.1cqw)}
.st{display:flex; align-items:center; justify-content:center; width:max(18px, 2.5cqw); height:max(18px, 2.5cqw); flex:none; border-radius:50%}
.st svg{width:60%; height:60%}
.st .ic2{fill:none; stroke:#FFFFFF; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.panel.l .st{background:#E5262A; animation:s2_warn 1.6s ease-in-out infinite}
.panel.r .st{background:#16A34A}
@keyframes s2_warn{0%,100%{box-shadow:0 0 0 0 rgba(229,38,42,.6)} 50%{box-shadow:0 0 0 6px rgba(229,38,42,0)}}
.sys{font-family:'Unbounded', 'Manrope', sans-serif; font-size:max(12px, 1.6cqw); font-weight:600; letter-spacing:.04em}
.sys-ic{margin-left:auto; display:flex; align-items:center; justify-content:center; width:max(24px, 3.3cqw); height:max(24px, 3.3cqw); border-radius:max(7px, 1cqw); flex:none}
.panel.l .sys-ic{background:rgba(255,255,255,.06); color:var(--cardBadMuted)}
.panel.r .sys-ic{background:var(--goodSoft); color:var(--good)}
.sys-ic svg{width:55%; height:55%}
.panel.l .c-top{flex-wrap:wrap; row-gap:4px}
.c-alert{font-size:max(9px, 1.05cqw); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--bad)}
.c-time{margin-left:auto; font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size:max(9.5px, 1.15cqw); color:var(--cardBadMuted); padding:max(2px, .25cqw) max(6px, .7cqw); border-radius:999px; background:var(--badSoft)}
.inc{margin:0; font-family:'Unbounded', 'Manrope', sans-serif; font-size:max(11.5px, 1.45cqw); font-weight:600; line-height:1.2; letter-spacing:.01em}
.panel.l .card.warn:hover{border-color:var(--warn); box-shadow:0 26px 50px -24px var(--warnGlow)}
.panel.l .card.warn .st{background:#F59E0B; animation:s2_warnAmber 2.4s ease-in-out infinite}
.panel.l .card.warn .c-alert{color:var(--warn)}
.panel.l .card.warn .c-time{background:var(--warnSoft)}
@keyframes s2_warnAmber{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.55)} 50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.panel.l .tether.warn{background:repeating-linear-gradient(90deg, var(--warnLine) 0 4px, transparent 4px 8px)}
.panel.l .pin.warn .dot{background:#F59E0B; box-shadow:0 0 12px 3px var(--warnGlow)}
.panel.l .pin.warn::before,.panel.l .pin.warn::after{border-color:var(--warn)}
.panel.l .pin.warn .blob{background:var(--warnGlow)}
.panel.l .pin{animation:s2_pinCycle 14s ease-in-out infinite both}
@keyframes s2_pinCycle{0%,1%{opacity:.18; transform:scale(.55)} 6%{opacity:1; transform:scale(1.25)} 10%,56%{opacity:1; transform:scale(1)} 64%,100%{opacity:.18; transform:scale(.55)}}
.panel.l .pin .dot,.panel.l .pin .blob{transition:background-color .6s, box-shadow .6s}
.c-txt{margin:0; font-size:max(10.5px, 1.32cqw); line-height:1.4; color:var(--cardBadMuted)}
.c-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:max(2px, .3cqw)}
.c-list li{position:relative; padding-left:12px; font-size:max(10.5px, 1.32cqw); line-height:1.35; color:var(--cardGoodMuted)}
.c-list li::before{content:''; position:absolute; left:2px; top:6px; width:4px; height:4px; border-radius:50%; background:var(--good)}

/* ================= IOTICS core between panels ================= */
.core-col{grid-column:2; grid-row:1 / span 2; position:relative; display:flex; justify-content:center}
.vline{position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(180deg, transparent, var(--line) 15%, var(--line) 85%, transparent)}
.core-wrap{grid-column:2; grid-row:2; align-self:center; position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; z-index:6}
.stream{position:absolute; top:44px; height:2px; width:220px; overflow:hidden; pointer-events:none}
.stream.in{right:50%; background:linear-gradient(90deg, transparent, var(--badLine))}
.stream.out{left:50%; background:linear-gradient(90deg, var(--good), transparent)}
.stream i{position:absolute; top:-2px; width:6px; height:6px; border-radius:50%; animation:s2_streamRun 2.4s linear infinite}
.stream.in i{background:var(--bad); box-shadow:0 0 8px var(--bad)}
.stream.out i{background:var(--accent2); box-shadow:0 0 8px var(--accent2)}
.stream i:nth-child(2){animation-delay:.8s}.stream i:nth-child(3){animation-delay:1.6s}
@keyframes s2_streamRun{from{left:-8px} to{left:100%}}
.core{position:relative; width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 60%), var(--glass); border:1px solid var(--glassLine);
  box-shadow:0 0 50px -6px var(--goodGlow), inset 0 0 20px rgba(134,180,255,.15); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.core svg.lg{width:48px; height:48px}
.core .rg{position:absolute; border-radius:50%; pointer-events:none}
.core .rg.a{inset:-10px; border:1px solid transparent; border-top-color:var(--accent2); border-right-color:var(--good); animation:s2_spin 4s linear infinite}
.core .rg.b{inset:-20px; border:1px dashed var(--glassLine); animation:s2_spin 18s linear infinite reverse}
.core .rg.c{inset:-2px; border:1px solid var(--good); animation:s2_corePulse 2.4s ease-out infinite}
@keyframes s2_corePulse{0%{transform:scale(1); opacity:.8} 100%{transform:scale(1.9); opacity:0}}
.core-label{font-family:'Unbounded', 'Manrope', sans-serif; font-size:11px; font-weight:600; letter-spacing:.28em; color:var(--text)}
.core-arrow{width:18px; height:18px; color:var(--good)}

/* ================= bottom ================= */
.pager{position:absolute; z-index:8; right:56px; bottom:32px; display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.12em}
.pager .now{color:var(--text)}
.pager .track{position:relative; width:120px; height:1px; background:var(--line); overflow:hidden}
.pager .fill{position:absolute; left:0; top:0; height:100%; width:45%; background:var(--good); box-shadow:0 0 8px var(--good)}

/* ================= responsive ================= */
@media (max-width: 1200px){ .nav a.link{padding:0 9px} .nav-in,.wrap{padding-left:32px; padding-right:32px} .wrap{grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr)} .stream{width:150px} }
@media (max-width: 960px){
  .nav-links,.nav .search{display:none}
  .burger{display:flex}
  .nav{height:64px}
  .nav-in{grid-template-columns:auto 1fr; padding:0 16px}
  :scope{height:auto; min-height:100vh}
  .wrap{display:flex; flex-direction:column; gap:24px; padding:104px 16px 72px}
  .txt.r{order:4; margin-top:24px}
  .panel.l{order:2}
  .core-col{display:none}
  .core-wrap{order:3; margin:12px auto}
  .stream{display:none}
  .panel.r{order:5}
  .cards{position:static; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:10px; margin-top:12px}
  .card{position:static; width:auto}
  .tether{display:none}
  .scene{width:100%}
  .pager{display:none}
}
@media (prefers-reduced-motion: reduce){ :scope *, :scope *::before, :scope *::after{animation:none !important; transition:none !important} }

/* ===== animated background wave (same field of dots as on the Hero) ===== */
.bgwave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:.6}
:scope.light .bgwave{opacity:.5}
.bgwave-v{position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--bgFade, rgba(4,6,12,.55)) 0%, transparent 34%, transparent 70%, var(--bgFade, rgba(4,6,12,.4)) 100%)}
:scope.light .bgwave-v{--bgFade:rgba(238,242,248,.55)}
/* ===== slide navigator (shared) ===== */
.steps{--stepOn:#5CE1FF; --stepsBg:rgba(4,6,12,.86); position:absolute; z-index:25; left:0; right:0; bottom:0; padding:22px 0 20px; background:linear-gradient(0deg, var(--stepsBg) 35%, transparent); pointer-events:none}
:scope.light .steps{--stepOn:#1D4ED8; --stepsBg:rgba(238,242,248,.92)}
.steps-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:22px; pointer-events:auto}
.step{position:relative; display:flex; flex-direction:column; gap:14px; min-height:44px; padding-top:4px; text-decoration:none; color:var(--muted); transition:color .25s}
.step .sbar{position:relative; display:block; height:2px; border-radius:2px; background:var(--line)}
.step .sbar::before{content:''; position:absolute; z-index:1; left:-2px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; transition:background-color .25s, opacity .25s}
.step .sbar i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--stepOn); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .25s}
.step.past .sbar i{width:100%; opacity:.35}
.step.past .sbar::before{background:var(--stepOn); opacity:.5}
.step.cur .sbar i{width:100%; box-shadow:0 0 12px var(--stepOn); animation:s2_stepFill 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
.step.cur .sbar::before{background:var(--stepOn); opacity:1; box-shadow:0 0 10px var(--stepOn)}
.step.cur .sbar::after{content:''; position:absolute; right:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--stepOn); box-shadow:0 0 12px var(--stepOn); animation:s2_stepEnd 2.4s ease-in-out 1.9s infinite; opacity:0}
.step .slbl{display:flex; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step .snum{color:var(--stepOn); opacity:.75; font-variant-numeric:tabular-nums}
.step.cur{color:var(--text)}
.step.cur .snum{opacity:1}
.step:hover{color:var(--text)}
.step:hover .sbar i{width:100%; opacity:.75}
.step:focus-visible{outline:2px solid var(--stepOn); outline-offset:6px; border-radius:4px}
@keyframes s2_stepFill{from{width:0}}
@keyframes s2_stepEnd{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.2)}}
@media (max-width: 1200px){ .steps-in{padding:0 32px; gap:14px} .step .slbl{font-size:11px; gap:8px} }
@media (max-width: 960px){ .steps{position:fixed} .steps-in{padding:0 16px; gap:6px} .step .stxt{display:none} }
/* embedded in the one-page site */
:scope.emb > .nav, :scope.emb > .steps{display:none}
}
/* ===== css/s3.css ===== */
/* IOTICS - slide 03-data-flow.
   Ported from design-source/03-data-flow.dc.html.
   Keyframe names are namespaced with the `s3` prefix so all slides can share one document. */

@scope (.s3) {

/* ================= tokens ================= */
:scope{
  --bg:#04060C; --bg2:#0B1730;
  --text:#F2F5FA; --muted:#A3ACBD; --faint:rgba(242,245,250,.10); --line:rgba(242,245,250,.10); --navText:#E6EAF2;
  --hl:#86B4FF; --accent:#5E9BFF; --accent2:#A8E6FF; --ok:#2DD4BF; --up:#4ADE80;
  --glass:rgba(16,24,44,.50); --glassLine:rgba(170,200,255,.16); --glassHi:rgba(255,255,255,.06);
  --menu:rgba(12,18,34,.94); --menuHover:rgba(134,180,255,.12);
  --wire:rgba(134,180,255,.32); --bus:rgba(134,180,255,.55); --pk:#A8E6FF; --pkGlow:rgba(120,190,255,.9);
  --ring:rgba(130,170,255,.30); --domeLine:rgba(150,185,255,.38); --domeFill:rgba(70,120,255,.18); --shine:rgba(170,205,255,.2);
  --pin:#6FA8FF; --pinGlow:rgba(80,140,255,.75); --pill:rgba(94,155,255,.16); --pillText:#C9DAFF;
  --ag1:#67E8F9; --ag2:#C4B5FD; --ag3:#5EEAD4;
  position:relative; height:100vh; min-height:620px; overflow:hidden; isolation:isolate;
  background:radial-gradient(55% 60% at 30% 70%, var(--bg2) 0%, transparent 70%), radial-gradient(45% 50% at 82% 60%, rgba(40,60,140,.35) 0%, transparent 70%), var(--bg);
  color:var(--text);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:scope.light{
  --bg:#EDF1F7; --bg2:#FFFFFF;
  --text:#0A1222; --muted:#4A5468; --faint:rgba(10,18,34,.08); --line:rgba(10,18,34,.10); --navText:#1A2335;
  --hl:#1D4ED8; --accent:#1D4ED8; --accent2:#2563EB; --ok:#0D9488; --up:#16A34A;
  --glass:rgba(255,255,255,.62); --glassLine:rgba(30,60,140,.14); --glassHi:rgba(255,255,255,.7);
  --menu:rgba(255,255,255,.95); --menuHover:rgba(29,78,216,.07);
  --wire:rgba(29,78,216,.32); --bus:rgba(29,78,216,.55); --pk:#2563EB; --pkGlow:rgba(37,99,235,.6);
  --ring:rgba(40,80,190,.30); --domeLine:rgba(60,95,200,.38); --domeFill:rgba(180,198,245,.55); --shine:rgba(255,255,255,.8);
  --pin:#1D4ED8; --pinGlow:rgba(40,100,255,.45); --pill:rgba(29,78,216,.10); --pillText:#1D3A8A;
  --ag1:#0E7490; --ag2:#6D28D9; --ag3:#0F766E;
  background:radial-gradient(55% 60% at 30% 70%, #FFFFFF 0%, transparent 70%), radial-gradient(45% 50% at 82% 60%, rgba(200,214,250,.5) 0%, transparent 70%), var(--bg);
}

/* ===== daylight palette (light theme), richer ===== */
:scope.light{
  --bg:#EDF3FF; --bg2:#FFFFFF;
  --text:#0E1C45; --muted:#4E5C86; --faint:rgba(14,28,69,.07); --line:rgba(31,79,224,.12); --navText:#16265A;
  --hl:#1F4FE0; --accent:#1F4FE0; --accent2:#3D7BFF;
  --glass:rgba(255,255,255,.6); --glassLine:rgba(31,79,224,.2); --glassHi:rgba(255,255,255,.9);
  --menu:rgba(255,255,255,.97); --menuHover:rgba(31,79,224,.09);
  --vignette:#E9F0FF; --ring:rgba(31,79,224,.3); --net:rgba(31,79,224,.5); --wire:rgba(31,79,224,.34);
  --pk:#2F6BFF; --pkGlow:rgba(47,107,255,.55); --pin:#1F4FE0; --pinGlow:rgba(31,79,224,.45);
  --tileA:#2552E8; --tileB:#9FC6FF; --chev:rgba(31,79,224,.1); --rowHi:rgba(31,79,224,.09);
  --panel:rgba(255,255,255,.55); --panelSolid:#EEF4FF; --orbBg:rgba(120,165,255,.42);
  --good:#1F4FE0; --goodSoft:rgba(31,79,224,.12); --goodGlow:rgba(47,107,255,.45);
  --cardBad:rgba(255,241,243,.94); --cardBadLine:rgba(225,55,75,.32); --cardBadText:#0E1C45; --cardBadMuted:#4E5C86;
  --cardGood:rgba(255,255,255,.84); --cardGoodLine:rgba(31,79,224,.26); --cardGoodText:#0E1C45; --cardGoodMuted:#3F4D78;
  --field:rgba(255,255,255,.8); --fieldLine:rgba(31,79,224,.22); --fieldFocus:rgba(31,79,224,.1);
  --chip:rgba(255,255,255,.78); --chipOn:rgba(31,79,224,.14);
  --btn:#1F4FE0; --btnHover:#1840C0; --btnGlow:rgba(31,79,224,.45); --btnText:#FFFFFF;
  background:
    radial-gradient(50% 45% at 92% 2%, rgba(120,165,255,.75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95,200,255,.5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175,155,255,.32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255,255,255,.9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
}
:scope.light .steps{--stepOn:#1F4FE0; --stepsBg:rgba(236,242,255,.9)}
:scope.light .bgwave{opacity:.6}
:scope.light .wave{opacity:1}
:scope.light .bgwave-v{--bgFade:rgba(236,242,255,.5)}
.dots{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--faint) 1px, transparent 1.5px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%)}

/* ================= nav (shared) ================= */
.nav{position:absolute; top:0; left:0; right:0; z-index:30; height:72px; border-bottom:1px solid var(--line)}
.nav-in{height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav a.link{position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:13px; font-weight:400; letter-spacing:.02em; text-decoration:none; color:var(--navText); opacity:.78; transition:opacity .2s}
.nav a.link::after{content:''; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--hl); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a.link:hover{opacity:1; color:var(--navText)}
.nav a.link:hover::after{transform:scaleX(1)}
.logo{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:var(--text); text-decoration:none}
.logo .lgx{color:var(--text)}
:scope.light .logo .lgx{color:#2645A1}
.logo::before{content:''; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--glassLine); background:var(--glass)}
.logo::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s3_spin 6s linear infinite; opacity:.8}
@keyframes s3_spin{to{transform:rotate(360deg)}}
.logo svg{position:relative; width:22px; height:22px}
.logo{margin-right:100px}
.logo svg.wm{position:absolute; left:calc(100% + 12px); top:50%; width:88px; height:14px; margin-top:-7px; color:var(--text)}
:scope.light .logo svg.wm{color:#2645A1}
.lg-arc,.lg-stem{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}
.lg-dot{fill:currentColor}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.ibtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--navText); cursor:pointer; border-radius:50%; transition:background-color .2s}
.ibtn:hover{background:var(--faint)}
.ibtn svg{width:18px; height:18px}
.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; margin:0 4px; background:var(--glass); border:1px solid var(--glassLine); color:var(--navText); font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:999px}
.lang-btn:hover{border-color:var(--hl)}
.lang-btn svg{width:15px; height:15px}
.lang-menu{position:absolute; top:50px; right:0; min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px; color:var(--text);
  background:var(--menu); border:1px solid var(--glassLine); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); animation:s3_menuIn .22s ease both}
@keyframes s3_menuIn{from{opacity:0; transform:translateY(-6px)}}
.lang-item{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer}
.lang-item:hover{background:var(--menuHover)}
.lang-item svg{width:16px; height:16px; color:var(--hl)}
.lang-code{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:600}
.burger{display:none}

/* ================= copy ================= */
.wrap{position:relative; z-index:5; box-sizing:border-box; height:100%; max-width:1680px; margin:0 auto; padding:120px 56px 134px; display:flex; flex-direction:column}
.txt{display:block}
.txt .p{max-width:1000px}
.eyebrow{margin:0 0 clamp(12px, 2vh, 20px); font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--hl)}
.h2{margin:0 0 clamp(12px, 2vh, 20px); font-size:clamp(30px, min(2.6vw, 4.6vh), 52px); line-height:1.06; font-weight:300; letter-spacing:-.03em}
.h2 span{display:block}
.h2 .a1{font-weight:400}
.h2 .a2{color:var(--hl)}
.p{margin:0; font-size:clamp(14px, 1.85vh, 17px); line-height:1.55; color:var(--muted)}
.reveal{animation:s3_fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}
@keyframes s3_fadeUp{from{opacity:0; transform:translateY(24px); filter:blur(6px)}}

/* ================= diagram ================= */
.dg-scroll{flex:1; min-height:0; display:flex; align-items:flex-start; margin-top:clamp(14px, 2.4vh, 28px); overflow:visible}
.dg{position:relative; width:min(100%, max(900px, calc((100vh - 330px) * 2.93))); min-width:900px; margin:0 auto; aspect-ratio:1640/560; container-type:inline-size}
.lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1}
.base{fill:none; stroke:var(--wire); stroke-width:1.2; stroke-dasharray:4 5}
.bus{fill:none; stroke:var(--bus); stroke-width:1.6}
.pk{fill:none; stroke:var(--pk); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:14 186; opacity:0; animation:s3_pk 2.4s linear infinite}
.pk.sh{stroke-dasharray:34 166; animation-name:s3_pkS}
.pks{filter:drop-shadow(0 0 4px var(--pkGlow))}
@keyframes s3_pk{0%{stroke-dashoffset:14; opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{stroke-dashoffset:-100; opacity:0}}
@keyframes s3_pkS{0%{stroke-dashoffset:34; opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{stroke-dashoffset:-100; opacity:0}}
.jn{fill:var(--bus)}
.jn.big{fill:var(--accent2); animation:s3_jn 2.4s ease-in-out infinite}
@keyframes s3_jn{0%,100%{opacity:.6} 50%{opacity:1}}
.jr{fill:none; stroke:var(--accent2); stroke-width:1.2; transform-box:fill-box; transform-origin:center; animation:s3_jr 2.4s ease-out infinite}
@keyframes s3_jr{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(2.6); opacity:0}}
.r-line{fill:none; stroke:var(--ring); stroke-width:1}
.r-dash{fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:12 88; animation:s3_orbit 10s linear infinite}
.r-dash.b{animation-delay:-5s; stroke:var(--accent2)}
@keyframes s3_orbit{to{stroke-dashoffset:-100}}

/* enterprise scene */
.fac{position:absolute; z-index:2; left:1.83%; top:26.79%; width:26.83%; height:36.43%; animation:s3_floaty 7s ease-in-out infinite}
@keyframes s3_floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
.fac img{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; -webkit-user-drag:none;
  filter:brightness(.88) saturate(.95) drop-shadow(0 0 22px rgba(80,140,255,.30))}
:scope.light .fac img{filter:drop-shadow(0 18px 24px rgba(20,40,110,.18))}
.pin{position:absolute; width:0; height:0}
.pin::before{content:''; position:absolute; left:-.5cqw; top:-.5cqw; width:1cqw; height:1cqw; box-sizing:border-box; border-radius:50%; border:1.5px solid var(--pin); opacity:0; animation:s3_pinPulse 2.4s ease-out infinite}
.pin i{position:absolute; left:-.3cqw; top:-.3cqw; width:.6cqw; height:.6cqw; border-radius:50%; box-shadow:0 0 .8cqw .3cqw var(--pinGlow); animation:s3_glow 2.4s ease-in-out infinite}
@keyframes s3_pinPulse{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(3); opacity:0}}
@keyframes s3_glow{0%,100%{opacity:.5} 50%{opacity:1}}
.pin.q1::before,.pin.q1 i{animation-delay:.3s}.pin.q2::before,.pin.q2 i{animation-delay:.7s}.pin.q3::before,.pin.q3 i{animation-delay:1.1s}
.pin.q4::before,.pin.q4 i{animation-delay:1.5s}.pin.q5::before,.pin.q5 i{animation-delay:1.9s}.pin.q6::before,.pin.q6 i{animation-delay:2.1s}

/* pills */
.pill{position:absolute; z-index:3; display:flex; align-items:center; justify-content:center; gap:.5cqw; box-sizing:border-box; height:1.6cqw; padding:0 .9cqw; border-radius:999px; white-space:nowrap;
  background:var(--pill); border:1px solid var(--glassLine); color:var(--pillText); font-size:.64cqw; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.pill .live{width:.4cqw; height:.4cqw; border-radius:50%; background:var(--accent2); box-shadow:0 0 .5cqw var(--accent2); animation:s3_glow 2s ease-in-out infinite}
.pill.ent{left:15.3%; top:71.07%; transform:translateX(-50%); height:1.8cqw; font-size:.74cqw; letter-spacing:.06em; text-transform:none; font-weight:500}
.pill.plat{left:70.12%; top:2.5%; width:15.24%}

/* data layer panel (2 columns) */
.layer-box{position:absolute; z-index:2; left:35.37%; top:2.5%; width:28.05%; height:85.36%; box-sizing:border-box; border-radius:1.4cqw;
  border:1px dashed var(--glassLine); background:linear-gradient(180deg, var(--glassHi), transparent 70%)}
.layer-box::after{content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--accent2), transparent) top / 40% 1px no-repeat; animation:s3_edgeRun 4.8s linear infinite}
@keyframes s3_edgeRun{from{background-position:-40% 0} to{background-position:140% 0}}
.layer-cell{position:absolute; z-index:3; left:50%; top:67.86%; width:12.2%; height:14.64%; box-sizing:border-box; padding:.75cqw .9cqw; border-radius:.9cqw;
  display:flex; align-items:center; gap:.7cqw; background:var(--pill); border:1px solid var(--glassLine); color:var(--pillText)}
.layer-cell .mk{position:relative; display:flex; align-items:center; justify-content:center; flex:none; width:2.3cqw; height:2.3cqw; border-radius:50%; border:1px solid var(--glassLine); color:var(--text)}
.layer-cell .mk::after{content:''; position:absolute; inset:-3px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s3_spin 4s linear infinite}
.layer-cell .mk svg{width:1.1cqw; height:1.1cqw}
.layer-cell .lt{display:flex; flex-direction:column; gap:.15cqw; min-width:0}
.layer-cell b{font-size:.62cqw; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text)}
.layer-cell span{font-size:.66cqw; font-weight:500; line-height:1.25}

/* system cards */
.sys{position:absolute; z-index:3; width:12.2%; height:13.21%; box-sizing:border-box; padding:.75cqw .9cqw; border-radius:.9cqw;
  display:flex; flex-direction:column; justify-content:center; gap:.3cqw;
  background:linear-gradient(160deg, var(--glassHi), transparent 60%), var(--glass); border:1px solid var(--glassLine);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:transform .3s ease, border-color .3s; animation:s3_arrive 2.4s ease-in-out infinite}
.sys:hover{transform:translateX(4px); border-color:var(--hl)}
.sys.src{border-style:dashed}
@keyframes s3_arrive{0%,62%,100%{box-shadow:0 0 0 0 transparent} 78%{box-shadow:0 0 0 1px var(--hl), 0 0 1.6cqw -.15cqw var(--pkGlow)}}
.sys-top{display:flex; align-items:center; justify-content:space-between}
.sys b{font-family:'Unbounded', 'Manrope', sans-serif; font-size:1.12cqw; font-weight:600; letter-spacing:.04em; line-height:1}
.sys small{font-size:.7cqw; color:var(--muted); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ok{position:relative; width:.6cqw; height:.6cqw; border-radius:50%; background:var(--ok); box-shadow:0 0 .55cqw var(--ok)}
.ok::after{content:''; position:absolute; inset:-.22cqw; border-radius:50%; border:1px solid var(--ok); animation:s3_okRing 2.4s ease-out infinite}
@keyframes s3_okRing{0%{transform:scale(.6); opacity:1} 100%{transform:scale(1.8); opacity:0}}

/* agent cards */
.agent{position:absolute; z-index:3; left:70.12%; width:15.24%; height:21.43%; box-sizing:border-box; padding:1cqw; border-radius:1.1cqw;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg, var(--glassHi), transparent 60%), var(--glass); border:1px solid var(--glassLine);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:transform .3s ease, border-color .3s;
  animation:s3_arrive 2.4s ease-in-out infinite}
.agent:hover{transform:translateY(-3px); border-color:var(--ac)}
.agent.g1{--ac:var(--ag1)}.agent.g2{--ac:var(--ag2)}.agent.g3{--ac:var(--ag3)}
.ag-top{display:flex; align-items:flex-start; gap:.8cqw}
.ag-ic{display:flex; align-items:center; justify-content:center; flex:none; width:2cqw; height:2cqw; border-radius:50%; border:1px solid var(--glassLine); color:var(--ac); background:var(--glassHi)}
.ag-ic svg{width:1cqw; height:1cqw}
.ag-t{font-family:'Unbounded', 'Manrope', sans-serif; font-size:.8cqw; font-weight:600; line-height:1.3; letter-spacing:.05em; text-transform:uppercase; color:var(--text)}
.ag-bot{display:flex; align-items:center; justify-content:space-between; gap:.8cqw}
.ag-sub{font-size:.72cqw; color:var(--ac); font-weight:500}
.think{display:flex; gap:.28cqw}
.think i{display:block; width:.35cqw; height:.35cqw; border-radius:50%; background:var(--ac); animation:s3_think 1.2s ease-in-out infinite}
.think i:nth-child(2){animation-delay:.15s}.think i:nth-child(3){animation-delay:.3s}
@keyframes s3_think{0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-.2cqw)}}
.bar{position:relative; height:2px; border-radius:2px; background:var(--line); overflow:hidden}
.bar::after{content:''; position:absolute; top:0; bottom:0; width:35%; background:linear-gradient(90deg, transparent, var(--ac), transparent); animation:s3_barRun 2.4s ease-in-out infinite}
@keyframes s3_barRun{from{left:-35%} to{left:100%}}

/* result card */
.result{position:absolute; z-index:3; left:89.02%; width:10.98%; height:21.43%; box-sizing:border-box; padding:.8cqw .9cqw; border-radius:1.1cqw;
  display:flex; flex-direction:column; justify-content:space-between; gap:.25cqw;
  background:linear-gradient(160deg, var(--glassHi), transparent 60%), var(--glass); border:1px solid var(--glassLine);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:transform .3s ease, border-color .3s; animation:s3_arrive 2.4s ease-in-out infinite}
.result:hover{transform:translateY(-3px); border-color:var(--ac)}
.result.g1{--ac:var(--ag1)}.result.g2{--ac:var(--ag2)}.result.g3{--ac:var(--ag3)}
.res-t{font-size:.66cqw; font-weight:700; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; color:var(--muted)}
.res-v{font-family:'Unbounded', 'Manrope', sans-serif; font-size:1.75cqw; font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--ac)}
.pill.res-pill{left:89.02%; top:2.5%; width:10.98%}
.chart{width:100%; height:2.5cqw; overflow:visible}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .area{fill:var(--ac); opacity:.16}
.chart .cl{fill:none; stroke:var(--ac); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100 100; animation:s3_draw 4.8s ease-in-out infinite}
@keyframes s3_draw{0%{stroke-dashoffset:100} 45%,85%{stroke-dashoffset:0} 100%{stroke-dashoffset:0; opacity:0}}
.chart .end{fill:var(--ac); animation:s3_endDot 4.8s ease-in-out infinite}
@keyframes s3_endDot{0%,40%{opacity:0} 50%,85%{opacity:1} 100%{opacity:0}}
.res-l{font-size:.7cqw; color:var(--hl); font-weight:600; text-align:center}

/* ================= bottom ================= */
.pager{position:absolute; z-index:8; right:56px; bottom:32px; display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.12em}
.pager .now{color:var(--text)}
.pager .track{position:relative; width:120px; height:1px; background:var(--line); overflow:hidden}
.pager .fill{position:absolute; left:0; top:0; height:100%; width:60%; background:var(--hl); box-shadow:0 0 8px var(--hl)}

@media (max-width: 1200px){ .nav a.link{padding:0 9px} .nav-in{padding:0 32px} .wrap{padding-left:32px; padding-right:32px} .txt{margin-left:0} }
@media (max-width: 960px){
  .nav-links,.nav .search{display:none}
  .burger{display:flex}
  .nav{height:64px}
  .nav-in{grid-template-columns:auto 1fr; padding:0 16px}
  :scope{height:auto; min-height:100vh}
  .wrap{height:auto; padding:104px 16px 72px}
  .txt .h2{margin:0 0 16px}
  .dg-scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
  .dg{width:100%; min-width:900px}
  .pager{display:none}
}
@media (prefers-reduced-motion: reduce){ :scope *, :scope *::before, :scope *::after{animation:none !important; transition:none !important} .pk{opacity:0} }

/* ===== animated background wave (same field of dots as on the Hero) ===== */
.bgwave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:.6}
:scope.light .bgwave{opacity:.5}
.bgwave-v{position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--bgFade, rgba(4,6,12,.55)) 0%, transparent 34%, transparent 70%, var(--bgFade, rgba(4,6,12,.4)) 100%)}
:scope.light .bgwave-v{--bgFade:rgba(238,242,248,.55)}
/* ===== slide navigator (shared) ===== */
.steps{--stepOn:#5CE1FF; --stepsBg:rgba(4,6,12,.86); position:absolute; z-index:25; left:0; right:0; bottom:0; padding:22px 0 20px; background:linear-gradient(0deg, var(--stepsBg) 35%, transparent); pointer-events:none}
:scope.light .steps{--stepOn:#1D4ED8; --stepsBg:rgba(238,242,248,.92)}
.steps-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:22px; pointer-events:auto}
.step{position:relative; display:flex; flex-direction:column; gap:14px; min-height:44px; padding-top:4px; text-decoration:none; color:var(--muted); transition:color .25s}
.step .sbar{position:relative; display:block; height:2px; border-radius:2px; background:var(--line)}
.step .sbar::before{content:''; position:absolute; z-index:1; left:-2px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; transition:background-color .25s, opacity .25s}
.step .sbar i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--stepOn); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .25s}
.step.past .sbar i{width:100%; opacity:.35}
.step.past .sbar::before{background:var(--stepOn); opacity:.5}
.step.cur .sbar i{width:100%; box-shadow:0 0 12px var(--stepOn); animation:s3_stepFill 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
.step.cur .sbar::before{background:var(--stepOn); opacity:1; box-shadow:0 0 10px var(--stepOn)}
.step.cur .sbar::after{content:''; position:absolute; right:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--stepOn); box-shadow:0 0 12px var(--stepOn); animation:s3_stepEnd 2.4s ease-in-out 1.9s infinite; opacity:0}
.step .slbl{display:flex; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step .snum{color:var(--stepOn); opacity:.75; font-variant-numeric:tabular-nums}
.step.cur{color:var(--text)}
.step.cur .snum{opacity:1}
.step:hover{color:var(--text)}
.step:hover .sbar i{width:100%; opacity:.75}
.step:focus-visible{outline:2px solid var(--stepOn); outline-offset:6px; border-radius:4px}
@keyframes s3_stepFill{from{width:0}}
@keyframes s3_stepEnd{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.2)}}
@media (max-width: 1200px){ .steps-in{padding:0 32px; gap:14px} .step .slbl{font-size:11px; gap:8px} }
@media (max-width: 960px){ .steps{position:fixed} .steps-in{padding:0 16px; gap:6px} .step .stxt{display:none} }
/* embedded in the one-page site */
:scope.emb > .nav, :scope.emb > .steps{display:none}
}
/* ===== css/s4.css ===== */
/* IOTICS - slide 04-ai-agents.
   Ported from design-source/04-ai-agents.dc.html.
   Keyframe names are namespaced with the `s4` prefix so all slides can share one document. */

@scope (.s4) {

/* ================= tokens ================= */
:scope{
  --bg:#04060C; --bg2:#0B1730;
  --text:#F2F5FA; --muted:#A3ACBD; --faint:rgba(242,245,250,.10); --line:rgba(242,245,250,.10); --navText:#E6EAF2;
  --hl:#86B4FF; --accent2:#A8E6FF; --check:#3B6FF5;
  --glass:rgba(16,24,44,.50); --glassLine:rgba(170,200,255,.16); --glassHi:rgba(255,255,255,.06);
  --menu:rgba(12,18,34,.94); --menuHover:rgba(134,180,255,.12);
  --track:rgba(242,245,250,.08); --grid:rgba(242,245,250,.12);
  --ag1:#67E8F9; --ag1s:rgba(103,232,249,.22);
  --ag2:#C4B5FD; --ag2s:rgba(196,181,253,.22);
  --ag3:#5EEAD4; --ag3s:rgba(94,234,212,.30);
  position:relative; height:100vh; min-height:620px; overflow:hidden; isolation:isolate;
  background:radial-gradient(60% 55% at 50% 78%, var(--bg2) 0%, transparent 72%), var(--bg);
  color:var(--text);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:scope.light{
  --bg:#EDF1F7; --bg2:#FFFFFF;
  --text:#0A1222; --muted:#4A5468; --faint:rgba(10,18,34,.08); --line:rgba(10,18,34,.10); --navText:#1A2335;
  --hl:#1D4ED8; --accent2:#2563EB; --check:#1D4ED8;
  --glass:rgba(255,255,255,.66); --glassLine:rgba(30,60,140,.14); --glassHi:rgba(255,255,255,.7);
  --menu:rgba(255,255,255,.95); --menuHover:rgba(29,78,216,.07);
  --track:rgba(10,18,34,.08); --grid:rgba(10,18,34,.14);
  --ag1:#0E7490; --ag1s:rgba(14,116,144,.16);
  --ag2:#6D28D9; --ag2s:rgba(109,40,217,.14);
  --ag3:#0F766E; --ag3s:rgba(15,118,110,.22);
}

/* ===== daylight palette (light theme), richer ===== */
:scope.light{
  --bg:#EDF3FF; --bg2:#FFFFFF;
  --text:#0E1C45; --muted:#4E5C86; --faint:rgba(14,28,69,.07); --line:rgba(31,79,224,.12); --navText:#16265A;
  --hl:#1F4FE0; --accent:#1F4FE0; --accent2:#3D7BFF;
  --glass:rgba(255,255,255,.6); --glassLine:rgba(31,79,224,.2); --glassHi:rgba(255,255,255,.9);
  --menu:rgba(255,255,255,.97); --menuHover:rgba(31,79,224,.09);
  --vignette:#E9F0FF; --ring:rgba(31,79,224,.3); --net:rgba(31,79,224,.5); --wire:rgba(31,79,224,.34);
  --pk:#2F6BFF; --pkGlow:rgba(47,107,255,.55); --pin:#1F4FE0; --pinGlow:rgba(31,79,224,.45);
  --tileA:#2552E8; --tileB:#9FC6FF; --chev:rgba(31,79,224,.1); --rowHi:rgba(31,79,224,.09);
  --panel:rgba(255,255,255,.55); --panelSolid:#EEF4FF; --orbBg:rgba(120,165,255,.42);
  --good:#1F4FE0; --goodSoft:rgba(31,79,224,.12); --goodGlow:rgba(47,107,255,.45);
  --cardBad:rgba(255,241,243,.94); --cardBadLine:rgba(225,55,75,.32); --cardBadText:#0E1C45; --cardBadMuted:#4E5C86;
  --cardGood:rgba(255,255,255,.84); --cardGoodLine:rgba(31,79,224,.26); --cardGoodText:#0E1C45; --cardGoodMuted:#3F4D78;
  --field:rgba(255,255,255,.8); --fieldLine:rgba(31,79,224,.22); --fieldFocus:rgba(31,79,224,.1);
  --chip:rgba(255,255,255,.78); --chipOn:rgba(31,79,224,.14);
  --btn:#1F4FE0; --btnHover:#1840C0; --btnGlow:rgba(31,79,224,.45); --btnText:#FFFFFF;
  background:
    radial-gradient(50% 45% at 92% 2%, rgba(120,165,255,.75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95,200,255,.5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175,155,255,.32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255,255,255,.9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
}
:scope.light .steps{--stepOn:#1F4FE0; --stepsBg:rgba(236,242,255,.9)}
:scope.light .bgwave{opacity:.6}
:scope.light .wave{opacity:1}
:scope.light .bgwave-v{--bgFade:rgba(236,242,255,.5)}
.dots{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--faint) 1px, transparent 1.5px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 55%, transparent 100%)}
.glow{position:absolute; z-index:0; width:640px; height:420px; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none}
.glow.g1{left:8%; top:48%; background:var(--ag1s)}
.glow.g2{left:38%; top:56%; background:var(--ag2s)}
.glow.g3{right:6%; top:48%; background:var(--ag3s)}

/* ================= nav (shared) ================= */
.nav{position:absolute; top:0; left:0; right:0; z-index:30; height:72px; border-bottom:1px solid var(--line)}
.nav-in{height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav a.link{position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:13px; font-weight:400; letter-spacing:.02em; text-decoration:none; color:var(--navText); opacity:.78; transition:opacity .2s}
.nav a.link::after{content:''; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--hl); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a.link:hover{opacity:1; color:var(--navText)}
.nav a.link:hover::after{transform:scaleX(1)}
.logo{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:var(--text); text-decoration:none}
.logo .lgx{color:var(--text)}
:scope.light .logo .lgx{color:#2645A1}
.logo::before{content:''; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--glassLine); background:var(--glass)}
.logo::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s4_spin 6s linear infinite; opacity:.8}
@keyframes s4_spin{to{transform:rotate(360deg)}}
.logo svg{position:relative; width:22px; height:22px}
.logo{margin-right:100px}
.logo svg.wm{position:absolute; left:calc(100% + 12px); top:50%; width:88px; height:14px; margin-top:-7px; color:var(--text)}
:scope.light .logo svg.wm{color:#2645A1}
.lg-arc,.lg-stem{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}
.lg-dot{fill:currentColor}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.ibtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--navText); cursor:pointer; border-radius:50%; transition:background-color .2s}
.ibtn:hover{background:var(--faint)}
.ibtn svg{width:18px; height:18px}
.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; margin:0 4px; background:var(--glass); border:1px solid var(--glassLine); color:var(--navText); font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:999px}
.lang-btn:hover{border-color:var(--hl)}
.lang-btn svg{width:15px; height:15px}
.lang-menu{position:absolute; top:50px; right:0; min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px; color:var(--text);
  background:var(--menu); border:1px solid var(--glassLine); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); animation:s4_menuIn .22s ease both}
@keyframes s4_menuIn{from{opacity:0; transform:translateY(-6px)}}
.lang-item{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer}
.lang-item:hover{background:var(--menuHover)}
.lang-item svg{width:16px; height:16px; color:var(--hl)}
.lang-code{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:600}
.burger{display:none}

/* ================= copy ================= */
.wrap{position:relative; z-index:5; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:120px 56px 134px}
.eyebrow{margin:0 0 clamp(12px, 2vh, 20px); font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--hl)}
.h2{margin:0 0 clamp(10px, 1.6vh, 18px); font-size:clamp(30px, min(2.8vw, 5.4vh), 54px); line-height:1.08; font-weight:300; letter-spacing:-.03em; text-wrap:balance}
.h2 .hl{color:var(--hl); font-weight:400}
.p{margin:0; font-size:clamp(14px, 1.9vh, 17px); line-height:1.55; color:var(--muted)}
.reveal{animation:s4_fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}
@keyframes s4_fadeUp{from{opacity:0; transform:translateY(24px); filter:blur(6px)}}

/* ================= columns ================= */
.cols{margin-top:clamp(18px, 3.4vh, 52px); display:grid; grid-template-columns:repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap:32px}
.col{display:flex; flex-direction:column; align-items:stretch}
.col.c1{--ac:var(--ag1); --acs:var(--ag1s)}
.col.c2{--ac:var(--ag2); --acs:var(--ag2s)}
.col.c3{--ac:var(--ag3); --acs:var(--ag3s)}
.head{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.ag-name{font-family:'Unbounded', 'Manrope', sans-serif; font-size:15px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ac)}
.ag-group{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.stem{position:relative; width:2px; height:clamp(22px, 4vh, 44px); margin:2px auto 0; background:repeating-linear-gradient(180deg, var(--glassLine) 0 3px, transparent 3px 6px); overflow:visible}
.stem::before{content:''; position:absolute; left:-1px; width:4px; height:14px; border-radius:2px; background:var(--ac); box-shadow:0 0 10px var(--ac); animation:s4_drop 2s ease-in infinite}
.stem::after{content:''; position:absolute; left:-4px; bottom:-5px; width:10px; height:10px; border-radius:50%; background:var(--ac); box-shadow:0 0 0 4px var(--acs); animation:s4_land 2s ease-in-out infinite}
.col.c2 .stem::before,.col.c2 .stem::after{animation-delay:.3s}
.col.c3 .stem::before,.col.c3 .stem::after{animation-delay:.6s}
@keyframes s4_drop{0%{top:-14px; opacity:0} 15%{opacity:1} 80%{top:calc(100% - 8px); opacity:1} 100%{top:calc(100% - 8px); opacity:0}}
@keyframes s4_land{0%,70%,100%{box-shadow:0 0 0 4px var(--acs)} 85%{box-shadow:0 0 0 9px transparent}}

.card{position:relative; flex:1; display:flex; flex-direction:column; gap:clamp(12px, 2vh, 22px); margin-top:4px; padding:clamp(18px, 2.6vh, 26px) 26px clamp(16px, 2.2vh, 22px); border-radius:24px; box-sizing:border-box; overflow:hidden;
  background:linear-gradient(170deg, var(--glassHi), transparent 45%), var(--glass); border:1px solid var(--glassLine);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.7); transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
  animation:s4_cardIn .65s cubic-bezier(.2,.7,.2,1) both}
.col.c1 .card{animation-delay:.29s}.col.c2 .card{animation-delay:.39s}.col.c3 .card{animation-delay:.49s}
@keyframes s4_cardIn{from{opacity:0; transform:translateY(30px)}}
.card:hover{transform:translateY(-6px); border-color:var(--ac); box-shadow:0 40px 80px -40px var(--acs)}
.card::before{content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--ac), transparent) 0 0 / 40% 100% no-repeat; animation:s4_edge 5s linear infinite}
@keyframes s4_edge{from{background-position:-40% 0} to{background-position:140% 0}}
.c-head{display:flex; flex-direction:column; gap:clamp(6px, 1vh, 10px)}
.c-lbl{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--ac)}
.c-lbl i{width:6px; height:6px; border-radius:50%; background:var(--ac); box-shadow:0 0 8px var(--ac); animation:s4_blink 2s ease-in-out infinite}
@keyframes s4_blink{0%,100%{opacity:.4} 50%{opacity:1}}
.kpi{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.kpi-v{font-family:'Unbounded', 'Manrope', sans-serif; font-size:clamp(26px, 4vh, 38px); font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--ac); text-shadow:0 0 24px var(--acs)}
.kpi-t{font-size:clamp(13px, 1.75vh, 15px); font-weight:500; color:var(--text); opacity:.85}
.mk{display:flex; flex-direction:column; gap:clamp(6px, 1.1vh, 14px)}
.mrow{display:flex; flex-direction:column; gap:6px}
.mrow-top{display:flex; justify-content:space-between; align-items:baseline; font-size:clamp(12.5px, 1.65vh, 14px); color:var(--muted)}
.mrow-top b{font-weight:700; color:var(--ac)}
.c-title{margin:0; font-size:clamp(20px, 2.8vh, 26px); font-weight:500; letter-spacing:-.015em; line-height:1.15}
.c-sub{font-size:14px; color:var(--muted)}

/* viz area */
.viz{position:relative; min-height:clamp(110px, 16vh, 190px); display:flex; flex-direction:column; justify-content:center}

/* 1 — growth chart */
.chart{position:relative; width:100%; height:clamp(78px, 11.5vh, 150px)}
.chart svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.grid{stroke:var(--grid); stroke-width:1; stroke-dasharray:3 5}
.area{fill:url(#gArea); opacity:.9}
.gs1{stop-color:var(--ac); stop-opacity:.28}
.gs2{stop-color:var(--ac); stop-opacity:0}
.band{fill:var(--ac); opacity:.10; animation:s4_bandPulse 3s ease-in-out infinite}
@keyframes s4_bandPulse{0%,100%{opacity:.07} 50%{opacity:.16}}
.solid{fill:none; stroke:var(--ac); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100 100; animation:s4_drawIn 1.43s cubic-bezier(.4,.1,.2,1) .59s both}
@keyframes s4_drawIn{from{stroke-dashoffset:100}}
.fc{fill:none; stroke:var(--ac); stroke-width:2; stroke-linecap:round; stroke-dasharray:5 6; animation:s4_fcIn .65s ease 1.89s both, s4_dashMove 1.2s linear 2.54s infinite}
@keyframes s4_fcIn{from{opacity:0}}
@keyframes s4_dashMove{to{stroke-dashoffset:-22}}
.now{stroke:var(--ac); stroke-width:1; stroke-dasharray:2 4; opacity:.6}
.pt{position:absolute; width:9px; height:9px; margin:-5.5px 0 0 -5.5px; border-radius:50%; border:2px solid var(--ac); background:var(--bg); animation:s4_pop .26s cubic-bezier(.3,1.6,.5,1) both}
.pt.f{border-style:dashed; opacity:.85}
@keyframes s4_pop{from{transform:scale(0)}}
.pt.last::after{content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--ac); animation:s4_ring 2s ease-out 2.34s infinite}
@keyframes s4_ring{0%{transform:scale(.5); opacity:1} 100%{transform:scale(2); opacity:0}}
.tag-now{position:absolute; top:-2px; transform:translateX(-50%); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ac); background:var(--glass); padding:3px 8px; border-radius:999px; border:1px solid var(--glassLine); white-space:nowrap}
.legend{display:flex; justify-content:space-between; margin-top:clamp(6px, 1.2vh, 12px); font-size:13px; color:var(--muted)}
.legend .f{color:var(--ac)}

/* 2 — segments */
.segs{display:flex; flex-direction:column; gap:clamp(12px, 2.2vh, 22px)}
.seg{display:grid; grid-template-columns:96px 1fr; align-items:center; gap:14px; font-size:14px}
.seg-track{position:relative; height:8px; border-radius:8px; background:var(--track); overflow:hidden}
.seg-fill{position:absolute; left:0; top:0; bottom:0; border-radius:8px; background:linear-gradient(90deg, var(--acs), var(--ac)); transform-origin:left; animation:s4_grow .91s cubic-bezier(.2,.7,.2,1) both}
.seg-fill::after{content:''; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation:s4_shimmer 2.8s ease-in-out 2.4s infinite; left:-40%}
@keyframes s4_grow{from{transform:scaleX(0)}}
@keyframes s4_shimmer{0%{left:-40%} 60%,100%{left:110%}}
.flow{display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px}
.chip{position:relative; padding:6px 12px; border-radius:999px; border:1px solid var(--glassLine); color:var(--ac); animation:s4_chipOn 3.6s ease-in-out infinite}
.chip.k2{animation-delay:.6s}.chip.k3{animation-delay:1.2s}
@keyframes s4_chipOn{0%,40%,100%{background:transparent; box-shadow:none} 15%{background:var(--acs); box-shadow:0 0 18px -4px var(--ac)}}
.flow svg{width:14px; height:14px; color:var(--muted)}

/* 3 — capacity bars */
.bars{position:relative; height:clamp(78px, 11.5vh, 145px); display:flex; align-items:flex-end; gap:4px}
.bars::before{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--grid)}
.b{position:relative; flex:1; height:100%; display:flex; align-items:flex-end}
.b i{display:block; width:100%; border-radius:3px 3px 0 0; background:var(--acs); transform-origin:bottom; animation:s4_barUp .52s cubic-bezier(.2,.7,.2,1) both}
.b.plan i{background:var(--ac); animation:s4_barUp .52s cubic-bezier(.2,.7,.2,1) both, s4_liveBar 2.4s ease-in-out infinite}
.b u{position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--ac); opacity:.55; text-decoration:none}
@keyframes s4_barUp{from{transform:scaleY(0)}}
@keyframes s4_liveBar{0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.86)}}
.b-legend{display:flex; gap:18px; margin-top:12px; font-size:12px; color:var(--muted)}
.b-legend span{display:flex; align-items:center; gap:8px}
.b-legend i{width:10px; height:10px; border-radius:3px; background:var(--acs)}
.b-legend i.p{background:var(--ac)}
.c-link{font-size:14px; color:var(--ac); font-weight:500}

/* checklist */
.checks{margin:auto 0 0; padding:clamp(10px, 1.6vh, 18px) 0 0; list-style:none; display:flex; flex-direction:column; gap:clamp(5px, 1vh, 11px); border-top:1px solid var(--line)}
.checks li{display:flex; align-items:center; gap:11px; font-size:clamp(13px, 1.75vh, 15px); font-weight:500; animation:s4_fadeUp .45s ease both}
.ck{display:flex; align-items:center; justify-content:center; flex:none; width:clamp(17px, 2.3vh, 21px); height:clamp(17px, 2.3vh, 21px); border-radius:50%; background:var(--check); box-shadow:0 0 14px -2px var(--check)}
.ck svg{width:12px; height:12px}
.ck path{fill:none; stroke:#FFFFFF; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; animation:s4_tick .32s ease both; animation-delay:inherit}
@keyframes s4_tick{from{stroke-dashoffset:20}}

/* ================= bottom ================= */
.pager{position:absolute; z-index:8; right:56px; bottom:32px; display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.12em}
.pager .now-n{color:var(--text)}
.pager .track{position:relative; width:120px; height:1px; background:var(--line); overflow:hidden}
.pager .fill{position:absolute; left:0; top:0; height:100%; width:75%; background:var(--hl); box-shadow:0 0 8px var(--hl)}

@media (max-width: 1200px){ .nav a.link{padding:0 9px} .nav-in,.wrap{padding-left:32px; padding-right:32px} .card{padding:22px 20px 20px} }
@media (max-width: 960px){
  .nav-links,.nav .search{display:none}
  .burger{display:flex}
  .nav{height:64px}
  .nav-in{grid-template-columns:auto 1fr; padding:0 16px}
  :scope{height:auto; min-height:100vh}
  .wrap{padding:104px 16px 72px}
  .viz{height:auto}
  .cols{gap:40px}
  .pager{display:none}
}
@media (prefers-reduced-motion: reduce){ :scope *, :scope *::before, :scope *::after{animation:none !important; transition:none !important} }

/* ===== animated background wave (same field of dots as on the Hero) ===== */
.bgwave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:.6}
:scope.light .bgwave{opacity:.5}
.bgwave-v{position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--bgFade, rgba(4,6,12,.55)) 0%, transparent 34%, transparent 70%, var(--bgFade, rgba(4,6,12,.4)) 100%)}
:scope.light .bgwave-v{--bgFade:rgba(238,242,248,.55)}
/* ===== slide navigator (shared) ===== */
.steps{--stepOn:#5CE1FF; --stepsBg:rgba(4,6,12,.86); position:absolute; z-index:25; left:0; right:0; bottom:0; padding:22px 0 20px; background:linear-gradient(0deg, var(--stepsBg) 35%, transparent); pointer-events:none}
:scope.light .steps{--stepOn:#1D4ED8; --stepsBg:rgba(238,242,248,.92)}
.steps-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:22px; pointer-events:auto}
.step{position:relative; display:flex; flex-direction:column; gap:14px; min-height:44px; padding-top:4px; text-decoration:none; color:var(--muted); transition:color .25s}
.step .sbar{position:relative; display:block; height:2px; border-radius:2px; background:var(--line)}
.step .sbar::before{content:''; position:absolute; z-index:1; left:-2px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; transition:background-color .25s, opacity .25s}
.step .sbar i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--stepOn); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .25s}
.step.past .sbar i{width:100%; opacity:.35}
.step.past .sbar::before{background:var(--stepOn); opacity:.5}
.step.cur .sbar i{width:100%; box-shadow:0 0 12px var(--stepOn); animation:s4_stepFill 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
.step.cur .sbar::before{background:var(--stepOn); opacity:1; box-shadow:0 0 10px var(--stepOn)}
.step.cur .sbar::after{content:''; position:absolute; right:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--stepOn); box-shadow:0 0 12px var(--stepOn); animation:s4_stepEnd 2.4s ease-in-out 1.9s infinite; opacity:0}
.step .slbl{display:flex; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step .snum{color:var(--stepOn); opacity:.75; font-variant-numeric:tabular-nums}
.step.cur{color:var(--text)}
.step.cur .snum{opacity:1}
.step:hover{color:var(--text)}
.step:hover .sbar i{width:100%; opacity:.75}
.step:focus-visible{outline:2px solid var(--stepOn); outline-offset:6px; border-radius:4px}
@keyframes s4_stepFill{from{width:0}}
@keyframes s4_stepEnd{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.2)}}
@media (max-width: 1200px){ .steps-in{padding:0 32px; gap:14px} .step .slbl{font-size:11px; gap:8px} }
@media (max-width: 960px){ .steps{position:fixed} .steps-in{padding:0 16px; gap:6px} .step .stxt{display:none} }
/* embedded in the one-page site */
:scope.emb > .nav, :scope.emb > .steps{display:none}
}
/* ===== css/s5.css ===== */
/* IOTICS - slide 05-modules.
   Ported from design-source/05-modules.dc.html.
   Keyframe names are namespaced with the `s5` prefix so all slides can share one document. */

@scope (.s5) {

/* ================= tokens ================= */
:scope{
  --bg:#04060C; --bg2:#0B1730;
  --text:#F2F5FA; --muted:#A3ACBD; --faint:rgba(242,245,250,.10); --line:rgba(242,245,250,.10); --navText:#E6EAF2;
  --hl:#86B4FF; --accent:#5E9BFF; --accent2:#A8E6FF;
  --glass:rgba(16,24,44,.52); --glassLine:rgba(170,200,255,.18); --glassHi:rgba(255,255,255,.08);
  --menu:rgba(12,18,34,.94); --menuHover:rgba(134,180,255,.12);
  --wire:rgba(134,180,255,.30); --pk:#A8E6FF; --pkGlow:rgba(120,190,255,.9);
  --ring:rgba(130,170,255,.30); --plate:rgba(60,110,240,.20); --plateEdge:rgba(120,170,255,.9);
  --pin:#6FA8FF; --pinGlow:rgba(80,140,255,.75); --net:rgba(140,185,255,.55); --sweep:rgba(130,180,255,.45);
  --tileA:#3B6FF5; --tileB:#8FD3FF; --chev:rgba(255,255,255,.08);
  --panel:rgba(8,14,30,.55); --orbBg:rgba(40,80,200,.22); --vignette:rgba(4,6,12,.55);
  --statA:rgba(60,110,230,.22); --statB:rgba(12,20,40,.55); --ctaA:rgba(94,155,255,.16);
  --rowHi:rgba(94,155,255,.12); --panelSolid:#080E1E; --ready:#34D399; --readyBg:rgba(16,185,129,.14); --readyLine:rgba(52,211,153,.35); --testC:#FBBF24; --testBg:rgba(245,158,11,.14); --testLine:rgba(251,191,36,.35); --devC:#93B4FF; --devBg:rgba(94,155,255,.12); --devLine:rgba(147,180,255,.32);
  position:relative; height:100vh; min-height:620px; overflow:hidden; isolation:isolate;
  background:radial-gradient(55% 55% at 50% 72%, var(--bg2) 0%, transparent 72%), var(--bg);
  color:var(--text);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:scope.light{
  --bg:#EEF2F8; --bg2:#FFFFFF;
  --text:#0A1222; --muted:#4A5468; --faint:rgba(10,18,34,.08); --line:rgba(10,18,34,.10); --navText:#1A2335;
  --hl:#1D4ED8; --accent:#1D4ED8; --accent2:#2563EB;
  --glass:rgba(255,255,255,.58); --glassLine:rgba(255,255,255,.95); --glassHi:rgba(255,255,255,.75);
  --menu:rgba(255,255,255,.95); --menuHover:rgba(29,78,216,.07);
  --wire:rgba(29,78,216,.28); --pk:#2563EB; --pkGlow:rgba(37,99,235,.6);
  --ring:rgba(40,80,190,.25); --plate:rgba(150,180,255,.30); --plateEdge:rgba(60,110,255,.85);
  --pin:#1D4ED8; --pinGlow:rgba(40,100,255,.45); --net:rgba(29,78,216,.42); --sweep:rgba(255,255,255,.6);
  --tileA:#2F5BEA; --tileB:#B9DEFF; --chev:rgba(29,78,216,.08);
  --panel:rgba(255,255,255,.55); --orbBg:rgba(150,185,255,.35); --vignette:rgba(238,242,248,.5);
  --statA:rgba(255,255,255,.75); --statB:rgba(225,234,252,.55); --ctaA:rgba(29,78,216,.08);
  --rowHi:rgba(29,78,216,.07); --panelSolid:#F5F8FD; --ready:#059669; --readyBg:rgba(16,185,129,.12); --readyLine:rgba(5,150,105,.3); --testC:#B45309; --testBg:rgba(245,158,11,.14); --testLine:rgba(180,83,9,.3); --devC:#1D4ED8; --devBg:rgba(29,78,216,.08); --devLine:rgba(29,78,216,.25);
}

/* ===== daylight palette (light theme), richer ===== */
:scope.light{
  --bg:#EDF3FF; --bg2:#FFFFFF;
  --text:#0E1C45; --muted:#4E5C86; --faint:rgba(14,28,69,.07); --line:rgba(31,79,224,.12); --navText:#16265A;
  --hl:#1F4FE0; --accent:#1F4FE0; --accent2:#3D7BFF;
  --glass:rgba(255,255,255,.6); --glassLine:rgba(31,79,224,.2); --glassHi:rgba(255,255,255,.9);
  --menu:rgba(255,255,255,.97); --menuHover:rgba(31,79,224,.09);
  --vignette:#E9F0FF; --ring:rgba(31,79,224,.3); --net:rgba(31,79,224,.5); --wire:rgba(31,79,224,.34);
  --pk:#2F6BFF; --pkGlow:rgba(47,107,255,.55); --pin:#1F4FE0; --pinGlow:rgba(31,79,224,.45);
  --tileA:#2552E8; --tileB:#9FC6FF; --chev:rgba(31,79,224,.1); --rowHi:rgba(31,79,224,.09);
  --panel:rgba(255,255,255,.55); --panelSolid:#EEF4FF; --orbBg:rgba(120,165,255,.42);
  --good:#1F4FE0; --goodSoft:rgba(31,79,224,.12); --goodGlow:rgba(47,107,255,.45);
  --cardBad:rgba(255,241,243,.94); --cardBadLine:rgba(225,55,75,.32); --cardBadText:#0E1C45; --cardBadMuted:#4E5C86;
  --cardGood:rgba(255,255,255,.84); --cardGoodLine:rgba(31,79,224,.26); --cardGoodText:#0E1C45; --cardGoodMuted:#3F4D78;
  --field:rgba(255,255,255,.8); --fieldLine:rgba(31,79,224,.22); --fieldFocus:rgba(31,79,224,.1);
  --chip:rgba(255,255,255,.78); --chipOn:rgba(31,79,224,.14);
  --btn:#1F4FE0; --btnHover:#1840C0; --btnGlow:rgba(31,79,224,.45); --btnText:#FFFFFF;
  background:
    radial-gradient(50% 45% at 92% 2%, rgba(120,165,255,.75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95,200,255,.5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175,155,255,.32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255,255,255,.9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
}
:scope.light .steps{--stepOn:#1F4FE0; --stepsBg:rgba(236,242,255,.9)}
:scope.light .bgwave{opacity:.6}
:scope.light .wave{opacity:1}
:scope.light .bgwave-v{--bgFade:rgba(236,242,255,.5)}
.dots{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--faint) 1px, transparent 1.5px); background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 70%, #000, transparent 75%); mask-image:radial-gradient(ellipse 60% 50% at 50% 70%, #000, transparent 75%)}

/* ================= nav (shared) ================= */
.nav{position:absolute; top:0; left:0; right:0; z-index:30; height:72px; border-bottom:1px solid var(--line)}
.nav-in{height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav a.link{position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:13px; font-weight:400; letter-spacing:.02em; text-decoration:none; color:var(--navText); opacity:.78; transition:opacity .2s}
.nav a.link::after{content:''; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--hl); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a.link:hover{opacity:1; color:var(--navText)}
.nav a.link:hover::after{transform:scaleX(1)}
.logo{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:var(--text); text-decoration:none}
.logo .lgx{color:var(--text)}
:scope.light .logo .lgx{color:#2645A1}
.logo::before{content:''; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--glassLine); background:var(--glass)}
.logo::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s5_spin 6s linear infinite; opacity:.8}
@keyframes s5_spin{to{transform:rotate(360deg)}}
.logo svg{position:relative; width:22px; height:22px}
.logo{margin-right:100px}
.logo svg.wm{position:absolute; left:calc(100% + 12px); top:50%; width:88px; height:14px; margin-top:-7px; color:var(--text)}
:scope.light .logo svg.wm{color:#2645A1}
.lg-arc,.lg-stem{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}
.lg-dot{fill:currentColor}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.ibtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--navText); cursor:pointer; border-radius:50%; transition:background-color .2s}
.ibtn:hover{background:var(--faint)}
.ibtn svg{width:18px; height:18px}
.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; margin:0 4px; background:var(--glass); border:1px solid var(--glassLine); color:var(--navText); font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:999px}
.lang-btn:hover{border-color:var(--hl)}
.lang-btn svg{width:15px; height:15px}
.lang-menu{position:absolute; top:50px; right:0; min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px; color:var(--text);
  background:var(--menu); border:1px solid var(--glassLine); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); animation:s5_menuIn .22s ease both}
@keyframes s5_menuIn{from{opacity:0; transform:translateY(-6px)}}
.lang-item{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer}
.lang-item:hover{background:var(--menuHover)}
.lang-item svg{width:16px; height:16px; color:var(--hl)}
.lang-code{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:600}
.burger{display:none}

.reveal{animation:s5_fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}
@keyframes s5_fadeUp{from{opacity:0; transform:translateY(24px); filter:blur(6px)}}
.eyebrow{margin:0 0 clamp(10px, 1.8vh, 18px); font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--hl)}
.h2{margin:0 0 clamp(8px, 1.4vh, 14px); font-size:clamp(30px, min(2.8vw, 5.4vh), 54px); line-height:1.06; font-weight:300; letter-spacing:-.03em}
.h2 .hl{color:var(--hl); font-weight:400}
.p{margin:0; max-width:620px; font-size:clamp(14px, 1.9vh, 17px); line-height:1.55; color:var(--muted)}
.orb-c{position:absolute; inset:0; width:100%; height:100%; display:block}
.ico-t{position:relative; display:flex; align-items:center; justify-content:center; flex:none; border-radius:12px; color:#FFFFFF;
  background:linear-gradient(145deg, var(--tileB), var(--tileA) 70%); box-shadow:0 10px 20px -10px var(--tileA), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -4px 8px rgba(10,30,120,.35)}
.ico-t svg{width:55%; height:55%}
.ico-t .ic{fill:none; stroke:#FFFFFF; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.chev{display:flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--chev); border:1px solid var(--glassLine); color:var(--hl); transition:transform .3s, background-color .3s, color .3s}
.chev svg{width:14px; height:14px}
@media (max-width: 1200px){ .nav a.link{padding:0 9px} .nav-in,.wrap{padding-left:32px; padding-right:32px} }
@media (max-width: 960px){
  .nav-links,.nav .search{display:none}
  .burger{display:flex}
  .nav{height:64px}
  .nav-in{grid-template-columns:auto 1fr; padding:0 16px}
  :scope{height:auto; min-height:100vh}
}
@media (prefers-reduced-motion: reduce){ :scope *, :scope *::before, :scope *::after{animation:none !important; transition:none !important} }

/* ===== bento: header row, then a 6×2 grid — selected-module card 2×2 + 7 module tiles + CTA ===== */
.wrap{position:relative; z-index:5; box-sizing:border-box; height:100%; max-width:1680px; margin:0 auto; padding:120px 56px 134px; display:flex; flex-direction:column}
.head{display:block}
.head .p{max-width:980px}
.bento{flex:1; min-height:0; margin-top:clamp(16px, 2.8vh, 30px); display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); gap:clamp(10px, 1.4vh, 14px)}

/* status pills */
.st{display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  color:var(--stC); background:var(--stBg); border:1px solid var(--stLine)}
.st::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--stC); box-shadow:0 0 8px var(--stC)}
.st.ready{--stC:var(--ready); --stBg:var(--readyBg); --stLine:var(--readyLine)}
.st.test{--stC:var(--testC); --stBg:var(--testBg); --stLine:var(--testLine)}
.st.dev{--stC:var(--devC); --stBg:var(--devBg); --stLine:var(--devLine)}
.st.ready::before{animation:s5_blink 1.8s ease-in-out infinite}
@keyframes s5_blink{0%,100%{opacity:.45} 50%{opacity:1}}

/* selected module card */
.feat{grid-column:1 / 3; grid-row:1 / 3; position:relative; min-height:0; display:flex; flex-direction:column; border-radius:26px; overflow:hidden; isolation:isolate;
  background:linear-gradient(170deg, var(--glassHi), transparent 40%), var(--panel); border:1px solid var(--glassLine)}
.panes{position:relative; flex:1; min-height:0}
.fp{position:absolute; inset:0; display:none; flex-direction:column}
.fp.on{display:flex}
.photo{position:relative; flex:0 0 50%; min-height:0; overflow:hidden; background:radial-gradient(70% 80% at 50% 60%, var(--orbBg), transparent 80%)}
.ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.07); transition:opacity .8s ease, transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ph.on{opacity:1; transform:scale(1)}
/* Снимок интерфейса, а не фотография: его нельзя обрезать по краям, иначе от мнемосхемы
   останется кусок без начала и конца. Поэтому вписываем целиком, а поля закрываем цветом
   самого интерфейса. */
.ph.shot{object-fit:contain; background:#0E1626}
.photo::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, var(--panelSolid) 100%); pointer-events:none}
.photo .st{position:absolute; z-index:2; left:16px; top:16px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.fp-b{flex:1; min-height:0; display:flex; flex-direction:column; gap:clamp(8px, 1.3vh, 13px); padding:clamp(8px, 1.3vh, 12px) clamp(18px, 1.6vw, 26px) clamp(14px, 2.2vh, 22px); animation:s5_fpIn .45s cubic-bezier(.2,.7,.2,1) .06s both}
@keyframes s5_fpIn{from{opacity:0; transform:translateY(12px)}}
.fp-h{position:absolute; z-index:2; left:clamp(18px, 1.6vw, 26px); right:18px; bottom:clamp(8px, 1.4vh, 14px); display:flex; align-items:center; gap:14px;
  opacity:0; transform:translateY(10px); transition:opacity .6s, transform .7s cubic-bezier(.2,.7,.2,1)}
.fp-h.on{opacity:1; transform:none}
.fp-h .ico-t{width:clamp(38px, 5.4vh, 48px); height:clamp(38px, 5.4vh, 48px); border-radius:13px}
.fp-h b{display:block; height:clamp(22px, 3.4vh, 30px); filter:drop-shadow(0 2px 12px rgba(0,0,0,.45))}
:scope.light .fp-h b{filter:none}
.fp-h span{display:block; margin-top:5px; font-size:clamp(10.5px, 1.4vh, 12px); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hl)}
.fp-d{margin:0; font-size:clamp(12.5px, 1.65vh, 14.5px); line-height:1.45; color:var(--text); opacity:.88}
.feats{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(5px, .9vh, 9px) 14px}
.feats li{display:flex; align-items:center; gap:8px; min-width:0; font-size:clamp(12px, 1.6vh, 13.5px); font-weight:500; line-height:1.25}
.feats li i{display:flex; align-items:center; justify-content:center; flex:none; width:16px; height:16px; border-radius:50%; background:var(--trC); box-shadow:0 0 10px -2px var(--trC)}
.feats li svg{width:10px; height:10px}
.feats li path{fill:none; stroke:#FFFFFF; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round}
.track{margin-top:auto; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.tr{display:flex; flex-direction:column; gap:7px; font-size:11.5px; font-weight:600; color:var(--muted)}
.tr i{display:block; height:4px; border-radius:4px; background:var(--line); overflow:hidden; position:relative}
.tr.done i{background:var(--trC)}
.tr.cur{color:var(--text)}
.tr.cur i::after{content:''; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation:s5_trRun 2.2s ease-in-out infinite}
@keyframes s5_trRun{from{left:-40%} to{left:100%}}
.feat.ready{--trC:var(--ready)}.feat.test{--trC:var(--testC)}.feat.dev{--trC:var(--devC)}

/* module tiles */
.tm{position:relative; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:clamp(5px, .9vh, 9px); box-sizing:border-box; padding:clamp(14px, 2.2vh, 22px);
  border-radius:22px; text-decoration:none; color:var(--text); cursor:pointer;
  background:linear-gradient(160deg, var(--glassHi), transparent 55%), var(--glass); border:1px solid var(--glassLine);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s, background-color .4s; animation:s5_tmIn .59s cubic-bezier(.2,.7,.2,1) both}
@keyframes s5_tmIn{from{opacity:0; transform:translateY(18px) scale(.98)}}
.tm:hover{transform:translateY(-4px); color:var(--text)}
.tm.on{border-color:var(--accent2); box-shadow:0 30px 60px -36px var(--pkGlow), inset 0 0 0 1px var(--accent2); background:linear-gradient(160deg, var(--rowHi), transparent 60%), var(--glass)}
.tm-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.tm .ico-t{width:clamp(34px, 5vh, 44px); height:clamp(34px, 5vh, 44px)}
.tm .st{height:22px; padding:0 8px; font-size:10.5px}
.tm .code{display:flex; align-items:center; height:clamp(16px, 2.3vh, 22px); margin-top:clamp(6px, 1.4vh, 14px)}
.wmk{display:block; height:100%; width:auto; fill:currentColor; overflow:visible}
:scope.light .wmk{color:#1D2EA0}
.tm.cta .code{height:auto; margin-top:auto}
.tm .full{font-size:clamp(10px, 1.35vh, 11.5px); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hl)}
.tm .desc{font-size:clamp(12.5px, 1.65vh, 14px); line-height:1.4; color:var(--muted)}
.tm .prog{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent2); box-shadow:0 0 10px var(--accent2); transform-origin:left; transform:scaleX(0); opacity:0}
.tm.on .prog{opacity:1; animation:s5_prog 7s linear forwards}
.bento:hover .tm.on .prog{animation-play-state:paused}
@keyframes s5_prog{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.tm.cta{background:linear-gradient(150deg, var(--accent), var(--tileA)); border-color:transparent; color:#FFFFFF}
.tm.cta .code{font-family:'Manrope', sans-serif; letter-spacing:0; font-size:clamp(16px, 2.2vh, 20px); line-height:1.25; color:#FFFFFF}
.tm.cta .desc{color:rgba(255,255,255,.82)}
.tm.cta .chev{position:absolute; right:18px; top:18px; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:#FFFFFF}
.tm.cta:hover .chev{transform:translateX(3px)}
@media (max-width: 1200px){ .bento{grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:none; grid-auto-rows:minmax(160px, 1fr)} .feat{grid-row:1 / 3} }
@media (max-width: 960px){
  .wrap{height:auto; padding:104px 16px 96px}
  .head{grid-template-columns:1fr; row-gap:12px}
  .bento{grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:minmax(170px, auto)}
  .feat{grid-column:1 / -1; grid-row:auto; height:560px}
}


/* ===== animated background wave (same field of dots as on the Hero) ===== */
.bgwave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:.6}
:scope.light .bgwave{opacity:.5}
.bgwave-v{position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--bgFade, rgba(4,6,12,.55)) 0%, transparent 34%, transparent 70%, var(--bgFade, rgba(4,6,12,.4)) 100%)}
:scope.light .bgwave-v{--bgFade:rgba(238,242,248,.55)}
/* ===== slide navigator (shared) ===== */
.steps{--stepOn:#5CE1FF; --stepsBg:rgba(4,6,12,.86); position:absolute; z-index:25; left:0; right:0; bottom:0; padding:22px 0 20px; background:linear-gradient(0deg, var(--stepsBg) 35%, transparent); pointer-events:none}
:scope.light .steps{--stepOn:#1D4ED8; --stepsBg:rgba(238,242,248,.92)}
.steps-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:22px; pointer-events:auto}
.step{position:relative; display:flex; flex-direction:column; gap:14px; min-height:44px; padding-top:4px; text-decoration:none; color:var(--muted); transition:color .25s}
.step .sbar{position:relative; display:block; height:2px; border-radius:2px; background:var(--line)}
.step .sbar::before{content:''; position:absolute; z-index:1; left:-2px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; transition:background-color .25s, opacity .25s}
.step .sbar i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--stepOn); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .25s}
.step.past .sbar i{width:100%; opacity:.35}
.step.past .sbar::before{background:var(--stepOn); opacity:.5}
.step.cur .sbar i{width:100%; box-shadow:0 0 12px var(--stepOn); animation:s5_stepFill 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
.step.cur .sbar::before{background:var(--stepOn); opacity:1; box-shadow:0 0 10px var(--stepOn)}
.step.cur .sbar::after{content:''; position:absolute; right:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--stepOn); box-shadow:0 0 12px var(--stepOn); animation:s5_stepEnd 2.4s ease-in-out 1.9s infinite; opacity:0}
.step .slbl{display:flex; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step .snum{color:var(--stepOn); opacity:.75; font-variant-numeric:tabular-nums}
.step.cur{color:var(--text)}
.step.cur .snum{opacity:1}
.step:hover{color:var(--text)}
.step:hover .sbar i{width:100%; opacity:.75}
.step:focus-visible{outline:2px solid var(--stepOn); outline-offset:6px; border-radius:4px}
@keyframes s5_stepFill{from{width:0}}
@keyframes s5_stepEnd{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.2)}}
@media (max-width: 1200px){ .steps-in{padding:0 32px; gap:14px} .step .slbl{font-size:11px; gap:8px} }
@media (max-width: 960px){ .steps{position:fixed} .steps-in{padding:0 16px; gap:6px} .step .stxt{display:none} }
/* embedded in the one-page site */
:scope.emb > .nav, :scope.emb > .steps{display:none}
}
/* ===== css/s6.css ===== */
/* IOTICS - slide 06-clients.
   Ported from design-source/06-clients.dc.html.
   Keyframe names are namespaced with the `s6` prefix so all slides can share one document. */

@scope (.s6) {

/* ================= tokens ================= */
:scope{
  --bg:#04060C; --bg2:#0B1730;
  --text:#F2F5FA; --muted:#A3ACBD; --faint:rgba(242,245,250,.10); --line:rgba(242,245,250,.10); --navText:#E6EAF2;
  --hl:#86B4FF; --accent:#5E9BFF; --accent2:#A8E6FF;
  --glass:rgba(16,24,44,.50); --glassLine:rgba(170,200,255,.16); --glassHi:rgba(255,255,255,.06);
  --menu:rgba(12,18,34,.94); --menuHover:rgba(134,180,255,.12);
  --tile:rgba(16,24,44,.46); --tileOn:rgba(246,248,252,.96); --ring:rgba(130,170,255,.32); --ped:rgba(80,140,255,.55);
  position:relative; height:100vh; min-height:620px; overflow:hidden; isolation:isolate;
  background:radial-gradient(45% 55% at 22% 62%, var(--bg2) 0%, transparent 72%), radial-gradient(40% 40% at 75% 55%, rgba(30,50,120,.25) 0%, transparent 70%), var(--bg);
  color:var(--text);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:scope.light{
  --bg:#EEF2F8; --bg2:#FFFFFF;
  --text:#0A1222; --muted:#4A5468; --faint:rgba(10,18,34,.08); --line:rgba(10,18,34,.10); --navText:#1A2335;
  --hl:#1D4ED8; --accent:#1D4ED8; --accent2:#2563EB;
  --glass:rgba(255,255,255,.62); --glassLine:rgba(30,60,140,.12); --glassHi:rgba(255,255,255,.75);
  --menu:rgba(255,255,255,.95); --menuHover:rgba(29,78,216,.07);
  --tile:rgba(255,255,255,.62); --tileOn:#FFFFFF; --ring:rgba(40,80,190,.28); --ped:rgba(40,100,255,.45);
}

/* ===== daylight palette (light theme), richer ===== */
:scope.light{
  --bg:#EDF3FF; --bg2:#FFFFFF;
  --text:#0E1C45; --muted:#4E5C86; --faint:rgba(14,28,69,.07); --line:rgba(31,79,224,.12); --navText:#16265A;
  --hl:#1F4FE0; --accent:#1F4FE0; --accent2:#3D7BFF;
  --glass:rgba(255,255,255,.6); --glassLine:rgba(31,79,224,.2); --glassHi:rgba(255,255,255,.9);
  --menu:rgba(255,255,255,.97); --menuHover:rgba(31,79,224,.09);
  --vignette:#E9F0FF; --ring:rgba(31,79,224,.3); --net:rgba(31,79,224,.5); --wire:rgba(31,79,224,.34);
  --pk:#2F6BFF; --pkGlow:rgba(47,107,255,.55); --pin:#1F4FE0; --pinGlow:rgba(31,79,224,.45);
  --tileA:#2552E8; --tileB:#9FC6FF; --chev:rgba(31,79,224,.1); --rowHi:rgba(31,79,224,.09);
  --panel:rgba(255,255,255,.55); --panelSolid:#EEF4FF; --orbBg:rgba(120,165,255,.42);
  --good:#1F4FE0; --goodSoft:rgba(31,79,224,.12); --goodGlow:rgba(47,107,255,.45);
  --cardBad:rgba(255,241,243,.94); --cardBadLine:rgba(225,55,75,.32); --cardBadText:#0E1C45; --cardBadMuted:#4E5C86;
  --cardGood:rgba(255,255,255,.84); --cardGoodLine:rgba(31,79,224,.26); --cardGoodText:#0E1C45; --cardGoodMuted:#3F4D78;
  --field:rgba(255,255,255,.8); --fieldLine:rgba(31,79,224,.22); --fieldFocus:rgba(31,79,224,.1);
  --chip:rgba(255,255,255,.78); --chipOn:rgba(31,79,224,.14);
  --btn:#1F4FE0; --btnHover:#1840C0; --btnGlow:rgba(31,79,224,.45); --btnText:#FFFFFF;
  background:
    radial-gradient(50% 45% at 92% 2%, rgba(120,165,255,.75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95,200,255,.5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175,155,255,.32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255,255,255,.9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
}
:scope.light .steps{--stepOn:#1F4FE0; --stepsBg:rgba(236,242,255,.9)}
:scope.light .bgwave{opacity:.6}
:scope.light .wave{opacity:1}
:scope.light .bgwave-v{--bgFade:rgba(236,242,255,.5)}
.dots{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--faint) 1.2px, transparent 1.6px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 40% 50% at 25% 65%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 40% 50% at 25% 65%, #000 20%, transparent 75%)}

/* ================= nav (shared) ================= */
.nav{position:absolute; top:0; left:0; right:0; z-index:30; height:72px; border-bottom:1px solid var(--line)}
.nav-in{height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav a.link{position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:13px; font-weight:400; letter-spacing:.02em; text-decoration:none; color:var(--navText); opacity:.78; transition:opacity .2s}
.nav a.link::after{content:''; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--hl); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a.link:hover{opacity:1; color:var(--navText)}
.nav a.link:hover::after{transform:scaleX(1)}
.logo{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:var(--text); text-decoration:none}
.logo .lgx{color:var(--text)}
:scope.light .logo .lgx{color:#2645A1}
.logo::before{content:''; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--glassLine); background:var(--glass)}
.logo::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s6_spin 6s linear infinite; opacity:.8}
@keyframes s6_spin{to{transform:rotate(360deg)}}
.logo svg{position:relative; width:22px; height:22px}
.logo{margin-right:100px}
.logo svg.wm{position:absolute; left:calc(100% + 12px); top:50%; width:88px; height:14px; margin-top:-7px; color:var(--text)}
:scope.light .logo svg.wm{color:#2645A1}
.lg-arc,.lg-stem{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}
.lg-dot{fill:currentColor}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.ibtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--navText); cursor:pointer; border-radius:50%; transition:background-color .2s}
.ibtn:hover{background:var(--faint)}
.ibtn svg{width:18px; height:18px}
.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; margin:0 4px; background:var(--glass); border:1px solid var(--glassLine); color:var(--navText); font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:999px}
.lang-btn:hover{border-color:var(--hl)}
.lang-btn svg{width:15px; height:15px}
.lang-menu{position:absolute; top:50px; right:0; min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px; color:var(--text);
  background:var(--menu); border:1px solid var(--glassLine); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); animation:s6_menuIn .22s ease both}
@keyframes s6_menuIn{from{opacity:0; transform:translateY(-6px)}}
.lang-item{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer}
.lang-item:hover{background:var(--menuHover)}
.lang-item svg{width:16px; height:16px; color:var(--hl)}
.lang-code{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:600}
.burger{display:none}

/* ================= layout ================= */
.wrap{position:relative; z-index:5; box-sizing:border-box; height:100%; max-width:1680px; margin:0 auto; padding:120px 56px 134px; display:flex; flex-direction:column}
.eyebrow{margin:0 0 clamp(10px, 1.8vh, 18px); font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--hl)}
.h2{margin:0; font-size:clamp(30px, min(2.8vw, 5.4vh), 54px); line-height:1.06; font-weight:300; letter-spacing:-.03em}
.h2 .hl{color:var(--hl); font-weight:400}
.reveal{animation:s6_fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}
@keyframes s6_fadeUp{from{opacity:0; transform:translateY(24px); filter:blur(6px)}}
/* Колонки тянутся на всю высоту слайда: карточка проекта справа занимает её целиком,
   поэтому в ней хватает места на фотографии. Глобус внутри своей колонки центрируется сам. */
/* Три колонки: глобус, логотипы, карточка проекта. Счётчики стоят во второй строке под
   глобусом и логотипами, а карточка тянется через обе строки — так она идёт во всю высоту
   слайда и счётчики её не задевают.
   Высота первой строки задана явно (minmax(0,1fr)): иначе она растёт под содержимое, а сетка
   логотипов внутри ждёт высоту от неё — и обе стороны считают высоту друг по другу. */
.content{flex:1; min-height:0; margin-top:clamp(12px, 2.2vh, 28px); display:grid;
  grid-template-columns:minmax(0, 380px) minmax(0, 1fr) minmax(0, 560px);
  grid-template-rows:minmax(0, 1fr) auto;
  column-gap:clamp(18px, 1.8vw, 36px); row-gap:clamp(10px, 1.6vh, 20px); align-items:stretch}
.content > .left{grid-column:1; grid-row:1}
.content > .lgcol{grid-column:2; grid-row:1}
.content > .case{grid-column:3; grid-row:1 / span 2}
.content > .stats{grid-column:1 / span 2; grid-row:2; align-self:end}

/* ================= globe ================= */
.left{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0}
.big{display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:6px}
.big-n{font-size:clamp(48px, 7.4vh, 80px); font-weight:200; line-height:1; letter-spacing:-.04em; color:var(--hl); font-variant-numeric:tabular-nums}
.big-n sup{font-size:.5em; font-weight:300; margin-left:4px; vertical-align:.7em}
.big-l{font-size:clamp(15px, 2vh, 18px); font-weight:500; letter-spacing:.04em; color:var(--text)}
.globe{position:relative; width:min(560px, 100%, calc((100vh - 420px) * .93)); aspect-ratio:1/1.08}
.halo{position:absolute; left:8%; top:4%; width:84%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, var(--ped), transparent 75%); filter:blur(30px); opacity:.55; animation:s6_breathe 6s ease-in-out infinite}
@keyframes s6_breathe{0%,100%{opacity:.4; transform:scale(.96)} 50%{opacity:.7; transform:scale(1.04)}}
.cv{position:absolute; left:0; top:0; width:100%; aspect-ratio:1; display:block}
.orbits{position:absolute; left:0; top:0; width:100%; aspect-ratio:1; overflow:visible; pointer-events:none}
.ob{fill:none; stroke:var(--ring); stroke-width:1}
.ob-d{fill:none; stroke:var(--accent2); stroke-width:3; stroke-linecap:round; stroke-dasharray:.1 49.9; filter:drop-shadow(0 0 4px var(--accent2)); animation:s6_obRun 9s linear infinite}
.ob-d.b{animation-duration:13s; animation-direction:reverse; stroke-dasharray:.1 33.2}
.ob-arc{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:14 86; animation:s6_obRun 16s linear infinite}
@keyframes s6_obRun{to{stroke-dashoffset:-100}}
.ped{position:absolute; left:14%; width:72%; border-radius:50%}
.ped.p1{top:79%; height:16%; background:radial-gradient(closest-side, var(--ped), transparent 80%); filter:blur(8px)}
.ped.p2{top:83%; height:12%; border:1px solid var(--ring); box-shadow:0 0 24px -4px var(--ped), inset 0 0 18px -6px var(--ped)}
.ped.p3{top:86.5%; left:24%; width:52%; height:7%; border:2px solid var(--accent2); opacity:.55; filter:drop-shadow(0 0 6px var(--accent2)); animation:s6_pedPulse 3s ease-in-out infinite}
@keyframes s6_pedPulse{0%,100%{opacity:.35} 50%{opacity:.8}}
.ped.p4{top:84%; height:12%; border:1px dashed var(--ring); animation:s6_pedWave 3s ease-out infinite; opacity:0}
@keyframes s6_pedWave{0%{transform:scale(.7); opacity:.8} 100%{transform:scale(1.25); opacity:0}}

/* ================= logos ================= */
.lgcol{min-width:0; min-height:0; display:flex; flex-direction:column}
/* Строки делят высоту колонки между собой: девять плиток страницы занимают её целиком,
   поэтому пустого места под ними не остаётся. */
/* Потолок у строки нужен, чтобы плитка не вытягивалась в столбик: логотипы — широкие
   надписи, и в высокой клетке над ними и под ними оставалось бы пустое поле. Запас по высоте
   (на экране повыше) расходится поровну сверху и снизу, align-content: center. */
.grid{flex:1; min-height:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:minmax(0, 132px); align-content:center; gap:clamp(7px, 1.1vh, 12px)}
/* плитки чужих страниц не рисуем: листание — это их подмена, а не прокрутка */
.tile.off{display:none}
.tile{position:relative; min-height:0; display:flex; align-items:center; justify-content:center; border-radius:18px; box-sizing:border-box; overflow:hidden; cursor:pointer;
  background:var(--tile); border:1px solid var(--glassLine); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background-color .4s, border-color .4s, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s}
.ga .tile{animation:s6_tileInA .45s cubic-bezier(.2,.7,.2,1) both}
.gb .tile{animation:s6_tileInB .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes s6_tileInA{from{opacity:0; transform:translateY(16px) scale(.97)}}
@keyframes s6_tileInB{from{opacity:0; transform:translateY(16px) scale(.97)}}
.tile:not(.more){background:#fff; overflow:visible; --logo-shadow:0 0 0 1px var(--hl), 0 4px 16px var(--ped)}
.tile img{position:relative; display:block; max-width:78%; max-height:58%; height:auto; object-fit:contain}
.spot{position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:var(--logo-shadow); opacity:0; animation:s6_spotShadow 24s ease-in-out infinite}
.tile:is(:hover,:focus-visible,.on) .spot{animation:none; opacity:1}
@keyframes s6_spotShadow{0%,6.5%,100%{opacity:0} 1.2%,5.3%{opacity:1}}
@media (prefers-reduced-motion:reduce){.spot{animation:none}}
/* Последняя клетка: список клиентов на ней заканчивается. Она занимает всю нижнюю строку —
   на второй странице шесть логотипов и она дают ровно девять клеток, без дыр. */
.tile.more{grid-column:1 / -1; cursor:default; background:none; border-style:dashed}
.tile.more:hover{transform:none; background:none; border-color:var(--glassLine); box-shadow:none}
.tile.more span{padding:0 12px; text-align:center; font-size:13px; line-height:1.35; color:var(--muted)}

/* листание сетки */
.navc{flex:none; margin-top:clamp(8px, 1.2vh, 14px); display:flex; align-items:center; justify-content:space-between; gap:10px}
.arr{flex:none; width:clamp(34px, 4.4vh, 42px); height:clamp(34px, 4.4vh, 42px); display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; color:var(--hl);
  background:var(--glass); border:1px solid var(--glassLine); transition:transform .25s, border-color .25s, background-color .25s}
.arr:hover{border-color:var(--hl); transform:scale(1.06)}
.arr svg{width:18px; height:18px}
.hintl{flex:1; min-width:0; text-align:center; font-size:12px; line-height:1.3; color:var(--muted)}

/* ================= проект выбранного клиента ================= */
.case{min-width:0; display:flex; flex-direction:column; padding:clamp(18px, 2.6vh, 28px) clamp(20px, 2vw, 30px); border-radius:22px; box-sizing:border-box;
  background:var(--glass); border:1px solid var(--glassLine); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
/* два имени анимации по очереди: иначе при смене клиента появление не перезапускалось бы */
.ca{animation:s6_caseInA .4s cubic-bezier(.2,.7,.2,1) both}
.cb{animation:s6_caseInB .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes s6_caseInA{from{opacity:0; transform:translateY(10px)}}
@keyframes s6_caseInB{from{opacity:0; transform:translateY(10px)}}
.case-top{display:flex; align-items:center; gap:14px}
.case-lg{flex:none; width:clamp(64px, 7vw, 92px); height:clamp(44px, 5vh, 58px); display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--tileOn); border:1px solid var(--glassLine); overflow:hidden}
.case-lg img{display:block; max-width:80%; max-height:62%; object-fit:contain}
.case-id{display:flex; flex-direction:column; gap:2px; min-width:0}
.case-id b{font-size:clamp(16px, 2.2vh, 20px); font-weight:600; letter-spacing:-.01em}
.case-id i{font-size:13px; font-style:normal; color:var(--muted)}
.case-k{margin:clamp(14px, 2.2vh, 22px) 0 6px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--hl)}
.case-t{margin:0; font-size:clamp(17px, 2.5vh, 23px); line-height:1.25; font-weight:500; letter-spacing:-.02em}
.case-p{margin:10px 0 0; font-size:clamp(13px, 1.7vh, 15px); line-height:1.6; color:var(--muted)}
.case-mods{padding-top:clamp(12px, 2vh, 18px); display:flex; flex-wrap:wrap; gap:8px}
.case-mod{padding:5px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--hl); background:var(--faint); border:1px solid var(--glassLine)}

/* ---- фотографии проекта ----
   Лента занимает всё, что осталось в карточке по высоте. Снимки прокручиваются вбок:
   пальцем, боковым жестом тачпада и стрелками. Вертикальную прокрутку здесь делать нельзя —
   её перехватывает лента слайдов (js/app.js). */
.case-ph{position:relative; flex:1; min-height:110px; margin-top:clamp(12px, 2vh, 18px)}
.ph-strip{position:absolute; inset:0; display:flex; gap:10px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.ph-strip::-webkit-scrollbar{display:none}
.ph{position:relative; flex:0 0 72%; margin:0; scroll-snap-align:start; border-radius:16px; overflow:hidden;
  border:1px solid var(--glassLine); background:var(--tile)}
.ph img{display:block; width:100%; height:100%; object-fit:cover}
.ph figcaption{position:absolute; left:10px; right:10px; bottom:10px; padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:600; color:#FFFFFF; background:rgba(6,12,26,.66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ph-arr{position:absolute; top:50%; z-index:2; margin-top:-17px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; color:var(--text); background:var(--menu); border:1px solid var(--glassLine);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6); opacity:.9; transition:opacity .2s, transform .2s}
.ph-arr:hover{opacity:1; transform:scale(1.06)}
.ph-arr svg{width:17px; height:17px}
.ph-arr.l{left:8px}
.ph-arr.r{right:8px}

/* Счётчики. Они стоят под глобусом и логотипами, то есть в колонке вдвое уже прежней,
   поэтому число и подпись идут в одну строку, а пояснение — под ними. */
.stats{min-width:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0}
.stat{min-width:0; display:grid; grid-template-columns:auto auto minmax(0, 1fr); column-gap:9px; row-gap:1px; align-items:baseline; padding:0 16px; border-left:1px solid var(--line)}
.stat:first-child{border-left:0; padding-left:0}
.st-ic{grid-row:span 2; align-self:center; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--glassLine); background:var(--glass); color:var(--hl)}
.st-ic svg{width:17px; height:17px}
.st-n{font-size:clamp(22px, 3.2vh, 30px); font-weight:300; line-height:1.1; letter-spacing:-.03em; color:var(--hl); font-variant-numeric:tabular-nums; white-space:nowrap}
/* «Доверие» — слово, а не число: ему и меньше кегль, и перенос не нужен */
.st-n.tx{grid-column:2 / span 2; font-size:clamp(17px, 2.3vh, 22px); font-weight:400; color:var(--text)}
.st-l{font-size:13px; font-weight:600}
.st-d{grid-column:2 / span 2; font-size:12px; color:var(--muted); line-height:1.4}

.pager{position:absolute; z-index:8; right:56px; bottom:32px; display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.12em}
.pager .now{color:var(--text)}
.pager .track{position:relative; width:120px; height:1px; background:var(--line); overflow:hidden}
.pager .fill{position:absolute; left:0; top:0; height:100%; width:100%; background:var(--hl); box-shadow:0 0 8px var(--hl)}

@media (max-width: 1400px){ .content{grid-template-columns:minmax(0, 320px) minmax(0, 1fr) minmax(0, 460px); column-gap:20px} .stat{padding:0 12px} }
@media (max-width: 1200px){
  .nav a.link{padding:0 9px}
  .nav-in,.wrap{padding-left:32px; padding-right:32px}
  /* узко для трёх колонок: глобус, логотипы, карточка и счётчики идут друг под другом */
  .content{grid-template-columns:1fr; grid-template-rows:auto}
  .content > .left,.content > .lgcol,.content > .case,.content > .stats{grid-column:1; grid-row:auto}
  .globe{width:min(440px, 100%)}
}
@media (max-width: 960px){
  .nav-links,.nav .search{display:none}
  .burger{display:flex}
  .nav{height:64px}
  .nav-in{grid-template-columns:auto 1fr; padding:0 16px}
  :scope{height:auto; min-height:100vh}
  .wrap{height:auto; padding:104px 16px 72px}
  .globe{width:min(440px, 100%)}
  /* на телефоне всё идёт в одну колонку, высоту плиткам задаём сами */
  .grid{flex:none; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:auto; align-content:start; gap:10px}
  /* девять плиток в две колонки: последняя занимает строку целиком, иначе рядом с ней
     осталась бы пустая клетка */
  .tile.wide{grid-column:1 / -1}
  .tile{height:88px; border-radius:16px}
  .case{padding:20px 18px; border-radius:18px}
  /* на телефоне высоту карточки задаёт содержимое, поэтому ленте нужен свой рост */
  .case-ph{flex:none; height:190px}
  .ph{flex-basis:82%}
  .stats{grid-template-columns:1fr; gap:20px}
  .stat{border-left:0; padding:0}
  .pager{display:none}
}
@media (prefers-reduced-motion: reduce){ :scope *, :scope *::before, :scope *::after{animation:none !important; transition:none !important} }

/* ===== animated background wave (same field of dots as on the Hero) ===== */
.bgwave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:.6}
:scope.light .bgwave{opacity:.5}
.bgwave-v{position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--bgFade, rgba(4,6,12,.55)) 0%, transparent 34%, transparent 70%, var(--bgFade, rgba(4,6,12,.4)) 100%)}
:scope.light .bgwave-v{--bgFade:rgba(238,242,248,.55)}
/* ===== slide navigator (shared) ===== */
.steps{--stepOn:#5CE1FF; --stepsBg:rgba(4,6,12,.86); position:absolute; z-index:25; left:0; right:0; bottom:0; padding:22px 0 20px; background:linear-gradient(0deg, var(--stepsBg) 35%, transparent); pointer-events:none}
:scope.light .steps{--stepOn:#1D4ED8; --stepsBg:rgba(238,242,248,.92)}
.steps-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:22px; pointer-events:auto}
.step{position:relative; display:flex; flex-direction:column; gap:14px; min-height:44px; padding-top:4px; text-decoration:none; color:var(--muted); transition:color .25s}
.step .sbar{position:relative; display:block; height:2px; border-radius:2px; background:var(--line)}
.step .sbar::before{content:''; position:absolute; z-index:1; left:-2px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; transition:background-color .25s, opacity .25s}
.step .sbar i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--stepOn); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .25s}
.step.past .sbar i{width:100%; opacity:.35}
.step.past .sbar::before{background:var(--stepOn); opacity:.5}
.step.cur .sbar i{width:100%; box-shadow:0 0 12px var(--stepOn); animation:s6_stepFill 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
.step.cur .sbar::before{background:var(--stepOn); opacity:1; box-shadow:0 0 10px var(--stepOn)}
.step.cur .sbar::after{content:''; position:absolute; right:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--stepOn); box-shadow:0 0 12px var(--stepOn); animation:s6_stepEnd 2.4s ease-in-out 1.9s infinite; opacity:0}
.step .slbl{display:flex; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step .snum{color:var(--stepOn); opacity:.75; font-variant-numeric:tabular-nums}
.step.cur{color:var(--text)}
.step.cur .snum{opacity:1}
.step:hover{color:var(--text)}
.step:hover .sbar i{width:100%; opacity:.75}
.step:focus-visible{outline:2px solid var(--stepOn); outline-offset:6px; border-radius:4px}
@keyframes s6_stepFill{from{width:0}}
@keyframes s6_stepEnd{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.2)}}
@media (max-width: 1200px){ .steps-in{padding:0 32px; gap:14px} .step .slbl{font-size:11px; gap:8px} }
@media (max-width: 960px){ .steps{position:fixed} .steps-in{padding:0 16px; gap:6px} .step .stxt{display:none} }
/* embedded in the one-page site */
:scope.emb > .nav, :scope.emb > .steps{display:none}
}
/* ===== css/s7.css ===== */
/* IOTICS - slide 07-request.
   Ported from design-source/07-request.dc.html.
   Keyframe names are namespaced with the `s7` prefix so all slides can share one document. */

@scope (.s7) {

/* ================= tokens ================= */
:scope{
  --bg:#04060C; --bg2:#0B1730;
  --text:#F2F5FA; --muted:#A3ACBD; --faint:rgba(242,245,250,.10); --line:rgba(242,245,250,.10); --navText:#E6EAF2;
  --hl:#86B4FF; --accent:#5E9BFF; --accent2:#A8E6FF; --err:#FF8A8A;
  --glass:rgba(14,22,42,.62); --glassLine:rgba(170,200,255,.16); --glassHi:rgba(255,255,255,.05);
  --menu:rgba(12,18,34,.94); --menuHover:rgba(134,180,255,.12);
  --field:rgba(255,255,255,.035); --fieldLine:rgba(170,200,255,.20); --fieldFocus:rgba(94,155,255,.14);
  --chip:rgba(255,255,255,.04); --chipOn:rgba(94,155,255,.22);
  --btn:#2F6BFF; --btnHover:#4A80FF; --btnGlow:rgba(60,120,255,.55);
  --vignette:#04060C;
  position:relative; height:100vh; min-height:620px; overflow:hidden; isolation:isolate;
  background:radial-gradient(70% 60% at 50% 100%, var(--bg2) 0%, transparent 70%), var(--bg);
  color:var(--text);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:scope.light{
  --bg:#EEF2F8; --bg2:#FFFFFF;
  --text:#0A1222; --muted:#4A5468; --faint:rgba(10,18,34,.08); --line:rgba(10,18,34,.10); --navText:#1A2335;
  --hl:#1D4ED8; --accent:#1D4ED8; --accent2:#2563EB; --err:#B42318;
  --glass:rgba(255,255,255,.70); --glassLine:rgba(30,60,140,.12); --glassHi:rgba(255,255,255,.8);
  --menu:rgba(255,255,255,.95); --menuHover:rgba(29,78,216,.07);
  --field:rgba(255,255,255,.75); --fieldLine:rgba(30,60,140,.18); --fieldFocus:rgba(29,78,216,.08);
  --chip:rgba(255,255,255,.7); --chipOn:rgba(29,78,216,.12);
  --btn:#0032A1; --btnHover:#0A43C9; --btnGlow:rgba(0,50,161,.4);
  --vignette:#EEF2F8;
}

/* ===== daylight palette (light theme), richer ===== */
:scope.light{
  --bg:#EDF3FF; --bg2:#FFFFFF;
  --text:#0E1C45; --muted:#4E5C86; --faint:rgba(14,28,69,.07); --line:rgba(31,79,224,.12); --navText:#16265A;
  --hl:#1F4FE0; --accent:#1F4FE0; --accent2:#3D7BFF;
  --glass:rgba(255,255,255,.6); --glassLine:rgba(31,79,224,.2); --glassHi:rgba(255,255,255,.9);
  --menu:rgba(255,255,255,.97); --menuHover:rgba(31,79,224,.09);
  --vignette:#E9F0FF; --ring:rgba(31,79,224,.3); --net:rgba(31,79,224,.5); --wire:rgba(31,79,224,.34);
  --pk:#2F6BFF; --pkGlow:rgba(47,107,255,.55); --pin:#1F4FE0; --pinGlow:rgba(31,79,224,.45);
  --tileA:#2552E8; --tileB:#9FC6FF; --chev:rgba(31,79,224,.1); --rowHi:rgba(31,79,224,.09);
  --panel:rgba(255,255,255,.55); --panelSolid:#EEF4FF; --orbBg:rgba(120,165,255,.42);
  --good:#1F4FE0; --goodSoft:rgba(31,79,224,.12); --goodGlow:rgba(47,107,255,.45);
  --cardBad:rgba(255,241,243,.94); --cardBadLine:rgba(225,55,75,.32); --cardBadText:#0E1C45; --cardBadMuted:#4E5C86;
  --cardGood:rgba(255,255,255,.84); --cardGoodLine:rgba(31,79,224,.26); --cardGoodText:#0E1C45; --cardGoodMuted:#3F4D78;
  --field:rgba(255,255,255,.8); --fieldLine:rgba(31,79,224,.22); --fieldFocus:rgba(31,79,224,.1);
  --chip:rgba(255,255,255,.78); --chipOn:rgba(31,79,224,.14);
  --btn:#1F4FE0; --btnHover:#1840C0; --btnGlow:rgba(31,79,224,.45); --btnText:#FFFFFF;
  background:
    radial-gradient(50% 45% at 92% 2%, rgba(120,165,255,.75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95,200,255,.5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175,155,255,.32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255,255,255,.9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
}
:scope.light .steps{--stepOn:#1F4FE0; --stepsBg:rgba(236,242,255,.9)}
:scope.light .bgwave{opacity:.6}
:scope.light .wave{opacity:1}
:scope.light .bgwave-v{--bgFade:rgba(236,242,255,.5)}
.wave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none}
.vig{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, var(--vignette) 30%, transparent 75%)}

/* ================= nav (shared) ================= */
.nav{position:absolute; top:0; left:0; right:0; z-index:30; height:72px; border-bottom:1px solid var(--line)}
.nav-in{height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav a.link{position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:13px; font-weight:400; letter-spacing:.02em; text-decoration:none; color:var(--navText); opacity:.78; transition:opacity .2s}
.nav a.link::after{content:''; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--hl); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a.link:hover{opacity:1; color:var(--navText)}
.nav a.link:hover::after{transform:scaleX(1)}
.logo{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:var(--text); text-decoration:none}
.logo .lgx{color:var(--text)}
:scope.light .logo .lgx{color:#2645A1}
.logo::before{content:''; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--glassLine); background:var(--glass)}
.logo::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s7_spin 6s linear infinite; opacity:.8}
@keyframes s7_spin{to{transform:rotate(360deg)}}
.logo svg{position:relative; width:22px; height:22px}
.logo{margin-right:100px}
.logo svg.wm{position:absolute; left:calc(100% + 12px); top:50%; width:88px; height:14px; margin-top:-7px; color:var(--text)}
:scope.light .logo svg.wm{color:#2645A1}
.lg-arc,.lg-stem{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}
.lg-dot{fill:currentColor}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.ibtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--navText); cursor:pointer; border-radius:50%; transition:background-color .2s}
.ibtn:hover{background:var(--faint)}
.ibtn svg{width:18px; height:18px}
.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; margin:0 4px; background:var(--glass); border:1px solid var(--glassLine); color:var(--navText); font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:999px}
.lang-btn:hover{border-color:var(--hl)}
.lang-btn svg{width:15px; height:15px}
.lang-menu{position:absolute; top:50px; right:0; min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px; color:var(--text);
  background:var(--menu); border:1px solid var(--glassLine); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); animation:s7_menuIn .22s ease both}
@keyframes s7_menuIn{from{opacity:0; transform:translateY(-6px)}}
.lang-item{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer}
.lang-item:hover{background:var(--menuHover)}
.lang-item svg{width:16px; height:16px; color:var(--hl)}
.lang-code{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:600}
.burger{display:none}

/* ================= copy ================= */
.wrap{position:relative; z-index:5; box-sizing:border-box; max-width:1252px; margin:0 auto; padding:120px 56px 134px}
.eyebrow{margin:0 0 clamp(10px, 1.8vh, 18px); font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--hl)}
.h2{margin:0 0 clamp(8px, 1.4vh, 18px); font-size:clamp(30px, min(2.8vw, 5.4vh), 54px); line-height:1.08; font-weight:300; letter-spacing:-.03em; text-wrap:balance}
.h2 .hl{color:var(--hl); font-weight:400}
.p{margin:0; max-width:900px; font-size:clamp(14px, 1.9vh, 17px); line-height:1.55; color:var(--muted)}
.reveal{animation:s7_fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}
@keyframes s7_fadeUp{from{opacity:0; transform:translateY(24px); filter:blur(6px)}}

/* ================= form panel ================= */
.panel{position:relative; margin-top:clamp(14px, 2.8vh, 36px); padding:clamp(18px, 3vh, 32px); border-radius:32px; box-sizing:border-box;
  background:linear-gradient(170deg, var(--glassHi), transparent 40%), var(--glass); border:1px solid var(--glassLine);
  -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 50px 100px -60px rgba(0,0,0,.8)}
.panel::before{content:''; position:absolute; top:0; left:0; right:0; height:1px; border-radius:inherit; background:linear-gradient(90deg, transparent, var(--accent2), transparent) 0 0 / 35% 100% no-repeat; animation:s7_edge 6s linear infinite}
@keyframes s7_edge{from{background-position:-35% 0} to{background-position:135% 0}}
.form{display:flex; flex-direction:column; gap:clamp(9px, 1.5vh, 16px)}
.row{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap:clamp(9px, 1.5vh, 16px)}
.field{position:relative; display:flex; flex-direction:column; gap:3px; padding:9px 18px 9px; border-radius:22px; box-sizing:border-box; min-height:clamp(48px, 6.6vh, 58px);
  background:var(--field); border:1px solid var(--fieldLine); transition:border-color .25s, box-shadow .25s, background-color .25s}
.field:focus-within{border-color:var(--hl); background:var(--fieldFocus); box-shadow:0 0 0 4px var(--fieldFocus), 0 10px 30px -18px var(--btnGlow)}
.field.bad{border-color:var(--err)}
.field.off{opacity:.45}
.field label{font-size:12px; font-weight:500; color:var(--muted); letter-spacing:.01em; transition:color .25s}
.field:focus-within label{color:var(--hl)}
.field input,.field select,.field textarea{width:100%; box-sizing:border-box; padding:0; margin:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:16px; line-height:1.4}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:.75}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:28px}
.field select option{color:#0A1222}
.field .chev{position:absolute; right:18px; top:50%; width:18px; height:18px; margin-top:-9px; color:var(--muted); pointer-events:none; transition:transform .25s, color .25s}
.field:focus-within .chev{color:var(--hl); transform:rotate(180deg)}
.field.area{min-height:clamp(78px, 11vh, 116px); padding-top:12px}
.field textarea{resize:none; flex:1; min-height:clamp(36px, 6vh, 64px)}
.err{position:absolute; right:18px; top:10px; font-size:12px; font-weight:500; color:var(--err); animation:s7_errIn .25s ease both}
@keyframes s7_errIn{from{opacity:0; transform:translateY(-4px)}}

.mods-l{margin:clamp(4px, 1.2vh, 14px) 0 2px; font-size:clamp(15px, 1.9vh, 17px); font-weight:500}
.mods{display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:14px}
.chip{position:relative; display:flex; align-items:center; justify-content:center; gap:8px; height:clamp(38px, 5.2vh, 46px); border-radius:999px; cursor:pointer;
  background:var(--chip); border:1px solid var(--fieldLine); color:var(--text); font:inherit;
  transition:background-color .25s, border-color .25s, transform .25s, box-shadow .25s}
.chip:hover{border-color:var(--hl); transform:translateY(-2px)}
.chip b{font-family:'Unbounded', 'Manrope', sans-serif; font-size:15px; font-weight:600; letter-spacing:.06em}
.chip .ck{display:flex; align-items:center; justify-content:center; width:0; height:18px; overflow:hidden; border-radius:50%; background:var(--hl); color:#FFFFFF; transition:width .25s}
.chip .ck svg{width:11px; height:11px; flex:none}
.chip .ck path{fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.chip.on{background:var(--chipOn); border-color:var(--hl); box-shadow:0 0 0 3px var(--fieldFocus), 0 10px 26px -16px var(--btnGlow)}
.chip.on .ck{width:18px}

.submit{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:12px; height:clamp(46px, 6.6vh, 58px); margin-top:4px; border-radius:999px; border:0; cursor:pointer;
  background:var(--btn); color:#FFFFFF; font:inherit; font-size:16px; font-weight:600; letter-spacing:.02em;
  box-shadow:0 20px 44px -20px var(--btnGlow); transition:background-color .25s, transform .25s, box-shadow .25s}
.submit:hover{background:var(--btnHover); transform:translateY(-2px); box-shadow:0 26px 54px -20px var(--btnGlow)}
.submit svg{width:18px; height:18px; transition:transform .3s}
.submit:hover svg{transform:translateX(4px)}
.submit::after{content:''; position:absolute; top:0; bottom:0; width:30%; left:-40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); animation:s7_shine 4.5s ease-in-out 1.5s infinite}
@keyframes s7_shine{0%{left:-40%} 35%,100%{left:120%}}
.spin{width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#FFFFFF; animation:s7_spin .8s linear infinite}

/* success */
.done{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:clamp(340px, 52vh, 560px); text-align:center; animation:s7_fadeUp .45s cubic-bezier(.2,.7,.2,1) both}
.done-ic{position:relative; width:110px; height:110px}
.done-ic svg{width:100%; height:100%; overflow:visible}
.done-ic .rg{fill:none; stroke:var(--hl); stroke-width:2; stroke-dasharray:100; animation:s7_drawC .65s cubic-bezier(.4,.1,.2,1) both}
.done-ic .tk{fill:none; stroke:var(--hl); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; animation:s7_drawC .39s ease .52s both}
.done-ic::after{content:''; position:absolute; inset:-14px; border-radius:50%; border:1px solid var(--hl); opacity:0; animation:s7_ring 2.4s ease-out 1.2s infinite}
@keyframes s7_drawC{from{stroke-dashoffset:100}}
@keyframes s7_ring{0%{transform:scale(.8); opacity:.8} 100%{transform:scale(1.5); opacity:0}}
.done h3{margin:8px 0 0; font-size:32px; font-weight:400; letter-spacing:-.02em}
.done p{margin:0; font-size:17px; color:var(--muted)}
.again{margin-top:10px; height:48px; padding:0 24px; border-radius:999px; cursor:pointer; background:transparent; border:1px solid var(--glassLine); color:var(--text); font:inherit; font-size:15px; font-weight:500; transition:border-color .25s}
.again:hover{border-color:var(--hl)}

.pager{position:absolute; z-index:8; right:56px; bottom:32px; display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.12em}
.pager .now{color:var(--text)}
.pager .track{position:relative; width:120px; height:1px; background:var(--line); overflow:hidden}
.pager .fill{position:absolute; left:0; top:0; height:100%; width:100%; background:var(--hl); box-shadow:0 0 8px var(--hl)}

@media (max-width: 1200px){ .nav a.link{padding:0 9px} .nav-in,.wrap{padding-left:32px; padding-right:32px} }
@media (max-width: 960px){
  .nav-links,.nav .search{display:none}
  .burger{display:flex}
  .nav{height:64px}
  .nav-in{grid-template-columns:auto 1fr; padding:0 16px}
  :scope{height:auto; min-height:100vh}
  .wrap{padding:104px 16px 72px}
  .panel{padding:18px; border-radius:24px}
  .mods{grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px}
  .pager{display:none}
}
@media (prefers-reduced-motion: reduce){ :scope *, :scope *::before, :scope *::after{animation:none !important; transition:none !important} }

/* ===== animated background wave (same field of dots as on the Hero) ===== */
.bgwave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:.6}
:scope.light .bgwave{opacity:.5}
.bgwave-v{position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--bgFade, rgba(4,6,12,.55)) 0%, transparent 34%, transparent 70%, var(--bgFade, rgba(4,6,12,.4)) 100%)}
:scope.light .bgwave-v{--bgFade:rgba(238,242,248,.55)}
/* ===== slide navigator (shared) ===== */
.steps{--stepOn:#5CE1FF; --stepsBg:rgba(4,6,12,.86); position:absolute; z-index:25; left:0; right:0; bottom:0; padding:22px 0 20px; background:linear-gradient(0deg, var(--stepsBg) 35%, transparent); pointer-events:none}
:scope.light .steps{--stepOn:#1D4ED8; --stepsBg:rgba(238,242,248,.92)}
.steps-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:22px; pointer-events:auto}
.step{position:relative; display:flex; flex-direction:column; gap:14px; min-height:44px; padding-top:4px; text-decoration:none; color:var(--muted); transition:color .25s}
.step .sbar{position:relative; display:block; height:2px; border-radius:2px; background:var(--line)}
.step .sbar::before{content:''; position:absolute; z-index:1; left:-2px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; transition:background-color .25s, opacity .25s}
.step .sbar i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--stepOn); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .25s}
.step.past .sbar i{width:100%; opacity:.35}
.step.past .sbar::before{background:var(--stepOn); opacity:.5}
.step.cur .sbar i{width:100%; box-shadow:0 0 12px var(--stepOn); animation:s7_stepFill 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
.step.cur .sbar::before{background:var(--stepOn); opacity:1; box-shadow:0 0 10px var(--stepOn)}
.step.cur .sbar::after{content:''; position:absolute; right:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--stepOn); box-shadow:0 0 12px var(--stepOn); animation:s7_stepEnd 2.4s ease-in-out 1.9s infinite; opacity:0}
.step .slbl{display:flex; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step .snum{color:var(--stepOn); opacity:.75; font-variant-numeric:tabular-nums}
.step.cur{color:var(--text)}
.step.cur .snum{opacity:1}
.step:hover{color:var(--text)}
.step:hover .sbar i{width:100%; opacity:.75}
.step:focus-visible{outline:2px solid var(--stepOn); outline-offset:6px; border-radius:4px}
@keyframes s7_stepFill{from{width:0}}
@keyframes s7_stepEnd{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.2)}}
@media (max-width: 1200px){ .steps-in{padding:0 32px; gap:14px} .step .slbl{font-size:11px; gap:8px} }
@media (max-width: 960px){ .steps{position:fixed} .steps-in{padding:0 16px; gap:6px} .step .stxt{display:none} }
/* embedded in the one-page site */
:scope.emb > .nav, :scope.emb > .steps{display:none}
}


/* Apply the platform gradient to the chip itself, keeping its grid dimensions. */
#deck .chip:has(.platform-label) {
  container-type: inline-size;
  min-width: 0;
  padding-inline: 4px;
  gap: 4px;
  color: #fff;
  background: linear-gradient(110deg, #2d62db, #007c6a);
  border-color: transparent;
}
#deck .chip:has(.platform-label):hover,
#deck .chip:has(.platform-label).on {
  color: #fff;
  background: linear-gradient(110deg, #2457cb, #00705e);
  border-color: var(--focus-ring);
}
#deck .platform-label {
  font: 600 clamp(8px, 9.5cqi, 11px)/1 'Unbounded', 'Manrope', sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
}
#deck .chip:has(.platform-label) .ck { flex-shrink: 0; }
#deck .chip:has(.platform-label):not(.on) .ck { display: none; }

/* Use the browser's accessible picker with the request form's palette. */
@supports (appearance: base-select) {
  #f-type, #f-type::picker(select) { appearance: base-select; }
  #f-type { width: 100%; cursor: pointer; }
  #f-type::picker-icon { display: none; }
  #f-type::picker(select) {
    margin-block: 6px;
    padding: 5px;
    border: 1px solid var(--control-edge);
    border-radius: 15px;
    background: var(--control-surface);
    color: var(--control-label);
    font: inherit;
    box-shadow: 0 8px 24px rgba(7, 17, 36, .18);
  }
  #f-type option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
  }
  #deck #f-type option:checked,
  #deck #f-type option:is(:hover, :focus-visible) {
    color: var(--focus-ring);
    background: var(--selection-fill);
  }
  #f-type option:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
  #f-type option::checkmark { order: 1; margin-inline-start: auto; }
}

/* ===== css/s8.css ===== */
/* IOTICS - slide 08-footer.
   Ported from design-source/08-footer.dc.html.
   Keyframe names are namespaced with the `s8` prefix so all slides can share one document. */

@scope (.s8) {

/* ================= tokens ================= */
:scope{
  --bg:#04060C; --bg2:#0B1730;
  --text:#F2F5FA; --muted:#A3ACBD; --faint:rgba(242,245,250,.10); --line:rgba(242,245,250,.10); --navText:#E6EAF2;
  --hl:#86B4FF; --accent:#5E9BFF; --accent2:#A8E6FF;
  --glass:rgba(14,22,42,.55); --glassLine:rgba(170,200,255,.16); --glassHi:rgba(255,255,255,.05);
  --menu:rgba(12,18,34,.94); --menuHover:rgba(134,180,255,.12);
  --mark1:rgba(134,180,255,.51); --mark2:rgba(134,180,255,.18);
  position:relative; height:100vh; min-height:620px; overflow:hidden; isolation:isolate;
  background:radial-gradient(70% 50% at 50% 100%, var(--bg2) 0%, transparent 70%), var(--bg);
  color:var(--text);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:scope.light{
  --bg:#EEF2F8; --bg2:#FFFFFF;
  --text:#0A1222; --muted:#4A5468; --faint:rgba(10,18,34,.08); --line:rgba(10,18,34,.10); --navText:#1A2335;
  --hl:#1D4ED8; --accent:#1D4ED8; --accent2:#2563EB;
  --glass:rgba(255,255,255,.66); --glassLine:rgba(30,60,140,.12); --glassHi:rgba(255,255,255,.8);
  --menu:rgba(255,255,255,.95); --menuHover:rgba(29,78,216,.07);
  --mark1:rgba(29,78,216,.46); --mark2:rgba(29,78,216,.16);
}

/* ===== daylight palette (light theme), richer ===== */
:scope.light{
  --bg:#EDF3FF; --bg2:#FFFFFF;
  --text:#0E1C45; --muted:#4E5C86; --faint:rgba(14,28,69,.07); --line:rgba(31,79,224,.12); --navText:#16265A;
  --hl:#1F4FE0; --accent:#1F4FE0; --accent2:#3D7BFF;
  --glass:rgba(255,255,255,.6); --glassLine:rgba(31,79,224,.2); --glassHi:rgba(255,255,255,.9);
  --menu:rgba(255,255,255,.97); --menuHover:rgba(31,79,224,.09);
  --vignette:#E9F0FF; --ring:rgba(31,79,224,.3); --net:rgba(31,79,224,.5); --wire:rgba(31,79,224,.34);
  --pk:#2F6BFF; --pkGlow:rgba(47,107,255,.55); --pin:#1F4FE0; --pinGlow:rgba(31,79,224,.45);
  --tileA:#2552E8; --tileB:#9FC6FF; --chev:rgba(31,79,224,.1); --rowHi:rgba(31,79,224,.09);
  --panel:rgba(255,255,255,.55); --panelSolid:#EEF4FF; --orbBg:rgba(120,165,255,.42);
  --good:#1F4FE0; --goodSoft:rgba(31,79,224,.12); --goodGlow:rgba(47,107,255,.45);
  --cardBad:rgba(255,241,243,.94); --cardBadLine:rgba(225,55,75,.32); --cardBadText:#0E1C45; --cardBadMuted:#4E5C86;
  --cardGood:rgba(255,255,255,.84); --cardGoodLine:rgba(31,79,224,.26); --cardGoodText:#0E1C45; --cardGoodMuted:#3F4D78;
  --field:rgba(255,255,255,.8); --fieldLine:rgba(31,79,224,.22); --fieldFocus:rgba(31,79,224,.1);
  --chip:rgba(255,255,255,.78); --chipOn:rgba(31,79,224,.14);
  --btn:#1F4FE0; --btnHover:#1840C0; --btnGlow:rgba(31,79,224,.45); --btnText:#FFFFFF;
  background:
    radial-gradient(50% 45% at 92% 2%, rgba(120,165,255,.75) 0%, transparent 70%),
    radial-gradient(42% 42% at 2% 98%, rgba(95,200,255,.5) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 22%, rgba(175,155,255,.32) 0%, transparent 70%),
    radial-gradient(40% 36% at 55% 60%, rgba(255,255,255,.9) 0%, transparent 72%),
    linear-gradient(180deg, #F1F6FF 0%, #E2ECFF 100%);
}
:scope.light .steps{--stepOn:#1F4FE0; --stepsBg:rgba(236,242,255,.9)}
:scope.light .bgwave{opacity:.6}
:scope.light .wave{opacity:1}
:scope.light .bgwave-v{--bgFade:rgba(236,242,255,.5)}
.dots{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--faint) 1px, transparent 1.5px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg, transparent 30%, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, transparent 30%, #000 70%, transparent 100%)}

/* The opaque content scrolls over the bottom-pinned wordmark. */
.footer-content { position:relative; z-index:2; background:var(--bg); }
.footer-brand {
  position:sticky; bottom:0; z-index:1; width:100%;
  padding:clamp(10px,1vw,20px) clamp(6px,1vw,20px) max(10px,env(safe-area-inset-bottom));
  background:var(--bg); color:var(--hl); --wordmark-glow:rgba(108,171,255,.55);
}
:scope.light .footer-brand { --wordmark-glow:rgba(38,93,203,.29); }
.footer-brand .mark { display:block; width:100%; height:auto; }
.footer-brand .mark {
  fill:none; stroke:currentColor; stroke-width:1px; stroke-linejoin:round;
  overflow:visible; filter:drop-shadow(0 0 2px var(--wordmark-glow));
}

/* Reveal a moving section of each closed contour. The visible outline
   stays at one screen pixel while its mask follows normalized path lengths. */
.footer-brand .letter-traces path {
  stroke-dasharray:15 105;
  stroke-dashoffset:15;
  opacity:0;
  animation:s8_traceLetter 30s linear var(--trace-delay) infinite;
}
/* Seven successive 4.2 s contours, including both rings of O. */
@keyframes s8_traceLetter {
  0% { stroke-dashoffset:15; opacity:0; }
  1.6%,12.4% { opacity:.86; }
  14%,100% { stroke-dashoffset:-100; opacity:0; }
}
.footer-brand .contour-light {
  fill:none; stroke:#c7ffff;
  filter:drop-shadow(0 0 1px #00e4ff) drop-shadow(0 0 3px #587bff);
}
:scope.light .footer-brand .contour-light {
  stroke:#4026c9; filter:drop-shadow(0 0 1px #4573ff) drop-shadow(0 0 3px #71a4ff);
}
.footer-brand pattern circle {
  fill:var(--accent2); stroke:none;
  animation:s8_starTwinkle var(--period) ease-in-out var(--phase) infinite alternate;
}
.footer-brand pattern circle:nth-child(3n) { fill:var(--hl); animation-direction:alternate-reverse; }
@keyframes s8_starTwinkle {
  0% { opacity:.18; transform:translate(-.18px,.16px); }
  37% { opacity:.58; transform:translate(.12px,-.22px); }
  69% { opacity:.27; transform:translate(.23px,.09px); }
  100% { opacity:.47; transform:translate(-.1px,-.13px); }
}
@media (prefers-reduced-motion:reduce) {
  .footer-brand .letter-traces path,.footer-brand pattern circle { animation:none; }
  .footer-brand .contour-light { display:none; }
  .footer-brand pattern circle { opacity:.4; }
}
/* ================= nav (shared) ================= */
.nav{position:absolute; top:0; left:0; right:0; z-index:30; height:72px; border-bottom:1px solid var(--line)}
.nav-in{height:100%; box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav a.link{position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:13px; font-weight:400; letter-spacing:.02em; text-decoration:none; color:var(--navText); opacity:.78; transition:opacity .2s}
.nav a.link::after{content:''; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--hl); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a.link:hover{opacity:1; color:var(--navText)}
.nav a.link:hover::after{transform:scaleX(1)}
.logo{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:var(--text); text-decoration:none}
.logo .lgx{color:var(--text)}
:scope.light .logo .lgx{color:#2645A1}
.logo::before{content:''; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--glassLine); background:var(--glass)}
.logo::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid transparent; border-top-color:var(--accent2); animation:s8_spin 6s linear infinite; opacity:.8}
@keyframes s8_spin{to{transform:rotate(360deg)}}
.logo svg{position:relative; width:22px; height:22px}
.logo{margin-right:100px}
.logo svg.wm{position:absolute; left:calc(100% + 12px); top:50%; width:88px; height:14px; margin-top:-7px; color:var(--text)}
:scope.light .logo svg.wm{color:#2645A1}
.lg-arc,.lg-stem{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}
.lg-dot{fill:currentColor}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.ibtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--navText); cursor:pointer; border-radius:50%; transition:background-color .2s}
.ibtn:hover{background:var(--faint)}
.ibtn svg{width:18px; height:18px}
.ico{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; margin:0 4px; background:var(--glass); border:1px solid var(--glassLine); color:var(--navText); font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:999px}
.lang-btn:hover{border-color:var(--hl)}
.lang-btn svg{width:15px; height:15px}
.lang-menu{position:absolute; top:50px; right:0; min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px; color:var(--text);
  background:var(--menu); border:1px solid var(--glassLine); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); animation:s8_menuIn .22s ease both}
@keyframes s8_menuIn{from{opacity:0; transform:translateY(-6px)}}
.lang-item{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer}
.lang-item:hover{background:var(--menuHover)}
.lang-item svg{width:16px; height:16px; color:var(--hl)}
.lang-code{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:600}
.burger{display:none}

/* ================= footer body ================= */
.wrap{position:relative; z-index:5; box-sizing:border-box; max-width:1252px; margin:0 auto; padding:clamp(84px, 10vh, 108px) 56px calc(clamp(84px, 10vh, 108px) + 14px); min-height:100%; display:flex; flex-direction:column}
.reveal{animation:s8_fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}
@keyframes s8_fadeUp{from{opacity:0; transform:translateY(24px); filter:blur(6px)}}

.crumbs{display:flex; align-items:center; gap:14px; font-size:20px; font-weight:400; color:var(--muted)}
.crumbs a{text-decoration:none; transition:color .2s}
.crumbs a:hover{color:var(--text)}
.crumbs .cur{color:var(--text)}
.crumbs .home{display:flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--hl)}
.crumbs .home svg{width:30px; height:30px}
.crumbs .sep{width:14px; height:14px; color:var(--muted)}
.top{margin-left:auto; display:flex; align-items:center; gap:10px; height:44px; padding:0 18px; border-radius:999px; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.04em;
  background:var(--glass); border:1px solid var(--glassLine); color:var(--text); transition:border-color .25s, transform .25s}
.top:hover{border-color:var(--hl); transform:translateY(-2px); color:var(--text)}
.top svg{width:16px; height:16px; color:var(--hl); transition:transform .3s}
.top:hover svg{transform:translateY(-3px)}

.cols{margin-top:clamp(20px, 4.4vh, 48px); display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:32px}
.col h3{margin:0 0 clamp(10px, 2vh, 20px); font-size:16px; font-weight:600; letter-spacing:.01em}
.col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px}
.col a{position:relative; display:inline-flex; align-items:center; gap:6px; min-height:clamp(26px, 3.4vh, 30px); font-size:14px; color:var(--muted); text-decoration:none; transition:color .2s, transform .25s}
.col a::before{content:''; width:0; height:1px; background:var(--hl); transition:width .25s}
.col a:hover{color:var(--text); transform:translateX(2px)}
.col a:hover::before{width:10px}

.divider{margin:clamp(20px, 4.4vh, 48px) 0 0; height:1px; border:0; background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent)}

.contact{margin-top:clamp(18px, 4vh, 44px); display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap:24px}
.cc{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(8px, 1.4vh, 14px); padding:clamp(18px, 3vh, 30px) 28px clamp(16px, 2.6vh, 26px); border-radius:28px; box-sizing:border-box; overflow:hidden;
  background:linear-gradient(170deg, var(--glassHi), transparent 45%), var(--glass); border:1px solid var(--glassLine);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); transition:border-color .35s, transform .35s}
.cc:hover{border-color:var(--hl); transform:translateY(-3px)}
.cc::before{content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent2), transparent) 0 0 / 40% 100% no-repeat; animation:s8_edge 6s linear infinite}
.cc.b::before{animation-delay:-3s}
@keyframes s8_edge{from{background-position:-40% 0} to{background-position:140% 0}}
.cc-ic{position:relative; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; color:var(--hl); border:1px solid var(--glassLine); background:var(--glassHi)}
.cc-ic::after{content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--hl); opacity:0; animation:s8_icRing 2.8s ease-out infinite}
.cc.b .cc-ic::after{animation-delay:1.4s}
@keyframes s8_icRing{0%{transform:scale(.85); opacity:.7} 100%{transform:scale(1.35); opacity:0}}
.cc-ic svg{width:28px; height:28px}
.cc.b .cc-ic svg{animation:s8_ringing 2.8s ease-in-out 1s infinite; transform-origin:50% 50%}
@keyframes s8_ringing{0%,20%,100%{transform:rotate(0)} 4%{transform:rotate(-14deg)} 8%{transform:rotate(12deg)} 12%{transform:rotate(-10deg)} 16%{transform:rotate(8deg)}}
.cc h3{margin:0; font-size:18px; font-weight:600; color:var(--hl)}
.cc p{margin:0; max-width:420px; font-size:15px; line-height:1.6; color:var(--muted)}
.cc-links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:6px}
.cl{display:inline-flex; align-items:center; gap:6px}
.cl a{font-size:18px; font-weight:500; letter-spacing:.02em; color:var(--hl); text-decoration:none; background:linear-gradient(var(--hl), var(--hl)) 0 100% / 0 1px no-repeat; transition:background-size .3s}
.cl a:hover{color:var(--hl); background-size:100% 1px}
.copy{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; transition:border-color .2s, color .2s}
.copy:hover{border-color:var(--glassLine); color:var(--hl)}
.copy svg{width:15px; height:15px}
.copy.ok{color:var(--hl)}

.bottom{margin-top:auto; padding:clamp(12px, 2.2vh, 22px) 0 clamp(14px, 2.6vh, 28px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 36px; border-top:1px solid var(--line); font-size:13px; color:var(--muted)}
.bottom nav{display:flex; flex-wrap:wrap; gap:6px 28px}
.bottom nav a{color:var(--text); opacity:.8; text-decoration:none; transition:opacity .2s}
.bottom nav a:hover{opacity:1; color:var(--text)}
.bottom .geo{margin-left:auto; display:flex; align-items:center; gap:8px}
.bottom .geo i{width:7px; height:7px; border-radius:50%; background:var(--accent2); box-shadow:0 0 8px var(--accent2); animation:s8_blink 2s ease-in-out infinite}
@keyframes s8_blink{0%,100%{opacity:.4} 50%{opacity:1}}
.toast{position:absolute; z-index:40; left:50%; bottom:120px; transform:translateX(-50%); padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--menu); border:1px solid var(--glassLine); color:var(--text); box-shadow:0 20px 40px -20px rgba(0,0,0,.6); animation:s8_toastIn .3s ease both}
@keyframes s8_toastIn{from{opacity:0; transform:translate(-50%, 8px)}}

@media (max-width: 1200px){ .nav a.link{padding:0 9px} .nav-in,.wrap{padding-left:32px; padding-right:32px} }
@media (max-width: 960px){
  .nav-links,.nav .search{display:none}
  .burger{display:flex}
  .nav{height:64px}
  .nav-in{grid-template-columns:auto 1fr; padding:0 16px}
  :scope{height:auto; min-height:100vh}
  .wrap{padding:96px 16px 0}
  .crumbs{font-size:16px; flex-wrap:wrap}
  .top{margin-left:0}
  .cols{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 16px}
  .bottom .geo{margin-left:0}
}
@media (prefers-reduced-motion: reduce){ :scope *, :scope *::before, :scope *::after{animation:none !important; transition:none !important} }

/* ===== animated background wave (same field of dots as on the Hero) ===== */
.bgwave{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:.6}
:scope.light .bgwave{opacity:.5}
.bgwave-v{position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--bgFade, rgba(4,6,12,.55)) 0%, transparent 34%, transparent 70%, var(--bgFade, rgba(4,6,12,.4)) 100%)}
:scope.light .bgwave-v{--bgFade:rgba(238,242,248,.55)}
/* ===== slide navigator (shared) ===== */
.steps{--stepOn:#5CE1FF; --stepsBg:rgba(4,6,12,.86); position:absolute; z-index:25; left:0; right:0; bottom:0; padding:22px 0 20px; background:linear-gradient(0deg, var(--stepsBg) 35%, transparent); pointer-events:none}
:scope.light .steps{--stepOn:#1D4ED8; --stepsBg:rgba(238,242,248,.92)}
.steps-in{box-sizing:border-box; max-width:1680px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:22px; pointer-events:auto}
.step{position:relative; display:flex; flex-direction:column; gap:14px; min-height:44px; padding-top:4px; text-decoration:none; color:var(--muted); transition:color .25s}
.step .sbar{position:relative; display:block; height:2px; border-radius:2px; background:var(--line)}
.step .sbar::before{content:''; position:absolute; z-index:1; left:-2px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; transition:background-color .25s, opacity .25s}
.step .sbar i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--stepOn); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .25s}
.step.past .sbar i{width:100%; opacity:.35}
.step.past .sbar::before{background:var(--stepOn); opacity:.5}
.step.cur .sbar i{width:100%; box-shadow:0 0 12px var(--stepOn); animation:s8_stepFill 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
.step.cur .sbar::before{background:var(--stepOn); opacity:1; box-shadow:0 0 10px var(--stepOn)}
.step.cur .sbar::after{content:''; position:absolute; right:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--stepOn); box-shadow:0 0 12px var(--stepOn); animation:s8_stepEnd 2.4s ease-in-out 1.9s infinite; opacity:0}
.step .slbl{display:flex; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step .snum{color:var(--stepOn); opacity:.75; font-variant-numeric:tabular-nums}
.step.cur{color:var(--text)}
.step.cur .snum{opacity:1}
.step:hover{color:var(--text)}
.step:hover .sbar i{width:100%; opacity:.75}
.step:focus-visible{outline:2px solid var(--stepOn); outline-offset:6px; border-radius:4px}
@keyframes s8_stepFill{from{width:0}}
@keyframes s8_stepEnd{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.2)}}
@media (max-width: 1200px){ .steps-in{padding:0 32px; gap:14px} .step .slbl{font-size:11px; gap:8px} }
@media (max-width: 960px){ .steps{position:fixed} .steps-in{padding:0 16px; gap:6px} .step .stxt{display:none} }
/* embedded in the one-page site */
:scope.emb > .nav, :scope.emb > .steps{display:none}
}

@media (min-width:961px) and (min-height:721px) { #s8 .s8 { overflow-y:auto; } }
/* Clip lateral decoration without making another scroll container. */
body.page #site-footer, body.page #site-footer .s8 { overflow:clip; }
@media (max-width:960px), (max-height:720px) {
  .deck #s8, .deck #s8 .s8 { overflow:clip; }
}

/* ===== css/compact.css ===== */
/* IOTICS - compact vertical rhythm for short viewports.
 *
 * The approved design is laid out for 1920x1080. docs/DESIGN-SPEC.md section 3 also requires
 * every slide to fit a 1600x836 laptop viewport with no scrolling inside the slide; at that
 * height slides 04, 07 and 08 are a little taller than the viewport, because their outer
 * padding and a few gaps are fixed pixel values rather than vh-based clamps.
 *
 * This file only tightens those vertical values below 900px of viewport height. It changes no
 * colours, no horizontal layout and nothing at 1080px, so the reference screenshots still match.
 * It is loaded after the slide stylesheets and wins on specificity (.sN .wrap beats .wrap).
 */
@media (min-width: 961px) and (max-height: 900px) {

  /* the slide navigator gives back some room at the bottom of every slide */
  .steps { padding: 12px 0 10px }
  .step { gap: 9px; min-height: 0 }
  .hint { bottom: 86px }
  /* навигатор здесь ниже (54px вместо 86px) — кнопка помощника опускается за ним */
  .ai.up { bottom: 64px }

  /* Внешний отступ колонки с содержимым. Сверху слайд перекрывает шапка (72px), снизу —
     навигатор слайдов (86px на высоких экранах, 54px здесь). Чтобы просвет над содержимым и
     под ним выглядел одинаковым, нижний отступ считается как верхний минус шапка плюс
     навигатор: 100 - 72 + 54 = 82. */
  .s2 .wrap, .s3 .wrap, .s4 .wrap, .s5 .wrap, .s6 .wrap, .s7 .wrap, .s8 .wrap {
    padding-top: 100px;
    padding-bottom: 82px;
  }

  /* slide 07: the form has eight stacked rows, so its row gap tightens too */
  .s7 .form { gap: 10px }
  .s7 .mods { gap: 10px }

  /* slide 08 carries the most stacked blocks, so its gaps tighten further */
  .s8 .cols { margin-top: 20px; gap: 24px }
  .s8 .divider { margin-top: 20px }
  .s8 .contact { margin-top: 18px; gap: 18px }
  .s8 .cc { padding-top: 16px; padding-bottom: 14px; gap: 7px }
  .s8 .cc-ic { width: 52px; height: 52px }
  .s8 .cc-ic svg { width: 24px; height: 24px }
  .s8 .bottom { padding: 10px 0 8px }
  .s8 .crumbs { font-size: 18px }
  .s8 .crumbs .home { width: 34px; height: 34px }
  .s8 .crumbs .home svg { width: 26px; height: 26px }
}

/* Слайды 04 и 07 короче экрана: их колонка с содержимым прижималась к верху, и снизу
   оставалось вдвое больше воздуха, чем сверху. В режиме презентации центрируем её по
   вертикали — тогда просвет сверху и снизу одинаков на любом слайде. */
@media (min-width: 961px) and (min-height: 721px) {
  .s4 .wrap, .s7 .wrap {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Between the mobile breakpoint and ~1400px the three agent columns on slide 04 would wrap to
   two rows and double the slide's height, so they are pinned to three columns instead. */
@media (min-width: 961px) and (max-width: 1400px) {
  .s4 .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
  .s4 .card { padding-left: 18px; padding-right: 18px }
}

@media (min-width: 961px) and (max-height: 760px) {
  .s2 .wrap, .s3 .wrap, .s4 .wrap, .s5 .wrap, .s6 .wrap, .s7 .wrap, .s8 .wrap {
    padding-top: 84px;
    padding-bottom: 66px;      /* 84 - 72 + 54: тот же просвет, что сверху */
  }
  .s8 .cols { margin-top: 14px; gap: 18px }
  .s8 .divider { margin-top: 14px }
  .s8 .contact { margin-top: 14px }
  .s8 .cc p { display: none }
}

/* ===== css/mobile.css ===== */
/* IOTICS — мобильная версия (≤960px).
 *
 * На телефоне сайт перестаёт быть презентацией: обычная вертикальная прокрутка, без
 * ленты слайдов и без нижнего навигатора (его логика отключена в js/app.js тем же условием).
 *
 * Слайды 02 и 03 построены на абсолютном позиционировании внутри сцены 1000×540 и 1640×560 —
 * на узком экране это не работает в принципе, поэтому здесь они собраны заново: сцена
 * превращается в обычный поток, подписи и карточки получают размеры в пикселях вместо
 * контейнерных единиц (cqw), а подключённые к сцене декорации (выноски, пины, схема связей)
 * скрыты. Десктоп этот файл не трогает.
 */

@media (max-width: 960px) {

  /* ---------- общее ---------- */

  /* навигатор слайдов — атрибут презентации, на телефоне он не нужен */
  .steps { display: none }

  /* навигатора слайдов здесь нет, поэтому помощник садится в самый угол, а его окно
     раскрывается почти на весь экран */
  .ai, .ai.up { right: 16px; bottom: 16px }
  .ai-fab { width: 52px; height: 52px }
  .ai-panel {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
  }

  .slide > div { overflow: hidden }

  /* ---------- единый неподвижный фон на всё полотно ----------
     На десктопе каждый слайд — отдельный экран со своим радиальным свечением, затемнением
     сверху/снизу и собственной анимированной волной из точек. При непрерывной прокрутке это
     давало полосы на стыках секций и восемь работающих canvas сразу.
     Здесь фон рисуется один раз и не двигается: градиент плюс точечная текстура на одном
     неподвижном слое под страницей. Никакой анимации, у слайдов своих фонов нет. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(var(--faint) 1px, transparent 1.5px) 0 0 / 28px 28px,
      var(--page-bg);
  }
  .deck { position: relative; z-index: 1 }

  .deck .slide > div,
  .deck .slide > div.light { background: none }

  /* все фоновые слои слайдов: волны, затемнения по краям, точки и свечения первого экрана */
  .slide > div > .bgwave,
  .slide > div > .bgwave-v,
  .slide > div > .dots,
  #s1 .wave,
  #s1 .grain,
  #s1 .glow-a,
  #s1 .vig { display: none }

  /* свечение под заводом остаётся частью иллюстрации, но перестаёт пульсировать */
  #s1 .xs-ground { animation: none }

  /* ---------- карточки без теней ----------
     Падающие тени рассчитаны на крупные карточки десктопа; на телефоне они только
     замыливают края. Подсветка выбранной плитки на слайде 05 — это внутренняя рамка
     (inset), её оставляем. */
  .s2 .panel.l .card:hover,
  .s2 .panel.r .card:hover,
  .s2 .panel.l .card.warn:hover,
  .s4 .card,
  .s4 .card:hover,
  .s6 .tile:hover,
  .s7 .panel { box-shadow: none }

  .s5 .tm.on { box-shadow: inset 0 0 0 1px var(--accent2) }

  /* ---------- отступы между секциями ----------
     Раньше у каждого слайда было 104px сверху и 72px снизу — это нужно было, когда слайд
     занимал отдельный экран. При сплошной прокрутке между секциями получалось под 180px
     пустоты.

     Сверху держим больше высоты шапки (64px): она зафиксирована, и с прежними 52px заголовок
     секции заезжал под неё. Снизу — ровно столько, сколько остаётся сверху за вычетом шапки
     (88 − 64 = 24), чтобы просвет над содержимым секции и под ним был одинаковым. Навигатора
     слайдов здесь нет, поэтому в расчёт он не идёт. */
  .deck .slide > div .wrap { padding: 88px 16px 24px }

  /* ---------- слайд 01: сначала завод, потом заголовок с кнопкой ----------
     Высоты завязаны на vh, чтобы весь первый экран (завод, заголовок и кнопка)
     помещался без прокрутки и на невысоких телефонах. */
  #s1 .inner {
    min-height: 100vh;
    padding: clamp(72px, 10vh, 88px) 16px clamp(24px, 4vh, 36px);
    justify-content: center;
  }

  #s1 .xs {
    order: -1;
    --sw: min(132%, 54vh);
    margin: 0 0 clamp(14px, 2.4vh, 20px) calc((100% - var(--sw)) / 2);
  }
  #s1 .copy { order: 0 }
  #s1 .eyebrow { margin-bottom: clamp(12px, 2.4vh, 20px) }
  #s1 .h1 {
    font-size: clamp(27px, 4.9vh, 40px);
    margin-bottom: clamp(18px, 3.4vh, 28px);
  }

  /* ---------- слайд 02: проблема → IOTICS → решение ---------- */

  .s2 .wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .s2 .txt.l { order: 1 }
  .s2 .panel.l { order: 2; margin-top: 18px }
  .s2 .core-wrap { order: 3; margin: 26px auto }
  .s2 .txt.r { order: 4; margin-top: 0 }
  .s2 .panel.r { order: 5; margin-top: 18px }
  .s2 .core-col { display: none }

  /* сцена перестаёт быть системой координат — её дети встают в обычный поток.
     align-self: stretch и min-width: 0 обязательны: иначе панель растягивается
     по ширине ленты карточек вместо ширины экрана */
  .s2 .panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    align-self: stretch;
  }
  .s2 .scene { display: contents }
  .s2 .floor,
  .s2 .tether,
  .s2 .pin { display: none }

  .s2 .halo { left: 8%; right: 8%; top: 2%; height: 26% }

  /* завод — обычный блок в пропорциях своей SVG-схемы связей */
  .s2 .fac {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 725 / 336;
  }

  /* карточки — горизонтальная лента со «подглядывающей» следующей карточкой */
  .s2 .cards {
    position: static;
    inset: auto;
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 2px 16px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .s2 .cards::-webkit-scrollbar { display: none }

  .s2 .panel .card {
    position: static;
    flex: 0 0 78%;
    max-width: 290px;
    width: auto;
    scroll-snap-align: start;
    padding: 12px 14px;
    gap: 8px;
    border-radius: 16px;
    box-shadow: none;
    /* !important перебивает инлайновые animation-delay / animation-duration из разметки:
       на телефоне карточки не мигают по очереди, а просто все видны */
    animation: none !important;
  }

  .s2 .st { width: 22px; height: 22px }
  .s2 .c-alert { font-size: 10px }
  .s2 .c-time { font-size: 11px; padding: 2px 7px }
  .s2 .inc { font-size: 15px }
  .s2 .c-txt { font-size: 13px; line-height: 1.45 }
  .s2 .sys { font-size: 15px }
  .s2 .sys-ic { width: 28px; height: 28px; border-radius: 9px }
  .s2 .c-list { gap: 4px }
  .s2 .c-list li { font-size: 13px; line-height: 1.4 }

  /* ядро IOTICS между половинами — стрелка смотрит вниз, по ходу прокрутки */
  .s2 .stream { display: none }
  .s2 .core-arrow { transform: rotate(90deg) }

  /* ---------- слайд 03: предприятие → источники → платформа → агенты → результат ---------- */

  .s3 .dg-scroll {
    display: block;
    flex: none;
    overflow: visible;
    margin-top: 18px;
  }

  .s3 .dg {
    width: 100%;
    min-width: 0;
    margin: 0;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* схема связей и рамка слоя данных держались на координатах сцены */
  .s3 .lines,
  .s3 .layer-box,
  .s3 .pin { display: none }

  .s3 .fac {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    grid-column: 1 / -1;
    order: 1;
  }

  .s3 .pill {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    grid-column: 1 / -1;
    justify-self: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 11px;
  }
  .s3 .pill .live { width: 6px; height: 6px; box-shadow: 0 0 6px var(--accent2) }

  /* координаты и размеры заданы в исходнике как .pill.ent / .pill.plat / .pill.res-pill.
     У правил внутри @scope при равной специфичности приоритет выше, чем у этого файла,
     поэтому здесь нужен такой же составной селектор, а не просто .s3 .pill */
  .s3 .pill.ent,
  .s3 .pill.plat,
  .s3 .pill.res-pill {
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }
  .s3 .pill.ent { order: 2; transform: none; font-size: 13px; padding: 7px 16px; margin-bottom: 36px }
  .s3 .pill.plat { order: 4; margin: 36px 0 }
  .s3 .pill.res-pill { order: 6; margin-top: 36px }

  /* вертикальные стрелки показывают, как данные идут по цепочке:
     предприятие → источники → платформа → агенты → результат */
  .s3 .pill.ent::after,
  .s3 .pill.plat::before,
  .s3 .pill.plat::after,
  .s3 .pill.res-pill::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 14px;
    height: 28px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--hl));
    opacity: .8;
    /* стойка стрелки 10% ширины до 62% высоты, дальше остриё */
    clip-path: polygon(45% 0, 55% 0, 55% 62%, 100% 62%, 50% 100%, 0 62%, 45% 62%);
  }
  .s3 .pill.ent::after,
  .s3 .pill.plat::after { top: 100%; margin-top: 4px }
  .s3 .pill.plat::before,
  .s3 .pill.res-pill::before { bottom: 100%; margin-bottom: 4px }

  /* источники данных — сетка 2 в ряд, «Excel» занимает всю ширину */
  .s3 .sys {
    position: static;
    width: auto;
    height: auto;
    order: 3;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .s3 .sys.src + .sys.src { grid-column: 1 / -1 }
  .s3 .sys b { font-size: 15px }
  .s3 .sys small { font-size: 11px; white-space: normal }
  .s3 .ok { width: 7px; height: 7px; box-shadow: 0 0 6px var(--ok) }
  .s3 .ok::after { inset: -3px }

  /* группы ИИ-агентов */
  .s3 .agent {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    order: 5;
    grid-column: 1 / -1;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
  }
  .s3 .ag-top { gap: 10px }
  .s3 .ag-ic { width: 34px; height: 34px }
  .s3 .ag-ic svg { width: 17px; height: 17px }
  .s3 .ag-t { font-size: 13px }
  .s3 .ag-bot { gap: 10px }
  .s3 .ag-sub { font-size: 12px }
  .s3 .think { gap: 4px }
  .s3 .think i { width: 5px; height: 5px }

  /* результаты */
  .s3 .result {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    order: 7;
    grid-column: 1 / -1;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
  }
  .s3 .res-t { font-size: 11px }
  .s3 .res-v { font-size: 30px }
  .s3 .chart { height: 46px }

  /* ---------- слайд 06: клиенты без глобуса ----------
     На телефоне вращающийся глобус занимал почти экран, а читать на нём нечего:
     счётчик клиентов остаётся, логотипы поднимаются выше. */
  .s6 .globe { display: none }
  .s6 .content { grid-template-columns: 1fr; gap: 20px }
  .s6 .big { margin-bottom: 0 }

  /* ---------- слайд 08: водяной знак IOTICS ----------
     Размер задан как clamp(120px, 21vw, 420px): на телефоне срабатывал нижний предел 120px,
     и надпись шириной 486px вылезала за экран на 55px с каждой стороны. 21vw без нижнего
     предела даёт ширину около 85% экрана на любой ширине. */

}

/* на совсем узких экранах источники данных встают в одну колонку */
@media (max-width: 359px) {
  .s3 .dg { grid-template-columns: 1fr }
  .s2 .panel .card { flex-basis: 82% }
}