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

/* Убираем стандартные отступы браузера у body */
body, h1, h2, h3, h4, p {
  margin: 0;
}
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column; /* Элементы идут друг за другом сверху вниз */
  min-height: 100vh;      /* Минимум 100% высоты видимой части экрана */
}
* { overscroll-behavior: none; }
.content {
  flex: 1 0 auto; /* Растягивает блок, заполняя пустоту, и толкает футер вниз */
}

.site-footer {
  flex-shrink: 0; /* Гарантирует, что футер не сожмется */
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont.ttf") format("truetype");
  font-weight: 100 900; /* variable диапазон */
  font-style: normal;
  font-display: swap;
}

:root {
  --page-max: 1440px;           /* ширина макета */
  --gutter: 120px;              /* поля слева/справа в макете */
  --safe: 16px;                 /* поля на мобилках */
  --bg: #0a1b58;
  --white: #edf3fb;
  --accent: #ee390d;
  --accent2: #da5534;  

  --container: 1200px;
  --divider-h: clamp(8px, 0.9vw, 14px);
  --col: 560px;                 /* [не используется] */
  --gap: 50px;

  --quals-left-img-w: 440px;    /* [не используется] */
  --quals-left-img-h: 111px;    /* [не используется] */

  --divider-w: 3px;

  --footer-h: 198px;
  --footer-topline: 6px;
  --footer-pattern: url("../img/footer-bg.svg");
  --design-w: 1200;             /* [без единиц; не используется] */
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  background-color: var(--bg);
  min-height: 100vh;
}

.container {
  width: min(100% - 2*var(--safe), var(--container));
  margin-inline: auto;
  padding-inline: var(--safe);
}

/* позднее .container становится position:relative — это ок */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}

h1 { font-size: 62px; }
h2 { font-size: 45px; }
h3 { font-size: 34px; }
h4 { font-size: 26px; }

p {
  margin-bottom: 20px;
}

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

/* ===== HEADER ===== */
.site-header{
  position: sticky; /* или fixed */
  top: 0;
  z-index: 1000;
  background: url("../img/Header-bg.svg") center top / cover no-repeat;
  min-height: 132px;
  padding-block: clamp(8px, 1.2vw, 16px);
  transition: transform 0.3s ease;
}
.site-header.hide { transform: translateY(-100%); }
.site-header::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: #EDF3FB;
}

/* Контейнер с навигацией */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 72px;
}

/* Логотип */
.logo img {
  display: block;
  height: 115px;
  width: 115px;
}

/* Ссылки */
.nav-links {
  display: flex;
  gap: 36px;
}
.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-weight: bold;
  font-size: 24px;
}
.nav-links a:hover { color: var(--accent); }

/* ===== MASTERHEAD ===== */
.masterhead {
  min-height: 80vh;
  background-image: url("../img/Pattern-WEB.svg");
  background-repeat: repeat;
  background-size: 114.35px 114.35px;
  background-position: top left;
  display: flex;
  align-items: center;
  padding-block: clamp(32px, 6vw, 72px);
}

.masterhead-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 5vw, 48px);
  text-align: center;
}

.masterhead-logo {
  display: block;
  width: min(90%, 960px);
  height: auto;
}

.btn-cta {
  display: inline-block;
  width: 377px;
  height: 59px;
  background: url("../img/reg-button.svg") no-repeat center / contain;
  text-align: center;
  line-height: 59px;
  font-weight: 800;
  font-size: 25px;
  color: var(--bg);
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.btn-cta:hover { transform: translateY(-1px); filter: brightness(0.92); }
.btn-cta:active{ transform: translateY(0);    filter: brightness(0.85); }

/* ===== HERO / ABOUT ===== */

/* заголовок */
.hero h1 { margin: 67px 0 80px 0; }

/* текст */
.hero p {
  margin: 0;
  margin-bottom: 80px;
}

.about h2 { margin: 58px 0 0 0; }
.about p  { margin: 36.6px 0 72px 0; }

/* divider (двойное объявление — работает это, т.к. ниже по коду) */
.divider-wrap{
  padding-inline: 60px;       /* последняя версия побеждает */
  position: relative;
  overflow: visible;          /* не режем фон по краям */
}
.divider-wrap img{
  display: block;
  width: 100%;
  height: auto;
}
.divider{
  height: var(--divider-h);
  background-image: url("../img/divider-one.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto var(--divider-h);
}

/* ===== CTF FORMATS ===== */
.ctf-formats .formats{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: var(--gap);
}
.format{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.format h3{ margin: 32px 0 8px 0; }
.format h4{
  font-size: 26px;
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
}

.divider-vertical{
  display: flex;
  align-items: stretch;
  justify-content: center;
}
/* ВОЗМОЖНАЯ ОПЕЧАТКА: .divider img — сирота. Вероятно, имелось .divider-vertical img */
/* .divider img{ height: 100%; width: auto; display: block; } */
.divider-vertical img{ height: 100%; width: auto; display: block; } /* <- только пометил; можно вернуть на сироту, если боишься изменений */

/* ===== PROGRAMME ===== */
.programme { text-align: right; }
.programme h1 {
  margin: 84px 0 40px 0;
  color:#435181;
}

/* ===== TIMELINE ===== */
.timeline-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: stretch;
}
.arrow{
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  aspect-ratio: 400 / 147;
}
.arrow--left  { background-image: url("../img/arrow1.svg"); }
.arrow--mid   { background-image: url("../img/arrow2.svg"); }
.arrow--right { background-image: url("../img/arrow2.svg"); }

.arrow h3{
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
}
.arrow p{
  margin: 0;
  font-weight: 600;
  font-size: 17px;
  color: var(--accent);
  line-height: 21px;
}
.left-text h3{ margin: 10px 45px 0 0; }
.left-text p {
  font-size: 17px;
  margin: 14px 45px 0 0;
}
.mid-text h3{ margin: 17px 0 0 0; }
.mid-text p { margin: 0 0 10px 0; }

@media (max-width: 900px){
  .timeline-grid{ grid-template-columns: 1fr; row-gap: 12px; }
}

/* ===== QUALS ===== */
.quals{
  padding-block: 48px 72px;
  margin-top: 115px;
}
.quals-grid{
  display: grid;
  grid-template-columns: 1fr var(--divider-w) 1fr;
  column-gap: var(--gap);
  align-items: stretch;
}
.quals-divider{ background: var(--white); } /* используется также в .final */

/* левая часть */
.quals-left .quals-img{
  width: 440px;
  height: 111px;
  /* background: url("../img/UralQuals-vector.svg") center/contain no-repeat; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
}
.quals-img h3{
  margin: 0;
  font-size: 32px;
  line-height: 2.0;
  text-decoration: underline;
}
.quals-img h4{
  margin: 0 16px 19px 16px;
  font-weight: 600;
  text-decoration: underline;
}
.quals-date{
  color: var(--accent);
  font-weight: 600;
  margin: 0px 0 30px 160px;
}
.quals-left-text h4{
  margin: 0 0 0 38px;
  font-weight: 400;
  line-height: 130%;
}

.quals-left-text p{
  margin: 0 0 0 38px;
}
/* правая часть */
.quals-right { /* пусто — тянется по сетке */ }
.quals-rules{
  margin: 45px 0 32px 0;
  padding-left: 1.2em;
}
.quals-rules li{
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

/* категории */
.quals-categories h3{
  margin: 0 0 20px 0;
  text-align: center;
}
.cats-grid{
  display: grid;
  grid-template-columns: repeat(7, 70px);
  column-gap: 5px;
  row-gap: 3px;
  justify-content: center;
}
.cat{
  width: 113px;
  height: 113px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.cat--web      { background-image: url("../img/categories/Web.svg"); }
.cat--crypto   { background-image: url("../img/categories/Crypto.svg"); }
.cat--osint    { background-image: url("../img/categories/Osint.svg"); }
.cat--forensic { background-image: url("../img/categories/Forensic.svg"); }
.cat--stego    { background-image: url("../img/categories/Stego.svg"); }
.cat--pwn      { background-image: url("../img/categories/Pwn.svg"); }
.cat--reverse  { background-image: url("../img/categories/Reverse.svg"); }

.cats-grid > .cat:nth-child(n+5){ transform: translateY(-50px); }
.cats-grid > .cat:nth-child(1){ grid-column: 1; }
.cats-grid > .cat:nth-child(2){ grid-column: 3; }
.cats-grid > .cat:nth-child(3){ grid-column: 5; }
.cats-grid > .cat:nth-child(4){ grid-column: 7; }
.cats-grid > .cat:nth-child(5){ grid-column: 2; grid-row: 2; }
.cats-grid > .cat:nth-child(6){ grid-column: 4; grid-row: 2; }
.cats-grid > .cat:nth-child(7){ grid-column: 6; grid-row: 2; }

/* ===== FINAL ===== */
.final{ padding-block: 48px 72px; }
.final-grid{
  display: grid;
  grid-template-columns: 1fr var(--divider-w) 1fr;
  column-gap: var(--gap);
  align-items: stretch;
}


.final-left .final-img{
  width: 440px;
  height: 111px;
  /* background: url("../img/UralQuals-vector.svg") center/contain no-repeat; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
}
.final-img h3{
  margin: 0;
  font-size: 32px;
  line-height: 2.0;
  text-decoration: underline;
}
.final-img h4{
  margin: 0 16px 19px 16px;
  font-weight: 600;
  text-decoration: underline;
}
.final-date{
  color: var(--accent);
  font-weight: 600;
  margin: 0px 0 30px 145px;
}
.final-left-text h4{
  margin: 0 0 0 38px;
  font-weight: 400;
  line-height: 130%;
}

.final-right { /* пусто — тянется по сетке */ }
.final-rules{
  margin: 45px 0 32px 0;
  padding-left: 1.2em;
}
.final-rules li{
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.final-right p { text-align: center; }
.final-right a {
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
}
.final-right a:hover { color: var(--accent); }

/* ===== DOCS ===== */
.docs-name{
  margin-top: 50px;
  margin-bottom: 80px;
  text-align: center;
  color: #435181;
}
.docs-mono{
    grid-column: 1 / -1;   /* занять обе колонки */
  justify-self: center;  /* сам grid-элемент по центру */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -50px;
}
.docs-mono p {
  max-width: 500px;   /* та же ширина, что у лого */
  text-align: center; /* центрируем текст */
  word-wrap: break-wod; /* перенос слов, если вдруг длинное */
}
.docs-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  align-items: start;
}
.docs-item{
  text-align: center;
  padding: 20px;
}
.docs-item h3{
  margin: 56px 0 8px;
  color: var(--white);
}
.docs-item p{
  margin: 0;
  line-height: 1.4;
  color: var(--white);
  margin-inline: auto;
}
.docs-item a{
  display: block;
  text-align: center;
  color: var(--white);
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease;
}
.docs-item a:hover { transform: translateY(-4px); }

/* ===== FOOTER ===== */
.site-footer {
  position: relative;
  background: var(--footer-pattern) center/cover no-repeat, var(--bg);
  padding-block: 32px;
}
/* белая линия сверху */
.site-footer::before {
  content:"";
  position: absolute;
  left:0; right:0; top:0;
  height: var(--footer-topline);
  background: #EDF3FB;
}
/* внутренняя сетка */
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 24px 48px;
  align-items: center;
}
.footer-nav{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 72px;
}
.footer-nav a{
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  transition: color .2s ease;
}
/* размещение */
.logo-ucup              { grid-column: 1; grid-row: 1; justify-self: start; }
.footer-nav             { grid-column: 2; grid-row: 1; justify-self: start; }
.footer-contacts        { grid-column: 1; grid-row: 2; justify-self: start;  align-self: start;}
.social-networks        { grid-column: 2; grid-row: 2; justify-self: start;  align-self: start;}

.footer-contacts  a{
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  transition: color .2s ease;
}

.footer-contacts .contacts-title{
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
}
.footer-contacts p { margin: 0; }

.social-networks   a{
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  transition: color .2s ease;
}

.social-networks .sn-title{
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
}
.social-networks p { margin: 0; }

.footer-nav a:hover      { color: var(--accent); }
.footer-contacts a:hover { color: var(--accent); }
.social-networks  a:hover { color: var(--accent); }
/* ===== ДЕКОР ПОВЕРХ СЕКЦИЙ ===== */
.hero, .about, .pr1, .pr2, .docs { position: relative; } /* pr1/pr2 — [сироты] */
.container { position: relative; }

.deco-svg-wrap{
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
}
.deco-svg{
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.orgs{
  margin-top: 30px;
}

.orgs h1{
  text-align: center;
}

.partners h1{
  text-align: center;
}

.logotypes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  text-align: center;
}

.logotypes section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logotypes img {
  max-width: 250px;       /* одинаковая ширина для всех */
  height: 200px;          /* фиксированная высота области под логотип */
  object-fit: contain;    /* картинка вписывается, не растягиваясь */
  margin-bottom: 16px;
}

.logotypes h4 {
  min-height: 2.5em;      /* одинаковая высота строки подписи */
  display: flex;
  align-items: flex-start;/* чтобы текст при переносе был прижат вверх */
  justify-content: center;
}

.partners{
  margin-top: 100px;
}

.logotypes-partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  text-align: center;
}

.logotypes-partners section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logotypes-partners img {
  max-width: 250px;       /* одинаковая ширина для всех */
  height: 200px;          /* фиксированная высота области под логотип */
  object-fit: contain;    /* картинка вписывается, не растягиваясь */
  margin-bottom: 16px;
}

.logotypes-partners .usergate img {
  max-width: 450px;       /* одинаковая ширина для всех */
  height: 150;          /* фиксированная высота области под логотип */
  object-fit: contain;    /* картинка вписывается, не растягиваясь */
  margin-bottom: 16px;
}

.logotypes-partners .oxygen img {
  max-width: 300px;       /* одинаковая ширина для всех */
  height: 200px;          /* фиксированная высота области под логотип */
  object-fit: contain;    /* картинка вписывается, не растягиваясь */
  margin-bottom: 16px;
}

.logotypes-partners h4 {
  min-height: 2.5em;      /* одинаковая высота строки подписи */
  display: flex;
  align-items: flex-start;/* чтобы текст при переносе был прижат вверх */
  justify-content: center;
}

.logotypes-partners a {
color: var(--white);
text-decoration: none;
}
.logotypes-partners a:hover {
  color: var(--accent2);
  text-decoration: none;
}

.logotypes-partners2 a {
color: var(--white);
text-decoration: none;
}
.logotypes-partners2 a:hover {
  color: var(--accent2);
  text-decoration: none;
}

.logotypes-partners2 {
  grid-column: 1 / -1;   /* занять обе колонки */
  justify-self: center;  /* сам grid-элемент по центру */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -50px;
}

.logotypes-partners2 img {

  max-width: 450px;       /* одинаковая ширина для всех */
  height: 150px;  

}

.arsib h4 {
  max-width: 450px;   /* та же ширина, что у лого */
  text-align: center; /* центрируем текст */
  word-wrap: break-wod; /* перенос слов, если вдруг длинное */
}

.team{
    margin-top: 30px;
}

.portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  text-align: center;
  margin:20px 0 20px 0;
}

.portraits section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portraits h4{
  font-size: 20px;
  font-weight: 600;
}

.portraits p {
  margin: 15px 0 4px; 
}

.portraits-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  text-align: center;
}

.portraits-2 section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portraits-2 h4{
  font-size: 20px;
  font-weight: 600;
}

.portraits-2 p {
  margin: 15px 0 4px; 
}

.rasp{
    margin-top: 30px;
    margin-bottom: 80px;
}

.first-day{
  margin-bottom: 50px;
}

.second-day{
  margin-bottom: 50px;
}
.second-day a {
color: var(--accent2);
}
.second-day a:hover {
  color: var(--white);
}

.third-day{
  margin-bottom: 50px;
}
.third-day a {
color: var(--accent2);
}
.third-day a:hover {
  color: var(--white);
}

/* контейнер grid */
.programme-grid {
  display: grid;
  grid-template-columns: 1fr; /* по умолчанию одна колонка */
  gap: 2rem; /* отступ между блоками */
  width: 100%;
}

/* элементы внутри .programme-grid */
.programme-grid > * {
  width: 100%;       /* каждый блок — на всю ширину */
  box-sizing: border-box;
}

/* если хочешь, чтобы на широких экранах было две колонки */
@media (min-width: 768px) {
  .programme-grid {
    grid-template-columns: 1fr 1fr; /* две колонки */
    align-items: start;
  }
}

/* дополнительно можно убрать маргин у ul */
.ad-rasp {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* карта чтобы растягивалась */
.map {
  width: 100%;
}