:root {
  /* Поверхности. Роли 1:1 с референсом, значения инвертированы в тёмные. */
  --l-bg:       #0C0A12; /* базовый фон страницы      (реф. #ffffff) */
  --l-surface:  #15121F; /* «приподнятая» секция      (реф. #f5f5f5) */
  --l-card:     #1B1728; /* карточка                  (реф. #ffffff на сером) */
  --l-ink:      #070610; /* самая глубокая секция     (реф. #111111) */
  --l-border:   #2A2440;

  /* Текст */
  --l-text:     #F4F1FA; /* заголовки                 (реф. #000000) */
  --l-text-2:   #C3BAD6; /* основной текст            (реф. #424242) */
  --l-muted:    #8A82A0; /* подписи и мелочь          (реф. #7d7d7d/#858585/#a8a8a8) */

  /* Акценты. --l-acc-deep — заливка кнопок (белый текст на нём 7.1:1),
     --l-acc — акцентный текст и подсветка на тёмном (5.5:1 на --l-bg),
     --l-acc-hot — надзаголовки, ярлыки «акция», второй цвет duotone (6.6:1). */
  --l-acc:      #B15EFF;
  --l-acc-deep: #7B2CBF;
  --l-acc-hot:  #FF5C7A;

  /* Радиусы — 1:1 с референсом */
  --l-r-btn:    7px;   /* залитая кнопка  */
  --l-r-btn-o:  10px;  /* аутлайн-кнопка  */
  --l-r-card:   14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body { background: var(--l-bg); color: var(--l-text-2); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

body { font-family: 'Onest', Arial, sans-serif; }

.l-title-xl { font-size: 72px; line-height: 1.17; font-weight: 700; }
.l-title-md { font-size: 52px; line-height: 1.23; font-weight: 700; }
.l-title-sm { font-size: 48px; line-height: 1.23; font-weight: 700; }
.l-descr-xl { font-size: 24px; line-height: 1.5;  font-weight: 400; }
.l-descr-lg { font-size: 22px; line-height: 1.55; font-weight: 400; }
.l-descr-md { font-size: 20px; line-height: 1.55; font-weight: 400; }
.l-name-xs  { font-size: 16px; line-height: 1.35; font-weight: 400; }

@media screen and (max-width: 1200px) {
  .l-title-xl { font-size: 68px; } .l-title-md { font-size: 48px; }
  .l-title-sm { font-size: 44px; } .l-descr-xl { font-size: 22px; }
  .l-descr-lg { font-size: 20px; } .l-descr-md { font-size: 18px; }
  .l-name-xs  { font-size: 14px; }
}
@media screen and (max-width: 640px) {
  .l-title-xl { font-size: 32px; } .l-title-md { font-size: 30px; }
  .l-title-sm { font-size: 30px; }
  .l-descr-xl { font-size: 20px; line-height: 1.4; }
  .l-descr-lg { font-size: 18px; line-height: 1.45; }
  .l-descr-md { font-size: 16px; line-height: 1.45; }
  .l-name-xs  { font-size: 12px; }
}
@media screen and (max-width: 480px) {
  .l-title-xl { font-size: 30px; }
}

.l-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media screen and (max-width: 1200px) { .l-container { max-width: 960px; } }
@media screen and (max-width: 960px)  { .l-container { max-width: 640px; } }

.l-cols  { display: flex; gap: 40px; align-items: flex-start; }
.l-col-5 { flex: 0 0 460px; max-width: 460px; }
@media screen and (max-width: 1200px) { .l-col-5 { flex-basis: 380px; max-width: 380px; } }
@media screen and (max-width: 960px) {
  .l-cols  { flex-direction: column; gap: 24px; }
  .l-col-5 { flex-basis: auto; max-width: 100%; width: 100%; }
}

/* Вертикальный ритм секций */
.l-section { padding-top: 135px; padding-bottom: 120px; }
@media screen and (max-width: 960px) { .l-section { padding-top: 80px; padding-bottom: 70px; } }
@media screen and (max-width: 640px) { .l-section { padding-top: 60px; padding-bottom: 50px; } }

.l-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; border: 0; cursor: pointer; text-decoration: none;
  font-family: inherit; font-weight: 600; white-space: normal;
  transition: background-color .2s ease-in-out, color .2s ease-in-out,
              border-color .2s ease-in-out, opacity .2s ease-in-out;
}
.l-btn--fill {
  background: var(--l-acc-deep); color: #fff;
  border-radius: var(--l-r-btn); font-size: 16px; padding: 0 60px;
}
.l-btn--fill:hover { background: var(--l-acc); }
.l-btn--outline {
  background: transparent; color: var(--l-text);
  border: 1px solid var(--l-text); border-radius: var(--l-r-btn-o);
  font-size: 22px; padding: 0 70px;
}
.l-btn--outline:hover { border-color: var(--l-acc); color: var(--l-acc); }
@media screen and (max-width: 1200px) {
  .l-btn--fill { padding: 0 45px; } .l-btn--outline { padding: 0 55px; }
}
@media screen and (max-width: 640px) {
  .l-btn--fill { padding: 0 30px; }
  .l-btn--outline { padding: 0 40px; font-size: 18px; }
}

.l-about__title { color: var(--l-text); letter-spacing: .04em; }
.l-about__meta  { color: var(--l-muted); line-height: 1.6; margin-top: 20px; }
.l-about__meta strong { color: var(--l-text-2); font-weight: 600; }
.l-about__meta a { color: var(--l-acc); text-decoration: none; }
.l-about__text  { color: var(--l-text-2); }

/* ---- Hero ---- */
.l-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: var(--l-bg);
  overflow: hidden;
}

.l-hero__filter {
  position: absolute; inset: 0;
  background: none;
}

.l-hero__inner { position: relative; z-index: 1; text-align: center; }
.l-hero__title { color: var(--l-text); letter-spacing: -.01em; }
.l-hero__descr { color: var(--l-text-2); opacity: .7; margin-top: 20px; }
.l-hero__cta   { margin-top: 40px; }

.l-hero__arrow {
  position: absolute; left: 50%; bottom: 32px; z-index: 1;
  transform: translateX(-50%);
  color: var(--l-muted);
  animation: l-arrow 2s ease-in-out infinite;
}
@keyframes l-arrow {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) { .l-hero__arrow { animation: none; } }

@media screen and (max-width: 640px) {
  .l-hero__descr { margin-top: 14px; }
  .l-hero__cta   { margin-top: 28px; }
  .l-hero__arrow { bottom: 20px; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Header ---- */
.l-header {
  position: relative; z-index: 100;
  background: var(--l-ink);
}

.l-header__inner {
  height: 130px; padding: 0 20px;
  display: flex; align-items: center; gap: 20px;
  max-width: 1200px; margin: 0 auto;
}
.l-header__logo img { display: block; max-width: 140px; width: 140px; height: auto; }

.l-header__nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.l-header__list { display: flex; list-style: none; margin: 0; padding: 0; }
.l-header__list li { padding: 0 15px; }
.l-header__list li.l-hidden { display: none; }
.l-header__link {
  color: var(--l-text); text-decoration: none; font-size: 16px; font-weight: 500;
  transition: color .2s ease-in-out;
}
.l-header__link:hover { color: var(--l-acc); }
.l-header__contact { color: var(--l-muted); text-align: right; line-height: 1.5; }
.l-header__contact a { color: var(--l-text-2); text-decoration: none; }

/* ---- Burger ---- */
.l-burger {
  display: none; position: relative; flex-shrink: 0; margin-left: auto;
  width: 28px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.l-burger span {
  display: block; position: absolute; left: 0; width: 100%; height: 3px;
  background: var(--l-text); transition: .25s ease-in-out;
}
.l-burger span:nth-child(1) { top: 0; }
.l-burger span:nth-child(2), .l-burger span:nth-child(3) { top: 8px; }
.l-burger span:nth-child(4) { top: 16px; }
.l-header.is-open .l-burger span:nth-child(1),
.l-header.is-open .l-burger span:nth-child(4) { top: 8px; width: 0; left: 50%; }
.l-header.is-open .l-burger span:nth-child(2) { transform: rotate(45deg); }
.l-header.is-open .l-burger span:nth-child(3) { transform: rotate(-45deg); }

@media screen and (max-width: 960px) {
  .l-header { background: var(--l-ink); }
  .l-header__inner { height: 64px; min-height: 64px; padding: 20px; }
  .l-header__logo img { width: 120px; max-width: 120px; }
  .l-burger { display: block; }
  .l-header__nav {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    margin: 0; padding: 12px 20px 24px;
    background: var(--l-ink); border-top: 1px solid var(--l-border);
  }
  .l-header.is-open .l-header__nav { display: flex; }
  .l-header__list { flex-direction: column; width: 100%; }
  .l-header__list li { padding: 12px 0; }
  .l-header__link { font-size: 20px; }
  .l-header__contact { text-align: left; margin-top: 12px; }
  .l-section, .l-hero { scroll-margin-top: 64px; }
}