/* =========================================================================
   Animal Hospital Scripts — main.css
   Клиническая хоррор-эстетика: стерильный кафель + аварийный красный сигнал.
   ========================================================================= */

/* ------------------------------------------------------------------ Fonts */

/* Oswald 700 — заголовки (кириллица + латиница) */
@font-face {
	font-family: 'Oswald';
	src: url('../fonts/oswald-700-cyrillic.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Oswald';
	src: url('../fonts/oswald-700-cyrillic-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Oswald';
	src: url('../fonts/oswald-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	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: 'Oswald';
	src: url('../fonts/oswald-700-latin-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans (переменный 400–600) — основной текст (кириллица + латиница) */
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/plexsans-cyrillic.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/plexsans-cyrillic-ext.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/plexsans-latin.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	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: 'IBM Plex Sans';
	src: url('../fonts/plexsans-latin-ext.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Mono 400 — код */
@font-face {
	font-family: 'Space Mono';
	src: url('../fonts/spacemono-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	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: 'Space Mono';
	src: url('../fonts/spacemono-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- Tokens */

:root {
	--bg-base:          #0E1210;
	--bg-card:          #161C19;
	--bg-code:          #0A0D0B;
	--bg-elev:          #1B231F;
	--accent:           #DC2626;
	--accent-hover:     #EF4444;
	--accent-dim:       #7F1D1D;
	--accent-text:      #FCA5A5; /* светло-красный для текста на тёмно-красном фоне (WCAG AA) */
	--accent-clinical:  #A7F3D0;
	--accent-clinical-2:#34D399;
	--text-primary:     #ECFDF5;
	--text-secondary:   #B7C4BC;
	--text-muted:       #6B7280;
	--border:           #22302A;
	--border-strong:    #2E3E36;

	--font-display: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
	--font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-code:    'Space Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;

	--radius:    4px;
	--radius-sm: 2px;

	--container: 1080px;
	--pad: clamp(1rem, 4vw, 2rem);
	--section-gap: clamp(3rem, 8vw, 5.5rem);

	--alarm-glow: 0 0 0 1px var(--accent), 0 0 24px -6px rgba(220, 38, 38, 0.55);
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------- Reset */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

body {
	min-height: 100vh;
	background-color: var(--bg-base);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Кафельная сетка палаты — очень слабая текстура фона */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(167, 243, 208, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(167, 243, 208, 0.022) 1px, transparent 1px);
	background-size: 46px 46px;
}

/* Аварийное свечение сверху + виньетка */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(130% 55% at 50% -12%, rgba(220, 38, 38, 0.07), transparent 60%),
		radial-gradient(100% 100% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 55%);
}

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

a {
	color: var(--accent-clinical);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--accent-clinical-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

button {
	font-family: inherit;
	cursor: pointer;
}

ul,
ol {
	list-style: none;
	padding: 0;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--accent-clinical);
	outline-offset: 2px;
}

/* --------------------------------------------------------- Typography */

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0.01em;
	color: var(--text-primary);
}

p {
	color: var(--text-secondary);
}

strong {
	color: var(--text-primary);
	font-weight: 600;
}

.section-title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.section-lead {
	margin-top: 0.85rem;
	max-width: 60ch;
	color: var(--text-secondary);
}

/* ---------------------------------------------------------- Utilities */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--accent);
	color: #fff;
	padding: 0.6rem 1rem;
	font-weight: 600;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
	text-decoration: none;
}

.site-header__inner,
.site-footer__inner,
.hero__inner,
.scripts__inner,
.flagship__inner,
.howto__inner,
.faq-wrap__inner,
.page-wrap {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* ------------------------------------------------------------- Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(14, 18, 16, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}

.site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
	opacity: 0.7;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 4.25rem;
}

.nav-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-display);
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-primary);
}

.nav-logo:hover {
	text-decoration: none;
	color: var(--text-primary);
}

.nav-logo__mark {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--accent);
	color: #fff;
	border-radius: var(--radius-sm);
	font-size: 1.1rem;
	line-height: 1;
	box-shadow: 0 0 14px -3px rgba(220, 38, 38, 0.7);
	animation: ah-flicker 6s infinite steps(1);
}

.nav-logo__accent {
	color: var(--accent);
}

.nav {
	display: flex;
	align-items: center;
}

.nav-links {
	display: flex;
	gap: 1.6rem;
	align-items: center;
}

.nav-links a {
	color: var(--text-secondary);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.35rem 0;
	position: relative;
}

.nav-links a:hover {
	color: var(--text-primary);
	text-decoration: none;
}

.nav-links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 2px;
	background: var(--accent);
	transition: right 0.2s ease;
}

.nav-links a:hover::after {
	right: 0;
}

.nav-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 2.6rem;
	height: 2.6rem;
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	align-items: center;
	justify-content: center;
}

.nav-burger__bar {
	display: block;
	width: 1.15rem;
	height: 2px;
	background: var(--text-primary);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ------------------------------------------------------- Layout main */

.site-main {
	display: block;
}

.hero,
.flagship,
.scripts,
.howto,
.faq-wrap {
	padding-block: var(--section-gap);
}

.hero {
	padding-top: clamp(2.5rem, 6vw, 4rem);
	border-bottom: 1px solid var(--border);
	position: relative;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.hero__eyebrow {
	font-family: var(--font-code);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: var(--accent);
	margin-bottom: 1rem;
}

.hero__title {
	font-size: clamp(2.3rem, 6.5vw, 4.2rem);
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: 0.005em;
}

.hero__title-accent {
	color: var(--accent);
}

.hero__subtitle {
	margin-top: 1.25rem;
	font-size: clamp(1.05rem, 2.4vw, 1.2rem);
	max-width: 46ch;
	color: var(--text-secondary);
}

.hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	margin-top: 1.6rem;
}

.hero__fact {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hero__fact-check {
	color: var(--accent-clinical);
	font-weight: 700;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 2rem;
}

/* --------------------------------------------------- Hero monitor */

.monitor {
	background: var(--bg-code);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	padding: 1.25rem;
	font-family: var(--font-code);
	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), var(--shadow-card);
	position: relative;
	overflow: hidden;
}

.monitor::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(167, 243, 208, 0.035) 0,
		rgba(167, 243, 208, 0.035) 1px,
		transparent 1px,
		transparent 4px
	);
	mix-blend-mode: screen;
}

.monitor__head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: var(--text-muted);
	border-bottom: 1px dashed var(--border-strong);
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
}

.monitor__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
	animation: ah-pulse 1.8s infinite ease-in-out;
}

.monitor__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--text-secondary);
	padding: 0.4rem 0;
}

.monitor__label {
	color: var(--text-muted);
}

.monitor__bar {
	position: relative;
	flex: 1;
	max-width: 55%;
	height: 0.55rem;
	background: #10140f;
	border: 1px solid var(--border-strong);
	border-radius: 1px;
	overflow: hidden;
}

.monitor__bar-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--accent-clinical-2), var(--accent-clinical));
	box-shadow: 0 0 10px rgba(167, 243, 208, 0.5);
}

.monitor__value--ok {
	color: var(--accent-clinical);
}

.monitor__value--alarm {
	color: var(--accent);
	animation: ah-blink 2.4s infinite steps(1);
}

.monitor__ekg {
	margin-top: 0.85rem;
	border-top: 1px dashed var(--border-strong);
	padding-top: 0.75rem;
}

.monitor__ekg svg {
	width: 100%;
	height: 40px;
}

.monitor__ekg polyline {
	fill: none;
	stroke: var(--accent-clinical);
	stroke-width: 1.5;
	filter: drop-shadow(0 0 4px rgba(167, 243, 208, 0.6));
}

/* --------------------------------------------------- Page structures */

.page-wrap {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.page-head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.page-title {
	font-size: clamp(1.9rem, 5vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.page-lead {
	margin-top: 1rem;
	font-size: 1.1rem;
	color: var(--text-secondary);
}

.prose {
	max-width: 68ch;
	margin-block: clamp(2rem, 5vw, 3rem);
}

.prose h2 {
	font-size: clamp(1.4rem, 3.5vw, 1.9rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-top: 2rem;
	margin-bottom: 0.85rem;
}

.prose h3 {
	font-size: 1.2rem;
	margin-bottom: 0.4rem;
}

.prose p {
	margin-bottom: 1rem;
}

.page-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: 2rem;
	border-top: 1px solid var(--border);
}

/* Дата обновления (freshness) */
.page-updated,
.hero__updated {
	font-family: var(--font-code);
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	color: var(--text-muted);
}

.page-updated {
	margin-top: 0.75rem;
}

.hero__updated {
	margin-top: 1.25rem;
}

.hero__updated a {
	color: var(--accent-clinical);
}

/* Видео-блок (YouTube) */
.video {
	padding-block: var(--section-gap);
	border-top: 1px solid var(--border);
}

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

.video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-top: 1.5rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-code);
}

.video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Scripts section head */
.scripts__head {
	margin-bottom: 1.75rem;
}

.scripts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.25rem;
	margin-top: 1.5rem;
}

.scripts-grid__empty {
	margin-top: 2rem;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 0.9rem;
}

/* --------------------------------------------------- Steps (front) */

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-block: 1.75rem;
}

.step {
	display: flex;
	gap: 0.9rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.15rem;
}

.step__num,
.guide-step__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	background: var(--accent-dim);
	color: var(--accent-text);
	font-family: var(--font-display);
	font-size: 1.15rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--accent);
}

.step__title {
	font-size: 1.05rem;
	margin-bottom: 0.3rem;
}

.step__body p {
	font-size: 0.92rem;
}

/* Guide steps (how-to page) */
.guide-steps {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block: 2rem;
}

.guide-step {
	display: flex;
	gap: 1.1rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: 1.4rem;
}

.guide-step__title {
	font-size: 1.25rem;
	text-transform: none;
	margin-bottom: 0.4rem;
}

.guide-step__body p {
	color: var(--text-secondary);
}

/* Reasons list (how-to page) */
.reasons {
	counter-reset: reason;
	display: grid;
	gap: 0.9rem;
}

.reason {
	position: relative;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.1rem 1.1rem 1.1rem 3.3rem;
	counter-increment: reason;
}

.reason::before {
	content: counter(reason);
	position: absolute;
	left: 1.1rem;
	top: 1.1rem;
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	background: var(--accent-dim);
	color: var(--accent-text);
	font-family: var(--font-display);
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
}

.reason__title {
	font-size: 1.05rem;
	margin-bottom: 0.25rem;
}

/* ---------------------------------------------------- Breadcrumb */

.breadcrumb {
	font-size: 0.82rem;
	color: var(--text-muted);
	margin-bottom: 1.5rem;
	font-family: var(--font-body);
	letter-spacing: 0.02em;
}

.breadcrumb a {
	color: var(--text-muted);
}

.breadcrumb a:hover {
	color: var(--accent-clinical);
}

.breadcrumb__sep {
	margin: 0 0.5rem;
	color: var(--border-strong);
}

.breadcrumb__item--current {
	color: var(--text-secondary);
}

/* --------------------------------------------------------- 404 */

.error-404 {
	text-align: center;
	padding-block: clamp(3rem, 10vw, 6rem);
}

.error-404__code {
	font-family: var(--font-display);
	font-size: clamp(5rem, 22vw, 12rem);
	line-height: 1;
	color: var(--accent);
	letter-spacing: 0.05em;
	text-shadow: 0 0 40px rgba(220, 38, 38, 0.4);
	animation: ah-blink 3s infinite steps(1);
}

.error-404 .page-lead {
	margin-inline: auto;
	max-width: 46ch;
}

.error-404 .page-cta {
	justify-content: center;
	border-top: none;
}

/* ------------------------------------------------------- Footer */

.site-footer {
	margin-top: var(--section-gap);
	border-top: 1px solid var(--border);
	background: linear-gradient(180deg, transparent, rgba(10, 13, 11, 0.6));
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 2rem;
}

.nav-logo--footer {
	font-size: 1.15rem;
	margin-bottom: 0.75rem;
}

.footer-tagline {
	color: var(--text-muted);
	font-size: 0.9rem;
	max-width: 34ch;
}

.footer-heading {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	color: var(--text-primary);
	margin-bottom: 0.9rem;
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.footer-menu a {
	color: var(--text-secondary);
	font-size: 0.92rem;
}

.footer-menu a:hover {
	color: var(--accent-clinical);
	text-decoration: none;
}

.footer-disclaimer {
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 0.82rem;
	line-height: 1.7;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.footer-disclaimer p {
	color: var(--text-muted);
	max-width: 70ch;
}

.footer-copy {
	font-family: var(--font-code);
	white-space: nowrap;
}

/* ------------------------------------------------- Animations */

@keyframes ah-flicker {
	0%, 92%, 96%, 100% { opacity: 1; }
	93% { opacity: 0.35; }
	94% { opacity: 0.9; }
	95% { opacity: 0.5; }
}

@keyframes ah-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes ah-blink {
	0%, 70%, 100% { opacity: 1; }
	80% { opacity: 0.45; }
	90% { opacity: 1; }
}

/* ------------------------------------------------- Responsive */

@media (max-width: 860px) {
	.hero__inner {
		grid-template-columns: 1fr;
	}

	.monitor {
		max-width: 420px;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 720px) {
	.nav-burger {
		display: flex;
	}

	.nav-links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(14, 18, 16, 0.97);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--border);
		padding: 0.5rem var(--pad) 1rem;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.is-nav-open .nav-links {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.nav-links li {
		border-bottom: 1px solid var(--border);
	}

	.nav-links a {
		display: block;
		padding: 0.85rem 0.25rem;
	}

	.nav-links a::after {
		display: none;
	}

	.is-nav-open .nav-burger__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.is-nav-open .nav-burger__bar:nth-child(2) {
		opacity: 0;
	}

	.is-nav-open .nav-burger__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

@media (max-width: 560px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-disclaimer {
		flex-direction: column;
	}
}

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