@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Unbounded:wght@200..900&display=swap');



html {
  /* Same fluid rem scale used by the Dubb.pro landing:
     16px up to 1536px, then smoothly up to 20px at 1920px. */
  font-size: clamp(100%, 1.0416666667vw, 125%);
  min-width: 320px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}



/* Переменные */
:root {
  /* Цвета */
  --yellow: #FFE609;
  --green: #FFFFFF;
  --red: #FF0004;
  --white: #c9c9c9;
  --black: #000000;
  --purple: #510060;
  --blue: #0088cc;
  --grey: rgba(255, 255, 255, 0.05);

  /* Fluid spacing/type scale. Keeping it here prevents breakpoint jumps. */
  --zr: 0.25rem;
  --xs: 0.5rem;
  --sm: 0.75rem;
  --md: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --lg: clamp(1.1rem, 0.95rem + 1vw, 1.5rem);
  --xl: clamp(1.25rem, 1.05rem + 1.25vw, 1.7rem);
  --xxl: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
  --hg: clamp(2rem, 1.75rem + 1vw, 2.5rem);

  /* Шрифты */
  --primary: "Unbounded", sans-serif;
  --secondary: "IBM Plex Sans", sans-serif;

  /* Жирность */
  --bold: 700;
  --medium: 500;
  --regular: 300;

  /* Границы и переходы */
  --border: rgba(255, 255, 255, 0.05);
  --fill: 100%;
  --center: center;
  --flex-end: flex-end;
  --flex-start: flex-start;
  --animate: all 0.3s ease;
  --opacity__25: opacity(0.25);
  --opacity__50: opacity(0.5);
  --opacity__75: opacity(0.75);
  --opacity__100: opacity(1);
  --blur: blur(7.5px);
}


* {
  box-sizing: border-box;
}


/* Добавьте это в ваш global.css или аналогичный файл */
header.web .link.active {
  filter: none; /* Убирает filter: opacity(...) */
  opacity: 1;   /* Явное указание непрозрачности */
  color: var(--green); /* Делаем активную ссылку белой (или ваш основной цвет) */
  /* Или можно использовать: color: #FFFFFF; */
}

/* Важно! Возможно, придется убрать .opc--50 с активных ссылок через JS */
header.web .link.active.opc--50 {
    filter: none;
    opacity: 1;
}

a {
  text-decoration: none;
  color: var(--white);
  transition: var(--animate);
  font-family: var(--secondary);
  font-size: var(--sm);
}
body {
    background: var(--black);
    color: var(--white);
    margin: var(--xl);
    overflow-x: hidden;

    overscroll-behavior: contain;
    /* Добавляем для предотвращения проблем на iOS */
    -webkit-overflow-scrolling: touch;


}

main {
  display: flex;
  flex-direction: column;
}



footer {
  width: 100%;

}

video {
  width: 150%;
  height: 100%;
  object-fit: cover;
  margin-left: var(--xxl);
}

img {
  object-fit: cover;
    width: 100%;
    height: 100%;
}

.github {
  align-items: center;
}
.img--header {
  object-fit: contain;
    width: 24px;
    height: 24px;
}


h1, h2, h3, h4, h5, p {
  margin: 0;
}




.row {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.col {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
}

.green {
  color: var(--green);
}

.link {
  text-decoration: none;
  color: var(--white);
  transition: var(--animate);
  font-family: var(--secondary);
  font-size: var(--sm);
}

.sticky {
  position: sticky;
  top: 0;
}

.copyright {
  position: static;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: var(--hg);
}

.center {
  display: flex;
  align-items: center;
}
small {
  font-size: var(--xs);
  color: var(--white);
  font-family: var(--secondary);
  font-weight: var(--regular);
  text-align: justify;
}

.opc {

}

.opc--25 {
  filter: var(--opacity__25);
}

.opc--50 {
  filter: var(--opacity__50);
}




/* Мобильные (до 576px) */
@media (max-width: 576px) {
  header {
    display: none;

  }
  footer {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    width: calc(100% - 1rem);
  }

}

/* Планшеты (577px–768px) */
@media (min-width: 577px) and (max-width: 768px) {
  header {
    display: none;
  }


  .base {
    width: 100%;
    display: flex;
    flex-direction: column;
  
  }
}

/* Маленькие десктопы (769px–992px) */
@media (min-width: 769px) and (max-width: 992px) {
  header {
    display: none;
  }

  .base {
    width: 100%;
    display: flex;
    flex-direction: column;
  
  }

}

/* Средние десктопы (993px–1336px) */
@media (min-width: 993px) {
  .base {
    width: 100%;
    display: flex;
    flex-direction: row;
  
  }


}

/* Большие десктопы (1400px+) */
@media (min-width: 1600px) {
  .base {
    width: 100%;
    display: flex;
    flex-direction: row;
  
  }


}

.logo {
  background-image: url('../img/logo.svg');
  height: 7.5rem;
  width: 7.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
}


/* Размеры шрифтов */
.fs__xs {
  font-size: var(--xs);
  line-height: var(--xs);
}

.fs__sm {
  font-size: var(--sm);
  line-height: var(--sm);
}

.fs__md {
  font-size: var(--md);
  line-height: var(--md);
}

.fs__lg {
  font-size: var(--lg);
  line-height: var(--lg);
}

.fs__xl {
  font-size: var(--xl);
  line-height: var(--xl);
}

.fs__xxl {
  font-size: var(--xxl);
  line-height: var(--xxl);
}

/* Жирность шрифтов */
.fw__rg {
  font-weight: var(--regular);
}

.fw__md {
  font-weight: var(--medium);
}

.fw__bd {
  font-weight: var(--bold);
}

/* Отступы внутренние */
.pd__xs {
  padding: var(--xs);
}

.pd__sm {
  padding: var(--sm);
}

.pd__md {
  padding: var(--md);
}

.pd__lg {
  padding: var(--lg);
}

.pd__xl {
  padding: var(--xl);
}

.pd__hg {
  padding: var(--hg);
}

.pd__xxl {
  padding: var(--xxl);
}

.pd__xs--rgt {
  padding-right: var(--xs);
}

.pd__sm--rgt {
  padding-right: var(--sm);
}

.pd__md--rgt {
  padding-right: var(--md);
}

.pd__lg--rgt {
  padding-right: var(--lg);
}

.pd__xl--rgt {
  padding-right: var(--xl);
}

.pd__xxl--rgt {
  padding-right: var(--xxl);
}


.pd__xs--lft {
  padding-left: var(--xs);
}

.pd__sm--lft {
  padding-left: var(--sm);
}

.pd__md--lft {
  padding-left: var(--md);
}

.pd__lg--lft {
  padding-left: var(--lg);
}

.pd__xl--lft {
  padding-left: var(--xl);
}

.pd__xxl--lft {
  padding-left: var(--xxl);
}

.pd__hg--lft {
  padding-left: var(--hg);
}

.pd__xs--top {
  padding-top: var(--xs);
}

.pd__sm--top {
  padding-top: var(--sm);
}

.pd__md--top {
  padding-top: var(--md);
}

.pd__lg--top {
  padding-top: var(--lg);
}

.pd__xl--top {
  padding-top: var(--xl);
}

.pd__xxl--top {
  padding-top: var(--xxl);
}

.pd__hg--top {
  padding-top: var(--hg);
}


.pd__xs--btm {
  padding-bottom: var(--xs);
}

.pd__sm--btm {
  padding-bottom: var(--sm);
}

.pd__md--btm {
  padding-bottom: var(--md);
}

.pd__lg--btm {
  padding-bottom: var(--lg);
}

.pd__xl--btm {
  padding-bottom: var(--xl);
}

.pd__xxl--btm {
  padding-bottom: var(--xxl);
}

.pd__hg--btm {
  padding-bottom: var(--hg);
}

/* Отступы внешние */
.mg__xs {
  margin: var(--xs);
}

.mg__sm {
  margin: var(--sm);
}

.mg__md {
  margin: var(--md);
}

.mg__lg {
  margin: var(--lg);
}

.mg__xl {
  margin: var(--xl);
}

.mg__xxl {
  margin: var(--xxl);
}

.mg__xs--rgt {
  margin-right: var(--xs);
}

.mg__sm--rgt {
  margin-right: var(--sm);
}

.mg__md--rgt {
  margin-right: var(--md);
}

.mg__lg--rgt {
  margin-right: var(--lg);
}

.mg__xl--rgt {
  margin-right: var(--xl);
}

.mg__xxl--rgt {
  margin-right: var(--xxl);
}

.mg__xs--lft {
  margin-left: var(--xs);
}

.mg__sm--lft {
  margin-left: var(--sm);
}

.mg__md--lft {
  margin-left: var(--md);
}

.mg__lg--lft {
  margin-left: var(--lg);
}

.mg__xl--lft {
  margin-left: var(--xl);
}

.mg__xxl--lft {
  margin-left: var(--xxl);
}

.mg__xs--top {
  margin-top: var(--xs);
}

.mg__sm--top {
  margin-top: var(--sm);
}

.mg__md--top {
  margin-top: var(--md);
}

.mg__lg--top {
  margin-top: var(--lg);
}

.mg__xl--top {
  margin-top: var(--xl);
}

.mg__xxl--top {
  margin-top: var(--xxl);
}

.mg__xs--btm {
  margin-bottom: var(--xs);
}

.mg__sm--btm {
  margin-bottom: var(--sm);
}

.mg__md--btm {
  margin-bottom: var(--md);
}

.mg__lg--btm {
  margin-bottom: var(--lg);
}

.mg__xl--btm {
  margin-bottom: var(--xl);
}

.mg__xxl--btm {
  margin-bottom: var(--xxl);
}

/* Сетка */
.gp {
}

.gp--zr {
  gap: var(--zr);
}

.gp--xs {
  gap: var(--xs);
}

.gp--sm {
  gap: var(--sm);
}

.gp--md {
  gap: var(--md);
}

.gp--lg {
  gap: var(--lg);
}

.gp--xl {
  gap: var(--xl);
}

.gp--xxl {
  gap: var(--xxl);
}

.gp--hg {
  gap: var(--hg);
}