/* Базовые переменные (бренд) */
:root{
  --page: #282828;
  --panel: #282828;           /* фон полотна / подложки */
  --card:  #474747;           /* фон карточек/блоков */
  --accent:#FF7000;           /* активные кнопки/подчёркивания */
  --heading:#FFFFFF;
  --muted: #928F8F;
  --input: #D9D9D9;

  --r-big: 20px;
  --r-sm: 10px;
}

/* Типографика/фон */
html, body { font-family: "Geologica", ui-sans-serif, system-ui; }
.bg-page { background-color: var(--page); }
.bg-panel { background-color: var(--card); }
.bg-card  { background-color: var(--card); }
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.border-alpha { border-color: rgba(255,255,255,.08); }

/* Видимое focus-кольцо на тёмном фоне */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Кнопки */
.btn-primary{
  background: var(--accent);
  color: #fff;
  font-weight: 700;           /* кнопки – Bold 20 по гайду */
  border-radius: var(--r-sm);
  transition: filter .2s ease, transform .06s ease;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-primary:active{ transform: translateY(1px); }

.btn-ghost{
  background: transparent;
  color: #fff;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; /* усиление контраста */
  transition: background .2s ease, box-shadow .2s ease, transform .06s ease;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset;
}
.btn-ghost:active{ transform: translateY(1px); }

/* Навигация */
.nav-link{
  color: var(--muted);
  font-weight: 700;
  position: relative;
}
.nav-link:hover{ color: #fff; }
.nav-link.active{ color: #fff; } /* текст активного пункта белый */
.nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:2px; background: var(--accent);
  border-radius:999px;
  transform: translateZ(0);
}

/* Заголовки по гайду */
.heading1{
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--heading);
}
.sub1{
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 300;
  color: var(--muted);
}

/* Скругления крупным блокам */
.rounded-xl{ border-radius: var(--r-big); }

/* Тень для хедера при прокрутке */
.site-header.header-shadow{
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}