/* ==========================================================================
   Оракул — оформление главной страницы
   --------------------------------------------------------------------------
   Все значения сняты пипеткой с макета `design/homepage-mockup.png` (1024x1536).
   Полная спецификация — `design/HOMEPAGE-SPEC.md`, там же геометрия блоков.

   Цвета заданы как CSS-переменные, потому что акцент придётся менять в одном
   месте: кнопки, ссылки, свечения и обводки берут его отсюда.
   ========================================================================== */

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */

.or-page {
	margin: 0;
	/* Свечения лежат прямо на фоне страницы, а не отдельным слоем поверх.
	   Отдельный слой с position:fixed и z-index:0 рисуется ВЫШЕ обычных
	   блоков — у них позиционирования нет, — и весь текст, кроме
	   заголовков, оказывается под ним. Проверено замером: без слоя
	   заголовок вступительного блока даёт яркость 255, со слоем — 9. */
	background:
		radial-gradient(900px 520px at 78% 60px,  rgba(92, 93, 245, 0.16), transparent 62%),
		radial-gradient(700px 420px at 10% 1010px, rgba(58, 92, 190, 0.13), transparent 60%),
		radial-gradient(620px 620px at 50% 92%, rgba(143, 119, 238, 0.10), transparent 62%),
		var(--or-bg);
	color: var(--or-text);
	font-family: var(--or-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

.or-wrap {
	width: 100%;
	max-width: var(--or-wrap);
	margin: 0 auto;
	padding: 0 24px;
}

/* Старый слой свечений. Оставлен пустым намеренно: если он где-то
   остался в разметке, он не должен рисоваться поверх текста. */
.or-sky { display: none; }

.or-stars {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.55;
}

.or-main { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Шапка (по макету: высота бара 64px, снизу линия 1px)
   -------------------------------------------------------------------------- */

.or-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: 64px;
	background: linear-gradient(180deg, var(--or-header), var(--or-header-2));
	border-bottom: 1px solid var(--or-line-strong);
	backdrop-filter: blur(10px);
}

.or-header .or-wrap {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
}

.or-brand {
	display: flex;
	align-items: center;
	gap: 10px;          /* измеренный зазор между эмблемой и надписью */
	text-decoration: none;
	color: var(--or-text);
	flex: 0 0 auto;
}

.or-brand__mark {
	width: 35px;        /* эмблема в макете 35x35 */
	height: 35px;
	display: block;
	flex: 0 0 auto;
}

.or-brand__name {
	font-family: 'Ruslan Display', var(--or-font);   /* выбранный шрифт логотипа */
	font-size: 25px;    /* не 22: у вязи мельче прописная (13 px против 15 при 22 px),
	                       поэтому 25 px дают ту же высоту букв, что были — иначе слово
	                       стало бы визуально мельче прежнего */
	font-weight: 400;   /* у Руслана одно начертание: 600 синтезировал бы жирноту */
	letter-spacing: 0.2px;
	line-height: 1;
	/* Оптическая поправка: флекс выравнивает по рамке блока, а буквы сидят
	   выше базовой линии, поэтому середина прописных оказывалась на 3 px выше
	   центра глаза в эмблеме. Сдвигаем слово вниз ровно на эту разницу
	   (transform, а не margin: высота шапки не меняется). */
	transform: translateY(3px);
}

.or-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

.or-nav a {
	color: var(--or-muted);
	text-decoration: none;
	font-size: 15px;
	padding: 6px 0;
	position: relative;
	white-space: nowrap;   /* иначе «Лунный календарь» ломается на две строки */
	transition: color var(--or-motion) var(--or-ease);
}

.or-nav a:hover { color: var(--or-text); }

.or-nav .is-active a { color: var(--or-text); }

/* Активный пункт подчёркнут снизу — как в макете. Подчёркивание идёт
   под словом, а не по нижней границе шапки: отступ в 20 px уводил его
   на саму линию и читался как случайная полоса. */
.or-nav .is-active a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	height: 2px;
	background: var(--or-accent-2);
	border-radius: 2px;
}

.or-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.or-search {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	color: var(--or-text-strong);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: border-color var(--or-motion) var(--or-ease), background var(--or-motion) var(--or-ease);
}

.or-search:hover {
	border-color: var(--or-line-soft);
	background: rgba(51, 65, 92, 0.18);
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.or-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border-radius: var(--or-pill);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: transform var(--or-motion) var(--or-ease),
	            box-shadow var(--or-motion) var(--or-ease),
	            border-color var(--or-motion) var(--or-ease),
	            background var(--or-motion) var(--or-ease);
}

.or-btn--ghost {
	background: rgba(10, 20, 40, 0.5);
	border-color: var(--or-line-soft);
	color: var(--or-text-strong);
}

.or-btn--ghost:hover {
	border-color: var(--or-accent-2);
	background: rgba(92, 93, 245, 0.10);
}

/* Цвет текста кнопок при наведении.
   В старой теме есть глобальное `a:hover { color: var(--copper-hi) }`
   (style.css:82). Его вес — элемент с псевдоклассом (0,1,1), а у кнопок
   был только класс (0,1,0), и своего цвета на наведении у них не было
   вовсе. Поэтому текст ВСЕХ пяти кнопок главной на наведении становился
   светло-оранжевым oklch(0.74 0.14 45): на сине-фиолетовом градиенте
   контраст падал до 1,6:1. Замерено на живой странице через
   CSS.forcePseudoState. Здесь вес (0,2,1) — правило старой темы больше
   не дотягивается. */
a.or-btn--ghost:hover {
	color: var(--or-text-strong);
}

a.or-btn--primary:hover {
	/* Кнопка на наведении светлеет, а текст темнеет. Так требует норма:
	   тёмный текст на исходном градиенте давал 3,84:1 на тёмном его крае
	   при пороге 4,5. После осветления — 5,09:1 и 7,34:1. */
	color: #101638;
	background: linear-gradient(90deg, #7b7cf8 0%, #a99cf5 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(92, 93, 245, 0.45);
}

.or-btn--primary {
	position: relative;      /* без этого блик ниже не привязался бы к кнопке */
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(90deg, var(--or-accent) 0%, var(--or-accent-2) 100%);
	color: #fff;
	box-shadow: 0 6px 22px rgba(92, 93, 245, 0.32);
}

.or-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(92, 93, 245, 0.45);
}

/* Блик, проходящий по кнопке при наведении */
.or-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 45%;
	left: -60%;
	background: linear-gradient(90deg, transparent, rgba(197, 189, 252, 0.5), transparent);
	transform: skewX(-18deg);
	transition: left 0.7s var(--or-ease);
	pointer-events: none;
	z-index: -1;
}

.or-btn--primary:hover::after { left: 115%; }

.or-btn--play { padding-left: 8px; }

.or-btn__round {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--or-line-soft);
	display: grid;
	place-items: center;
	margin-right: 4px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Мелкие элементы
   -------------------------------------------------------------------------- */

.or-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	padding: 0 14px;
	border-radius: var(--or-pill);
	border: 1px solid var(--or-line-soft);
	background: rgba(8, 20, 40, 0.55);
	color: var(--or-muted-2);
	font-size: 13px;
}

.or-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4fd08a;
	box-shadow: 0 0 8px #4fd08a;
	flex: 0 0 auto;
}

.or-tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: var(--or-pill);
	background: var(--or-tag);
	color: var(--or-muted-2);
	font-size: 12.5px;
	white-space: nowrap;
}

.or-kicker {
	color: var(--or-muted-2);
	font-size: 12.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.or-kicker::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--or-accent-2);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Появление блоков при прокрутке.
   --------------------------------------------------------------------------
   Прячем блоки ТОЛЬКО под меткой .js, которую ставит скрипт в <head>.
   Без неё — то есть когда JavaScript не загрузился или выключен —
   содержимое остаётся видимым. Обратный порядок (прятать всегда, а
   показывать скриптом) даёт пустую страницу вместо главной. */

.js .or-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--or-ease), transform 0.7s var(--or-ease);
	will-change: opacity, transform;
}

.js .or-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Шапка главной
   -------------------------------------------------------------------------- */

.or-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
}

.or-burger {
	display: none;
	width: 40px;
	height: 34px;
	margin-left: auto;
	border: 1px solid var(--or-line-soft);
	border-radius: var(--or-radius-sm);
	background: rgba(8, 20, 40, 0.5);
	color: var(--or-text);
	cursor: pointer;
	position: relative;
}

.or-burger span[aria-hidden] {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 1.6px;
	margin: -0.8px 0 0 -8px;
	background: currentColor;
	box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.or-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.or-nav { position: relative; }

.or-nav__more { position: relative; }

/* Расстояние от логотипа до «Главной» должно совпадать с расстоянием между
   пунктами меню (26 px). Контейнер шапки задаёт свой gap в 10 px, поэтому
   недостающие 16 px добавляем самому меню — и только на десктопе: на телефоне
   меню становится выпадающей панелью во всю ширину, и сдвиг её перекосил бы. */
@media (min-width: 1081px) {
	.or-header__inner .or-nav { margin-left: 16px; }
}

/* Селектор с тегом ul намеренно: у правила `.or-nav ul` специфичность выше,
   чем у одного класса, и его `padding: 0` обнулял отступы списка — прошлая
   правка отступов из-за этого не была видна. */
.or-nav ul.or-nav__sub {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 232px;
	/* Просьба заказчика: пункты плотнее, а над первым и под последним — просторнее. */
	padding: 18px 8px;
	margin: 0;
	list-style: none;
	background: #061020;
	border: 1px solid var(--or-line-strong);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--or-motion) var(--or-ease), transform var(--or-motion) var(--or-ease), visibility var(--or-motion);
}

.or-nav__more:hover .or-nav__sub,
.or-nav__more:focus-within .or-nav__sub,
.or-nav__more.is-open .or-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.or-nav ul.or-nav__sub a {
	display: block;
	padding: 4px 12px;    /* между строками 8 px вместо 12 */
	border-radius: 8px;
	font-size: 14px;
}

.or-nav__sub a:hover { background: rgba(92, 93, 245, 0.12); }

/* Поиск: <details>, поэтому раскрывается и без JavaScript */
.or-search { position: relative; }

.or-search > summary {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--or-text-strong);
	cursor: pointer;
	list-style: none;
	transition: border-color var(--or-motion) var(--or-ease), background var(--or-motion) var(--or-ease);
}

.or-search > summary::-webkit-details-marker { display: none; }

.or-search > summary:hover,
.or-search[open] > summary {
	background: rgba(51, 65, 92, 0.22);
}

.or-search__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 300px;
	padding: 12px;
	background: #061020;
	border: 1px solid var(--or-line-strong);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
	z-index: 60;
}

.or-search__panel input[type="search"],
.or-search__panel input[type="text"] {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	background: #030c18;
	border: 1px solid var(--or-line-soft);
	border-radius: 9px;
	color: var(--or-text);
	font-family: inherit;
	font-size: 14.5px;
}

.or-search__panel input:focus {
	outline: 2px solid var(--or-accent-2);
	outline-offset: 1px;
}

.or-btn--lg {
	height: 46px;
	padding: 0 24px;
	font-size: 15.5px;
}

/* --------------------------------------------------------------------------
   Верхний блок
   -------------------------------------------------------------------------- */

.or-hero {
	position: relative;
	isolation: isolate;
	/* 700 px, а не 620: при 664 срезалось верхние 9% картинки, а голова
	   начинается на 8,8% — её резало по шапке. Замерено. */
	min-height: 700px;
	display: flex;
	align-items: center;
	padding: 72px 0 84px;
	overflow: hidden;
}

.or-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.or-hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* По вертикали 22%, а не 35% и не center: картинка выше блока, и запас
	   над макушкой получался всего 7 px при ширине 1920. Замерено:
	   при 35% срезается 133 px сверху, макушка начинается на 140 px.
	   По горизонтали 62% — так лицо уходит вправо, подальше от текста. */
	object-position: 62% 22%;
	will-change: transform;
}

/* Затемнение слева: без него светлый текст не читается на туманности.
   Градиент, а не ровная заливка — картинка должна просвечивать.
   Границы подобраны замером по трём вариантам: под полосой заголовка
   нужно было увести фон ниже 40, иначе белый текст давал 1.9:1.
   При этих границах фон под текстом 8 (p50) и 17 (p90), контраст
   белого 11.8:1 в типичном месте и 6.2:1 в худшем. */
.or-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(1, 8, 23, 0.97) 0%, rgba(1, 8, 23, 0.91) 40%, rgba(1, 8, 23, 0.48) 62%, rgba(1, 8, 23, 0.12) 82%, rgba(1, 8, 23, 0.28) 100%),
		linear-gradient(180deg, rgba(1, 8, 23, 0.80) 0%, transparent 20%, transparent 68%, var(--or-bg) 100%);
}

/* Второй слой картинки для параллакса. Пока скрипт не расставил маску,
   слой спрятан: без маски это была бы вторая копия картинки поверх первой,
   то есть просто более светлый кадр. Без скрипта остаётся нижний слой —
   он целый, страница ничего не теряет. */
.or-hero__figure {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
}

.or-hero__figure.is-ready { opacity: 1; }

/* Маска — на самом движущемся слое, а не на обёртке. Обёртка стоит на
   месте, и маска на ней оставалась бы на месте, пока картинка уезжает
   из-под неё: овал показывал бы уже не фигуру, а то, что в него въехало.
   На слое маска едет вместе с картинкой и всегда закрывает одно и то же. */
.or-hero__figure.is-ready .or-hero__photo--near {
	-webkit-mask-image: radial-gradient(ellipse var(--or-fig-rx) var(--or-fig-ry) at var(--or-fig-x) var(--or-fig-y), #000 0%, #000 82%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(ellipse var(--or-fig-rx) var(--or-fig-ry) at var(--or-fig-x) var(--or-fig-y), #000 0%, #000 82%, rgba(0, 0, 0, 0) 100%);
}

.or-hero__stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* Выше затемнения (::after). Иначе слева, где затемнение 0,91–0,97,
	   звёзды гасятся вместе с картинкой и их не видно вовсе. */
	z-index: 1;
}

/* Кольцо зодиака и его метки убраны вместе с разметкой: оно дублировало
   кольцо, уже нарисованное на самой картинке. Стили .or-hero__ring,
   .or-ring__* и .or-tick намеренно удалены целиком, а не оставлены
   мёртвыми — иначе через месяц их примут за рабочие. */

.or-hero__inner {
	/* Текст — выше холста. Свет внутри шара рисуется поверх картинки, и
	   если он окажется поверх букв, фон под заголовком поедет вверх;
	   под буквами он не виден вовсе, потому что буквы плотные.
	   position нужен именно относительный: у статичного элемента
	   z-index не работает и правило бы молча ничего не сделало. */
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
}

.or-hero__copy {
	max-width: 620px;
}

/* Селектор с двумя классами — вынужденно: выше по каскаду сидит вложенное
   правило `& h1 { font-size: clamp(2.2rem, 5vw, 3.8rem) }` (3.8rem = 60.8px),
   и по специфичности оно перебивало кегль заголовка героя. */
.or-hero .or-hero__title {
	margin: 18px 0 0;
	/* Было clamp(38px, 5.4vw, 62px). Заголовок стал длиннее — «с Оракулом
	   (ИИ-помощником)» — и при 62px не помещался в колонку: браузер переносил
	   его сам, четырьмя рваными строками, а это меняло высоту героя. */
	font-size: clamp(30px, 4.1vw, 48px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--or-text-strong);
}

/* Селектор с двумя классами — вынужденно: правило `p{ margin:0 0 1.2em }`
   из style.css оказалось вложенным в незакрытый блок `:root{` (строка 81),
   отчего его специфичность стала выше класса абзаца, и заданные здесь
   отступы не применялись — абзац прилипал к заголовку (зазор 1 px).
   Числа подобраны замером на живой странице:
   — 32px сверху: между последней строкой H1 и первой строкой этого абзаца
     столько же воздуха, сколько между строкой «...и то, что ты уже записал
     раньше.» и кнопками, — там 33px;
   — 18px снизу: от последней строки абзаца до линии-разделителя заметки
     ровно столько же, сколько от линии до текста заметки (22px и там и там,
     потому что до текста заметки ещё 4px отступов строки). */
.or-hero .or-hero__lede {
	margin: 32px 0 18px;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.55;
	color: #c8d2e6;
	/* 460, а не 520: на 19 px это обычный текст с нормой 4,5:1, а правее
	   x≈600 в кадре уже начинаются карты Таро с белыми блёстками. При 520
	   фон под строкой доходил до 47 и контраст падал до 4,15:1. Замерено
	   по максимуму, а не по процентилю — процентиль прятал эти блёстки. */
	max-width: 460px;
}

.or-hero__note {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--or-line);
	font-size: 15px;
	line-height: 1.6;
	/* Светлее общего --or-muted (8e9ab1): на картинке в худшем месте
	   фона этот текст давал 4,0:1 при норме 4,5. Замерено. */
	color: #b0bcd2;
	/* 460, а не 500 — по той же причине, что у подзаголовка. */
	max-width: 460px;
}

.or-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
}

.or-hero__sky {
	margin: 26px 0 0;
	font-size: 13px;
	color: var(--or-muted-2);
}

/* Стеклянная карточка из правого нижнего угла макета */
.or-glass {
	position: relative;
	flex: 0 0 auto;
	width: 214px;
	padding: 18px 20px 16px;
	border-radius: var(--or-radius);
	border: 1px solid rgba(143, 119, 238, 0.30);
	background: linear-gradient(160deg, rgba(15, 26, 56, 0.72), rgba(6, 14, 32, 0.62));
	backdrop-filter: blur(9px);
	color: var(--or-text);
	text-decoration: none;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
	transition: transform var(--or-motion) var(--or-ease), border-color var(--or-motion) var(--or-ease);
}

.or-glass:hover {
	transform: translateY(-3px);
	border-color: rgba(143, 119, 238, 0.6);
}

.or-glass__label {
	display: block;
	font-size: 12.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--or-muted-2);
}

.or-glass__value {
	display: block;
	margin-top: 4px;
	font-size: 21px;
	font-weight: 600;
}

.or-glass__arrow {
	position: absolute;
	top: 16px;
	right: 16px;
	color: var(--or-accent-3);
}

/* --------------------------------------------------------------------------
   Практики: заголовок блока и сетка карточек 3x2
   -------------------------------------------------------------------------- */

/* Верхний отступ уменьшен: раньше практики шли сразу после героя, теперь
   выше них стоит блок карты дня, и 86px давали слишком большой промежуток. */
.or-practices {
	padding: 56px 0 30px;
}

/* Карта дня на главной: живое гадание сразу после «Шести практик».
   Отдельная секция со своим заголовком — как у остальных блоков главной. */
.or-day {
	/* Снизу меньше: следом идут «Шесть практик» со своим верхним отступом,
	   и в сумме получалось слишком много воздуха. */
	padding: 40px 0 30px;
}

.or-day .or-section-head {
	margin-bottom: 26px;
}

/* Ширина — как у трёх плашек «Шести практик»: плашка 372px, зазор 18px,
   три в ряд занимают всю полосу (1152px). Расклад и подводка выровнены
   по тем же краям, что и карточки. */
.or-day .or-section-head > div {
	flex: 1 1 auto;
	max-width: none;
}

.or-day .or-section-head__sub {
	max-width: none;
}

.or-day .gadanie {
	max-width: none;
}

/* Виджет несёт свою подсказку («Одна карта на сегодня. Смотрите на неё как
   на фон дня…»). На главной её роль играет подводка под заголовком, поэтому
   внутри блока подсказка только дублировала бы текст. */
.or-day .gadanie-prompt {
	display: none;
}

.or-section-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 34px;
}

.or-section-head h2 {
	margin: 0;
	font-size: clamp(27px, 3vw, 38px);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--or-text-strong);
}

.or-section-head__sub {
	margin: 12px 0 0;
	font-size: 16px;
	color: var(--or-muted);
	max-width: 44ch;
}

.or-section-head__aside {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--or-muted-2);
	max-width: 30ch;
	flex: 0 0 auto;
}

.or-spark {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(197, 189, 252, 0.9), rgba(92, 93, 245, 0.25) 45%, transparent 70%);
	box-shadow: 0 0 14px rgba(143, 119, 238, 0.55);
}

.or-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--or-gap);
}

.or-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* height: 100% обязателен: карточка — элемент сетки, и сетка растягивает её
	   уже после раскладки флекса. Без определённой высоты свободное место
	   оставалось бы под картинкой чёрной полосой, а не уходило над ней. */
	height: 100%;
	min-height: 322px;
	padding: 24px 24px 20px;
	border-radius: var(--or-radius);
	border: 1px solid var(--or-line);
	background: linear-gradient(180deg, rgba(3, 16, 31, 0.92), rgba(2, 10, 22, 0.92));
	text-decoration: none;
	color: var(--or-text);
	overflow: hidden;
}

/* Метка раздела лежит поверх картинки у нижнего края карточки. Стрелку
   убрали: она дублировала ссылку и отнимала у картинки место. */
.or-card__foot {
	position: absolute;
	z-index: 2;
	left: 24px;
	bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.or-card:hover .or-card__img { transform: scale(1.03); }

/* Селектор с .or-cards, а не просто .or-card: у правила появления
   `.js .or-reveal.is-in` та же специфичность, и его `transform: none`
   перебивал подъём карточки — карточка не поднималась вообще. */
/* Переход карточки задаётся здесь отдельным правилом, а не внутри .or-card:
   у правила появления `.js .or-reveal` специфичность выше, и его
   `transition: opacity .7s, transform .7s` перебивало наш переход — подъём
   при наведении шёл все 0.7 секунды и читался как «очень медленно».
   Здесь же важно, что подъём сделан свойством `translate`, а не `transform`:
   transform занят появлением карточки при прокрутке, и они бы дрались. */
.or-cards a.or-card {
	transition: translate 0.16s var(--or-ease),
	            border-color 0.16s var(--or-ease),
	            box-shadow 0.16s var(--or-ease),
	            opacity 0.7s var(--or-ease),
	            transform 0.7s var(--or-ease);
}

.or-cards .or-card:hover {
	translate: 0 -4px;
	border-color: rgba(143, 119, 238, 0.42);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

.or-card__num {
	font-size: 13px;
	letter-spacing: 1.4px;
	color: var(--or-accent-3);
	opacity: 0.85;
}

.or-card__title {
	margin: 10px 0 0;
	font-size: 21px;
	font-weight: 600;
	color: var(--or-text-strong);
}

.or-card__desc {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--or-muted);
}

/* Иллюстрация раздела: полоса во всю ширину карточки и до самого её низа,
   чтобы под картинкой не оставалось тёмной полосы. Верхний край растворяется
   в фоне карточки маской прозрачности — фон карточки сам градиент, и любая
   подложка попала бы в цвет. */
.or-card__art {
	/* Тянется от текста до самого низа карточки: раньше высота была задана
	   пропорцией, и у карточек с коротким описанием между текстом и картинкой
	   оставалась пустая полоса до 43 px. Теперь пустоты нет — картинка
	   забирает всё место, а её высота у соседних карточек одна и та же снизу. */
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 150px;
	margin: 12px -24px -20px;   /* 12 px от текста, во всю ширину и до низа */
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
	        mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}

.or-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.22s var(--or-ease);
}

/* --------------------------------------------------------------------------
   Нижний баннер: «Больше, чем гадание»
   -------------------------------------------------------------------------- */

/* Полоса-баннер (2026-09-21). Раньше она собиралась из свечений и мелкой
   сетки, потому что фотографии не было; теперь есть присланная картинка,
   и она идёт фоном верхней части на всю ширину. Заголовок стоит на её
   тёмной левой половине, четыре пункта — ниже, уже на фоне страницы. */
.or-band {
	margin-top: 60px;
	padding: 0;
	background: var(--or-banner);
	border-top: 1px solid var(--or-line);
	border-bottom: 1px solid var(--or-line);
}

/* Верх полосы: картинка и заголовок на ней. Высота задана, чтобы кадр
   не превращался в узкую ленту и чтобы четыре пункта начинались сразу
   под кнопкой, а не через пол-экрана пустой картинки. */
.or-band__top {
	position: relative;
	display: block;
	/* Картинка идёт фоном всей полосы, а текст лежит прямо на ней.
	   Затемнение — двумя градиентами ПОВЕРХ картинки (в background-image
	   они идут первыми, поэтому рисуются выше неё): слева, где стоит
	   заголовок, и снизу, где стоят четыре пункта. Между ними картинка
	   остаётся нетронутой — солнце и фигура видны как есть. */
	background-color: var(--or-banner);
	background-image:
		linear-gradient(90deg,
			rgba(1, 8, 23, 0.92) 0%,
			rgba(1, 8, 23, 0.86) 30%,
			rgba(1, 8, 23, 0.52) 52%,
			rgba(1, 8, 23, 0.22) 74%,
			rgba(1, 8, 23, 0.48) 100%),
		linear-gradient(180deg,
			rgba(1, 8, 23, 0.10) 0%,
			rgba(1, 8, 23, 0.06) 34%,
			rgba(1, 8, 23, 0.30) 52%,
			rgba(1, 8, 23, 0.78) 70%,
			rgba(1, 8, 23, 0.94) 100%),
		url(../img/banner-10-1280.jpg);
	background-image:
		linear-gradient(90deg,
			rgba(1, 8, 23, 0.92) 0%,
			rgba(1, 8, 23, 0.86) 30%,
			rgba(1, 8, 23, 0.52) 52%,
			rgba(1, 8, 23, 0.22) 74%,
			rgba(1, 8, 23, 0.48) 100%),
		linear-gradient(180deg,
			rgba(1, 8, 23, 0.10) 0%,
			rgba(1, 8, 23, 0.06) 34%,
			rgba(1, 8, 23, 0.30) 52%,
			rgba(1, 8, 23, 0.78) 70%,
			rgba(1, 8, 23, 0.94) 100%),
		image-set(url(../img/banner-10-1280.webp) type("image/webp"),
		          url(../img/banner-10-1280.jpg) type("image/jpeg"));
	background-size: cover, cover, cover;
	background-position: 0 0, 0 0, 62% 38%;
	background-repeat: no-repeat;
}

/* Мерцающее небо полосы. Холст лежит выше фоновой картинки, но ниже
   текста — поэтому копии и строкам задано положение и слой. Без скрипта
   холст пуст и не виден: небо остаётся статичным. */
.or-band__stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.or-band__copy,
.or-band__row {
	position: relative;
	z-index: 1;
}

/* Четыре пункта. Отступ сверху маленький — заказчик просил держать их
   вплотную к кнопке, а нижний отступ полосы уменьшен. */
.or-band__row {
	padding-top: 36px;       /* отступ от кнопки до пунктов: просил больше */
	padding-bottom: 26px;
}

.or-band__copy {
	padding-top: 46px;
	padding-bottom: 0;
}

/* Текст держим в левой, тёмной части картинки: за её светлую половину
   заголовок заходить не должен, там он начнёт терять контраст. */
.or-band__copy .or-kicker,
.or-band__copy h2,
.or-band__copy .or-band__lede {
	max-width: 520px;
}


.or-band h2 {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--or-text-strong);
}

.or-band__lede {
	margin: 14px 0 20px;
	font-size: 16px;
	line-height: 1.5;        /* строки плотнее: просил заказчик */
	color: var(--or-muted);
}

.or-band__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.or-band__cols li {
	display: flex;
	flex-direction: column;
	gap: 0;                  /* оба зазора задаются ниже по отдельности */
	line-height: 1.32;       /* строки плотнее: просил заказчик */
	padding: 0 20px;
	border-left: 1px solid var(--or-line);
	font-size: 13.5px;
	color: var(--or-muted);
}

.or-band__cols li:first-child { border-left: 0; padding-left: 0; }

.or-band__cols b {
	font-size: 14.5px;
	line-height: 1.28;
	font-weight: 600;
	color: var(--or-text);
	/* Запас под вторую строку убран: заказчик просил, чтобы оба зазора —
	   от иконки до заголовка пункта и от заголовка до его подписи — были
	   одинаковыми и маленькими. С запасом между строками зияло 28 px у тех
	   пунктов, чей заголовок укладывался в одну строку. Плата: подписи
	   пунктов больше не начинаются на одной высоте (у «Связи между
	   практиками» заголовок занимает две строки). */
	margin: 5px 0 3px;    /* оба зазора — от иконки и до подписи — одинаковые */
}

.or-band__icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(143, 119, 238, 0.42);
	display: grid;
	place-items: center;
	color: var(--or-accent-3);
	background: linear-gradient(160deg, rgba(92, 93, 245, 0.24), rgba(92, 93, 245, 0.06));
	box-shadow: 0 0 18px rgba(92, 93, 245, 0.22);
}

/* --------------------------------------------------------------------------
   Текстовый блок и подвал главной
   -------------------------------------------------------------------------- */

.or-entry {
	padding: 76px 0 84px;
}

.or-entry__inner {
	max-width: 780px;
}

.or-entry h2 {
	margin: 0 0 18px;
	font-size: clamp(25px, 2.8vw, 34px);
	font-weight: 600;
	color: var(--or-text-strong);
}

.or-entry h3 {
	margin: 34px 0 12px;
	font-size: 20px;
	font-weight: 600;
	color: var(--or-text);
}

.or-entry p {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.72;
	color: var(--or-muted);
}

.or-entry__lede {
	font-size: 20px !important;
	color: var(--or-text) !important;
}

.or-foot {
	padding: 58px 0 34px;
	background: var(--or-footer);
	border-top: 1px solid var(--or-line);
}

.or-foot__top {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--or-line);
}

.or-brand__mark--foot { width: 28px; height: 28px; }

.or-brand__name--foot { font-size: 23px; }   /* та же поправка на вязь */

.or-foot__tagline {
	margin: 0;
	font-size: 14px;
	color: var(--or-muted);
}

.or-foot__sections { padding: 28px 0; }

.or-foot__sections h2 {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--or-muted-2);
}

.or-foot__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 14px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.or-foot__grid a {
	display: inline-block;
	font-size: 14.5px;
	color: var(--or-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--or-motion) var(--or-ease);
}

.or-foot__grid a:hover { border-bottom-color: var(--or-accent-2); }

.or-foot__note {
	display: block;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--or-muted-2);
	margin-top: 2px;
}

.or-foot__bottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 26px;
	padding-top: 22px;
	border-top: 1px solid var(--or-line);
	font-size: 13px;
	color: var(--or-muted-2);
}

.or-foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.or-foot__links a {
	color: var(--or-muted);
	text-decoration: none;
}

.or-foot__links a:hover { color: var(--or-text); }

/* --------------------------------------------------------------------------
   Экран пошире и поуже
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
	/* Восемь пунктов меню перестают помещаться раньше, чем кажется:
	   на 1024 они растягивали страницу на 168 px и появлялась
	   горизонтальная прокрутка. Замерено, не на глаз. */
	.or-nav ul { gap: 18px; }
	.or-nav a { font-size: 14px; }
	.or-header__actions { gap: 8px; }
	.or-btn--ghost { padding: 0 14px; }
}

@media (max-width: 1080px) {
	.or-cards { grid-template-columns: repeat(2, 1fr); }
	.or-band__top { background-position: 68% 34%; }
	.or-band__copy { padding-top: 40px; padding-bottom: 10px; }
	.or-band__row { padding-top: 22px; padding-bottom: 40px; }
	.or-band__copy .or-band__lede { max-width: 460px; }
}

@media (max-width: 900px) {
	/* Текст ложится поверх картинки, а картинка и шар уходят вправо.
	   Раньше кадр шёл полосой сверху (отступ 560 px), и заголовок с текстом
	   оказывались за первым экраном: замерено — H1 начинался на 690 px при
	   высоте окна 844, то есть на телефоне до него надо было прокручивать.
	   Теперь копия стоит вверху, девушка — справа сверху, шар под ней.

	   Кадр 16:9 в узкой высокой колонке обрезался бы по 29% ширины, поэтому
	   картинке задана высота 62%: она занимает верх колонки, а ниже остаётся
	   место шару. Затемнение под буквами усилено — иначе белый текст на
	   светлых местах кадра не читается. */
	.or-hero { min-height: 0; padding: 104px 0 56px; }
	.or-hero__media { inset: 0 0 0 auto; width: 80%; }
	.or-hero__media img { height: 62%; object-position: 74% 20%; }
	/* Замер под буквами: в среднем фон тёмный (18:1), но свечение лица давало
	   пятно с контрастом 1.58:1. Поэтому затемнение идёт двумя градиентами и
	   именно в полосе текста — наверху, где копии нет, кадр остаётся светлым. */
	.or-hero__media::after {
		background:
			linear-gradient(90deg,
				rgba(1, 8, 23, 0.97) 0%,
				rgba(1, 8, 23, 0.94) 28%,
				rgba(1, 8, 23, 0.86) 52%,
				rgba(1, 8, 23, 0.66) 78%,
				rgba(1, 8, 23, 0.50) 100%),
			linear-gradient(180deg,
				rgba(1, 8, 23, 0.30) 0%,
				rgba(1, 8, 23, 0.44) 10%,
				rgba(1, 8, 23, 0.52) 40%,
				rgba(1, 8, 23, 0.50) 72%,
				rgba(1, 8, 23, 0.60) 88%,
				var(--or-bg) 100%);
	}
	/* Шар с знаками зодиака — справа, под девушкой: у холста та же колонка,
	   что у картинки, поэтому шар (56,5% ширины холста) встаёт на 65%
	   ширины экрана. */
	.or-hero__stars { inset: 0 0 0 auto; right: 0; left: auto; width: 100%; }
	/* Холст лежит ВЫШЕ затемнения — так он не гаснет вместе с картинкой.
	   Значит, и свет шара затемнение не ловит: замер показал под буквами
	   пятно 1.6:1. На телефоне холст гасим сам, целиком. */
	.or-hero__stars { filter: brightness(0.5); }
	.or-hero__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
	.or-hero__inner .or-glass { align-self: flex-start; }
	/* Кольца здесь больше нет. Раньше оно уходило за правый край
	   осознанно: оно украшение, а место на телефоне нужно тексту. */
	.or-section-head { flex-direction: column; gap: 16px; }
	.or-section-head__aside { margin-top: 0; }
}

@media (max-width: 1080px) {
	/* Меню уезжает под кнопку. Порог поднят с 820 до 1080 замером:
	   до 1080 восемь пунктов с подменю не помещаются в строку, и
	   страница получает горизонтальную прокрутку. */
	.or-burger { display: block; }

	.or-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: 12px 24px 18px;
		background: #05101f;
		border-bottom: 1px solid var(--or-line-strong);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
		/* Пунктов на телефоне восемнадцать. Ограничение считаем от dvh, а не
		   от vh: на телефоне vh — это высота экрана с убранной адресной
		   строкой, то есть больше видимой области, и низ панели прятался под
		   интерфейсом браузера. dvh равен именно видимой части; vh оставлен
		   строкой выше как запасной вариант для старых браузеров. */
		max-height: calc(100vh - 63px);
		max-height: calc(100dvh - 63px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.or-nav.is-open { display: block; }

	.or-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }

	/* Подменю на телефоне — обычная строка под пунктом, а не плавающий блок.
	   Селектор намеренно длиннее сразу трёх правил: базового
	   `.or-nav ul.or-nav__sub`, а также `.or-nav__more.is-open .or-nav__sub`
	   (и его :hover/:focus-within). У них специфичность выше, и из-за этого
	   подменю уезжало влево на половину своей ширины: правило is-open несёт
	   десктопный translateX(-50%), а мой `transform: none` ему проигрывал. */
	.or-nav .or-nav__more .or-nav__sub,
	.or-nav .or-nav__more.is-open .or-nav__sub,
	.or-nav .or-nav__more:hover .or-nav__sub,
	.or-nav .or-nav__more:focus-within .or-nav__sub {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 12px;
		background: none;
		border: 0;
		box-shadow: none;
	}

	/* Строки компактнее, чем на десктопе: восемнадцать пунктов должны
	   помещаться на экран целиком. Просьба владельца: у главных пунктов
	   воздух поджать, у второстепенных — прибавить, они читались слишком
	   плотной простыней. Отсюда 6 px сверху и снизу у главного пункта
	   и 5 px у подпункта. */
	.or-nav a { display: block; padding: 6px 0; font-size: 15px; }
	.or-nav ul.or-nav__sub a { padding: 5px 10px; font-size: 13.5px; }
	.or-nav .is-active a::after { display: none; }
	.or-nav__more-toggle { color: var(--or-text); }
}

/* На низких экранах (старые и компактные телефоны) поджимаем строки меню:
   иначе восемнадцать пунктов не помещаются и низ списка уходит под интерфейс
   браузера. Порог 720 px — ниже него прокрутка внутри панели остаётся
   запасным вариантом, но обычно не нужна. */
@media (max-width: 1080px) and (max-height: 720px) {
	.or-nav { padding: 8px 20px 10px; }
	.or-nav ul { gap: 1px; }
	.or-nav a { padding: 3px 0; }
	.or-nav ul.or-nav__sub a { padding: 3px 10px; }
}

@media (max-width: 680px) {
	.or-cards { grid-template-columns: 1fr; }
	.or-card { min-height: 0; }
	.or-band__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
	.or-band__cols li:nth-child(3) { border-left: 0; padding-left: 0; }
	.or-header__actions .or-btn--ghost { display: none; }
	.or-glass { width: 100%; max-width: 300px; }

	/* Панель поиска прижимается к краям экрана. Привязка к кнопке на
	   телефоне уводила её за левый край: замер показал −55 px. */
	.or-search__panel {
		position: fixed;
		top: 70px;
		left: 12px;
		right: 12px;
		width: auto;
	}
}

@media (max-width: 460px) {
	.or-brand__name { font-size: 19px; }
	.or-btn--lg { height: 44px; padding: 0 18px; font-size: 15px; }
	.or-band__cols { grid-template-columns: 1fr; }
	.or-band__cols li { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Доступность: уважаем системную настройку «меньше движения»
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.or-page *,
	.or-page *::before,
	.or-page *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.js .or-reveal { opacity: 1; transform: none; }
}

/* --- Половины зодиакального колеса по бокам блока «Как работает Оракул» ---
   Кольцо целиком, но его центр лежит ровно на кромке блока: за кромку уходит
   ровно половина, поэтому слева видна дуга «)», справа «(». Знаки едут вместе
   с колесом — это и есть колесо со знаками, как на первом экране. */
.or-entry { position: relative; overflow: hidden; }

.or-ring {
	position: absolute;
	top: 50%;
	width: 520px;
	height: 520px;
	margin-top: -260px;
	border-radius: 50%;
	border: 1px solid rgba(143, 119, 238, 0.22);
	box-shadow: inset 0 0 70px rgba(92, 93, 245, 0.12);
	pointer-events: none;
	z-index: 0;
	animation: or-ring-turn 120s linear infinite;
}

.or-ring--left  { left: -260px; }
.or-ring--right { right: -260px; animation-direction: reverse; }

.or-ring__sign {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	opacity: 0.62;
	transform: rotate(calc(var(--i) * 30deg)) translateY(-216px) rotate(calc(var(--i) * -30deg));
}

@keyframes or-ring-turn {
	to { transform: rotate(360deg); }
}

/* Блок текста должен лежать поверх колец. */
.or-entry__inner { position: relative; z-index: 1; }

@media (max-width: 1240px) {
	.or-ring { display: none; }   /* на узком экране кольца налезли бы на текст */
}

@media (prefers-reduced-motion: reduce) {
	.or-ring { animation: none; }
}

/* ==========================================================================
   ПРАВКИ ПО ЗАМЕЧАНИЯМ (2026-09-21, вечер)
   --------------------------------------------------------------------------
   1. Имя сайта в шапке — белым (было акцентом #8f77ee). Замер на шапке
      #091428: белым 18,4:1.
   2. Текст на фиолетовых кнопках. Было: белым по градиенту #5c5df5→#8f77ee —
      на тёмном крае 4,84:1, на светлом 3,48:1; тёмным #101638 — 3,63:1 и
      5,06:1. Ни белый, ни чёрный не проходят норму 4,5 по всему градиенту,
      поэтому градиент осветлён, а текст взят тёмный: 5,09:1 и 7,34:1,
      при наведении 6,54:1 и 9,35:1.
   3. Строка «Луна сейчас…» сливалась с кнопками: базовое правило `p` из
      style.css обнуляло ей верхний отступ (в home.css стояло 26 px, но
      класс проигрывал). Ставим отступ явно и вместе с тегом, чтобы он
      выигрывал у базового правила.
   ========================================================================== */

.or-brand__name { color: #fff; }

.or-btn--primary,
a.or-btn--primary {
	background: linear-gradient(90deg, #7b7cf8 0%, #a99cf5 100%);
	color: #101638;
	box-shadow: 0 6px 22px rgba(92, 93, 245, .34);
}

.or-btn--primary:hover,
a.or-btn--primary:hover {
	background: linear-gradient(90deg, #8f90fa 0%, #bcb1f8 100%);
	color: #0d1330;
	box-shadow: 0 10px 30px rgba(92, 93, 245, .45);
}

a.or-btn--primary .or-btn__round { border-color: rgba(16, 22, 56, .35); }

p.or-hero__sky { margin: 28px 0 0; }

/* ==========================================================================
   Шапка на средних экранах: чтобы не вылезала за край
   «Профиль» на 14px длиннее прежнего «Начать», и в двух диапазонах шапка
   выходила за край — появлялась горизонтальная прокрутка (на 1366px на 16px,
   на 1300px на 48px, на 1199px на 17px). Поджимаем отступы кнопок и — там,
   где всё равно не помещается, — расстояние между пунктами меню. Добавку
   перед «Главной» уменьшаем ровно настолько же, чтобы расстояние от логотипа
   осталось таким же, как между пунктами.
   ========================================================================== */

@media (min-width: 1081px) and (max-width: 1600px) {
	.or-header__actions .or-btn { padding: 0 14px; }
}

@media (min-width: 1281px) and (max-width: 1444px) {
	.or-nav ul { gap: 18px; }
	.or-header__inner .or-nav { margin-left: 8px; }
}

/* 1081–1280px: на этих ширинах шапка не помещалась даже с поджатыми отступами
   (на 1082px вылезала на 122px). Прячем дублирующую кнопку «Личный Оракул» —
   ровно так же, как это уже сделано для телефонов: остаётся «Профиль». */
@media (min-width: 1081px) and (max-width: 1280px) {
	.or-header__actions .or-btn--ghost { display: none; }
}