/* =====================================================================
   YTRF · «Рефлюкс Контроль» / Технодело — колода 16:9 4K (3840×2160)
   Единая дизайн-система. Палитра + хром слайда + компоненты.
   ===================================================================== */

:root{
  --nav:#0A1520;     /* фон навы */
  --panel:#0F1F2D;   /* панель */
  --card:#142836;    /* карточка */
  --mint:#01E8AB;    /* акцент бирюзовый */
  --blue:#29A6CB;    /* вторичный */
  --txt:#FFFFFF;     /* текст */
  --mut:#7E99A8;     /* приглушённый */
  --err:#E05555;     /* осложнения / ошибка */
  --ok:#4ADE80;      /* успех */
  --lime:#D4E44B;    /* lime */
  --anat:#E8688A;    /* анатомия — розово-красный */
  --anat-deep:#C2415F;

  --edge: 200px;     /* боковое поле */
  --topline: 150px;  /* верхняя линия (kicker) */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#05090d; }
body{ font-family:'Raleway',system-ui,sans-serif; color:var(--txt); }

deck-stage:not(:defined){ visibility:hidden; }
deck-stage{ background:#05090d; }

/* ---------------------------------------------------------------------
   БАЗА СЛАЙДА
   --------------------------------------------------------------------- */
.slide{
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 24% 40%, rgba(1,232,171,.10), transparent 55%),
    radial-gradient(90% 80% at 90% 82%, rgba(41,166,203,.10), transparent 60%),
    var(--nav);
  color:var(--txt);
  font-family:'Raleway',sans-serif;
}
/* инженерная сетка */
.slide .grid-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:120px 120px;
  background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 35%, transparent 92%);
  mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 35%, transparent 92%);
}
.inner{ position:absolute; inset:0; z-index:1; }

/* ---------------------------------------------------------------------
   ХРОМ: kicker (бренд), код-чип, сноска, brandmark
   --------------------------------------------------------------------- */
.kicker{
  position:absolute; top:var(--topline); left:var(--edge);
  display:flex; align-items:center; gap:26px;
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:29px; letter-spacing:.40em; text-transform:uppercase;
  color:var(--mut); z-index:8;
}
.kicker .dot{ width:18px; height:18px; border-radius:50%; background:var(--mint); box-shadow:0 0 26px var(--mint); }
.kicker .sep{ width:2px; height:30px; background:rgba(255,255,255,.18); }
.kicker .brand{ color:#fff; }

.code-chip{
  position:absolute; top:var(--topline); right:var(--edge);
  display:flex; align-items:center; gap:18px;
  font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:27px; letter-spacing:.20em; color:var(--mut);
  padding:14px 26px; border:1.5px solid rgba(255,255,255,.12);
  border-radius:999px; background:rgba(255,255,255,.02);
  z-index:8;
}
.code-chip b{ color:var(--mint); font-weight:700; }

.footnote{
  position:absolute; left:var(--edge); bottom:120px;
  font-size:34px; color:var(--mut); font-weight:500; letter-spacing:.01em;
  max-width:2600px; z-index:8; line-height:1.35;
}
.footnote .star{ color:var(--mint); }

.brandmark{
  position:absolute; right:var(--edge); bottom:108px;
  display:flex; align-items:center; gap:20px; opacity:.9; z-index:8;
}
.brandmark img{ height:64px; width:auto; }
.brandmark .tx{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:28px; letter-spacing:.10em; color:#fff; }

/* ---------------------------------------------------------------------
   ЗАГОЛОВКИ
   --------------------------------------------------------------------- */
.head{ position:absolute; top:255px; left:var(--edge); z-index:5; max-width:3440px; }
.head.center{ left:50%; transform:translateX(-50%); text-align:center; }
.eyebrow{
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:42px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mint); margin-bottom:40px;
}
.eyebrow.muted{ color:var(--mut); }
.eyebrow.warn{ color:var(--err); }
.title{
  font-family:'Raleway',sans-serif; font-weight:800;
  font-size:158px; line-height:1.0; letter-spacing:-0.015em; color:#fff;
  text-wrap:balance;
}
.title .acc{ color:var(--mint); }
.title .red{ color:var(--err); }
.subtitle{
  font-weight:500; font-size:62px; line-height:1.28; color:var(--mut);
  margin-top:44px; max-width:2800px; text-wrap:pretty;
}
.subtitle b{ color:#fff; font-weight:700; }

/* ---------------------------------------------------------------------
   ЧИСЛА
   --------------------------------------------------------------------- */
.bignum{
  font-family:'Montserrat',sans-serif; font-weight:800;
  line-height:.94; letter-spacing:-0.01em; color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  text-shadow:0 0 60px rgba(1,232,171,.18);
}
.bignum .u{ color:var(--mint); }

/* ---------------------------------------------------------------------
   КАРТОЧКИ / СТАТ
   --------------------------------------------------------------------- */
.card{
  background:var(--card);
  border:2px solid rgba(255,255,255,.06);
  border-radius:34px;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.7);
}
.stat{
  padding:104px 100px; display:flex; flex-direction:column; gap:0;
  position:relative; overflow:hidden;
}
.stat .stat-eye{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:38px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin-bottom:44px;
}
.stat .stat-num{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:320px;
  line-height:.9; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
.stat .stat-cap{ font-size:60px; color:var(--mut); font-weight:500; margin-top:44px; line-height:1.24; max-width:1300px; }
.stat .stat-cap b{ color:#fff; font-weight:700; }
.stat.accent{ border-color:rgba(1,232,171,.34); }
.stat.accent .stat-num{ color:var(--mint); text-shadow:0 0 70px rgba(1,232,171,.32); }
.stat.danger{ border-color:rgba(224,85,85,.40); }
.stat.danger .stat-num{ color:var(--err); text-shadow:0 0 70px rgba(224,85,85,.28); }
.stat .glow-edge{ position:absolute; left:0; top:0; bottom:0; width:10px; }
.stat.accent .glow-edge{ background:var(--mint); box-shadow:0 0 50px var(--mint); }
.stat.danger .glow-edge{ background:var(--err); box-shadow:0 0 50px var(--err); }

/* пилюля-метка */
.pill{
  display:inline-flex; align-items:center; gap:20px;
  padding:22px 42px; border-radius:999px;
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:32px; letter-spacing:.10em; text-transform:uppercase;
}
.pill.live{ background:rgba(1,232,171,.12); border:2px solid rgba(1,232,171,.4); color:#fff; }
.pill.live .led{ width:18px; height:18px; border-radius:50%; background:var(--mint); box-shadow:0 0 22px var(--mint); }
.pill.news{ background:rgba(224,85,85,.14); border:2px solid rgba(224,85,85,.5); color:#fff; }
.pill.news .led{ width:18px; height:18px; border-radius:50%; background:var(--err); box-shadow:0 0 22px var(--err); }
.pill.neutral{ background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.18); color:var(--mut); }

/* ---------------------------------------------------------------------
   ПЛЕЙСХОЛДЕР ИЗОБРАЖЕНИЙ (футаж/фото — текст добавит монтаж)
   --------------------------------------------------------------------- */
.ph{
  position:relative; overflow:hidden; border-radius:28px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, #16303f, #0c1d29);
  border:2px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.ph .ph-tag{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:30px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mut);
  text-align:center; padding:0 30px; line-height:1.4;
}
.ph .ph-tag span{ display:block; color:rgba(126,153,168,.6); font-size:24px; letter-spacing:.10em; margin-top:14px; }

/* ---------------------------------------------------------------------
   ГРАФИКИ — СТОЛБЦЫ
   --------------------------------------------------------------------- */
.chart{ position:absolute; display:flex; align-items:flex-end; gap:var(--gap, 120px); }
.bar{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.bar .val{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:108px; color:#fff;
  margin-bottom:30px; font-variant-numeric:tabular-nums;
}
.bar .col{
  width:var(--w, 200px); height:var(--h, 200px); border-radius:22px 22px 0 0;
  background:linear-gradient(180deg, var(--mint), #029e76);
  box-shadow:0 0 60px rgba(1,232,171,.22);
  transform-origin:bottom;
}
.bar.dim .col{ background:linear-gradient(180deg, #2a4655, #1b3140); box-shadow:none; }
.bar.danger .col{ background:linear-gradient(180deg, #ef7878, #c2415f); box-shadow:0 0 60px rgba(224,85,85,.22); }
.bar .lbl{
  margin-top:44px; font-size:50px; color:var(--mut); font-weight:600; text-align:center;
  max-width:520px; line-height:1.2;
}
.bar .lbl b{ color:#fff; font-weight:700; display:block; font-size:46px; }
/* baseline линия графика */
.axis{ position:absolute; height:3px; background:rgba(255,255,255,.14); }

@media (prefers-reduced-motion:no-preference){
  html.anim-on [data-deck-active] .bar .col{ animation:grow-bar 1.05s cubic-bezier(.2,.8,.2,1) both; }
  html.anim-on [data-deck-active] .bar:nth-child(2) .col{ animation-delay:.12s; }
  html.anim-on [data-deck-active] .bar:nth-child(3) .col{ animation-delay:.24s; }
  html.anim-on [data-deck-active] .bar:nth-child(4) .col{ animation-delay:.36s; }
}
@keyframes grow-bar{ from{ transform:translateY(70px); } to{ transform:translateY(0); } }

/* ---------------------------------------------------------------------
   ЦЕПОЧКА ШЕВРОНОВ (прогрессия болезни)
   --------------------------------------------------------------------- */
.chain{ position:absolute; display:flex; align-items:stretch; }
.chev{
  position:relative; flex:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:64px 70px 76px 120px;
  background:var(--c, #143b3a);
  clip-path:polygon(0 0, calc(100% - 70px) 0, 100% 50%, calc(100% - 70px) 100%, 0 100%, 70px 50%);
  margin-left:-58px;
}
.chev:first-child{ margin-left:0; clip-path:polygon(0 0, calc(100% - 70px) 0, 100% 50%, calc(100% - 70px) 100%, 0 100%); border-radius:20px 0 0 20px; }
.chev .stage-no{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:52px; color:rgba(255,255,255,.55);
  margin-bottom:20px;
}
.chev .stage-name{ font-family:'Raleway',sans-serif; font-weight:800; font-size:68px; line-height:1.04; color:#fff; }
.chev .stage-sub{ font-size:38px; color:rgba(255,255,255,.8); font-weight:500; margin-top:18px; line-height:1.22; }
.chev .anat{
  position:absolute; top:54px; left:120px;
  width:130px; height:130px; border-radius:22px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 2px, transparent 2px 16px),
    radial-gradient(circle at 40% 35%, var(--anat), var(--anat-deep));
  border:2px solid rgba(255,255,255,.18);
}

@media (prefers-reduced-motion:no-preference){
  html.anim-on [data-deck-active] .chev{ animation:chev-in .55s ease both; }
  html.anim-on [data-deck-active] .chev:nth-child(1){ animation-delay:.05s; }
  html.anim-on [data-deck-active] .chev:nth-child(2){ animation-delay:.20s; }
  html.anim-on [data-deck-active] .chev:nth-child(3){ animation-delay:.35s; }
  html.anim-on [data-deck-active] .chev:nth-child(4){ animation-delay:.50s; }
  html.anim-on [data-deck-active] .chev:nth-child(5){ animation-delay:.65s; }
}
@keyframes chev-in{ from{ transform:translateX(-44px); } to{ transform:translateX(0); } }

/* стрелка прогрессии */
.progress-arrow{
  position:absolute; display:flex; align-items:center; gap:30px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:34px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mut);
}
.progress-arrow .ln{ height:3px; width:var(--len,400px); background:linear-gradient(90deg, rgba(1,232,171,.6), var(--err)); }

/* ---------------------------------------------------------------------
   LOWER-THIRD (плашка спикера)
   --------------------------------------------------------------------- */
.lt{
  display:flex; align-items:center; gap:54px;
  padding:46px 70px 46px 46px;
  background:linear-gradient(100deg, rgba(15,31,45,.96), rgba(20,40,54,.92));
  border-radius:30px;
  border:1.5px solid rgba(1,232,171,.18);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.8);
  position:relative;
}
.lt::before{ content:""; position:absolute; left:0; top:30px; bottom:30px; width:8px; border-radius:8px; background:var(--mint); box-shadow:0 0 36px var(--mint); }
.lt .ava{
  width:188px; height:188px; border-radius:50%; flex-shrink:0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, #1d3b4c, #0f2330);
  border:3px solid rgba(1,232,171,.5);
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:64px; color:var(--mint);
  overflow:hidden;
}
.lt .who .nm{ font-family:'Raleway',sans-serif; font-weight:800; font-size:84px; line-height:1.02; color:#fff; white-space:nowrap; }
.lt .who .nm .first{ color:var(--mint); }
.lt .who .role{ font-size:46px; color:var(--mut); font-weight:500; margin-top:18px; line-height:1.22; max-width:1900px; }

/* мини-плашка (для рейла спикеров) */
.lt-mini{
  display:flex; align-items:center; gap:28px; padding:26px 34px;
  background:var(--card); border-radius:20px; border:1.5px solid rgba(255,255,255,.07);
}
.lt-mini .ava{ width:96px; height:96px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(160deg, #1d3b4c, #0f2330); border:2px solid rgba(1,232,171,.4);
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:34px; color:var(--mint); }
.lt-mini > div:not(.ava){ display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
.lt-mini .nm{ font-weight:700; font-size:40px; line-height:1.12; color:#fff; white-space:nowrap; }
.lt-mini .role{ font-size:33px; color:var(--mut); font-weight:500; margin-top:0; }

/* ---------------------------------------------------------------------
   ПАТЕНТ-КАРТОЧКА
   --------------------------------------------------------------------- */
.patent{
  display:flex; gap:0; overflow:hidden; width:2560px;
}
.patent .doc{
  width:760px; flex-shrink:0; background:#0c1923;
  border-right:2px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.patent .doc .sheet{
  width:560px; height:760px; border-radius:14px; background:#f4f6f7;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  display:flex; flex-direction:column; padding:60px 56px; gap:24px;
  transform:rotate(-3deg);
}
.patent .doc .sheet .seal{ width:120px; height:120px; border-radius:50%; border:5px solid var(--anat-deep); opacity:.4; align-self:flex-end; }
.patent .doc .sheet .ln{ height:18px; border-radius:6px; background:#c9d3d6; }
.patent .doc .sheet .ln.s{ width:55%; } .patent .doc .sheet .ln.m{ width:80%; } .patent .doc .sheet .ln.l{ width:100%; }
.patent .meta{ padding:90px 96px; display:flex; flex-direction:column; justify-content:center; gap:0; }
.patent .meta .row{ display:flex; justify-content:space-between; padding:38px 0; border-bottom:1.5px solid rgba(255,255,255,.08); }
.patent .meta .row:last-child{ border-bottom:none; }
.patent .meta .row .k{ font-size:50px; color:var(--mut); font-weight:500; }
.patent .meta .row .v{ font-size:56px; color:#fff; font-weight:700; font-family:'Montserrat',sans-serif; text-align:right; }
.patent .meta .row .v.acc{ color:var(--mint); }

/* ---------------------------------------------------------------------
   АНИМАЦИЯ ВХОДА ЗАГОЛОВКОВ / ОБЩАЯ
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.anim-on [data-deck-active] .anim-up{ animation:up .6s ease both; }
  html.anim-on [data-deck-active] .anim-up.d1{ animation-delay:.08s; }
  html.anim-on [data-deck-active] .anim-up.d2{ animation-delay:.18s; }
  html.anim-on [data-deck-active] .anim-up.d3{ animation-delay:.30s; }
  html.anim-on [data-deck-active] .anim-fade{ animation:fade .8s ease both; }
}
@keyframes up{ from{ transform:translateY(42px); } to{ transform:translateY(0); } }
@keyframes fade{ from{ transform:translateY(24px); } to{ transform:translateY(0); } }

/* ---------------------------------------------------------------------
   ГЛОБУС (слайд 1)
   --------------------------------------------------------------------- */
.globe-wrap{ position:absolute; left:150px; top:50%; width:1500px; height:1500px; transform:translateY(-50%); z-index:4; }
.globe-glow{ position:absolute; inset:-12%; background:radial-gradient(circle at 46% 44%, rgba(1,232,171,.32), rgba(41,166,203,.10) 42%, transparent 66%); filter:blur(40px); }
.globe{ position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #16384a 0%, #102a3a 40%, #0a1c28 70%, #06121b 100%);
  box-shadow:inset 60px 40px 160px rgba(1,232,171,.10), inset -90px -70px 220px rgba(0,0,0,.65), 0 0 0 2px rgba(255,255,255,.04);
  overflow:hidden; }
.globe .dots{ position:absolute; inset:0;
  background-image:radial-gradient(rgba(126,153,168,.55) 5px, transparent 6px);
  background-size:46px 46px; background-position:center;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 58%, transparent 76%);
  mask-image:radial-gradient(circle at 50% 50%, #000 58%, transparent 76%); opacity:.5; }
.globe svg.grat{ position:absolute; inset:0; width:100%; height:100%; }
.globe .shade{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 34% 30%, transparent 38%, rgba(3,9,14,.55) 86%); }
.globe .rim{ position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 90px rgba(1,232,171,.12); border:2px solid rgba(1,232,171,.16); }
.globe-ring{ position:absolute; left:50%; top:50%; width:108%; height:108%; transform:translate(-50%,-50%) rotateX(74deg); border-radius:50%; border:2px solid rgba(41,166,203,.22); box-shadow:0 0 40px rgba(41,166,203,.10); }
.ru-marker{ position:absolute; left:46%; top:33%; z-index:6; }
.ru-marker .pin{ position:relative; width:34px; height:34px; border-radius:50%; background:var(--mint); box-shadow:0 0 30px var(--mint), 0 0 60px rgba(1,232,171,.6); }
.ru-marker .pulse{ position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%); border-radius:50%; border:3px solid var(--mint); animation:pulse 2.6s ease-out infinite; }
.ru-marker .pulse.d2{ animation-delay:1.3s; }
@keyframes pulse{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:.85; } 100%{ transform:translate(-50%,-50%) scale(7); opacity:0; } }
.ru-label{ position:absolute; left:46%; top:33%; transform:translate(70px,-78px); z-index:7; display:flex; flex-direction:column; gap:6px; }
.ru-label::before{ content:""; position:absolute; left:-58px; top:64px; width:64px; height:2px; background:rgba(1,232,171,.55); transform-origin:right center; transform:rotate(28deg); }
.ru-label .name{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:34px; letter-spacing:.22em; text-transform:uppercase; color:#fff; }
.ru-label .sub{ font-size:26px; color:var(--mint); font-weight:600; letter-spacing:.04em; }

.ppl{ display:flex; gap:18px; }
.ppl .p{ position:relative; width:50px; height:90px; }
.ppl .p::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:38px; height:38px; border-radius:50%; background:var(--mut); }
.ppl .p::after{ content:""; position:absolute; left:50%; top:44px; transform:translateX(-50%); width:50px; height:46px; border-radius:24px 24px 12px 12px; background:var(--mut); }
.ppl .p.on::before, .ppl .p.on::after{ background:var(--mint); box-shadow:0 0 26px rgba(1,232,171,.55); }

/* ---------------------------------------------------------------------
   pH-МЕТРИЯ — прорисовка линий (слайд 15)
   База (печать/reduced-motion) — полная линия; на активном — рисуется
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.anim-on [data-deck-active] [data-phchart] .ph-lines path{ stroke-dasharray:2600; animation:ph-draw 1.3s ease both; }
  html.anim-on [data-deck-active] [data-phchart] .ph-median{ stroke-dasharray:2600; animation:ph-draw 1.5s ease .25s both; }
  html.anim-on [data-deck-active] [data-phchart] .ph-lines path:nth-child(2){ animation-delay:.06s; }
  html.anim-on [data-deck-active] [data-phchart] .ph-lines path:nth-child(3){ animation-delay:.12s; }
  html.anim-on [data-deck-active] [data-phchart] .ph-lines path:nth-child(4){ animation-delay:.18s; }
  html.anim-on [data-deck-active] [data-phchart] .ph-lines path:nth-child(5){ animation-delay:.24s; }
  html.anim-on [data-deck-active] [data-phchart] .ph-lines path:nth-child(6){ animation-delay:.30s; }
  html.anim-on [data-deck-active] [data-phchart] .ph-lines path:nth-child(7){ animation-delay:.36s; }
}
@keyframes ph-draw{ from{ stroke-dashoffset:2600; } to{ stroke-dashoffset:0; } }