:root{
  --bg:#0b0f1a;
  --panel:#0e1526;
  --card:rgba(255,255,255,.06);
  --text:#e9edf4;
  --muted:#a7b0c0;
  --brand:#73e1a3; /* мягкая мята */
  --brand-2:#70a7ff; /* холодный голубой */
  --accent:#ffd479; /* тёплый акцент */
  --radius:18px;
  --shadow:0 8px 30px rgba(0,0,0,.25);
  --speed:700ms;
}
html,body{
  margin:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,sans-serif;
}

*{
  box-sizing:border-box;
/*  outline: 1px solid red; */
}

/* ————— Глобальные утилиты ————— */
.container{
  max-width:1400px;
  width:100%;
  padding:0 clamp(16px, 4vw, 32px);
  margin:0 auto
}

.btn{
  display:inline-flex;
  gap:.6rem;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.15rem;
  border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#081018;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(112,167,255,.24);
  transition:transform .15s ease, box-shadow .3s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(112,167,255,.32)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text);box-shadow:none}
/* ——— Бегающий блик только на первой и последней кнопках ——— */
.hero .btn,
#consult .btn{
  position: relative;
  overflow: hidden;          /* не даём блику выходить за радиус */
  isolation: isolate;        /* чтобы смешивание не влияло на тень */
}

.hero .btn::after,
#consult .btn::after{
  content:"";
  position:absolute;
  inset:-1px;                /* на 1px внутрь, повторяем скругление */
  border-radius:inherit;
  pointer-events:none;
  /* сам блик */
  background:linear-gradient(
    110deg,
    transparent 35%,
    rgba(255,255,255,.45) 50%,
    transparent 65%
  );
  mix-blend-mode:screen;
  transform:skewX(-20deg) translateX(-140%);
  animation:btnShine 3.2s ease-in-out infinite;
}

@keyframes btnShine{
  to{ transform:skewX(-20deg) translateX(140%); }
}

/* Чуть ускоряем при ховере на десктопе */
@media (hover:hover){
  .hero .btn:hover::after,
  #consult .btn:hover::after{
    animation-duration:2.2s;
  }
}

/* Уважение настроек доступности */
@media (prefers-reduced-motion:reduce){
  .hero .btn::after,
  #consult .btn::after{ animation:none }
}
.chip{display:inline-block;padding:.35rem .6rem;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);font-size:.8rem}
.muted{color:var(--muted)}
.grid{display:grid;gap:1.2rem}
.card{background:var(--card);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);box-shadow:var(--shadow)}

[hidden] { display: none !important; }

/* ————— Хиро ————— */
.hero{
  position:relative;
  overflow:hidden;
  min-height: 100vh;
}

.hero .wrap{
  padding-block:clamp(64px,8vw,120px) 64px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2rem;
  align-items:center
}

/* Десктопная картинка (правый столбец) */
.hero-img{
  width: clamp(360px, 38vw, 640px);
  height: auto;
  justify-self: end;
  align-self: center;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 40px rgba(112,167,255,.18));
  border-radius: 18px;
}

/* Мобильная картинка (между заголовком и списком) — по умолчанию скрыта */
.hero-img-m{
  display: none;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 10px 0 12px;
  border-radius: 18px;
  filter: drop-shadow(0 10px 28px rgba(112,167,255,.16));
}

.gradient{
  position:absolute;
  inset:-30% -30%; /* больше вылет за края, снизу уже не обрежется */
  background:
    radial-gradient(800px 500px at 15% 20%, rgba(112,167,255,.24), transparent 60%),
    radial-gradient(700px 420px at 85% 30%, rgba(115,225,163,.25), transparent 60%),
    /* было 50% 80%, поднимаем вверх и чуть увеличим */
    radial-gradient(700px 520px at 50% 60%, rgba(255,212,121,.14), transparent 60%);
  filter:saturate(120%) blur(20px);
  pointer-events:none;
}

.gradient2, .gradient3, .gradient4, .gradient5{
  position:absolute;
  inset:-32% -32%;           /* большой вылет за края — ничего не обрежется */
  filter:saturate(120%) blur(20px);
  pointer-events:none;
  z-index:0;
}

/* gradient2 — два голубоватых боковых пятна, по центру по высоте */
.gradient2{
  background:
    radial-gradient(840px 540px at 15% 50%, rgba(112,167,255,.26), transparent 60%),
    radial-gradient(760px 480px at 85% 50%, rgba(115,225,163,.28), transparent 60%);
}

/* gradient3 — только жёлтоватое в центре */
.gradient3{
  background:
    radial-gradient(940px 620px at 50% 50%, rgba(255,212,121,.16), transparent 62%);
}

/* gradient4 — только голубоватое в центре (смесь двух холодных оттенков) */
.gradient4{
  background:
    radial-gradient(960px 640px at 50% 50%, rgba(112,167,255,.22), transparent 60%),
    radial-gradient(700px 460px at 50% 50%, rgba(115,225,163,.18), transparent 58%);
}

/* gradient5 — «мост» через середину:
   лёгкая горизонтальная полоса + деликатные боковые блики */
.gradient5{
  background:
    linear-gradient(180deg, transparent 35%, rgba(255,212,121,.10) 50%, transparent 65%),
    radial-gradient(720px 480px at 12% 50%, rgba(112,167,255,.18), transparent 60%),
    radial-gradient(720px 480px at 88% 50%, rgba(115,225,163,.20), transparent 60%);
}

.h1{
  font-size:clamp(32px,4.4vw,52px);
  line-height:1.08;
  margin:0 0 45px;
  font-weight:900
}

.lead{
  font-size:clamp(16px,1.4vw,19px);
  color:var(--muted);
  margin-bottom:8px;
  margin-top: 8px;
  font-weight: 600;
}

.hero .cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 30px;
}

.hero .panel{min-height:320px}

/* ————— Разделы ————— */
section{padding:72px 0}
section.airy{ padding: clamp(90px, 11vw, 150px) 0; }

h2{
  font-size:clamp(26px,3.2vw,36px);
  margin:0 auto 45px auto;
  line-height:1.08;
  text-align: center;
  max-width: 860px;
}

.sub{color:var(--muted);margin-bottom:22px}

/* ————— Как это работает ————— */

/* общая шапка блока */
.blk{ position:relative; z-index:1; margin-bottom:28px; }
.blk-head{
  display:inline-block; padding:.7rem 1rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; font-weight:800; margin-bottom:16px;
}


/* 1) Проблемы */
#problems{ position:relative; overflow:hidden; }

.problems-layout{
  display:grid;
  /* левый столбец чуть шире, правый — под список */
  grid-template-columns: 1.2fr 1fr;
  align-items:center;
  gap:clamp(28px, 5.2vw, 64px);
  max-width: 1240px;      /* было 1100px */
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.problems-illus img{
  display:block;
  width: clamp(460px, 42vw, 640px); /* было 100% */
  height:auto;
  border-radius:18px;
  filter: drop-shadow(0 14px 38px rgba(112,167,255,.18));
  opacity:.95;
  transform: translateX(-4%);       /* лёгкий вынос влево на десктопе */
}

.problems-list{
  display:grid;
  gap:18px;
  counter-reset: prob;           /* запускаем счётчик */
}

.problems-list .problem-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
}

.problems-list .problem-card::before{
  counter-increment: prob;
  content: counter(prob);
  flex:0 0 42px;
  width:42px; height:42px;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; color:#081018;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 24px rgba(112,167,255,.26);
}

.problems-list .p-title{
  font-weight:700;
}

/* поочерёдное появление как раньше */
.problems-list .problem-card{ opacity:0; transform:translateY(18px); }
.problems-list.reveal .problem-card{ opacity:1; transform:none; }
.problems-list.reveal .problem-card:nth-child(1){ transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); transition-delay: 40ms; }
.problems-list.reveal .problem-card:nth-child(2){ transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); transition-delay:140ms; }
.problems-list.reveal .problem-card:nth-child(3){ transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); transition-delay:240ms; }
.problems-list.reveal .problem-card:nth-child(4){ transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); transition-delay:340ms; }

/* 2) После внедрения: переключатель состояний */
#after{
  position:relative;
  overflow: hidden;
}

/* активная вкладка (содержимое показано) */
.switch{
  display:flex; justify-content:center; gap:14px;
  margin:18px 0 26px;
}
.switch .tab{
  appearance:none; cursor:pointer; font-weight:700;
  font-size:clamp(14px,1.25vw,18px);
  padding:.9rem 1.2rem; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); color:var(--text);
  transition:transform .15s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.switch .tab:hover{ transform:translateY(-1px); }

/* Состояния как изображения */
#after .state{
  margin: 8px auto 0;
  max-width: 1200px;            /* ширина, как у верхних блоков */
}

.state h2 {
  font-size: 120%;
  line-height: 1.3;
}

#after .state-img{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: grid;
  justify-items: center;
}

#after .state-img img{
  width: min(100%, 800px);     /* красиво на десктопе, адаптив на мобиле */
  height: auto;
  border-radius: 18px;
  filter: drop-shadow(0 12px 36px rgba(112,167,255,.22));
}

/* активная вкладка — плотная заливка */
.switch .tab.on{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#081018;
  border-color:transparent;
  box-shadow:0 8px 24px rgba(112,167,255,.26);
}

/* «мягкий акцент» для кнопки “с ИИ”, когда показан текст «без ИИ» */
.switch .tab.emph{
  background:linear-gradient(135deg, rgba(115,225,163,.28), rgba(112,167,255,.28));
  border-color:transparent;
  box-shadow:inset 0 0 22px rgba(112,167,255,.18);
}
.switch .tab.emph.on{ /* если кликнули и она стала активной — как .on */
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#081018; border-color:transparent; box-shadow:0 8px 24px rgba(112,167,255,.26);
}

/* ——— Магнит для кнопки «с ИИ», когда она НЕ активна ——— */
.switch .tab[data-mode="ai"].emph:not(.on){
  position: relative;
  z-index: 0;
  /* мягкое «дыхание» */
  animation: aiPulse 2.4s ease-in-out infinite;
}

/* проблеск по кнопке */
.switch .tab[data-mode="ai"].emph:not(.on)::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  mix-blend-mode:screen;
  transform:skewX(-12deg) translateX(-120%);
  animation: aiShine 1.8s ease-in-out infinite;
  pointer-events:none;
}

/* «волны» слева, бегущие к кнопке */
.switch .tab[data-mode="ai"].emph:not(.on)::after{
  content:"";
  position:absolute;
  right:100%;                 /* ставим слева от кнопки */
  margin-right:12px;
  top:50%; transform:translateY(-50%);
  width:90px; height:28px;
  opacity:.9; pointer-events:none;
  background:
    radial-gradient(12px 14px at 0% 50%, rgba(112,167,255,.34) 40%, rgba(112,167,255,0) 45%) 0 50%/30px 100% repeat-x;
  animation: aiFlow 1.6s linear infinite;
}

/* кейфреймы */
@keyframes aiPulse{
  0%{ box-shadow:0 0 0 0 rgba(112,167,255,.24), 0 0 0 0 rgba(115,225,163,.22) }
  70%{ box-shadow:0 0 0 12px rgba(112,167,255,0), 0 0 0 24px rgba(115,225,163,0) }
  100%{ box-shadow:0 0 0 0 rgba(112,167,255,0), 0 0 0 0 rgba(115,225,163,0) }
}
@keyframes aiShine{
  from{ transform:skewX(-12deg) translateX(-120%) }
  to  { transform:skewX(-12deg) translateX(130%) }
}
@keyframes aiFlow{
  from{ background-position-x:90px }
  to  { background-position-x:0px }
}

/* если пользователь отключил анимации — не навязываем */
@media (prefers-reduced-motion: reduce){
  .switch .tab[data-mode="ai"].emph:not(.on),
  .switch .tab[data-mode="ai"].emph:not(.on)::before,
  .switch .tab[data-mode="ai"].emph:not(.on)::after{ animation:none }
}

.after-cta {
  margin-top: 50px;
}

/* 3) Три шага */
#how{
  position:relative;
  overflow: hidden;
}
.steps.three{ grid-template-columns:repeat(3,1fr); margin-top:10px; }
.curves{ width:100%; height:140px; margin-top: -8px; }
.curves path{
  fill:none; stroke:rgba(255,255,255,.16); stroke-width:2.2; stroke-linecap:round;
}
.steps .step{
  position: relative;
  padding: 36px 18px 18px;
  text-align: left; /* заголовки остаются слева, если нужно — поставь center */
}
.steps .step .icon{
  position: absolute;
  left: 50%;
  top: -22px;                 /* чуть за пределами карточки — «висящий» бейдж */
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #081018;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(112,167,255,.26);
}
.steps .step h3{ margin-top: 6px; text-align: center; }

/* ————— Sticky conveyor ————— */
.conveyor{position:relative}
.conveyor .sticky{
  position:sticky;
  top:64px;
  height:calc(100vh - 64px);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.conveyor .track{
  display:flex;
  gap:24px;
  height:100%;
  align-items:flex-start;          /* было center — из-за этого всё «висело» внизу */
  padding:120px 8vw 28px;           /* ровная «полка» сверху, воздух по бокам */
  will-change:transform;
}
.conveyor .sticky-head{
  position:absolute;
  inset:0 0 auto 0;           /* шапка прижата к верху sticky-зоны */
  height:115px;                /* высота шапки на десктопе */
  display:grid;
  align-items:center;
  pointer-events:none;        /* не перехватывает колесо/скролл */
  background:
    linear-gradient(180deg, rgba(11,15,26,.90), rgba(11,15,26,.60) 60%, transparent);
  z-index:5;
}
.conveyor .sticky-head h2{    /* сам заголовок кликабелен при необходимости */
  pointer-events:auto;
  margin:0 auto;
}
.role.spacer{
  flex: 0 0 8vw;      /* ширина «воздуха» справа (в унисон с padding ленты) */
  height: 1px;        /* минимальная высота, чтобы не занимать место по вертикали */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.role{
  flex:0 0 clamp(68vw, 780px, 86vw);
  height:min(500px,70vh);
  display:grid;
  grid-template-rows:auto auto 1fr auto auto;
  gap:12px;
  padding:20px;
  background:rgba(7,11,22,.7);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:var(--shadow)
}
.role h3{margin:0;font-size:clamp(20px,2.4vw,26px)}
.role p{color:var(--muted)}
.role .tag{font-size:.8rem;color:#081018;justify-self:start;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:999px;padding:.35rem .7rem;font-weight:800;letter-spacing:.2px}

/* центрируем картинку робота в средней (растягиваемой) строке */
.role-illus{
  display:grid;
  place-items:center;
  align-self:center;
  padding:6px 0 2px;
}
.role-illus{ padding:0; margin-top:-10px; }  /* лёгкий подъём иллюстрации */
.role-illus img{
  width: min(54%, 400px);
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 10px 28px rgba(112,167,255,.20));
}

/* нижняя строка с “метриками/эффектом” — делаем плотнее и жирнее */
.role > .muted{
  color:var(--muted);
  font-weight:700;
}

/* ——— Consult block ——— */
#consult{ position:relative; overflow:hidden; }
#consult .container{ position:relative; z-index:1; }

.consult-grid.two{
  display:grid;
  gap:24px;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* одиночная карточка по центру для финального экрана */
.consult-grid.one{
  display:grid;
  grid-template-columns: minmax(280px, 720px);
  justify-content:center;   /* центрируем сетку */
  margin: 0 auto;
  gap: 20px;
}
#consult h2{ margin-bottom: 26px; }         /* чуть компактнее заголовок */
.consult-grid.one .card{ padding: 22px; }    /* аккуратные поля */

/* Списки в правой карточке: плавное «по пунктам» */
@keyframes rise { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.card.reveal .stagger li{ opacity:0; animation:rise .5s both ease-out; }
.card.reveal .stagger li:nth-child(1){ animation-delay:.06s }
.card.reveal .stagger li:nth-child(2){ animation-delay:.16s }
.card.reveal .stagger li:nth-child(3){ animation-delay:.26s }

/* ————— Футер ————— */
footer{
  padding:48px 0;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06)
}

/* ————— Reveal анимации ————— */
[data-animate]{opacity:0;transform:translateY(22px);transition:opacity var(--speed) ease, transform var(--speed) cubic-bezier(.22,.61,.36,1)}
.reveal{opacity:1;transform:none}
[data-animate="right"]{transform:translateX(24px)}
[data-animate="left"]{transform:translateX(-24px)}
[data-animate="scale"]{transform:scale(.96)}
.h1[data-animate="left"]{ transform:translateY(22px); }

@media (max-width: 1100px){
  .problems-layout{ grid-template-columns:1fr; }
  .problems-illus{ justify-self:center; max-width:600px; }
  .problems-illus img{ width: 100%; transform:none; max-width: 600px; }
}

/* ————— Мобильная адаптация ————— */
@media (max-width: 920px){
  section{padding:35px 0}
  section.airy{ padding: clamp(45px, 5.5vw, 75px) 0; }
  .hero{ min-height: 100svh; }
  .hero .wrap{grid-template-columns:1fr; padding-block: clamp(4px, 0.9vh, 7px) 7px;}
  .hero-text{display: flex; flex-direction: column;}
  .hero .h1{ margin-bottom: clamp(10px, 2vh, 16px) }
  .hero-img{ display: none; } 
  .hero-img-m{ display: block; margin: 4px auto 10px auto; max-height: 280px; max-width: 280px }
  .hero .lead{ margin: 2px 0; }
  .hero .cta{ align-self: center; margin-top: clamp(5px, 5svh, 9svh); }
  .steps{grid-template-columns:1fr}
  .conveyor .sticky-head{ height:72px; padding-top:6px; }
  .conveyor .sticky{top:56px;height:calc(100vh - 56px)}
  .conveyor .track{ padding:90px 6vw 14px; }
  .role{
    flex-basis:86vw;
    height:auto;
    min-height:unset;                     /* убираем навязанный минимум */
    grid-template-rows:
      auto                                 /* плашка-таг */
      auto                                 /* заголовок */
      auto                                 /* картинка робота */
      auto                                 /* текст */
      auto;                                /* жирные метрики */
    gap:10px;
  }
  
  /* просто картинка без подложки и рамок */
  .role-illus{
    aspect-ratio:auto;                     /* больше не держим квадрат */
    padding:0;
    margin:4px 0 6px;
    background:none;
    border:0;
    display:grid;
    place-items:center;
  }
  .role-illus img{
    width: clamp(150px, 55%, 290px);       /* аккуратно вписывается */
    height:auto;
    max-height:none;
    object-fit:contain;
  }
  [data-animate="left"], [data-animate="right"]{ transform:translateY(16px); }
  .steps.three{ grid-template-columns:1fr; }
  .curves{ display:none; }
  .consult-grid{ grid-template-columns:1fr; }
  .screen{ aspect-ratio: auto; min-height: 200px; }
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .conveyor .track{transition:none}
  [data-animate]{transition:none}
}

/* читаемый набор для юридического текста */
article.card h2 { text-align: left; font-size: clamp(20px, 2.2vw, 28px); margin: 20px 0 10px }
article.card h3 { font-size: clamp(18px, 2vw, 22px); margin: 16px 0 8px }
article.card p, article.card li { font-size: clamp(15px, 1.6vw, 17px); color: var(--text,#cbd5e1) }
article.card ol, article.card ul { padding-left: 1.25rem; margin: 8px 0 16px }
article.card a { text-decoration: underline }