/* ============================================================
   DEVELOPER — дизайн-токены
   Мир: гранёный металл и жар. Почти чёрные слои, волосяные
   границы с верхним бликом, серебро на заголовках, один
   оранжевый акцент. Значения сняты семплированием из логотипа
   и референсных скриншотов, а не подобраны на глаз.
   ============================================================ */

/* ---------- Шрифты (локальные, ноль внешних запросов) ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Угол обводки блока. Зарегистрирован через @property, иначе браузер считает
   его обычной строкой и анимировать не может — вращение просто не пойдёт. */
@property --edge-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 315deg;
}

/* Атрибут hidden обязан скрывать. У элемента с собственным display —
   а таких в проекте много — правило браузера [hidden]{display:none}
   проигрывает по специфичности, и атрибут молча перестаёт работать.
   Ошибка тихая: разметка выглядит правильной, а на экране всё видно. */
[hidden] { display: none !important; }

/* ---------- Тёмная тема — база ----------
   Тёмная лежит на голом :root, а не в медиазапросе, потому что она
   основная: посетитель со светлой системой и посетитель без JavaScript
   всё равно видят сайт таким, каким он задуман. Светлая включается
   только явным выбором или через «как в системе». */

:root {
  --bg:            #050506;
  --bg-1:          #0D0E10;
  --bg-2:          #121417;
  --bg-3:          #16181B;
  --bg-inset:      #0A0B0C;

  --border:        #24272B;
  --border-strong: #33373C;
  /* Разделитель между записями набора строк. Заметно контрастнее обычной
     рамки: запись занимает три ряда полей, и волосяная линия между ними
     теряется — соседние записи сливаются в сплошную портянку.
     Замеренный контраст с фоном панели — 2.5 против 1.36 у --border. */
  --divider:       #4A5057;

  --text:          #DCE1E5;
  --text-muted:    #A2A5AB;
  --text-dim:      #82878F;
  --text-soft:      #C3C9CF;

  --accent:        #D9601F;
  --accent-hot:    #FF6A00;
  --accent-ink:    #FFFFFF;
  /* Ровная заливка кнопки — середина той же вилки. Брать --accent нельзя:
     он вивидный, и белый текст в 14px не добирает контраста 4.5 */
  --accent-fill:      #B54D1B;
  /* Блик, пробегающий по кнопке при наведении. Белый в обеих темах: лежит
     он всегда на тёмно-оранжевой заливке */
  --btn-shine:        rgba(255, 255, 255, 0.34);
  --accent-soft:   rgba(217, 96, 31, 0.14);
  --accent-line:   rgba(217, 96, 31, 0.34);

  --ok:            #35C05A;
  --ok-soft:       rgba(53, 192, 90, 0.16);
  --danger:        #E5484D;
  --danger-soft:   rgba(229, 72, 77, 0.16);
  --warn:          #E3A008;

  --metal:         linear-gradient(180deg, #8F969E 0%, #F0F3F6 24%, #F0F3F6 42%,
                   #C9D0D7 62%, #949BA3 84%, #7A818A 100%);
  --ember:         rgba(255, 106, 0, 0.16);
  --edge:          inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --edge-stops:
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.04) 38%,
      rgba(217, 96, 31, 0.55) 100%;
  --panel-glow: radial-gradient(105% 88% at 100% 100%,
      rgba(255, 106, 0, 0.10) 0%, transparent 55%);

  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg:     0 18px 48px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 8px 30px rgba(217, 96, 31, 0.32);

  --header-bg:     rgba(5, 5, 6, 0.72);
  --overlay:       rgba(5, 5, 6, 0.82);
  --card-scrim:   linear-gradient(180deg,
    rgba(5,5,6,0.15) 0%, rgba(5,5,6,0.48) 45%, rgba(5,5,6,0.90) 100%);
  --scrim:         rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

/* ---------- Светлая тема ----------
   Срабатывает только при выбранном «как в системе»: без атрибута
   медиазапрос не применяется, и база остаётся тёмной. */

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg:            #F7F7F8;
    --bg-1:          #FFFFFF;
    --bg-2:          #FFFFFF;
    --bg-3:          #F1F2F4;
    --bg-inset:      #ECEEF0;

    --border:        #E3E5E8;
    --border-strong: #CDD1D6;
    --divider:       #A6ACB4;

    --text:          #101215;
    --text-muted:    #5A5F66;
    --text-dim:      #686D74;
    /* Между --text и --text-muted: крупные числа набраны тяжёлым
       Montserrat, и на них чистый --text читается как пересвет */
    --text-soft:      #2A2F35;

    --accent:        #B54A17;
    --accent-hot:    #D25A1D;
    --accent-ink:    #FFFFFF;
    /* Заливка кнопок отдельно от текстового акцента: на ней лежит белый текст
       в 14px, которому нужен контраст >= 4.5. Вивидный оранжевый его не даёт. */
    --accent-fill:      #A54113;
    --accent-soft:   rgba(194, 82, 27, 0.10);
    --accent-line:   rgba(194, 82, 27, 0.26);

    --ok:            #1E9E45;
    --ok-soft:       rgba(30, 158, 69, 0.12);
    --danger:        #C8232A;
    --danger-soft:   rgba(200, 35, 42, 0.10);
    --warn:          #B7791F;

    /* Серебряная строка заголовка — в светлой теме графит */
    --metal:         linear-gradient(180deg, #4A5158 0%, #101215 24%, #101215 42%,
                       #2E343A 62%, #4A5158 84%, #5C636B 100%);
    /* Тление за hero — на светлом фоне заметно слабее */
    --ember:         rgba(226, 102, 31, 0.10);
    /* Верхний блик на кромке карточки */
    --edge:          inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* Обводка блока: волосяная сверху-слева, разогревается к правому нижнему
       углу. Рисуется как фон border-box, поэтому переживает border-radius. */
    --edge-stops:
        rgba(16, 18, 21, 0.12) 0%,
        rgba(16, 18, 21, 0.05) 38%,
        rgba(181, 74, 23, 0.38) 100%;
    /* Тление внутри блока — из того же правого нижнего угла */
    --panel-glow: radial-gradient(105% 88% at 100% 100%,
        rgba(194, 82, 27, 0.06) 0%, transparent 55%);

    --shadow-sm:     0 1px 2px rgba(16, 18, 21, 0.06);
    --shadow-md:     0 4px 16px rgba(16, 18, 21, 0.08);
    --shadow-lg:     0 18px 48px rgba(16, 18, 21, 0.12);
    --shadow-accent: 0 8px 30px rgba(194, 82, 27, 0.28);

    --header-bg:     rgba(247, 247, 248, 0.78);
    --overlay:       rgba(10, 11, 12, 0.72);
    /* Сверху почти прозрачно — скриншот должен читаться; плотность нарастает
       книзу, где лежат домен и тип */
    --card-scrim:   linear-gradient(180deg,
        rgba(247,247,248,0.18) 0%, rgba(247,247,248,0.52) 45%, rgba(247,247,248,0.93) 100%);
    --scrim:         rgba(16, 18, 21, 0.45);

    color-scheme: light;
}
}

/* Ручной выбор светлой темы — те же значения, но выигрывают у медиазапроса */
:root[data-theme="light"] {
  --bg:            #F7F7F8;
  --bg-1:          #FFFFFF;
  --bg-2:          #FFFFFF;
  --bg-3:          #F1F2F4;
  --bg-inset:      #ECEEF0;

  --border:        #E3E5E8;
  --border-strong: #CDD1D6;
  --divider:       #A6ACB4;

  --text:          #101215;
  --text-muted:    #5A5F66;
  --text-dim:      #686D74;
  /* Между --text и --text-muted: крупные числа набраны тяжёлым
     Montserrat, и на них чистый --text читается как пересвет */
  --text-soft:      #2A2F35;

  --accent:        #B54A17;
  --accent-hot:    #D25A1D;
  --accent-ink:    #FFFFFF;
  /* Заливка кнопок отдельно от текстового акцента: на ней лежит белый текст
     в 14px, которому нужен контраст >= 4.5. Вивидный оранжевый его не даёт. */
  --accent-fill:      #A54113;
  --accent-soft:   rgba(194, 82, 27, 0.10);
  --accent-line:   rgba(194, 82, 27, 0.26);

  --ok:            #1E9E45;
  --ok-soft:       rgba(30, 158, 69, 0.12);
  --danger:        #C8232A;
  --danger-soft:   rgba(200, 35, 42, 0.10);
  --warn:          #B7791F;

  /* Серебряная строка заголовка — в светлой теме графит */
  --metal:         linear-gradient(180deg, #4A5158 0%, #101215 24%, #101215 42%,
                     #2E343A 62%, #4A5158 84%, #5C636B 100%);
  /* Тление за hero — на светлом фоне заметно слабее */
  --ember:         rgba(226, 102, 31, 0.10);
  /* Верхний блик на кромке карточки */
  --edge:          inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* Обводка блока: волосяная сверху-слева, разогревается к правому нижнему
     углу. Рисуется как фон border-box, поэтому переживает border-radius. */
  --edge-stops:
      rgba(16, 18, 21, 0.12) 0%,
      rgba(16, 18, 21, 0.05) 38%,
      rgba(181, 74, 23, 0.38) 100%;
  /* Тление внутри блока — из того же правого нижнего угла */
  --panel-glow: radial-gradient(105% 88% at 100% 100%,
      rgba(194, 82, 27, 0.06) 0%, transparent 55%);

  --shadow-sm:     0 1px 2px rgba(16, 18, 21, 0.06);
  --shadow-md:     0 4px 16px rgba(16, 18, 21, 0.08);
  --shadow-lg:     0 18px 48px rgba(16, 18, 21, 0.12);
  --shadow-accent: 0 8px 30px rgba(194, 82, 27, 0.28);

  --header-bg:     rgba(247, 247, 248, 0.78);
  --overlay:       rgba(10, 11, 12, 0.72);
  /* Сверху почти прозрачно — скриншот должен читаться; плотность нарастает
     книзу, где лежат домен и тип */
  --card-scrim:   linear-gradient(180deg,
      rgba(247,247,248,0.18) 0%, rgba(247,247,248,0.52) 45%, rgba(247,247,248,0.93) 100%);
  --scrim:         rgba(16, 18, 21, 0.45);

  color-scheme: light;
}

/* ---------- Токены, не зависящие от темы ---------- */

:root {
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.75rem, 7.6vw, 6.25rem);
  --fs-h1:      clamp(1.875rem, 4vw, 3rem);
  --fs-h2:      clamp(1.375rem, 2.4vw, 2rem);
  --fs-h3:      1.1875rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.75rem;

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --r-btn:  999px;   /* кнопки: в «сильном» скруглении полукруглые */
  --pf-cols: 5;      /* колонок портфолио на широком экране */

  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* Галочка чеклиста — рисуется маской, цвет приходит из --accent */
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");

  --container: 1380px;
  --header-h:  56px;

  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    0.16s var(--ease);
  --t-base:    0.28s var(--ease);
  --t-slow:    0.5s var(--ease);
}

/* ---------- Общие примитивы ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Блик кнопки. Два одинаковых набора кадров нужны для перезапуска: при уходе
   курсора :hover снимается и класс добавляется в одном пересчёте стиля, и с тем
   же именем анимации браузер считает её продолжающейся, а не новой. Разные
   имена заставляют её начаться заново. Живут в токенах, потому что этот файл
   грузят и сайт, и панель. */
@keyframes btn-shine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@keyframes btn-shine-out {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Серебряная строка. color задан фолбэком: если background-clip не поддержан,
   текст остаётся видимым, а не исчезает. */
/* Хромированная строка. --metal-line задаёт высоту одной плитки градиента:
   без неё градиент растягивается на весь блок, и при переносе вторая строка
   получала бы только серый хвост вместо полного перехода. */
.metal {
  color: var(--text);
  background-image: var(--metal);
  background-size: 100% var(--metal-line, 100%);
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .metal { color: transparent; }
}

/* Волосяная карточка — базовый материал всего интерфейса */
.plate {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge);
}

/* Eyebrow: черта акцента + подпись капсом */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex: none;
}