/* Общий стилевой слой визитки iris.direct — раньше был инлайн-<style>, байт-в-байт
   продублированным в index.html и builds/index.html. Правки стиля визитки — только здесь;
   контентные различия страниц (JSON-LD, вариант чип-блока) остаются в самих *.html. */

/* Алиасы старых имён на токены Iris DS (tokens.css). Прямые правки цветов запрещены. */
:root{
  --panel:var(--surface);
  --line:var(--border);
  --txt:var(--text);
  --dim:var(--text-secondary);
  --faint:var(--text-tertiary);
  --cyan:var(--accent);
  --magenta:var(--like);
  --violet:#7C6CF0;            /* аврора-фиолет: только фоновые росчерки */
  --amber:var(--busy);
  --mono:var(--font-mono);
  --sans:var(--font-ui);

  /* Производные, которых нет в tokens.css: 1px рамка-градиент гранёного контрола
     и внутренний клип фаски — «рамка + заливка, глинт ровно на срезе» (SYSTEM.md §Микро-детали). */
  --hair-grey:linear-gradient(200deg,rgba(255,255,255,.16),var(--border-strong) 42%);
  --hair-accent:linear-gradient(200deg,color-mix(in srgb,var(--accent) 85%,transparent),color-mix(in srgb,var(--accent) 30%,transparent) 44%);
  --hair-primary:linear-gradient(200deg,rgba(255,255,255,.95),rgba(140,255,240,.42) 28%,rgba(18,176,232,.8));
  --cut-xs-in:polygon(0 0,calc(100% - (var(--cut-xs) - 1px)) 0,100% calc(var(--cut-xs) - 1px),100% 100%,calc(var(--cut-xs) - 1px) 100%,0 calc(100% - (var(--cut-xs) - 1px)));
  --cut-md-in:polygon(0 0,calc(100% - (var(--cut-md) - 1px)) 0,100% calc(var(--cut-md) - 1px),100% 100%,calc(var(--cut-md) - 1px) 100%,0 calc(100% - (var(--cut-md) - 1px)));
}
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{
  background-color:var(--bg);
  background-image:var(--aurora);   /* живая аврора вместо самописных росчерков */
  background-attachment:fixed;
  color:var(--txt);
  font-family:var(--sans);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
  min-height:100vh;
  padding:26px 16px 56px;
}
.card{width:100%;max-width:460px}

/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:38px}
.brand{display:flex;align-items:center;gap:11px}
.brand .word{font-family:var(--mono);font-weight:700;font-size:17px;letter-spacing:.01em}
.brand .word span{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .word em{font-style:normal;color:var(--faint);font-weight:400;font-size:13px}

/* бейдж статуса — гранёная табличка: рамка тона + тёмная грань + LED (не кружок) */
.slot{
  position:relative;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--mono);font-size:11px;color:var(--cyan);
  text-shadow:var(--bloom-accent);
  padding:5px 9px;background:var(--hair-accent);
}
.slot::before{
  content:"";position:absolute;inset:1px;z-index:-1;clip-path:var(--cut-xs-in);
  background:var(--scan),linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),rgba(0,0,0,.2)),var(--face-2);
  box-shadow:var(--edge-top);
}
.slot b{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* aperture mark — стопы совпадают с фавиконом (в data-URI var() невозможен) */
.mark{position:relative;width:38px;height:38px;flex:0 0 auto}
.mark svg{position:absolute;inset:0;overflow:visible}
.mark .spin{transform-origin:50% 50%;animation:rot 14s linear infinite}
.mark stop:nth-child(1){stop-color:var(--cyan)}
.mark stop:nth-child(2){stop-color:var(--magenta)}
.mark stop:nth-child(3){stop-color:var(--violet)}
/* свечение знака — только циан: маджента/фиолет живут в стопах, но не светятся (≤1 неон) */
.mark .ring{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--cyan) 50%,transparent))}
@keyframes rot{to{transform:rotate(360deg)}}

/* hero */
.hero{margin-bottom:14px;text-align:left}
.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,9.5vw,44px);
  line-height:1.08;letter-spacing:-.02em;
}
.hero h1 .grad{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 30%,transparent));
}
.hero p{margin-top:14px;color:var(--dim);font-size:16.5px;max-width:40ch}
.hero p b{color:var(--txt);font-weight:600}
.tagline{
  font-family:var(--mono);font-size:12px;color:var(--faint);
  letter-spacing:.06em;margin:18px 0 40px;
  display:flex;align-items:center;gap:9px;
}
.tagline::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}

.lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px;
}

/* deploy log — карточка «тёмное стекло»: радиус 16, верхний светлый край, мягкая тень */
.log{
  background:var(--panel);
  border:1px solid var(--line);
  border-top-color:var(--glass-hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:18px 16px;
  font-family:var(--mono);font-size:13.5px;
  margin-bottom:40px;
  position:relative;overflow:hidden;
}
.log::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent-grad);
}
.log .row{display:flex;gap:14px;padding:8px 0;align-items:baseline}
.log .row + .row{border-top:1px dashed var(--line)}
.log .t{color:var(--dim);flex:0 0 66px;font-size:12.5px}
.log .m{color:var(--txt)}
.log .m small{display:block;color:var(--dim);font-size:12px;margin-top:2px}
.log .row.done .t{color:var(--cyan);text-shadow:var(--bloom-accent)}
.log .row.done .m::after{content:" ✓";color:var(--cyan)}
/* wide — левая колонка под слова («День 1», «Неделя 1»), а не под «T+24ч».
   Модификатор, а не правка .log .t: файл общий с /builds, там колонка временная. */
.log.wide .t{flex:0 0 84px}

/* case — карточка закрытого кейса: задача → поток ролей → статус внедрения.
   Стекло и левая шина те же, что у .log; отличает внутренняя грамматика
   (не «время → событие», а «роль → действие»), поэтому новых тонов не вводим. */
.case{
  background:var(--panel);
  border:1px solid var(--line);
  border-top-color:var(--glass-hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:18px 16px 16px;
  margin-bottom:40px;
  position:relative;overflow:hidden;
}
.case::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent-grad);
}
.case .task{
  color:var(--dim);font-size:14.5px;
  margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px dashed var(--line);
}
.case .task b{color:var(--txt);font-weight:600}
.case .flow{font-family:var(--mono);font-size:13.5px}
.case .flow .r{display:flex;gap:14px;padding:8px 0;align-items:baseline}
.case .flow .r + .r{border-top:1px dashed var(--line)}
.case .flow .who{color:var(--dim);flex:0 0 84px;font-size:12.5px}
.case .flow .act{color:var(--txt)}
.case .flow .act small{display:block;color:var(--dim);font-size:12px;margin-top:2px}
/* out — строка, на которой кейс отдаёт результат владельцу.
   ✓ цепляется к .ttl, а не к .act: иначе блочный <small> уводит галочку на свою строку. */
.case .flow .r.out .who{color:var(--cyan);text-shadow:var(--bloom-accent)}
.case .flow .r.out .ttl::after{content:" ✓";color:var(--cyan)}
.case .status{
  display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;
  margin-top:15px;padding-top:14px;border-top:1px solid var(--line);
}
.case .status .who-for{font-family:var(--mono);font-size:11.5px;color:var(--faint)}

/* cases — слайдер собранных кейсов. Лента на scroll-snap: свайп работает без единой
   строки JS, а вкладки — обычные якоря на слайды, поэтому и с выключенным JS ни один
   контрол не мёртвый. JS только подсвечивает активную вкладку и гасит прыжок якоря.
   Слайды тянутся по высоте самого длинного — карточка не скачет при переключении. */
.cases{margin-bottom:40px}
.cases .tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.cases .tab{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12.5px;color:var(--dim);text-decoration:none;
  padding:0 14px;min-height:var(--tap-min);      /* переключатель — попадать пальцем, не пиксель в пиксель */
  background:var(--hair-grey);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
}
.cases .tab::before{
  content:"";position:absolute;inset:1px;z-index:-1;clip-path:var(--cut-xs-in);
  background:var(--scan),var(--face-2);box-shadow:var(--edge-top);
}
.cases .tab .iris-led{color:var(--faint)}
.cases .tab[aria-selected="true"]{
  color:var(--cyan);background:var(--hair-accent);text-shadow:var(--bloom-accent);
}
.cases .tab[aria-selected="true"]::before{
  background:var(--scan),
             linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),rgba(0,0,0,.2)),
             var(--face-2);
}
.cases .tab[aria-selected="true"] .iris-led{color:var(--cyan)}
.cases .tab:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* padding-bottom — чтобы тень карточки не срезалась о край скроллера (overflow-x:auto
   делает и вертикальную ось скроллируемой), отрицательный margin возвращает ритм блока */
.cases .track{
  display:flex;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:0 0 24px;margin-bottom:-16px;
}
.cases .track::-webkit-scrollbar{display:none}
.cases .slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
/* карточки тянутся по самой длинной, лишнюю высоту забирает .flow — иначе у короткого
   кейса под статусом висела бы пустая полоса, читающаяся как обрыв вёрстки */
.cases .slide .case{margin-bottom:0;height:100%;display:flex;flex-direction:column}
.cases .slide .case .flow{flex:1 1 auto}
.cases .dots{display:flex;justify-content:center;gap:7px;margin-top:2px}
.cases .dots i{
  width:5px;height:5px;background:var(--border-strong);
  transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.cases .dots i.on{background:var(--cyan);box-shadow:var(--glow-accent)}

/* soon — шаг кейса, которого в демо ещё нет: тон погашен, рядом янтарная метка срока.
   Не прячем и не выдаём за рабочий — иначе страница обещает больше, чем показывает. */
.case .flow .r.soon .who{color:var(--faint)}
.case .flow .r.soon .ttl{color:var(--dim)}
.case .flow .r.soon .ttl em{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--busy);white-space:nowrap;
  border:1px dashed color-mix(in srgb,var(--busy) 45%,transparent);
  padding:1px 6px;margin-left:8px;
}

/* chips — гранёные таблички: серый = структура, LED-квадрат несёт тон */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
/* tail — ряд чипов, за которым нет сноски: держит общий ритм блоков (40px) сам */
.chips.tail{margin-bottom:40px}
.chips span{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12.5px;color:var(--dim);
  padding:5px 11px;background:var(--hair-grey);
}
.chips span::before{
  content:"";position:absolute;inset:1px;z-index:-1;clip-path:var(--cut-xs-in);
  background:var(--scan),var(--face-2);box-shadow:var(--edge-top);
}
.chips .iris-led{color:var(--cyan)}
/* опциональная услуга: пунктир + погашенная лампа = вне фикс-пакета */
.chips span.opt{
  background:none;border:1px dashed var(--border-strong);padding:4px 10px;
}
.chips span.opt::before{content:none}
.chips span.opt .iris-led{color:var(--faint);box-shadow:none}
.chips span.opt sup{color:var(--cyan);font-size:10px;margin-left:1px}

.note{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--dim);margin:0 0 40px;
}
.note sup{color:var(--cyan);font-size:10px}
/* ссылка внутри текстовых сносок и условий — один вид на все страницы визитки */
.note a,.terms .v a{
  color:var(--cyan);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
}

/* terms */
.terms{margin-bottom:40px;border-top:1px solid var(--glass-hairline)}
.terms .tr{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 2px;border-bottom:1px solid var(--line);font-size:15px;
}
.terms .k{color:var(--dim)}
.terms .v{font-family:var(--mono);font-size:13.5px;text-align:right;color:var(--txt)}
.terms .v.acc{color:var(--cyan);text-shadow:var(--bloom-accent)}
/* pri — светится только сама цифра цены, не вся строка условия (дисциплина «≤1 неон») */
.terms .v .pri{font-style:normal;font-weight:700;color:var(--cyan);text-shadow:var(--bloom-accent)}

/* door — крупная дверь на соседнюю страницу (главная → /partners).
   Геометрия ровно как у .cta (рамка 1px + грань со срезом --cut-md), скин вторичный:
   тёмная грань и циановая стрелка вместо градиентной заливки. Дисциплина «≤1 неон»:
   светящаяся primary-кнопка на странице остаётся ровно одна — «Запросить демо» внизу. */
.door{
  display:block;text-decoration:none;margin:0 0 40px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.8));
  transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.door:hover{
  transform:translateY(-1px);
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 32%,transparent))
         drop-shadow(0 8px 16px rgba(0,0,0,.9));
}
.door:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.door .frame{display:block;padding:1px;background:var(--hair-accent)}
.door .face{
  display:flex;align-items:center;gap:14px;clip-path:var(--cut-md-in);
  padding:15px 17px;
  background:var(--scan),
             linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,transparent),rgba(0,0,0,.25)),
             var(--face);
  box-shadow:var(--edge-top);
}
.door .txt{flex:1 1 auto;min-width:0}
.door b{display:block;font-family:var(--sans);font-weight:600;font-size:17px;color:var(--txt)}
.door small{
  display:block;font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--dim);margin-top:4px;
}
.door .arw{
  flex:0 0 auto;font-family:var(--mono);font-size:19px;line-height:1;
  color:var(--cyan);text-shadow:var(--bloom-accent);
  transition:transform var(--dur-base) var(--ease-out);
}
.door:hover .arw{transform:translateX(3px)}

/* math — партнёрская арифметика: сколько приносит N приведённых компаний.
   Стекло и левая шина те же, что у .log; грамматика «сколько привёл → сколько в месяц».
   Строка окупаемости светится, потому что это точный факт, а не лозунг: 5 × $38 = $190. */
.math{
  background:var(--panel);
  border:1px solid var(--line);
  border-top-color:var(--glass-hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:16px;margin-bottom:14px;
  font-family:var(--mono);font-size:13.5px;
  position:relative;overflow:hidden;
}
.math::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent-grad);
}
/* строка: «сколько привёл» ↔ «сколько в месяц» на одной линии, пояснение — целой
   строкой ниже. Иначе на 375px левая колонка переносится и налезает на пояснение. */
.math .r{display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px 14px;align-items:baseline;padding:9px 0}
.math .r + .r{border-top:1px dashed var(--line)}
.math .n{color:var(--dim);font-size:12.5px;white-space:nowrap}
.math .s{color:var(--txt);text-align:right;white-space:nowrap}
.math .hint{flex:1 0 100%;text-align:right;color:var(--dim);font-size:11.5px;line-height:1.45}
.math .r.evens .n,.math .r.evens .s{color:var(--cyan);text-shadow:var(--bloom-accent)}

/* about */
.about{margin-bottom:44px;color:var(--dim);font-size:15px}
.about b{color:var(--txt);font-weight:600}
.about a{color:var(--cyan);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}

/* cta — primary-кнопка канона: свечение на внешнем слое (clip-path режет box-shadow),
   рамка-градиент со срезом --cut-md, заливка --accent-grad с верхним бликом */
.cta{
  display:block;text-decoration:none;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 55%,transparent))
         drop-shadow(0 8px 14px rgba(0,0,0,.9));
  transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.cta:hover{
  transform:translateY(-1px);
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 75%,transparent))
         drop-shadow(0 10px 18px rgba(0,0,0,.95));
}
.cta:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.cta .frame{display:block;padding:1px;background:var(--hair-primary)}
.cta .face{
  display:block;text-align:center;clip-path:var(--cut-md-in);
  font-family:var(--sans);font-weight:600;font-size:16px;
  color:var(--on-accent);background:var(--accent-grad);
  padding:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -8px 12px -8px rgba(0,6,12,.6);
}
.cta small{display:block;font-family:var(--sans);font-weight:500;font-size:12px;margin-top:3px;opacity:.75}

.foot{
  margin-top:22px;text-align:center;
  font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.06em;
}
.foot a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--cyan)}