/* ===== Hero (page 1) ===== */
.hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(
			220px 220px at 10% -50%,
			rgba(255, 68, 85, 0.18),
			transparent 70%
		),
		radial-gradient(
			320px 220px at 110% 10%,
			rgba(58, 209, 161, 0.14),
			transparent 70%
		);
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	align-items: center;
}
.eyebrow {
	color: var(--accent-2);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	margin: 0 0 8px;
}
.hero-title {
	position: relative;
	display: inline-block;
}
.hero-title .title-line {
	display: block;
	font-family: Rajdhani, Inter, sans-serif;
	font-size: clamp(34px, 6vw, 56px);
	font-weight: 700;
	letter-spacing: 0.04em;
}
.hero-title .title-sub {
	display: block;
	margin-top: -2px;
	font-size: clamp(20px, 3.4vw, 28px);
	color: #c7cbd3;
	letter-spacing: 0.08em;
}
.dial-ring {
	position: absolute;
	inset: -22px -32px auto auto;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 2px dashed rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 2px var(--ring);
	animation: spin 14s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.hero-lead {
	margin: 18px 0 22px;
	color: #cfd3db;
	max-width: 60ch;
}
.spec-bullets {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	color: #b7bdc8;
}
.spec-bullets li {
	margin: 6px 0;
	padding-left: 20px;
	position: relative;
}
.spec-bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 8px rgba(255, 68, 85, 0.35);
}

/* Hero dials */
.hero-dials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.dial-card {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 12px;
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.dial-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.dial-card figcaption {
	color: #aab3bf;
	margin-top: 8px;
	font-size: 14px;
}
.tilt {
	transform-style: preserve-3d;
}
.tilt:hover {
	transform: rotateX(2deg) rotateY(-2deg) translateY(-3px);
}
.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	text-decoration: none;
	color: #8fa2b5;
	font-weight: 700;
	letter-spacing: 0.12em;
	transition: transform 0.2s, color 0.2s;
}
.scroll-cue:hover {
	transform: translate(-50%, -2px);
	color: #cbd3dc;
}

/* ===== Gallery (page 1) ===== */
.gallery {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.filter-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.chip {
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: #dbe1ea;
	cursor: pointer;
	font-weight: 700;
	transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.chip:hover {
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-1px);
}
.chip.is-active,
.chip[aria-pressed='true'] {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.28);
}
.dial-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.dial-tile {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 10px;
	text-align: center;
	box-shadow: var(--shadow);
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.dial-tile:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
}
.dial-tile figcaption {
	color: #adb6c2;
	margin-top: 6px;
	font-size: 14px;
}

/* ===== Specs (page 1) ===== */
.specs {
	background: radial-gradient(
		900px 400px at 100% 0%,
		rgba(58, 209, 161, 0.1),
		transparent 65%
	);
}
.spec-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}
.spec-card {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 14px;
	box-shadow: var(--shadow);
}
.spec-card h3 {
	margin: 8px 0 6px;
	font-family: Rajdhani, Inter, sans-serif;
	letter-spacing: 0.04em;
}
.spec-card p {
	color: #c7cdd7;
}
.tech-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 16px;
	align-items: start;
}
.tech-fig {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 10px;
	text-align: center;
}
.tech-fig figcaption {
	color: #aab2bf;
	margin-top: 6px;
	font-size: 14px;
}
.tech-specs {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.04),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 14px;
}
.ticks {
	margin: 10px 0;
	padding-left: 18px;
}
.ticks li {
	margin: 6px 0;
}
.note {
	color: #9aa6b6;
}

/* ===== Pilot’s Gallery (page 1 slider) ===== */
.pilots-gallery {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.gallery-slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}
.gallery-viewport {
	overflow: hidden;
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background: var(--panel);
	box-shadow: var(--shadow);
}
.gallery-track {
	display: flex;
	transition: transform 0.5s ease;
}
.gallery-slide {
	margin: 0;
	flex: 0 0 100%;
	box-sizing: border-box;
	padding: 14px;
	display: grid;
	justify-items: center;
	text-align: center;
}
.gallery-slide figcaption {
	color: #b0b8c5;
	margin-top: 8px;
	font-size: 15px;
	font-weight: 500;
}
.gallery-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: transform 0.2s, background 0.2s;
}
.gallery-btn:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.12);
}

/* ===== Page 1 responsive ===== */
@media (max-width: 1024px) {
	.hero-grid {
		grid-template-columns: 1fr;
	}
	.hero-dials {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.dial-ring {
		display: none;
	}
	.spec-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tech-row {
		grid-template-columns: 1fr;
	}
	.dial-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.hero-dials {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.gallery-btn {
		width: 38px;
		height: 38px;
		font-size: 20px;
	}
}
@media (max-width: 680px) {
	.dial-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.hero-dials {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta-row .btn {
		flex: 1 1 auto;
		text-align: center;
	}
}
@media (max-width: 360px) {
	.dial-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 5: Field Reports ===== */
.field-reports {
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02));
}
.stats-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}
.stat {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 16px;
	text-align: center;
	box-shadow: var(--shadow);
}
.stat .num {
	display: inline-block;
	font-family: Rajdhani, Inter, sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 5vw, 42px);
	letter-spacing: 0.04em;
}
.stat .unit {
	margin-left: 4px;
	color: #c9cfda;
	font-weight: 700;
}
.stat .meta {
	margin: 6px 0 0;
	color: #aab3bf;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.review-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 12px;
	box-shadow: var(--shadow);
}
.avatar {
	width: 56px;
	max-width: 56px;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.review-body h3 {
	margin: 2px 0 6px;
	font-family: Rajdhani, Inter, sans-serif;
	letter-spacing: 0.04em;
}
.review-body p {
	margin: 0;
	color: #c7cdd7;
}

/* ===== Section 6: Support & FAQ ===== */
.support {
	background: radial-gradient(
		800px 360px at -10% 0%,
		rgba(255, 68, 85, 0.08),
		transparent 60%
	);
}
.contact-strip {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: center;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 14px;
	box-shadow: var(--shadow);
	margin-bottom: 16px;
}
.support-icon {
	width: 48px;
	max-width: 48px;
	border-radius: 12px;
}

.faq {
	display: grid;
	gap: 10px;
}
.faq-q {
	width: 100%;
	text-align: left;
	background: #0d1015;
	color: #e6e7ea;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 12px 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.faq-q:hover {
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-1px);
}
.faq-a {
	display: none;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px 14px;
	color: #c9cfda;
}
.faq-a.open {
	display: block;
}

/* ===== Responsive for sections 5–6 ===== */
@media (max-width: 1024px) {
	.reviews-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 680px) {
	.stats-row {
		grid-template-columns: 1fr;
	}
	.reviews-grid {
		grid-template-columns: 1fr;
	}
	.contact-strip {
		grid-template-columns: 1fr;
		justify-items: start;
	}
}
/* ====== Chronograph Showcase ====== */
.chrono-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.chrono-card {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 12px;
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.chrono-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
}
.chrono-card figcaption {
	margin-top: 8px;
	color: #aeb6c3;
	font-size: 14px;
}

/* ====== Pilot’s Journal ====== */
.journal-entries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.journal-entry {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 18px;
	box-shadow: var(--shadow);
	font-style: italic;
	color: #c7cdd7;
}
.journal-entry span {
	display: block;
	margin-top: 10px;
	font-style: normal;
	color: var(--muted);
	font-size: 14px;
}

/* ====== Ambient Skies ====== */
.skies-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
}
.skies-text {
	color: #d5dae3;
}
.skies-img {
	border-radius: 16px;
	box-shadow: var(--shadow);
}

/* Responsive */
@media (max-width: 1024px) {
	.chrono-grid {
		grid-template-columns: 1fr 1fr;
	}
	.journal-entries {
		grid-template-columns: 1fr 1fr;
	}
	.skies-wrap {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.chrono-grid {
		grid-template-columns: 1fr;
	}
	.journal-entries {
		grid-template-columns: 1fr;
	}
}
/* ====== 10. Instrument Heritage ====== */
.heritage-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: center;
}
.heritage-text p {
	margin-bottom: 12px;
}
.heritage-img img {
	border-radius: 16px;
	box-shadow: var(--shadow);
}
.heritage-img figcaption {
	margin-top: 8px;
	text-align: center;
	font-size: 14px;
	color: #aeb6c3;
}

/* ====== 11. Flight Ready Checklist ====== */
.checklist-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 18px;
}
.checklist-grid li {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 16px;
	text-align: center;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.checklist-grid li:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}
.checklist-icon {
	width: 64px;
	max-width: 64px;
	margin-bottom: 10px;
	border-radius: 12px;
}

/* ====== Responsive (10–11) ====== */
@media (max-width: 1024px) {
	.heritage-wrap {
		grid-template-columns: 1fr;
	}
	.checklist-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.checklist-grid {
		grid-template-columns: 1fr;
	}
}
/* ====== Contact Form (page 1) ====== */
.contact-form {
	background: radial-gradient(
			520px 320px at -10% -20%,
			rgba(255, 68, 85, 0.1),
			transparent 60%
		),
		radial-gradient(
			520px 320px at 110% 120%,
			rgba(58, 209, 161, 0.08),
			transparent 60%
		);
}

.contact-header {
	max-width: 70ch;
	margin-bottom: 16px;
}

.form-wrapper {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 16px;
	box-shadow: var(--shadow);
	display: grid;
	gap: 14px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.form-field {
	display: grid;
	gap: 8px;
}
.form-field .label {
	color: #c9cfda;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.form-field input,
.form-field textarea {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: #0c0f14;
	color: var(--ink);
	border-radius: 12px;
	padding: 12px 14px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
	color: #8fa2b5;
}

.form-field input:focus,
.form-field textarea:focus {
	border-color: var(--accent-2);
	box-shadow: 0 0 0 3px rgba(58, 209, 161, 0.2);
	background: #0c1016;
}

.form-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #cfd5df;
}
.form-checkbox input {
	width: 18px;
	height: 18px;
	accent-color: var(--accent-2);
}
.form-checkbox a {
	color: #dbe1ea;
	text-decoration: underline;
}
.form-checkbox a:hover {
	color: #fff;
}

.cta-button {
	margin-top: 4px;
}

/* Errors (если браузер покажет :invalid) */
.form-field input:invalid,
.form-field textarea:invalid {
	border-color: #ff4455;
}

/* Responsive */
@media (max-width: 820px) {
	.form-row {
		grid-template-columns: 1fr;
	}
}