:root{
  --bg:#0b0d12; --bg2:#0f1320; --text:#e6e9f2; --sub:#9aa3b2;

  /* CTA-градиент (и оттенок на ховер) */
  --cta1:#8b5cf6; --cta2:#22d3ee;
  --cta1-hover:#a27aff; --cta2-hover:#41e6fb;

  /* количество рядов (JS выставит автоматически по факту) */
  --rows: 5;

  /* отступы сверху/снизу и межрядные отступы — «адаптивные» */
  --top-start: clamp(2vh, 6vh, 8vh);
  --bottom-pad: clamp(2vh, 6vh, 8vh);
  --gapX: clamp(8px, 1.2vh, 16px);
  --v-gap: var(--gapX);

  /* ключ: высота одного ряда так, чтобы всё ровно заполняло окно */
  /* dvh — «динамический vh», корректно работает с адресной строкой на мобилках */
  --rowH: clamp(
    120px,
    calc( (100dvh - var(--top-start) - var(--bottom-pad) - (var(--rows) - 1)*var(--v-gap)) / var(--rows) ),
    260px
  );
}


*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text);
  background:linear-gradient(180deg,var(--bg),var(--bg) 40%,var(--bg2) 100%) fixed;
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
}

/* ===== ФОН: 5 дорожек без canvas ===== */
.belts{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }

.marquee{
  position:absolute; left:0; right:0;
  height:var(--rowH); overflow:hidden; display:block;
}
.c1{ top: calc(var(--top-start) + 0*(var(--rowH) + var(--v-gap))); }
.c2{ top: calc(var(--top-start) + 1*(var(--rowH) + var(--v-gap))); }
.c3{ top: calc(var(--top-start) + 2*(var(--rowH) + var(--v-gap))); }
.c4{ top: calc(var(--top-start) + 3*(var(--rowH) + var(--v-gap))); }
.c5{ top: calc(var(--top-start) + 4*(var(--rowH) + var(--v-gap))); }

@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__track{
  display:flex; align-items:center; gap:var(--gapX);
  width:max-content; will-change: transform;
  animation: marquee var(--duration, 30s) linear infinite;
}
.marquee[data-dir="right"] .marquee__track{ animation-direction: reverse; }

.marquee__item img{
  display:block;
  height: calc(var(--rowH) - var(--gapX)); /* чтобы отступ сверху/снизу = gap */
  width:auto; border-radius:10px; filter:saturate(1.05);
}

/* лёгкая вуаль поверх фона */
.hero-dim{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1200px 600px at 50% 40%, rgba(0,0,0,.50), rgba(0,0,0,.78));
  backdrop-filter: blur(.5px);
}

/* ===== ПЕРЕДНИЙ ПЛАН ===== */
.hero-wrap{
  position:relative; z-index:1;
  min-height:100dvh; display:grid; place-items:center;
}
.hero{ text-align:center; padding:28px 18px; max-width:900px; margin:auto; }
.brand{ display:flex; gap:12px; align-items:center; justify-content:center; margin-bottom:8px; }
.badge{ font-size:12px; background:linear-gradient(90deg,var(--cta1),var(--cta2)); color:#0b0d12; border-radius:999px; padding:4px 10px; font-weight:700; }
.title{ font-weight:700; font-size:14px; color:var(--sub); }

.hero h1{ font-size: clamp(28px, 6vw, 54px); margin:6px 0 6px; line-height:1.1; }
.hero .sub{ color:var(--sub); margin:0 0 18px; font-size: clamp(14px, 2.4vw, 18px); }

/* ===== КНОПКИ (liquid glass) ===== */
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }

.btn{
  appearance:none; border:0; cursor:pointer; display:inline-block;
  font-weight:700; font-size:16px; padding:14px 22px; border-radius:14px;
  transition:
    transform .15s cubic-bezier(.2,.8,.2,1),
    background .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    filter .2s ease,
    color .2s ease;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  will-change: transform, filter;
}
.btn.big{ padding:16px 24px; font-size:17px; }

/* по умолчанию .btn без фона (чтобы не конфликтовало) */
.btn{ background: transparent; }

/* Главная CTA */
.btn.primary{
  background: linear-gradient(90deg, var(--cta1), var(--cta2));
  color:#0b0d12;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}
.btn.primary:hover{
  background: linear-gradient(90deg, var(--cta1-hover), var(--cta2-hover));
  filter: saturate(108%) brightness(1.04);
  color:#0b0d12;
}

/* Второстепенная — стеклянная */
.btn.secondary{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn.secondary:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.38);
  transform: translateY(-2px) scale(1.015);
}

/* Общее поведение */
.btn:hover{ transform: translateY(-2px) scale(1.015); }
.btn:active{ transform: translateY(0) scale(.965); box-shadow: 0 5px 14px rgba(0,0,0,.35) !important; }
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(146,169,255,.22),
    0 10px 26px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.16);
}

/* «liquid glass» инпут */
.prompt-demo{ margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.prompt-demo input{
  width:min(900px, 96vw);
  padding:16px 18px; font-size:16px; color:#e9eef9;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.22); border-radius:16px;
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
  outline: none; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.prompt-demo input::placeholder{ color:rgba(230,233,242,0.6); }
.prompt-demo input:focus{
  border-color: rgba(146,169,255,0.6);
  box-shadow: 0 14px 34px rgba(0,0,0,0.42), 0 0 0 3px rgba(129,140,248,0.15), inset 0 0 0 1px rgba(255,255,255,0.10);
}
.hint{ color:var(--sub); font-size:12px; }

/* выключаем старые DOM-варианты, если вдруг остались */
.bg, .row, .loop, .sequence{ display:none !important; }

/* доступность */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none !important; transform:none !important; }
  .btn{ transition:none; }
  .btn:hover,.btn:active{ transform:none; }
}

/* демо-поле: полностью декоративное, кликов не принимает */
#demoPrompt{
  pointer-events: none;        /* не кликается */
  caret-color: transparent;    /* без курсора */
  user-select: none;           /* нельзя выделять */
}
#demoPrompt:focus{ outline: none; }


/* мобильные правки */
@media (max-width: 480px){
  :root{ --rowH: 140px; --top-start: 6vh; }
}

/* --- Кнопки-ссылки: убрать подчёркивание и зафиксировать цвет во всех состояниях --- */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus,
.btn {
  text-decoration: none !important;
}

/* фикс цвета для primary во всех состояниях */
.btn.primary,
a.btn.primary:link,
a.btn.primary:visited,
a.btn.primary:hover,
a.btn.primary:active,
a.btn.primary:focus {
  color: #fff !important;
}

/* фикс цвета для secondary во всех состояниях */
.btn.secondary,
a.btn.secondary:link,
a.btn.secondary:visited,
a.btn.secondary:hover,
a.btn.secondary:active,
a.btn.secondary:focus {
  color: var(--text) !important;
}

/* опционально: убираем синий тап-хайлайт на iOS/Android */
a.btn { -webkit-tap-highlight-color: transparent; }

/* --- safe-area для iOS (и не только) + фикс ширины на мобильных --- */
:root{
  /* минимальный боковой отступ + учёт вырезов экрана */
  --side-pad: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

.hero-wrap{ padding-inline: var(--side-pad); }     /* весь контент не прилипает к краям */
.hero{ padding-inline: 0; }                        /* чтобы отступ был ровно один слой */

/* инпут учитывает боковые поля, чтобы не «выпирал» */
.prompt-demo input{
  width: min(900px, calc(100dvw - 2*var(--side-pad)));
}

/* запрет горизонтального скролла и артефактов */
html, body{ overflow-x:hidden; touch-action: pan-y; }

/* изоляция и композитинг для лент, чтобы они не влияли на ширину страницы */
.belts, .marquee, .marquee__track{ contain: layout paint; }
.marquee__track{ transform: translateZ(0); will-change: transform; }

/* --- Preloader overlay --- */
.pre{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(1200px 600px at 50% 45%, rgba(0,0,0,.55), rgba(0,0,0,.86));
  transition: opacity .35s ease, visibility .35s ease;
}
.pre--hide{ opacity: 0; visibility: hidden; }

/* спиннер на conic-gradient */
.pre__spinner{
  width: 64px; height: 64px; border-radius: 50%;
  background:
    conic-gradient(from 0deg, #8b5cf6 0%, #22d3ee 60%, rgba(255,255,255,.15) 61%);
  mask: radial-gradient(circle 20px, transparent 60%, #000 61%);
  animation: pre-rot 1s linear infinite;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}
@keyframes pre-rot { to { transform: rotate(1turn); } }

.pre__label{
  margin-top: 18px;
  color: #e6e9f2;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

/* на время прелоадера запретим прокрутку */
html.prelock, body.prelock{ overflow: hidden; }

/* чтобы фон не «дергался» после показа */
.belts, .marquee, .marquee__track{ contain: layout paint; }