/* Сброс, типографика и общие примитивы. */

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

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

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-dark); }

h1, h2, h3, h4 {
	font-family: var(--f-head);
	font-weight: 500;
	line-height: 1.15;
	color: var(--c-text);
	margin: 0 0 12px;
}
h1 { font-size: clamp(28px, 4vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(19px, 2vw, 22px); }

p { margin: 0 0 16px; color: var(--c-text-body); }

/* Надзаголовок: моноширинный, разрядка — фирменный приём макета */
.eyebrow {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-dim);
}

.mono { font-family: var(--f-mono); }

.u-container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.u-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.u-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--c-dark);
	color: var(--c-text-on-dark);
	padding: 12px 20px;
}
.u-skip-link:focus { left: 0; }

/* Видимый фокус: в макете его нет, но без него клавиатурная навигация слепая */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* --- Кнопки --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--c-dark); color: var(--c-text-on-dark); }
.btn--primary:hover { background: #000; color: #fff; }

/* На тёмных поверхностях primary сливается с фоном (он сам --c-dark),
   а ghost теряет контур. Инверсия живёт здесь, рядом с кнопками: заводя
   новый тёмный блок, допишите его селектор сюда, а не правило в его файле. */
.cookie .btn--primary,
.cta-card .btn--primary,
.price-card--custom .btn--primary,
.site-footer .btn--primary {
	background: var(--c-text-on-dark);
	color: var(--c-dark);
	border-color: var(--c-text-on-dark);
}
.cookie .btn--primary:hover,
.cta-card .btn--primary:hover,
.price-card--custom .btn--primary:hover,
.site-footer .btn--primary:hover {
	background: #fff;
	color: #000;
	border-color: #fff;
}

.cookie .btn--ghost,
.cta-card .btn--ghost,
.price-card--custom .btn--ghost,
.site-footer .btn--ghost {
	color: var(--c-text-on-dark);
	border-color: rgba(242, 240, 236, 0.35);
}
.cookie .btn--ghost:hover,
.cta-card .btn--ghost:hover,
.price-card--custom .btn--ghost:hover,
.site-footer .btn--ghost:hover {
	color: var(--c-text-on-dark);
	border-color: var(--c-accent-light);
}

.btn--ghost {
	background: transparent;
	color: var(--c-text);
	border-color: var(--c-border-strong);
}
.btn--ghost:hover { border-color: var(--c-text); color: var(--c-text); }

.btn--accent { background: var(--c-accent); color: #fff; }
.btn--accent:hover { background: var(--c-accent-dark); color: #fff; }

.btn--block { width: 100%; }

/* --- Пилюля-метка (АКЦИЯ, НОВИНКА) --- */
.pill {
	display: inline-block;
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: #fff;
}

/* --- Хлебные крошки --- */
.breadcrumbs {
	font-family: var(--f-mono);
	font-size: 12px;
	text-transform: uppercase;
	color: var(--c-text-dim);
	margin-bottom: 14px;
}
.breadcrumbs a { color: var(--c-text-dim); }
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs__sep { margin: 0 6px; }

@media (max-width: 767px) {
	:root { --pad-x: var(--pad-x-sm); --gap: 20px; }
}