/* ========================================
   0. Fonts & CSS Variables
   ======================================== */
/* Импорт Montserrat (ExtraLight 200, Light 300, Regular 400, Semi‑Bold 600)
   и Schibsted Grotesk (Regular 400, Semi‑Bold 600, Bold 700) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600&family=Schibsted+Grotesk:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600&family=Schibsted+Grotesk:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vujahday+Script&display=swap');



:root {
  --clr-bg: #0B0B0B;
  --clr-white: #FFFFFF;
  --clr-primary: #B50DDA;
  --clr-glow: rgba(181, 13, 218, 0.56);

  /* Базовая ширина макета для адаптивных расчётов (Figma ~1670px) */
  --design-w: 1670;
  /* Ширина макета для секции Contact */
  --contact-w: 1280;

}

html {
  scroll-behavior: smooth;
}

/* ========================================
   1. Reset & Base Styles
   ======================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  background: var(--clr-bg);
  color: var(--clr-white);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5;
}

/* ========================================
   2. Links & Lists
   ======================================== */
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}

/* ========================================
   3. Hero Section
   ======================================== */
.hero {
  position: relative;
  width: 100%;
  height: 832px;
  background: var(--clr-bg);
  overflow: visible;
}

/* — Purple background rectangle */
.hero__bg-rect {
  position: absolute;
  top: 313px;
  /* позиционируем относительно ширины экрана */
  left: calc(122 / var(--design-w) * 100vw);
  width: calc(751 / var(--design-w) * 100vw);
  height: 428px;
  background: var(--clr-primary);
  box-shadow: 0 0 26.8px 25px var(--clr-primary);
  z-index: 1;
}

/* — SEE text */
.hero__see {
  position: absolute;
  top: 520px;
  /* Подвигаем SEE немного вправо, чтобы последняя E частично заходила на сову */
  left: calc(80 / var(--design-w) * 100vw);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;       /* Bold */
  font-size: 120px;
  z-index: 1;
}

/* — EE outline */
 .hero__ee {
  position: absolute;
  top: 520px;
  /* смещаем контур EE на 162 px, чтобы сохранить прежний интервал с SEE
     (в оригинале SEE стоял на 27 px, а EE на 109 px; разница 82 px). Теперь SEE
     стоит на 80 px, поэтому EE = 80 + 82 = 162 px. */
  left: calc(162 / var(--design-w) * 100vw);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;       /* Bold */
  font-size: 121px;
  color: transparent;
  -webkit-text-stroke: 1px #0B0B0B;
  z-index: 2;
 }

/* — WITH text */
/*
 * Верхняя строка «WITH» в подписи снизу должна начинаться примерно под кнопкой и
 * заходить на сову. Переносим её правее, ближе к правому краю макета, чтобы
 * половина «W» перекрывала сову. Размер шрифта сохраняем.
 */
.hero__with {
  position: absolute;
  top: 520px;
  /* выравниваем правый край слова WITH по тому же правому отступу, что и
     контейнер hero__info (120 px от края макета). Так конец «WITH» совпадает
     с концом кнопки/описания. */
  right: calc(120 / var(--design-w) * 100vw);
  left: auto;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;       /* Regular */
  font-size: 121px;
  /* избегаем переноса по дефису и по словам */
  white-space: nowrap;
  z-index: 2;
}

/* — OWL‑EYES text */
/*
 * Подпись «OWL‑EYES» должна находиться под словом WITH и заканчиваться на
 * одном уровне с ним. Чтобы добиться этого, размещаем группу текста
 * правее и переносим её левую координату на ту же величину, что и у WITH.
 */
.hero__owleyes {
  position: absolute;
  top: 650px;
  /* выравниваем правый край надписи OWL‑EYES по тому же правому отступу */
  right: calc(120 / var(--design-w) * 100vw);
  left: auto;
  display: flex;
  /* избегаем переноса текста по словам */
  white-space: nowrap;
  z-index: 3;
}
.owleyes__owl {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  font-size: 120px;
  color: var(--clr-bg);
}
.owleyes__eyes {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  font-size: 120px;
  color: var(--clr-primary);
}

/* — Owl image */
/*
 * Положение совы в Hero было подобрано под ширину макета 1670 px. При адаптации
 * оказалось, что кнопка «Become a Partner» и текст «SEE» наезжают на сову
 * на широких экранах. Чтобы освободить место слева и повторить вид Figma,
 * смещаем изображение совы чуть правее (примерно на 200 px от левого края
 * макета). Ширину и высоту оставляем прежними, чтобы сохранить масштаб.
 */
.hero__owl {
  position: absolute;
  top: -30px;
  /* смещение вправо на 200 px относительно базовой ширины макета */
  left: calc(200 / var(--design-w) * 100vw);
  width: calc(1100.29 / var(--design-w) * 100vw);
  height: 826px;
  object-fit: cover;
  z-index: 2;
}

/* ========================================
   4. Header
   ======================================== */
.hero__header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 131px;
  padding: 15px 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 4;
}
.hero__logo img {
  width: 113px;
  height: 53px;
}
.hero__group {
  display: flex;
  gap: 141px;
}
.hero__nav ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hero__nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  color: var(--clr-white);
}
.hero__icons {
  display: flex;
  gap: 9px;
}
.hero__icons img {
  width: 23px;
  height: 23px;
}

/* ========================================
   5. Right‑side Info Block
   ======================================== */
.hero__info {
  position: absolute;
  top: 225px;
  right: calc(120 / var(--design-w) * 100vw);       /* смещение от правого края, чтобы кнопка не наезжала на сову */
  left: auto;
  width: calc(373 / var(--design-w) * 100vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 3;
}

/* заголовок разбиваем на две строки */
.hero__info-title {
  position: relative;
  margin: 0;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 400;      /* Regular */
  line-height: 1.15;
  /* запрещаем перенос слов внутри строк, чтобы заголовок
     «EARN WITH» и «REV‑SHARE» не разбивались на несколько строк. */
  white-space: nowrap;
}

/* первая строка */
.hero__info-title > .info-earn {
  display: block;
}

/* вторая строка — отступ влево и белый цвет */
.hero__info-title > .info-rev {
  display: block;
  /* Вторая строка начинается примерно с середины первой строки. Смещение
     ~112 px от левого края макета (0.067 * ширина макета). */
  margin-left: calc(112 / var(--design-w) * 100vw);
  color: var(--clr-white);
  /* не позволяем разбивать слово REV‑SHARE по дефису */
  white-space: nowrap;
}

/* абзац под заголовком */
.hero__info-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;      /* ExtraLight */
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

/* ========================================
   6. Button (base + hover‑glow)
   ======================================== */
/* контейнер для кнопки */
.btn-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* само свечение — псевдоэлемент на контейнере */
.btn-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--clr-primary);
  filter: blur(32.8px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

/* при наведении контейнера — включаем свечение */
.btn-wrap:hover::before {
  opacity: 1;
}

/* ваша кнопка остаётся внутри, с нужным clip-path */
.hero__info-btn {
  position: relative;
  z-index: 2;               /* поверх свечения */
  width: 100%;
  height: 43px;
  background: var(--clr-primary);
  color: var(--clr-bg);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
  line-height: 43px;
  border: none;
  cursor: pointer;
  
  /* срезаем нижний‑левый и верхний‑правый углы */
  clip-path: polygon(
    0   0,
    calc(100% - 16px) 0,
    100% 16px,
    100% 100%,
    16px 100%,
    0   calc(100% - 16px)
  );
}




/* ========================================
   7. Bottom “рваный” край
   ======================================== */
.hero__texture {
  position: absolute;
  bottom: -19px;
  left: 0;         /* прижимаем к левому краю */
  width: 100%;     /* растягиваем на всю ширину секции */
  height: 103px;
  object-fit: cover;
  z-index: 5;
  pointer-events: none;
}


/* ========================================
   About‑Us Section: Background & Owl
   ======================================== */
.about {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 832px;  
  /* базовый полупрозрачный фон + картинка бекграунда */
  background-color: rgba(11, 11, 11, 0.98);
  background-image: url('../assets/png/background_aboutus.png');
  background-repeat: no-repeat;
  background-position: -200px -200px;
  background-size: 1665px 1500px;
  overflow: hidden;
}

.about__owl {
  position: absolute;
  top: 234px;
  left: -5px;
  width: 994px;
  height: 558px;
  background-image: url('../assets/png/owl_aboutus.png');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
/* ========================================
   About‑Us Heading: двойной “ABOUT”
   ======================================== */
/* контейнер заголовка */
.about__heading {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(367 / var(--design-w) * 100vw);
  height: 125px;
}

.about__title-outline {
  position: absolute;
  top: 48px;
  left: calc(66 / var(--design-w) * 100vw);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 101px;
  font-weight: 700;
  line-height: 1;
  
  /* убираем глобальный blur, оставляем только направленную тень */
  filter: none;
  color: transparent;
  -webkit-text-stroke: 1px var(--clr-primary);

  /* смещение по Y (4px) + размытие (3.9px) — тень пойдёт вниз */
  text-shadow:
    0 4px 3.9px var(--clr-primary),
    0 8px 7px rgba(181, 13, 218, 0.2);

  /* (опционально) дополнительный более мягкий слой тени для глубины */
  /* text-shadow: 
       0 4px 3.9px var(--clr-primary),
       0 8px 7px rgba(181,13,218,0.2); */

  z-index: 1;
}

/* 2) белая заливка внутри контура */
.about__title-white {
  position: absolute;
  top: 50px;
  left: calc(68 / var(--design-w) * 100vw);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 100px;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-white);
  z-index: 2;
}

/* ----------------------------------------
   About‑Us Section: “US” Text
   ---------------------------------------- */
.about__title-us {
  position: absolute;
  top: 138px;               /* отступ от верха контейнера */
  left: calc(381 / var(--design-w) * 100vw);              /* отступ слева */
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;         /* Bold */
  font-size: 100px;         /* размер шрифта */
  line-height: 1;           /* 100% */
  letter-spacing: 0;        /* без tracking */
  color: var(--clr-primary);/* rgba(181,13,218,1) */
  z-index: 2;               /* над фоном, под «ABOUT» контурами */
}

/* ----------------------------------------
   About‑Us Section: Description Text
   ---------------------------------------- */
.about__desc {
  position: absolute;
  top: 69px;                /* от верха контейнера */
  /* чуть больше смещаем правее, чтобы карточки не выходили в центр */
  left: calc(950 / var(--design-w) * 100vw);
  width: calc(514 / var(--design-w) * 100vw);             /* адаптивная ширина */
  /* height можно не задавать — текст сам развернётся в нужный блок */
  
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;         /* Light */
  font-size: 20px;          /* размер шрифта */
  line-height: 1.1;           /* 100% */
  letter-spacing: 0;        /* без дополнительного трекинга */
  color: rgba(255, 255, 255, 1);
  
  z-index: 2;               /* между фоном и заголовками */
}
/* ========================================
   About‑Us Section: Cards Column
   ======================================== */
.about__cards {
  position: absolute;
  top: 200px;             /* от верха секции */
  left: calc(950 / var(--design-w) * 100vw);
  width: calc(485.5 / var(--design-w) * 100vw);         /* адаптивная ширина */
  display: flex;
  flex-direction: column;
  gap: 24px;              /* расстояние между карточками */
  z-index: 2;
}

/* обёртка для свечения (теперь всегда включено) */
.about__card-wrap {
  position: relative;
}

.about__card-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--clr-primary);
  filter: blur(32.8px);   /* сила свечения */
  opacity: 1;             /* свечение постоянно */
  z-index: 1;
  pointer-events: none;
}

/* сама карточка — над свечением и с обрезанными углами */
.about__card {
  position: relative;
  z-index: 2;             /* поверх свечения */
  width: 100%;
  height: 157px;          /* фиксированная высота */
  background: var(--clr-bg);
  padding: 24px;          /* отступы контента */
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--clr-white);
  font-family: 'Montserrat', sans-serif;
  clip-path: polygon(
    0   0,
    calc(100% - 16px) 0,
    100% 16px,
    100% 100%,
    16px 100%,
    0   calc(100% - 16px)
  );
  /* убираем встроенную тень, теперь она через свечения */
  box-shadow: none;
}

/* заголовок внутри карточки */
.about__card h3 {
  margin: 0 0 8px;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
}

/* текст внутри карточки */
.about__card p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: 16px;
  line-height: 1.5;
}

/*FEATHER FORCE*/

.about__feather {
  /* отладочный фон */
  background:none;

  position: absolute;
  /* Перемещаем надпись Feather Force немного ниже и левее, чтобы она не
     перекрывала текст «ABOUT» и располагалась ближе к голове совы. */
  top: calc(100 / var(--design-w) * 100vw);
  /* Смещаем надпись вправо, чтобы она не перекрывала надпись ABOUT */
  left: calc(600 / var(--design-w) * 100vw);
  width: calc(95 / var(--design-w) * 100vw);
  height: 24px;

  font-family: 'Vujahday Script', cursive;
  font-size: 18px;
  line-height: 1;
  color: #fff;

  transform: rotate(16.06deg);
  transform-origin: left top;

  z-index: 2;
}

/* ----------------------------------------
   about‑us: Twilight Tactics
---------------------------------------- */
.about__twilight {
  position: absolute;
  top: 539px;
  left: calc(601 / var(--design-w) * 100vw);
  /* фиксировать width/height не обязательно, текст сам по себе */
  
  font-family: 'Vujahday Script', cursive;
  font-weight: 400;        /* Regular */
  font-size: 18px;
  line-height: 1;          /* 100% от font-size */
  letter-spacing: 0;

  color: #FFFFFF;          /* rgba(255,255,255,1) */
  
  transform: rotate(-14.41deg);
  transform-origin: left top;
  
  /* убедитесь, что никаких фонов нет */
  background: none;
}
/* ----------------------------------------
   about‑us: Hunt Mode (нижний правый угол)
---------------------------------------- */
.about__hunt {
  position: absolute;
  top: 760px;
  left: calc(1263 / var(--design-w) * 100vw);
  
  font-family: 'Vujahday Script', cursive;
  font-weight: 400;        /* Regular */
  font-size: 18px;
  line-height: 1;          /* 100% от font-size */
  letter-spacing: 0;
  color: #FFFFFF;          /* rgba(255,255,255,1) */
  
  transform: rotate(-15.04deg);
  transform-origin: left top;
  
  background: none;       /* убираем любой фон */
}

/* ----------------------------------------
   about‑us: Arrow (декоративная стрелка)
---------------------------------------- */
.about__arrow {
  position: absolute;
  top: 319px;       /* от верха секции */
  left: calc(510 / var(--design-w) * 100vw);      /* от левого края секции */
  width: calc(225.813 / var(--design-w) * 100vw); /* адаптивная ширина */
  height: 285.828px; /* точная высота */
  background-image: url('../assets/png/Arrow_aboutus.png');
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-3.23deg);
  transform-origin: left top;
  pointer-events: none;
  z-index: 3;       /* при необходимости скорректируйте, чтобы стрелка была над/под другими элементами */
}

/* ========================================
   About‑Us Section: Ripped Bottom Edge
   ======================================== */
.about__texture {
  position: absolute;
  bottom: -19px;    /* как и раньше */
  left: 0;          /* прижато к левому краю */
  width: 100%;      /* растягиваем по всей ширине родителя */
  height: 103px;
  object-fit: cover;
  z-index: 5;
  pointer-events: none;
}

/* ========================================
   Scoreboard Section (full‑screen bg)
   ======================================== */
.scoreboard {
  /* match your other full‑frame sections */
  position: relative;
  /* Заполняем всю ширину экрана: убираем max-width и auto‑центрирование,
     чтобы не оставалось чёрных или серых полей по бокам. */
  width: 100%;
  max-width: none;
  height: 911px;          /* сохраняем высоту секции */
  margin: 0;

  /* solid dark base */
  background-color: rgba(11, 11, 11, 1);

  /* owl scoreboard graphic */
  background-image: url('../assets/png/owls_scoreboard.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  overflow: hidden;       /* clip any overflow */
  z-index: 1;
}
/* ========================================
   Scoreboard Heading: двойной “SCOREBOARD”
   ======================================== */
.scoreboard__heading {
  position: absolute;
  top: 0;
  left: 0;
  /* Ширина заголовка пропорциональна ширине макета (708 px из 1670 px ≈ 42,4%) */
  width: calc(708 / 1670 * 100%);
  height: 125px;
  pointer-events: none;
}

.scoreboard__title-outline {
  position: absolute;
  top: 13px;
  left: 50px;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 101px;
  font-weight: 700;
  line-height: 1;
  
  color: transparent;
  -webkit-text-stroke: 1px var(--clr-white);
  
  /* glow‑эффект фиолетовым */
  text-shadow:
    0 4px 3.9px rgba(181, 13, 218, 1),
    0 8px 7px rgba(181, 13, 218, 0.2);
  
  z-index: 1;
}

.scoreboard__title-white {
  position: absolute;
  top: 14px;
  left: 51px;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 100px;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-white);
  z-index: 2;
}
/* ========================================
   Scoreboard Divider Line
   ======================================== */
.scoreboard__divider {
  position: absolute;
  top: 114px;
  left: -6px;
  /* ширина линии ~1593 px от 1670 px ≈ 95.4% */
  width: calc(1593 / 1670 * 100%);
  height: 0;
  border-top: 1px solid rgba(254, 254, 254, 0.58);
  pointer-events: none;
  z-index: 2;
}
/* ========================================
   Scoreboard: second glowing card
   ======================================== */
.scoreboard__card2-wrap {
  position: absolute;
  /* Позиционируем и масштабируем карточку относительно ширины и высоты секции.
     147 px / 911 px ≈ 16.14% от высоты; 1060 px / 1670 px ≈ 63.47% от ширины;
     363 px / 1670 px ≈ 21.74% от ширины; 125 px / 911 px ≈ 13.72% от высоты. */
  top: calc(147 / 911 * 100%);
  /* смещаем карточку ближе к правому краю и увеличиваем её ширину,
     чтобы она не перекрывала сов и выглядела как в макете */
  left: 70%;
  width: 25%;
  height: calc(125 / 911 * 100%);
  pointer-events: none;
  z-index: 2;
}

/* glow behind the card */
.scoreboard__card2-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(181, 13, 218, 1);
  filter: blur(74.5px);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

/* the card itself, clipped corners */
.scoreboard__card2 {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: var(--clr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    0   0,
    calc(100% - 16px) 0,
    100% 16px,
    100% 100%,
    16px 100%,
    0   calc(100% - 16px)
  );
}

/* typography inside the card */
.scoreboard__card2 p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;      /* Medium */
  font-size: 20px;
  line-height: 1;
  color: var(--clr-white);
  text-align: center;
  padding: 0 16px;       /* по желанию, чтобы текст не «упёрся» в срезы */
}

.scoreboard__owl-area {
  position: absolute;
  background: transparent;
  cursor: pointer;
  pointer-events: all;
  z-index: 3; /* над фоном, под карточкой */
}

/*
 * Привязываем кликабельные области (owl-area) к процентам ширины и высоты
 * секции Scoreboard. Значения получены из Figma: оригинальный макет
 * 1670×911 px. Таким образом, положения и размеры масштабируются пропорционально.
 */
.scoreboard__owl-area:nth-of-type(1) {
  top: 46.3%;   /* 421px / 911px */
  left: 6.0%;   /* 101px / 1670px */
  width: 13.7%; /* 228px / 1670px */
  height: 46.4%;/* 423px / 911px */
}

.scoreboard__owl-area:nth-of-type(2) {
  top: 35.3%;   /* 322px / 911px */
  left: 30.7%;  /* 512px / 1670px */
  width: 13.4%; /* 224px / 1670px */
  height: 40.9%;/* 373px / 911px */
}

.scoreboard__owl-area:nth-of-type(3) {
  top: 21.7%;   /* 198px / 911px */
  left: 47.9%;  /* 800px / 1670px */
  width: 14.6%; /* 244px / 1670px */
  height: 51.6%;/* 470px / 911px */
}

.scoreboard__owl-area:nth-of-type(4) {
  top: 41.9%;   /* 382px / 911px */
  left: 66.9%;  /* 1117px / 1670px */
  width: 13.4%; /* 224px / 1670px */
  height: 43.9%;/* 400px / 911px */
}
/* ========================================
   Scoreboard: Ripped Bottom Edge
   ======================================== */
.scoreboard__texture {
  position: absolute;
  bottom: -19px;      /* чуть выступает под блоком */
  left: 0;            /* начинаем ровно от левого края */
  width: 100%;        /* тянем на всю ширину контейнера/экрана */
  height: 103px;      /* оставляем нужную высоту */
  object-fit: cover;  /* масштабирование SVG без искажений */
  z-index: 5;         /* над другими элементами */
  pointer-events: none;
}

/* ----------------------------------------
   Our Team Section
---------------------------------------- */
.ourteam {
  position: relative;
  width: 100%;
  height: 1261px;       /* ваша высота фрейма */
  overflow: hidden;     /* обрезаем всё, что вышло за границы */
  background: none;     /* фон сбрасываем, всё в ::before */
}

/* псевдо-элемент подложки с повернутым фоном */
.ourteam::before {
  content: "";
  position: absolute;
  /* центрируем псевдо-элемент в середине блока */
  top: 50%;
  left: 50%;
  /* делаем квадрат по диагонали фрейма (~√(w²+h²)) */
  /* расширяем фон, чтобы исключить чёрные поля */
  width: 200vw;
  height: 200vh;
  /* фон */
  background-image: url('../assets/png/ourteam_background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* центрируем изображение в середине секции без поворотов. Убираем вращения и
     масштабирование — фон будет развернут нормально и растягиваться, как в
     дизайне. */
  transform: translate(-50%, -50%);
  /* затемняем фон, чтобы контент читался лучше */
  filter: brightness(0.7);

  transform-origin: center center;
  z-index: 1;
  pointer-events: none;
}

/* рваный край сверху, перевёрнутый на 180° */
.ourteam__texture {
  position: absolute;
  top: -19px;          /* чуть выше секции */
  left: 0;
  width: 100%;
  height: 103px;
  object-fit: cover;
  transform: rotate(180deg);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}

/* контейнер для остального контента секции */
.ourteam__content {
  position: relative;
  z-index: 3;

  
}
/* ----------------------------------------
   Our Team Heading: “OUR TEAM”
---------------------------------------- */
.ourteam__heading {
  position: absolute;
  top: 71px;
  left: 47px;
  width: 539px;
  height: 123px;
  pointer-events: none;
  z-index: 3;
}

.ourteam__title {
  margin: 0;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;
  font-size: 100px;
  line-height: 1;
  white-space: nowrap;
}

.ourteam__our {
  color: #000; /* black */
}

.ourteam__team {
  color: var(--clr-white);
  text-shadow:
    0 4px 3.9px var(--clr-primary),
    0 8px 7px rgba(181, 13, 218, 0.2);
}
/* ----------------------------------------
   Our Team Section: Icon
---------------------------------------- */
.ourteam__icon {
  position: absolute;
  top: 126px;
  left: 586px;
  width: 75.23863220214844px;
  height: 83.32666015625px;
  z-index: 4; /* above background, below or above text as needed */
  pointer-events: none;
}
/* ----------------------------------------
   Our Team Section: Tagline (updated)
---------------------------------------- */
.ourteam__tagline {
  position: absolute;
  top: 216px;
  left: 56px;
  width: 595px;
  /* remove fixed height so it can grow if needed */
  /* height: 102px;  */
  
  /* no background this time */
  background: none;
  
  font-family: 'Vujahday Script', cursive;
  font-weight: 400;
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0;
  
  /* deep charcoal text */
  color: rgba(11, 11, 11, 1);
  
  z-index: 3;  /* sit above the rotated background but beneath any UI overlays */
}
/* ----------------------------------------
   Our Team Section: Second Tagline
---------------------------------------- */
.ourteam__tagline2 {
  position: absolute;
  top: 150.55px;
  left: 1009.07px;
  width: 451px;
  /* высоту не задаём, чтобы текст сам переносился */
  
  font-family: 'Vujahday Script', cursive;
  font-weight: 400;            /* Regular */
  font-size: 23px;
  line-height: 1;              /* 100% */
  letter-spacing: 0;
  
  color: rgba(11, 11, 11, 1);
  
  /* точное вращение вокруг левого верхнего угла */
  transform: rotate(3.71deg);
  transform-origin: left top;
  
  background: none;            /* сбрасываем фон */
  z-index: 3;
}

/* ========================================
   Our Team Section: Cards
   ======================================== */
/* контейнер всех карточек */
.ourteam__content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* базовый класс для карточки */
.ourteam__card {
  position: absolute;
  width: 300px;           /* фиксированная ширина */
  /* НЕ задаём height! пусть сохраняется исходное соотношение сторон */
  overflow: visible;      /* чтобы повёрнутая картинка не обрезалась */
  pointer-events: none;
  z-index: 3;
}

/* универсальные стили для <img> внутри карточки */
.ourteam__card img {
  display: block;
  width: 100%;
  height: auto;           /* авто-высота по пропорциям */
  transform-origin: center center;
}

/* повороты для каждой из трёх карточек */
.ourteam__auroracard img {
  transform: rotate(-19.96deg);
}
.ourteam__lunacard   img {
  transform: rotate(20.43deg);
}
.ourteam__atlascard  img {
  transform: rotate(6.22deg);
}

/* общий базовый стиль для патчей */
.ourteam__patch {
  position: absolute;
  pointer-events: none;
  z-index: 4; /* над карточкой */
}
/* — Патчи Aurora */
/* первый патч слева */
.ourteam__patch--1 {
  top: 425px;
  left: 100px;
  width: 107.618px;
  height: 104.999px;
}

/* второй патч сверху */
.ourteam__patch--2 {
  top: 330px;
  left: 352px;
  width: 126.985px;
  height: 113.460px;
}

/* — Патчи Luna */
.ourteam__patch--luna-1 {
   top: 255px;
  left: 665px;
  width: 107.589px;
  height: 104.907px;
}
.ourteam__patch--luna-2 {
top: 345px;
  left: 900px;
  width: 126.985px;
  height: 113.460px;
}

/* — Патчи Atlas */
.ourteam__patch--atlas-1 {
  top: 515px;
  left: 990px;
  width: 107.622px;
  height: 104.999px;
}
.ourteam__patch--atlas-2 {
  top: 545px;
  left: 1240px;
  width: 108.000px;
  height: 105.358px;
}

/* ========================================
   Our Team Section: Captions
   ======================================== */
.ourteam__caption {
  position: absolute;
  font-family: 'Vujahday Script', cursive;
  font-weight: 400;    /* Regular */
  font-size: 23px;
  line-height: 1;      /* 100% */
  letter-spacing: 0;
  color: rgba(11, 11, 11, 1);
  pointer-events: none;
  transform-origin: left top;
}

/* первый блок */
.ourteam__caption--1 {
  top: 904.42px;
  left: 220px;
  width: 204px;   /* округлил до 2 знаков */
  height: 34px;
  transform: rotate(-6deg);
}

/* второй блок */
.ourteam__caption--2 {
  top: 748px;
  left: 681px;
  width: 253px;
  height: 34px;
  transform: rotate(20.11deg);
}

/* третий блок */
.ourteam__caption--3 {
  top: 1021.45px;
  left: 1068.03px;
  width: 295px;
  height: 34px;
  transform: rotate(-6.09deg);
}
/* ========================================
   Our Team Section: INBOX & HUNTERS
   ======================================== */
.ourteam__inbox {
  position: absolute;
  top: 990px;
  left: 370px;
  width: 336px;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;        /* Bold */
  font-size: 100px;
  line-height: 1;          /* 100% */
  letter-spacing: 0;
  color: rgba(11, 11, 11, 1);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

.ourteam__hunters {
  position: absolute;
  top: 1107px;
  left: 73px;
  width: 490px;
  height: 123px;
  pointer-events: none;
  z-index: 3;
}

.ourteam__hunters-outline,
.ourteam__hunters-white {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;        /* Bold */
  font-size: 100px;
  line-height: 1;
  white-space: nowrap;
}

.ourteam__hunters-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--clr-primary);
  text-shadow: 0 4px 3.9px var(--clr-primary);
  /* при желании можно добавить лёгкую тень вниз */
  /* text-shadow: 0 4px 3.9px var(--clr-primary); */
  z-index: 1;
}

.ourteam__hunters-white {
  color: var(--clr-white);
  z-index: 2;
}
/* ========================================
   Our Team Section: финальный текст
   ======================================== */
.ourteam__final-text {
  position: absolute;
  top: 1155px;
  left: 733px;
  width: 525px;
  /* высоту не задаём, пусть сам оборачивается */
  font-family: 'Vujahday Script', cursive;
  font-weight: 400;        /* Regular */
  font-size: 23px;
  line-height: 1;          /* 100% */
  letter-spacing: 0;
  color: rgba(11, 11, 11, 1);
  transform: rotate(-6.17deg);
  transform-origin: left top;
  pointer-events: none;
  z-index: 3;
}
/* ========================================
   Contact Us Section
   ======================================== */
.contact {
  position: relative;
  width: 100%;
  max-width: none;         /* убираем фиксированную ширину — тянем на весь экран */
  height: 875px;             /* как задано */
  margin: 0;                 /* убираем автоцентрирование */
  width: 100%;
  background-color: rgba(11, 11, 11, 1);
  overflow: hidden;
  z-index: 1;
}

/* контейнер «двойного» заголовка */
.contact__heading {
  position: absolute;
  top: 32px;
  left: calc(50 / var(--design-w) * 100vw);
  width: calc(654 / var(--contact-w) * 100vw);
  height: 123px;
  pointer-events: none;
  z-index: 2;
}

/* контур (фиолетовая обводка + glow) */
.contact__title-outline {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;
  font-size: 100px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--clr-primary);
  text-shadow:
    0 4px 3.9px var(--clr-primary),
    0 8px 7px rgba(181, 13, 218, 0.2);
  z-index: 1;
}

/* заливка (белый текст) */
.contact__title-white {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;
  font-size: 100px;
  line-height: 1;
  color: var(--clr-white);
  z-index: 2;
}
/* ========================================
   Contact Us Section: Illustration
   ======================================== */
.contact__image {
  position: absolute;
  top: 162px;
  left: calc(278 / var(--contact-w) * 100vw);
  width: calc(724.151 / var(--contact-w) * 100vw);
  height: 411px;
  object-fit: cover;
  pointer-events: none;
  z-index: 1; /* если нужно, поднимите над фоном, но под заголовком */
}
/* ========================================
   Contact Us Section: Button
   ======================================== */
/* контейнер для кнопки */
.contact__btn-wrap {
  position: absolute;
  top: 609px;
  left: calc(285 / var(--contact-w) * 100vw);
  width: calc(710 / var(--contact-w) * 100vw);
  display: inline-block;
}

/* само свечение — псевдоэлемент на контейнере */
.contact__btn-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--clr-primary);
  filter: blur(32.8px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

/* при наведении контейнера — включаем свечение */
.contact__btn-wrap:hover::before {
  opacity: 1;
}

/* сама кнопка */
.contact__btn {
  position: relative;
  z-index: 2;               /* поверх свечения */
  width: 100%;
  height: 43px;
  background: var(--clr-primary);
  color: var(--clr-bg);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
  line-height: 43px;
  border: none;
  cursor: pointer;
  /* срезаем нижний-левый и верхний-правый углы */
  clip-path: polygon(
    0   0,
    calc(100% - 16px) 0,
    100% 16px,
    100% 100%,
    16px 100%,
    0   calc(100% - 16px)
  );
}
/* Footer — точно как Header */
.footer__header {
  position: relative;
  padding: 15px 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--clr-bg);
}

.footer__header .hero__logo img {
  width: 113px;
  height: 53px;
}

.footer__header .hero__group {
  display: flex;
  gap: 141px;
}

.footer__header .hero__nav ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer__header .hero__nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--clr-white);
}

.footer__header .hero__icons {
  display: flex;
  gap: 9px;
}

.footer__header .hero__icons img {
  width: 23px;
  height: 23px;
}

.footer__copy {
  position: absolute;
  bottom: 20px;
  right: 50px;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 400;              /* Regular */
  color: rgba(254,254,254,1);
}