/* ============================================================
   ПОГНАЛИ — holding page
   Палитра снята с логотипа: электрик-синий + тёплый янтарь.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:     #04050A;
  --ink:    #EEF2FF;
  --muted:  #99A3BC;
  --faint:  #6A738C;
  --blue:   #3C8BFF;
  --amber:  #FF8A1F;
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #DCE3F5 38%, #98A3BE 52%, #F7FAFF 66%, #AAB4CB 82%, #6C7691 100%);
  --ease:   cubic-bezier(.22, 1, .36, 1);
  /* Unbounded — единственная гарнитура: и крупное, и мелочь. */
  --display: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sans:    var(--display);
}

html{
  color-scheme: dark;
  /* Декоративные ореолы выходят за края лого — режем их на уровне
     документа, иначе на мобильных появляется горизонтальная прокрутка. */
  overflow-x: hidden;
  overflow-x: clip;
}

body{
  min-height: 100svh;
  background-color: var(--bg);
  background-image: radial-gradient(130% 90% at 50% 6%, #0A0E1C 0%, rgba(10,14,28,0) 62%);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow-x: hidden;
  overflow-x: clip;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- сцена на фоне ---------------- */

.scene{ position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#stage{ display: block; width: 100%; height: 100%; }

.haze{
  position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 50% 40%, rgba(60,139,255,.12), rgba(60,139,255,0) 72%),
    radial-gradient(closest-side at 50% 84%, rgba(255,138,31,.08), rgba(255,138,31,0) 76%);
}

.vignette{
  position: absolute; inset: 0;
  background: radial-gradient(130% 95% at 50% 46%, rgba(0,0,0,0) 36%, rgba(0,0,0,.66) 100%);
}

.grain{
  position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------- занавес на входе ---------------- */

.curtain{
  display: none;
  position: fixed; inset: 0; z-index: 60;
  place-items: center;
  background: var(--bg);
  transition: opacity .75s var(--ease), visibility .75s;
}

html.js .curtain{ display: grid; }

.curtain-line{
  width: min(42vw, 240px); height: 1px;
  background: linear-gradient(90deg, rgba(60,139,255,0), #3C8BFF, #FF8A1F, rgba(255,138,31,0));
  animation: load 1.2s var(--ease) infinite;
}

@keyframes load{
  0%   { transform: scaleX(.15); opacity: .2; }
  55%  { transform: scaleX(1);   opacity: 1; }
  100% { transform: scaleX(.15); opacity: .2; }
}

body.is-ready .curtain{ opacity: 0; visibility: hidden; }

/* ---------------- верхняя строка ---------------- */

.topbar{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* Unbounded шире прежних шрифтов: на узких экранах шапка
     переносится на вторую строку, а не вылезает за край. */
  flex-wrap: wrap; row-gap: .55rem;
  padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.1rem, 4vw, 3rem);
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--faint);
}

.brand{ display: flex; flex-direction: column; gap: .3em; }

.brand-name{
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--ink);
}

.brand-sub{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .42em;
  color: var(--faint);
}

.status{
  display: inline-flex; align-items: center; gap: .55rem;
  white-space: nowrap;
  margin-left: auto;
}

.pulse{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(255,138,31,.9);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse{
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.65); }
}

/* ---------------- центр ---------------- */

.core{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.6rem, 1.7vw, 1.1rem);
  padding: clamp(.5rem, 2vw, 1.5rem) clamp(1.1rem, 4vw, 3rem);
  text-align: center;
}

.logo{
  position: relative;
  width: min(74vw, 460px, 40vh);
  aspect-ratio: 1 / 1;
}

.logo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
}

.logo-img{
  z-index: 2;
  filter:
    drop-shadow(0 0 34px rgba(60,139,255,.30))
    drop-shadow(0 0 90px rgba(255,138,31,.20));
}

/* Подложка под логотипом. Появляется только вместе со светом: когда
   сцена заливается ореолом, лого теряет контраст на ярком фоне.
   Мягкое тёмное пятно возвращает ему плотность, не читаясь пятном. */
.logo-plate{
  position: absolute; inset: -6%; z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side at 50% 47%,
    rgba(3,4,9,.92) 0%,
    rgba(3,4,9,.84) 42%,
    rgba(3,4,9,.58) 62%,
    rgba(3,4,9,.24) 78%,
    rgba(3,4,9,0) 92%);
  filter: blur(10px);
  transform: translate3d(calc(var(--mx, 0px) * .45), calc(var(--my, 0px) * .45), 0);
  transition: opacity 1s var(--ease);
}

body.lights-on .logo-plate{ opacity: 1; }

.logo-aura{
  position: absolute; inset: -16%; z-index: 0;
  background:
    radial-gradient(closest-side at 30% 32%, rgba(60,139,255,.30), rgba(60,139,255,0) 70%),
    radial-gradient(closest-side at 72% 76%, rgba(255,138,31,.24), rgba(255,138,31,0) 72%);
  background-repeat: no-repeat;
  background-size: 78% 78%, 68% 68%;
  filter: blur(14px);
  opacity: calc(.45 + var(--p, 1) * .3);
  transform: translate3d(calc(var(--mx, 0px) * -.9), calc(var(--my, 0px) * -.9), 0);
  animation: breathe 7s ease-in-out infinite;
}

@keyframes breathe{
  0%, 100% { transform: translate3d(calc(var(--mx, 0px) * -.9), calc(var(--my, 0px) * -.9), 0) scale(1); }
  50%      { transform: translate3d(calc(var(--mx, 0px) * -.9), calc(var(--my, 0px) * -.9), 0) scale(1.05); }
}

/* Блик-пробег по хрому: маска = сам логотип, поэтому свет идёт
   только по буквам, без прямоугольных краёв. */
.logo-shine{
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  background-image: linear-gradient(100deg,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.92) 50%,
    rgba(255,255,255,0) 58%);
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: 175% 0;
  -webkit-mask-image: url("../logo-glow.png");
  mask-image: url("../logo-glow.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: sheen 7.5s var(--ease) 1.6s infinite;
}

@keyframes sheen{
  0%, 52%  { opacity: 0; background-position: 175% 0; }
  60%      { opacity: .85; }
  86%      { opacity: .85; background-position: -75% 0; }
  93%,100% { opacity: 0; background-position: -75% 0; }
}

.logo-flash{
  position: absolute; inset: -12%; z-index: 4;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .8s var(--ease);
  background: radial-gradient(closest-side, rgba(255,255,255,.5), rgba(140,190,255,.16) 46%, rgba(140,190,255,0) 72%);
}

.logo-flash.on{ opacity: var(--f, .85); transition: opacity .07s linear; }

/* ---------------- текст ---------------- */

.kicker{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  text-indent: .42em;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede{
  font-size: clamp(.98rem, 1.6vw, 1.12rem);
  line-height: 1.7;
  font-weight: 300;
  color: var(--muted);
  max-width: 54ch;
}

.lede em{ font-style: normal; color: var(--amber); }

/* Слоган — главная строка страницы, поэтому масштаб крупнее подписи,
   но спокойнее, чем у лого: лого остаётся первым сигналом. */
.slogan{
  font-family: var(--display);
  font-size: clamp(30px, 4.9vw, 60px);
  line-height: 1.16;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
  margin-top: .3rem;
}

.slogan em{
  font-style: normal;
  font-weight: 700;
  color: var(--amber);
  text-shadow: 0 0 34px rgba(255,138,31,.35);
}

/* ---------------- бегущая строка ---------------- */

.ticker{
  position: relative;
  overflow: hidden;
  padding: clamp(.75rem, 1.6vw, 1rem) 0;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  /* Плотный фон: под лентой идёт сцена, текст должен читаться. */
  background: rgba(4,5,10,.84);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.ticker-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ticker 42s linear infinite;
}

.ticker-group{
  display: flex; flex: none; align-items: center;
}

.ticker-item{
  padding: 0 clamp(1rem, 2.2vw, 1.9rem);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.ticker-dot{
  width: 4px; height: 4px; flex: none;
  border-radius: 50%;
  background: rgba(255,138,31,.55);
}

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

.actions{ margin-top: .35rem; }

.btn{
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease);
}

.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,150,60,.5);
  box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,138,31,.22),
              inset 0 1px 0 rgba(255,255,255,.2);
}

.btn:active{ transform: translateY(0) scale(.985); }

.btn:focus-visible{ outline: 2px solid rgba(120,180,255,.9); outline-offset: 3px; }

/* Переключатель света: пока горит — кнопка держит тёплое свечение. */
.btn.on{
  color: #FFF4E2;
  border-color: rgba(255,160,70,.62);
  background: linear-gradient(180deg, rgba(255,150,60,.24), rgba(255,150,60,.09));
  box-shadow: 0 12px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,150,60,.28),
              0 0 34px rgba(255,138,31,.3), inset 0 1px 0 rgba(255,225,190,.3);
}

.btn.on:hover{
  border-color: rgba(255,180,100,.85);
  box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,150,60,.45),
              0 0 46px rgba(255,138,31,.42), inset 0 1px 0 rgba(255,235,205,.4);
}

.btn.on::after{
  content: '';
  position: absolute; left: 50%; top: -1px;
  width: 44%; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255,138,31,0), rgba(255,214,160,.95), rgba(255,138,31,0));
}

/* Сцена «горит» — общий свет мягко поднимается, затемнение спадает. */
.haze{ opacity: .72; transition: opacity 1.2s var(--ease), background 1.2s var(--ease); }
.vignette{ transition: opacity 1.2s var(--ease); }

body.lights-on .haze{
  opacity: 1;
  background:
    radial-gradient(closest-side at 50% 38%, rgba(88,164,255,.24), rgba(88,164,255,0) 74%),
    radial-gradient(closest-side at 50% 86%, rgba(255,158,56,.2), rgba(255,158,56,0) 78%);
}

body.lights-on .vignette{ opacity: .62; }

/* Лого под светом набирает мощность вместе со сценой. */
body.lights-on .logo-img{
  filter:
    drop-shadow(0 0 40px rgba(86,158,255,.46))
    drop-shadow(0 0 110px rgba(255,150,45,.32));
}

body.lights-on .logo-aura{ opacity: 1; }

/* ---------------- нижняя строка ---------------- */

.bottombar{
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.65rem, 1.7vw, .95rem);
  padding: clamp(.9rem, 2.2vw, 1.3rem) clamp(1.1rem, 4vw, 3rem) calc(clamp(.9rem, 2.2vw, 1.3rem) + env(safe-area-inset-bottom));
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--faint);
  background: linear-gradient(to top, rgba(4,5,10,.94) 0%, rgba(4,5,10,.55) 62%, rgba(4,5,10,0) 100%);
}

/* Контакты: пилюли со ссылками. Регистр и разрядка спокойнее, чем
   у служебных подписей, иначе почта и телефон читаются плохо. */
.contacts{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .45rem clamp(.45rem, 1.2vw, .8rem);
}

.contact{
  display: inline-flex; align-items: center; gap: .5em;
  padding: .48rem .9rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: none;
  white-space: nowrap;
  transition: color .45s var(--ease), border-color .45s var(--ease),
              background .45s var(--ease), box-shadow .45s var(--ease),
              transform .45s var(--ease);
}

.contact-ico{
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .45s var(--ease);
}

.contact:hover{
  color: var(--ink);
  border-color: rgba(255,150,60,.45);
  background: rgba(255,150,60,.08);
  box-shadow: 0 0 22px rgba(255,138,31,.18);
  transform: translateY(-1px);
}

.contact:hover .contact-ico{ stroke: var(--amber); }

.contact:focus-visible{ outline: 2px solid rgba(120,180,255,.9); outline-offset: 2px; }

.footer-meta{
  font-size: 10px;
  letter-spacing: .24em;
  color: rgba(255,255,255,.28);
}

/* ---------------- адаптив ---------------- */

/* Невысокие окна: лента и футер должны оставаться на экране, поэтому
   сцена сжимается целиком, а не только лого. */
@media (max-height: 880px){
  .logo{ width: min(74vw, 420px, 32vh); }
  .core{ gap: clamp(.5rem, 1.5vw, .95rem); }
  .slogan{ font-size: clamp(28px, 4.4vw, 56px); }
}

@media (max-height: 800px){
  .logo{ width: min(72vw, 380px, 29vh); }
  .core{ gap: clamp(.4rem, 1.2vw, .8rem); }
  .slogan{ font-size: clamp(26px, 4vw, 52px); }
  .lede{ font-size: .98rem; }
  .topbar,
  .bottombar{ padding-block: .8rem; }
}

@media (max-height: 700px){
  .logo{ width: min(70vw, 340px, 21vh); }
  .core{ gap: clamp(.35rem, 1vw, .65rem); padding-block: .45rem; }
  .slogan{ font-size: clamp(24px, 3.4vw, 44px); }
  .kicker{ font-size: 10px; letter-spacing: .34em; text-indent: .34em; }
  .ticker{ padding: .6rem 0; }
}

@media (max-width: 640px){
  .topbar{ font-size: 10px; letter-spacing: .16em; gap: .6rem; }
  .brand-name{ font-size: 13px; letter-spacing: .2em; }
  .brand-sub{ font-size: 10px; letter-spacing: .34em; }
  .status{ font-size: 10px; letter-spacing: .12em; }
  .logo{ width: min(86vw, 400px, 36vh); }
  .kicker{ font-size: 10px; letter-spacing: .34em; text-indent: .34em; }
  .slogan{ max-width: 20ch; }
  .lede{ font-size: .96rem; }
  .bottombar{ font-size: 10px; letter-spacing: .16em; gap: .55rem; }
  .contacts{ gap: .4rem; }
  .contact{ font-size: 10px; padding: .42rem .72rem; }
  .contact-ico{ width: 13px; height: 13px; }
  .footer-meta{ font-size: 9px; letter-spacing: .18em; }
}

@media (max-height: 640px){
  .logo{ width: min(60vw, 300px, 19vh); }
}

/* Совсем низкие экраны: шапка в две строки, поэтому сцена сжимается сильнее. */
@media (max-height: 620px){
  .logo{ width: min(58vw, 280px, 17vh); }
  .core{ gap: .4rem; padding-block: .3rem; }
  .lede{ font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce){
  .curtain{ display: none; }
  .logo-shine{ display: none; }
  .ticker-track{ animation: none; }
  .pulse, .logo-aura, .curtain-line{ animation: none; }
  .btn, .logo-flash, .logo-plate, .haze, .vignette{ transition-duration: .01ms; }
}