/* ── Корпоративний шрифт (subset: UA + Latin basic + пунктуація) ── */
@font-face {
  font-family: "u3";
  src: url("../fonts/u3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "u3";
  src: url("../fonts/u3-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "u3";
  src: url("../fonts/u3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "u3";
  src: url("../fonts/u3-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

/* Покращена видимість фокусу для клавіатурних користувачів */
:focus-visible {
  outline: 2px solid #ffa600;
  outline-offset: 2px;
}

:root {
  --bg-deep: #061820;
  --gold: #ffa600;
  --gold-light: #ffe7ba;
  --text-muted: #c6b48f;
  --btn-text: #001e28;
}

html {
  scroll-padding-top: 60px;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

html,
body {
  background-color: var(--bg-deep);
  font-family: "u3", sans-serif;
}

/* Глобальний паттерн — один на всю сторінку, скролиться разом зі сторінкою */
.site-pattern {
  position: absolute;
  inset: 0;
  background-image: url("../images/pattern.webp");
  background-size: 240px 240px;
  background-repeat: repeat;
  background-position: top left;
  background-attachment: scroll;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  min-height: 100%;
}

.site-pattern::before,
.site-pattern::after {
  content: "";
  position: absolute;
  inset: -96px;
}

.site-pattern::before {
  background-image:
    radial-gradient(circle, rgba(255, 231, 186, 0.58) 0 0.9px, transparent 1.1px),
    radial-gradient(circle, rgba(255, 231, 186, 0.18) 0 0.9px, transparent 1.1px);
  background-size:
    20px 20px,
    40px 40px;
  background-position:
    0 0,
    10px 10px;
  mix-blend-mode: screen;
  opacity: 0.14;
  animation: patternDotsPulse 6.8s ease-in-out infinite;
}

.site-pattern::after {
  background-image:
    linear-gradient(rgba(255, 231, 186, 0.78), rgba(255, 231, 186, 0.78)),
    linear-gradient(rgba(255, 231, 186, 0.78), rgba(255, 231, 186, 0.78)),
    linear-gradient(rgba(255, 231, 186, 0.62), rgba(255, 231, 186, 0.62)),
    linear-gradient(rgba(255, 231, 186, 0.62), rgba(255, 231, 186, 0.62)),
    linear-gradient(rgba(255, 231, 186, 0.34), rgba(255, 231, 186, 0.34)),
    linear-gradient(rgba(255, 231, 186, 0.34), rgba(255, 231, 186, 0.34));
  background-size:
    1px 30px,
    30px 1px,
    1px 14px,
    14px 1px,
    1px 240px,
    240px 1px;
  background-position:
    calc(50% - 0.5px) 72px,
    calc(50% - 15px) 87px,
    calc(50% - 0.5px) calc(50% - 7px),
    calc(50% - 7px) 50%,
    calc(50% - 0.5px) 0,
    0 calc(50% - 0.5px);
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.12;
  animation: patternMarksGlow 5.4s ease-in-out infinite;
}

@keyframes patternDotsPulse {
  0%,
  100% {
    opacity: 0.08;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.18;
    transform: translate3d(0, -1px, 0);
  }
}

@keyframes patternMarksGlow {
  0%,
  100% {
    opacity: 0.08;
  }
  50% {
    opacity: 0.18;
  }
}

/* ── Базові вертикальні відступи секцій ── */
section {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* ── Відступ між заголовком секції та її вмістом ──
   Застосовується, лише коли одразу після <h2> НЕМАЄ непорожнього
   .section-subtitle (тобто у секції немає підзаголовка). Охоплює лише
   контент-секції: герої, legal/policy та join-форми виключені;
   .vacancies-lobby-section виключено, бо використовує .lobby-desc
   як підзаголовок. */
section:not([class*="hero"]):not(.legal-section):not(.join):not(.vacancies-lobby-section) h2:not(+ .section-subtitle:not(:empty)) {
  margin-bottom: 0;
}

section:not([class*="hero"]):not(.legal-section):not(.join):not(.vacancies-lobby-section) h2:not(+ .section-subtitle:not(:empty)) + * {
  margin-top: 80px;
}

@media (max-width: 1279px) {
  section:not([class*="hero"]):not(.legal-section):not(.join):not(.vacancies-lobby-section) h2:not(+ .section-subtitle:not(:empty)) + * {
    margin-top: 40px;
  }
}

/* ── Utility Classes ── */
.gold {
  color: var(--gold, #ffa600);
}