/* Общий каркас первого экрана для вариантов главной (.hero-uni: варианты 11–15).
   Каркас задаёт РАСПОЛОЖЕНИЕ и ФОРМУ всех элементов: шапку, плашки, заголовок, описание,
   даты, форму входа, полосу фактов. Вариант задаёт только цвета (переменные --hf-*)
   и свою сцену-фон в .des-stage. Поэтому при смене варианта элементы стоят на тех же местах. */

.hero-uni{
  position: relative;
  --hf-header-h: 76px;
  --hf-hero-h: clamp(740px, calc(100vh - 120px), 790px);   /* высота первого экрана вместе с шапкой, ≥1101px */
  --hf-ground: 56px;                                        /* полоса под формой: «земля» сцены */

  /* Цвета по умолчанию — нейтральная тёмная фиолетовая тема; вариант переопределяет. */
  --hf-hero-bg: #6744d4;
  --hf-logo-filter: brightness(0) invert(1);                /* логотип поверх сцены; для светлой сцены: none */
  --hf-brand-note: #ebe4ff; --hf-brand-rule: #ffffff40;
  --hf-nav-login-bg: #ffffff1f; --hf-nav-login-bg-hover: #ffffff33; --hf-nav-login-border: #ffffff59; --hf-nav-login-ink: #fff;
  --hf-nav-register-bg: #fff; --hf-nav-register-bg-hover: #f1eafd; --hf-nav-register-border: #fff; --hf-nav-register-ink: #533393;

  --hf-h1: #fff; --hf-h1-accent: #ffd76a; --hf-h1-accent-bg: none; --hf-h1-accent-fill: currentColor; --hf-h1-shadow: none;
  --hf-copy: #f0eaff;
  --hf-pill1-bg: #e5ddff; --hf-pill1-ink: #38256c; --hf-pill1-border: transparent;
  --hf-pill2-bg: #f7cd5e; --hf-pill2-ink: #352853; --hf-pill2-border: transparent;
  --hf-pill3-bg: #d6f8d2; --hf-pill3-ink: #284530; --hf-pill3-border: transparent;
  --hf-dates-bg: #ffffff1f; --hf-dates-border: #ffffff38; --hf-dates-bar: #ffd76a; --hf-dates-ink: #f1e9ff; --hf-dates-strong: #fff; --hf-dates-shadow: none;

  --hf-card-bg: #fff; --hf-card-ink: #24243e; --hf-card-shadow: 0 28px 60px -18px #17084fb8;
  --hf-label: #596074; --hf-muted: #687086; --hf-rule: #eef0f5;
  --hf-field-bg: #f7f5fc; --hf-field-border: #dcd7e8; --hf-field-ink: #27304d; --hf-placeholder: #70788b;
  --hf-link: #68469e;
  --hf-action: #6040c3; --hf-action-hover: #4b2da8; --hf-action-ink: #fff; --hf-action-shadow: none;
  --hf-alt-bg: #f3eefc; --hf-alt-bg-hover: #e8dcfa; --hf-alt-border: #dbd0ed; --hf-alt-border-hover: #a68acb; --hf-alt-ink: #443066;
  --hf-focus: #7c5ce0; --hf-focus-ring: #7c5ce040;
  --hf-fact-icon: #7348ce;
}

/* ---------- Шапка: прозрачная поверх сцены, без мигания при загрузке ----------
   Без JS шапка лежит поверх верха первого экрана и уезжает вместе с ним.
   С JS (.is-ready) она закрепляется; после прокрутки (.is-scrolled) становится обычной белой. */
.hero-uni .public-navigation-bar{
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; box-shadow: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.hero-uni.is-ready .public-navigation-bar{ position: fixed; }
.hero-uni.is-scrolled .public-navigation-bar{ background: #fff; box-shadow: 0 1px 0 #e9e5ef; }
.hero-uni .public-navigation-header .logo-crop img{ transition: filter .3s ease; }
.hero-uni .public-navigation-header :is(.brand-description, .header-login, .header-register){
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.hero-uni:not(.is-scrolled) .public-navigation-header .logo-crop img{ filter: var(--hf-logo-filter); }
.hero-uni:not(.is-scrolled) .public-navigation-header .brand-description{ color: var(--hf-brand-note); border-left-color: var(--hf-brand-rule); }
.hero-uni:not(.is-scrolled) .public-navigation-header .header-login{
  background: var(--hf-nav-login-bg); border-color: var(--hf-nav-login-border); color: var(--hf-nav-login-ink);
}
.hero-uni:not(.is-scrolled) .public-navigation-header .header-login:hover{ background: var(--hf-nav-login-bg-hover); }
.hero-uni:not(.is-scrolled) .public-navigation-header .header-register{
  background: var(--hf-nav-register-bg); border-color: var(--hf-nav-register-border); color: var(--hf-nav-register-ink);
}
.hero-uni:not(.is-scrolled) .public-navigation-header .header-register:hover{ background: var(--hf-nav-register-bg-hover); border-color: var(--hf-nav-register-bg-hover); }

/* ---------- Первый экран ---------- */
.hero-uni .hero{ padding-top: var(--hf-header-h); background: var(--hf-hero-bg); }
.hero-uni .hero-inner{ align-items: center; min-height: 0; padding-top: 40px; padding-bottom: var(--hf-ground); }
.hero-uni .hero-story{ padding-top: 0; min-width: 0; }
.hero-uni .hero-symbols{ display: none; }

.hero-uni .hero-labels{ gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.hero-uni .hero-labels .pill{
  border-radius: 100px; padding: 7px 13px; font-size: 12px; font-weight: 700; line-height: 1.3;
  border: 1px solid var(--hf-pill1-border); background: var(--hf-pill1-bg); color: var(--hf-pill1-ink);
  box-shadow: none; transform: none;
}
.hero-uni .hero-labels .pill:nth-child(2){ border-color: var(--hf-pill2-border); background: var(--hf-pill2-bg); color: var(--hf-pill2-ink); }
.hero-uni .hero-labels .pill:nth-child(3){ border-color: var(--hf-pill3-border); background: var(--hf-pill3-bg); color: var(--hf-pill3-ink); }

.hero-uni .hero h1{
  max-width: 9.6em; font-size: clamp(46px, 4.3vw, 60px); line-height: 1.12; letter-spacing: -.052em; font-weight: 800;
  color: var(--hf-h1); text-shadow: var(--hf-h1-shadow);
}
.hero-uni .hero h1 span{
  position: relative; display: inline-block; white-space: nowrap; padding-bottom: .08em;
  color: var(--hf-h1-accent); background: var(--hf-h1-accent-bg);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--hf-h1-accent-fill);
}
.hero-uni .hero-description{ max-width: 520px; margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--hf-copy); }

.hero-uni .hero-dates{
  position: relative; z-index: 1; display: inline-grid; gap: 4px; margin-top: 22px;
  padding: 13px 20px 13px 22px; border: 1px solid var(--hf-dates-border); border-radius: 16px;
  background: var(--hf-dates-bg); color: var(--hf-dates-ink); box-shadow: var(--hf-dates-shadow);
}
.hero-uni .hero-dates::before{
  content: ""; position: absolute; left: -1px; top: 13px; bottom: 13px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--hf-dates-bar);
}
.hero-uni .hero-dates p{ font-size: 16px; line-height: 1.55; }
.hero-uni .hero-dates strong{ color: var(--hf-dates-strong); }

/* ---------- Форма входа ---------- */
.hero-uni .login-card{
  width: 100%; margin: 0; align-self: start; padding: 32px 30px 27px; border: 0; border-radius: 28px;
  background: var(--hf-card-bg); color: var(--hf-card-ink); box-shadow: var(--hf-card-shadow);
  --action-purple: var(--hf-action); --action-purple-hover: var(--hf-action-hover);
}
.hero-uni .login-card h2{ font-size: 29px; line-height: 1.15; font-weight: 750; letter-spacing: -.03em; color: inherit; }
.hero-uni .login-card form{ margin-top: 25px; }
.hero-uni .login-card .field{ color: var(--hf-label); }
.hero-uni .login-card .field input{
  min-height: 52px; border-radius: 12px; font-size: 14px;
  background: var(--hf-field-bg); border-color: var(--hf-field-border); color: var(--hf-field-ink);
}
.hero-uni .login-card .field input::placeholder{ color: var(--hf-placeholder); }
.hero-uni .login-card .field input:focus{ border-color: var(--hf-focus) !important; box-shadow: 0 0 0 3px var(--hf-focus-ring); }
.hero-uni .login-card .password-toggle{ color: var(--hf-label); }
.hero-uni .login-card a.forgot-link{ color: var(--hf-link); }
.hero-uni .login-card .btn{ min-height: 52px; font-size: 16px; border-radius: 12px; }
.hero-uni .login-card .btn:not(.btn-secondary):not(.btn-quiet){
  background: var(--hf-action-bg, var(--hf-action)) !important; border-color: transparent !important;
  color: var(--hf-action-ink) !important; box-shadow: var(--hf-action-shadow) !important;
}
.hero-uni .login-card .btn:not(.btn-secondary):not(.btn-quiet):hover:not(:disabled){
  background: var(--hf-action-bg-hover, var(--hf-action-hover)) !important;
}
.hero-uni .login-card .or{ border-color: var(--hf-rule); }
.hero-uni .login-card .or span{ background: var(--hf-card-bg); color: var(--hf-muted); }
.hero-uni .register-buttons{ grid-template-columns: 1fr; gap: 9px; margin: 9px 0 0; }
.hero-uni .register-buttons a{
  min-height: 46px; padding: 11px; font-size: 14px; border-radius: 11px;
  background: var(--hf-alt-bg); border-color: var(--hf-alt-border); color: var(--hf-alt-ink);
}
.hero-uni .register-buttons a:hover{ background: var(--hf-alt-bg-hover); border-color: var(--hf-alt-border-hover); }
.hero-uni .hero :is(a, button):focus-visible{ outline-color: var(--hf-focus); }
.hero-uni:not(.is-scrolled) .public-navigation-header :is(a, button):focus-visible{ outline-color: var(--hf-nav-login-ink); }

/* ---------- Полоса фактов: одна форма для всех вариантов ---------- */
.hero-uni .facts{ position: relative; z-index: 2; margin-top: 0; padding: 28px 0; border: 0; border-bottom: 1px solid #e9ecf3; border-radius: 0; background: none; box-shadow: none; }
.hero-uni .facts svg{ color: var(--hf-fact-icon); }

/* ---------- Движение содержимого при прокрутке (одинаковое во всех вариантах) ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-uni.is-ready .hero-story{ translate: 0 calc(var(--sy, 0) * -36px); opacity: max(.62, calc(1 - var(--sy, 0) * .7)); }
}

/* ---------- Компьютер ---------- */
@media (min-width: 1101px){
  .hero-uni .hero{ min-height: var(--hf-hero-h); }
  .hero-uni .hero-inner{ grid-template-columns: minmax(0, 1fr) 380px; gap: 52px; }
}

/* ---------- Планшет ---------- */
@media (max-width: 1100px){
  .hero-uni .hero-inner{ grid-template-columns: minmax(0, 1fr) 360px; gap: 35px; padding-top: 32px; }
  .hero-uni .hero h1{ font-size: 48px; }
  .hero-uni .hero-labels .pill{ font-size: 11px; padding: 6px 10px; }
  .hero-uni .hero-description{ font-size: 15px; max-width: 460px; }
  .hero-uni .hero-dates p{ font-size: 15px; }
  .hero-uni .login-card{ padding: 28px 25px; }
  .hero-uni .login-card h2{ font-size: 26px; }
}
@media (max-width: 900px){
  .hero-uni .hero-inner{ grid-template-columns: minmax(0, 1fr) 330px; gap: 25px; }
  .hero-uni .hero h1{ font-size: 39px; }
  .hero-uni .hero-dates{ padding: 11px 14px 11px 16px; }
  .hero-uni .hero-dates::before{ top: 11px; bottom: 11px; }
  .hero-uni .hero-dates p{ font-size: 13.5px; }
  .hero-uni .login-card{ padding: 27px 22px; }
}

/* ---------- Телефон ---------- */
@media (max-width: 760px){
  .hero-uni{ --hf-header-h: 64px; --hf-ground: 84px; }
  .hero-uni .hero-inner{ display: flex; flex-direction: column; align-items: stretch; gap: 26px; max-width: 560px; padding-top: 26px; }
  .hero-uni .hero-labels{ gap: 7px; margin-bottom: 20px; }
  .hero-uni .hero h1{ max-width: none; font-size: clamp(34px, 8.8vw, 54px); line-height: 1.15; letter-spacing: -.05em; }
  .hero-uni .hero-description{ max-width: none; margin-top: 18px; font-size: 15px; }
  .hero-uni .hero-dates{ display: grid; margin-top: 18px; padding: 12px 14px 12px 16px; }
  .hero-uni .hero-dates::before{ top: 12px; bottom: 12px; }
  .hero-uni .hero-dates p{ font-size: 14px; }
  .hero-uni .login-card{ padding: 28px 23px; border-radius: 23px; }
  .hero-uni .login-card h2{ font-size: 27px; }
  .hero-uni .login-card .field input{ font-size: 16px; }
}
@media (max-width: 360px){
  .hero-uni .hero h1{ font-size: 31px; }
  .hero-uni .hero-dates p{ font-size: 13px; }
  .hero-uni .login-card{ padding: 25px 18px; }
  .hero-uni .login-card h2{ font-size: 24px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-uni .public-navigation-bar, .hero-uni .public-navigation-header *{ transition: none !important; }
}