:root{
  --text:#eee;
  --shadow:rgba(0,0,0,.55);
  --shadow-soft:rgba(0,0,0,.35);

  /* скорость ленты: меньше = быстрее (4s очень быстро, 8s нормально) */
  --ticker-speed: 10s;
}

/* базовые */
html,body{height:100%;margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#000;color:var(--text);overflow-x:hidden}

/* фон */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;background:#000}
.hero img{position:absolute;inset:0;width:100vw;height:100vh;object-fit:contain;object-position:center;filter:contrast(1.02) brightness(.98)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--shadow),var(--shadow-soft))}

/* заголовки */
.layer{position:relative;z-index:1;text-align:center}
h1{margin:.1rem 0;font-size:clamp(36px,9vw,96px);letter-spacing:.06em;font-weight:900;text-transform:uppercase;text-shadow:0 6px 24px rgba(0,0,0,.55)}
h2{margin:0 0 .6rem;font-size:clamp(22px,6vw,48px);font-weight:800;opacity:.95}
.tagline{margin:.25rem 0;font-size:clamp(16px,3.3vw,22px);opacity:.95}

/* BETABAX */
.rate{position:fixed;top:14px;right:14px;z-index:10001;display:flex;gap:.6rem;align-items:center;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);border-radius:.6rem;padding:.45rem .7rem;
  backdrop-filter:blur(3px);font-weight:800}
.rate .badge{font-size:.8rem;opacity:.9}
.rate .val{font-variant-numeric:tabular-nums;font-size:1rem}
.rate .trend.up{color:#8cff8c}.rate .trend.down{color:#ff8c8c}

/* ПРОЗРАЧНАЯ ЛЕНТА: тонкая, читаемая, быстрая */
.ticker{
  position:fixed;left:0;right:0;bottom:0;height:56px;z-index:10000;
  display:flex;align-items:center;overflow:hidden;
  background:rgba(0,0,0,.35);        /* полупрозрачная подложка */
  backdrop-filter:blur(4px);
  border-top:1px solid rgba(255,255,255,.12);
}
.ticker__track{
  display:flex;align-items:center;gap:1.2rem;white-space:nowrap;
  animation:ticker var(--ticker-speed) linear infinite;
  padding:0 1rem;
}
.ticker__track.second{ animation-delay: calc(var(--ticker-speed) / -2) }
.ticker__item{opacity:.95;font-weight:800;font-size:clamp(14px,2.2vw,18px);letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.ticker__sep{opacity:.55}

@keyframes ticker{
  0%   { transform:translateX(0) }
  100% { transform:translateX(-50%) }  /* уезжаем на полную ширину, т.к. дублируем контент */
}

/* если хочешь, чтобы фон заполнял экран без чёрных полос по бокам: 
   поменяй .hero img { object-fit: cover; } */

/* ==== TOP NAV ==== */
.nav{
  position:fixed; top:14px; left:14px; z-index:10002;
  display:flex; gap:.5rem; align-items:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  padding:.45rem .55rem; border-radius:.75rem;
}
.nav a,
.nav a:visited{
  color:#eee; text-decoration:none;               /* отключаем синий и фиолетовый */
}
.nav a{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .75rem; border-radius:.55rem;
  border:1px solid rgba(255,255,255,.18);
  font-weight:700; letter-spacing:.01em; opacity:.95;
  transition:transform .08s ease, background .15s ease, opacity .15s ease;
}
.nav a:hover{ background:rgba(255,255,255,.07); transform:translateY(-1px) }
.nav a:active{ transform:translateY(0) }

/* мобильный—чтоб не ломалось */
@media (max-width: 560px){
  .nav{ left:50%; transform:translateX(-50%); gap:.35rem; padding:.35rem .45rem }
  .nav a{ padding:.35rem .55rem; font-size:.9rem }
}

/* ===== DESKTOP: текст ВСЕГДА над картинкой ===== */
@media (min-width: 641px){
  .hero{ position: relative; }
  .hero img{
    position: absolute; inset: 0;
    z-index: 0;
    transform: none !important;   /* важно: чтобы не создавался новый stacking-context */
  }
  .hero::after{ content:""; position:absolute; inset:0; z-index:1; }
  .layer, .panel{ position:relative; z-index:2 !important; }
}

/* ===== MOBILE: меню снизу, лента над меню, компактная ===== */
:root{
  --nav-height: 50px;   /* высота нижнего меню на мобилке */
  --nav-gap: 8px;       /* отступ от нижнего края */
}

@media (max-width: 640px){
  /* фон без полос */
  .hero img{ object-fit: contain; }

  /* компактные заголовки */
  h1{ font-size: clamp(28px, 12vw, 46px); }
  h2{ font-size: clamp(18px, 7.2vw, 26px); }
  .tagline{ font-size: 13px; }

  /* меню — СНИЗУ и компактнее */
  .nav{
    top: auto !important;                /* принудительно убрать верх */
    bottom: calc(var(--nav-gap) + env(safe-area-inset-bottom,0));
    left: 50%; transform: translateX(-50%);
    width: calc(100% - 16px);
    height: var(--nav-height);
    padding: .35rem; gap: .35rem;
    border-radius: .8rem;
    background: rgba(0,0,0,.55);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .nav a{
    padding: .42rem .5rem;
    font-size: 13px;
    border-radius: .6rem;
    flex: 1 0 auto;
    text-align: center;
  }

  /* лента — НАД меню, не перекрывается */
  .ticker{
    height: 42px;
    bottom: calc(var(--nav-height) + var(--nav-gap) + env(safe-area-inset-bottom,0));
    z-index: 10003; /* выше меню */
  }

  /* BETABAX — поменьше */
  .rate{
    top: 10px; right: 10px;
    padding: .38rem .5rem;
    border-radius: .55rem;
    gap: .4rem;
  }
  .rate .badge{ font-size: .75rem; }
  .rate .val{ font-size: .95rem; }
}

/* === MOBILE: жестко фиксируем порядок слоев === */
@media (max-width: 640px){
  .hero{ position: relative; }
  .hero img{
    position: absolute; inset: 0;
    z-index: 0 !important;
    transform: none !important;
    /* filter оставляем, но он создаёт стэкинг — z-index перекрываем выше */
  }
  .hero::after{ content:""; position:absolute; inset:0; z-index:1 !important; }
  .layer, .panel{ position: relative; z-index: 3 !important; } /* ТЕКСТ НАД ВСЕМ */
  .nav{ z-index: 10002 !important; }
  .ticker{ z-index: 10003 !important; }
  .rate{ z-index: 10001 !important; }
}

/* позиционирование под BETABAX */
:root{ --rate-top:14px; --rate-right:14px; --rate-h:38px; } /* если виджет выше/ниже, подстрой var */

.rate{ top: var(--rate-top); right: var(--rate-right); } /* чтобы всё было в одном месте */
.social-stack{
  position: fixed;
  right: var(--rate-right);
  top: calc(var(--rate-top) + var(--rate-h) + 8px); /* ровно под виджетом */
  display: flex; flex-direction: column; gap: 8px;
  z-index: 10002;   /* поверх фона и под меню/лентой */
}

.social{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.social:hover{ background: rgba(255,255,255,.1); transform: translateY(-1px); }
.social .icon{ width: 18px; height: 18px; fill: #eee; overflow: visible; } /* не обрезать контур */

/* мобильная подстройка */
@media (max-width:640px){
  :root{ --rate-top:10px; --rate-right:10px; --rate-h:34px; }
  .social{ width: 32px; height: 32px; }
  .social .icon{ width: 16px; height: 16px; }
}

/* соцсети: в один ряд под виджетом */
.social-stack{
  position: fixed;
  right: var(--rate-right);
  top: calc(var(--rate-top) + var(--rate-h) + 10px);
  display: flex; flex-direction: row; align-items: center;
  gap: 10px;
  z-index: 10002;
}
.social{
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.social:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.social .icon{ width: 20px; height: 20px; fill:#eee; overflow: visible; }

/* VK была визуально меньше — чуть увеличим именно её знак */
.social.vk .icon{ transform: scale(1.25); transform-origin: 50% 50%; }

/* мобильная подстройка */
@media (max-width:640px){
  .social-stack{ gap: 8px; }
  .social{ width: 34px; height: 34px; }
  .social .icon{ width: 18px; height: 18px; }
  .social.vk .icon{ transform: scale(1.2); }
}