/* ===== Hero Section ===== */
.hero {
	position: relative;
	min-height: clamp(560px, 80vh, 820px);
	display: grid;
	align-items: center;
	isolation: isolate;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Фон как CSS‑фон, чтобы не нарушать лимит 350px на <img> */
.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(
			120% 80% at 20% 10%,
			rgba(101, 193, 239, 0.12) 0%,
			rgba(101, 193, 239, 0) 60%
		),
		radial-gradient(
			120% 80% at 80% 70%,
			rgba(70, 182, 136, 0.12) 0%,
			rgba(70, 182, 136, 0) 60%
		),
		url('../images/hero-monsoon-bg.jpg') center/cover no-repeat;
	filter: saturate(1.05) contrast(1.04) brightness(1);
	opacity: 0.96;
}

/* Слой с изображениями (≤350px каждый) */
.hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.layer {
	will-change: transform, opacity;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease;
}

/* Camper */
.hero-camper {
	position: absolute;
	bottom: 6%;
	left: -16%;
	max-width: 350px; /* главный лимит */
	height: auto;
	transform: translate3d(0, 6px, 0);
	animation: floatY 6s ease-in-out infinite;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

/* Gear flatlay */
.hero-gear {
	position: absolute;
	right: -15%;
	bottom: 10%;
	max-width: 350px; /* главный лимит */
	height: auto;
	transform: translate3d(0, -6px, 0) rotate(-2deg);
	animation: floatY2 7s ease-in-out infinite;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

/* Контент */
.hero-content {
	position: relative;
	z-index: 1;
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(84px, 12vh, 120px) clamp(12px, 3vw, 24px)
		clamp(36px, 8vh, 60px);
}
.hero h1 {
	font-size: clamp(28px, 5.4vw, 56px);
	line-height: 1.06;
	letter-spacing: 0.2px;
	margin: 0 0 10px;
	text-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.hero-sub {
	max-width: 68ch;
	color: var(--muted);
	font-size: clamp(15px, 2.3vw, 18px);
	margin: 0 0 22px;
}
.cta-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

/* Trust flags */
.trust-flags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	color: #cfe6ee;
	font-size: 14px;
}
.flag-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(255, 211, 110, 0.15);
	margin-right: 8px;
}

/* Анимации */
@keyframes floatY {
	0%,
	100% {
		transform: translate3d(0, 6px, 0);
	}
	50% {
		transform: translate3d(0, -6px, 0);
	}
}
@keyframes floatY2 {
	0%,
	100% {
		transform: translate3d(0, -6px, 0) rotate(-2deg);
	}
	50% {
		transform: translate3d(0, 6px, 0) rotate(1deg);
	}
}

/* Параллакс — классы для JS */
@media (min-width: 768px) {
	.hero[data-parallax='on'] .hero-camper {
		transition: transform 0.12s linear;
	}
	.hero[data-parallax='on'] .hero-gear {
		transition: transform 0.12s linear;
	}
}

/* ------- Адаптив 240+ ------- */
@media (max-width: 480px) {
	.hero {
		min-height: 620px;
	}
	.hero-camper {
		left: 2%;
		max-width: 260px;
		opacity: 0.95;
	}
	.hero-gear {
		right: 2%;
		max-width: 240px;
	}
}
@media (min-width: 481px) and (max-width: 899px) {
	.hero-camper {
		left: 4%;
		max-width: 320px;
	}
	.hero-gear {
		right: 4%;
		max-width: 320px;
	}
}
.trail-highlights {
	background: var(--bg-elev);
	padding: 60px 0;
}

.section-title {
	text-align: center;
	font-size: 2rem;
	margin-bottom: 10px;
}

.section-intro {
	text-align: center;
	color: var(--muted);
	max-width: 700px;
	margin: 0 auto 40px;
}

.trail-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.trail-item {
	display: flex;
	align-items: center;
	gap: 20px;
	background: rgba(255, 255, 255, 0.03);
	padding: 20px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trail-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
}

.trail-img {
	max-width: 350px;
	flex-shrink: 0;
	border-radius: var(--radius);
}

.trail-text h3 {
	margin: 0 0 8px;
	font-size: 1.3rem;
}

.trail-text p {
	color: var(--muted);
	line-height: 1.5;
}

/* Адаптив */
@media (max-width: 768px) {
	.trail-item {
		flex-direction: column;
		text-align: center;
	}
	.trail-img {
		max-width: 100%;
	}
}
.specs {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.02) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	padding: 64px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.specs .section-title {
	text-align: center;
	font-size: clamp(22px, 3.2vw, 32px);
	margin-bottom: 10px;
}
.specs .section-intro {
	text-align: center;
	color: var(--muted);
	max-width: 760px;
	margin: 0 auto 36px;
}

.specs-list {
	display: grid;
	gap: 28px;
}

/* ITEM */
.spec-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	align-items: center;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	transition: transform 0.25s ease, box-shadow 0.35s ease, background 0.35s ease,
		border-color 0.35s ease;
}
.spec-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
}

/* IMG — строго ≤350px; на узких экранах может занимать всю доступную ширину контейнера, но картинка сама ≤350 */
.spec-img {
	max-width: 350px;
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius) - 4px);
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
	flex-shrink: 0;
}

/* BODY */
.spec-body {
	min-width: 0;
}
.spec-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.spec-head h3 {
	margin: 0;
	font-size: clamp(18px, 2.6vw, 22px);
}
.tag {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	background: rgba(101, 193, 239, 0.15);
	color: #cfe6ee;
	border: 1px solid rgba(101, 193, 239, 0.35);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.3px;
}

/* METERS */
.meters {
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
	display: grid;
	gap: 10px;
}
.meter {
	display: grid;
	grid-template-columns: minmax(110px, 180px) 1fr auto;
	align-items: center;
	gap: 10px;
}
.meter .label {
	color: #cfe6ee;
	font-size: 14px;
	white-space: nowrap;
}
.meter .bar {
	position: relative;
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	overflow: hidden;
}
.meter .fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--brand) 0%, #2c9f75 100%);
	transform-origin: left center;
	transform: scaleX(0);
	animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.meter .value {
	font-size: 13px;
	color: var(--muted);
}

/* Width presets (без inline-стилей) */
.w-92 {
	width: 92%;
}
.w-90 {
	width: 90%;
}
.w-88 {
	width: 88%;
}
.w-86 {
	width: 86%;
}
.w-84 {
	width: 84%;
}
.w-79 {
	width: 79%;
}
.w-74 {
	width: 74%;
}
.w-66 {
	width: 66%;
}
.w-62 {
	width: 62%;
}

/* Note */
.spec-note {
	color: var(--muted);
	margin-top: 6px;
	text-wrap: pretty;
}

/* Animations */
@keyframes grow {
	to {
		transform: scaleX(1);
	}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.spec-item,
	.meter .fill {
		transition: none !important;
		animation: none !important;
	}
}

/* Responsive */
@media (max-width: 880px) {
	.spec-item {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.spec-img {
		max-width: 100%;
		/* реальная картинка всё ещё ≤350px, если исходник 350px; если больше, мы ограничили общим правилом в проекте */
	}
	.meter {
		grid-template-columns: 1fr 1fr auto;
	}
}
.field-notes {
	padding: 64px 0;
	background: var(--bg-elev);
}
.field-notes .section-title {
	text-align: center;
	font-size: clamp(22px, 3.2vw, 32px);
	margin-bottom: 10px;
}
.field-notes .section-intro {
	text-align: center;
	color: var(--muted);
	max-width: 760px;
	margin: 0 auto 40px;
}
.notes-list {
	display: grid;
	gap: 40px;
}
.note {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	align-items: center;
}
.note.reverse {
	grid-template-columns: 1fr auto;
}
.note-media {
	flex-shrink: 0;
}
.note-img {
	max-width: 350px;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: transform 0.3s ease;
}
.note-img:hover {
	transform: scale(1.04);
}
.note-body h3 {
	margin: 0 0 8px;
	font-size: 1.3rem;
}
.note-body p {
	color: var(--muted);
	line-height: 1.5;
}

/* Mobile */
@media (max-width: 768px) {
	.note,
	.note.reverse {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.note-media {
		justify-self: center;
	}
}
.gear-lab {
	padding: 64px 0;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.02) 0%,
		rgba(255, 255, 255, 0) 100%
	);
}
.gear-lab .section-title {
	text-align: center;
	font-size: clamp(22px, 3.2vw, 32px);
	margin-bottom: 10px;
}
.gear-lab .section-intro {
	text-align: center;
	color: var(--muted);
	max-width: 760px;
	margin: 0 auto 36px;
}
.lab-grid {
	display: grid;
	gap: 28px;
}
.lab-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	align-items: center;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	transition: transform 0.25s ease, box-shadow 0.35s ease,
		border-color 0.35s ease;
}
.lab-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	border-color: rgba(255, 255, 255, 0.14);
}
.lab-img {
	max-width: 350px;
	height: auto;
	border-radius: var(--radius);
}
.lab-specs h3 {
	margin: 0 0 10px;
	font-size: 1.3rem;
}
.spec-bars {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}
.spec-bars li {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	align-items: center;
	gap: 10px;
}
.label {
	color: #cfe6ee;
	font-size: 14px;
}
.bar {
	position: relative;
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	overflow: hidden;
}
.fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--brand) 0%, #2c9f75 100%);
	transform-origin: left center;
	animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.val {
	font-size: 13px;
	color: var(--muted);
}
/* Width presets */
.w-90 {
	width: 90%;
}
.w-88 {
	width: 88%;
}
.w-74 {
	width: 74%;
}
.w-70 {
	width: 70%;
}
.w-68 {
	width: 68%;
}
.w-64 {
	width: 64%;
}
.w-62 {
	width: 62%;
}
.w-50 {
	width: 50%;
}
.w-46 {
	width: 46%;
}
/* Animation */
@keyframes grow {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
/* Responsive */
@media (max-width: 768px) {
	.lab-item {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.lab-img {
		margin: 0 auto;
	}
}
.trail-calendar {
	padding: 64px 0;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.02) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.trail-calendar .section-title {
	text-align: center;
	font-size: clamp(22px, 3.2vw, 32px);
	margin-bottom: 10px;
}
.trail-calendar .section-intro {
	text-align: center;
	color: var(--muted);
	max-width: 760px;
	margin: 0 auto 36px;
}

.bands {
	display: grid;
	gap: 24px;
}
.band {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	align-items: center;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	transition: transform 0.25s ease, box-shadow 0.35s ease,
		border-color 0.35s ease;
}
.band:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	border-color: rgba(255, 255, 255, 0.14);
}

.band-img {
	max-width: 350px;
	height: auto;
	border-radius: var(--radius);
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}
.band-body h3 {
	margin: 0 0 8px;
	font-size: 1.25rem;
}
.band-body p {
	color: var(--muted);
	margin-bottom: 10px;
}

/* Month strips (not cards) */
.strip {
	display: grid;
	grid-template-columns: repeat(12, minmax(18px, 1fr));
	gap: 6px;
	align-items: center;
}
.strip span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	border-radius: 8px;
	font-size: 12px;
	color: #cfe6ee;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.2s ease, background 0.25s ease,
		border-color 0.25s ease;
}
.strip span:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.14);
}
.strip.monsoon span.on {
	background: linear-gradient(180deg, var(--brand) 0%, #2c9f75 100%);
	color: #071012;
}
.strip.post span.on {
	background: linear-gradient(180deg, #65c1ef 0%, #3da7da 100%);
	color: #071012;
}
.strip.winter span.on {
	background: linear-gradient(180deg, #ffd36e 0%, #e7b948 100%);
	color: #071012;
}

.legend {
	margin-top: 16px;
	color: var(--muted);
	font-size: 0.95rem;
}

@media (max-width: 820px) {
	.band {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.band-img {
		margin: 0 auto;
	}
}
.trail-stories {
	padding: 64px 0;
	background: var(--bg-elev);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.trail-stories .section-title {
	text-align: center;
	font-size: clamp(22px, 3.2vw, 32px);
	margin-bottom: 10px;
}
.trail-stories .section-intro {
	text-align: center;
	color: var(--muted);
	max-width: 780px;
	margin: 0 auto 36px;
}

/* Timeline */
.story-timeline {
	position: relative;
	display: grid;
	gap: 32px;
	counter-reset: steps;
	padding-left: 8px;
}
.story-timeline::before {
	/* вертикальная линия */
	content: '';
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.24),
		rgba(255, 255, 255, 0.08)
	);
	border-radius: 2px;
}

.story-step {
	position: relative;
	list-style: none;
}
.step-marker {
	position: absolute;
	left: 16px;
	top: 10px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 0 6px rgba(255, 211, 110, 0.15),
		0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Card grid */
.step-grid {
	margin-left: 58px; /* отступ от линии */
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	align-items: start;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	transition: transform 0.35s ease, box-shadow 0.35s ease,
		border-color 0.35s ease, background 0.35s ease, opacity 0.45s ease;
	opacity: 0;
	transform: translateY(12px);
}
.story-step.in-view .step-grid {
	opacity: 1;
	transform: translateY(0);
}
.step-grid:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.048);
}

/* Media: два изображения, оба ≤ 350px и без width:100% */
.step-media {
	display: grid;
	gap: 10px;
	justify-items: center;
}
.avatar {
	max-width: 120px;
	height: auto;
	border-radius: 999px;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
.camp {
	max-width: 350px; /* главный лимит */
	height: auto;
	border-radius: var(--radius);
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

/* Body */
.step-body h3 {
	margin: 0 0 8px;
	font-size: clamp(18px, 2.6vw, 22px);
}
.step-body p {
	color: var(--muted);
	line-height: 1.65;
	margin: 0 0 10px;
}
.step-body .muted {
	font-size: 0.95rem;
	opacity: 0.95;
}

/* Responsive */
@media (max-width: 900px) {
	.story-timeline::before {
		left: 18px;
	}
	.step-marker {
		left: 10px;
	}
	.step-grid {
		margin-left: 48px;
		grid-template-columns: 1fr;
	}
	.step-media {
		justify-items: start;
	}
	.camp {
		max-width: clamp(220px, 70vw, 350px);
	} /* не width:100%, но гибко и ≤350px */
}
@media (max-width: 560px) {
	.avatar {
		max-width: 96px;
	}
	.camp {
		max-width: clamp(200px, 82vw, 320px);
	}
}

.safety-beacons {
	padding: 64px 0;
	background: var(--bg-elev);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.safety-beacons .section-title {
	text-align: center;
	font-size: clamp(22px, 3.2vw, 32px);
	margin-bottom: 10px;
}
.safety-beacons .section-intro {
	text-align: center;
	color: var(--muted);
	max-width: 780px;
	margin: 0 auto 36px;
}

/* Grid of beacons */
.beacon-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.beacon {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px;
	transition: transform 0.25s ease, box-shadow 0.35s ease,
		border-color 0.35s ease, background 0.35s ease;
}
.beacon:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
}

/* Pulsing beacon */
.beacon-art {
	--size: 46px;
	width: var(--size);
	height: var(--size);
	border-radius: 999px;
	background: radial-gradient(
		circle at 50% 50%,
		#ff6e6e 0 45%,
		#d34c4c 46% 100%
	);
	box-shadow: 0 0 0 0 rgba(211, 76, 76, 0.45);
	animation: pulse 2.2s infinite;
}
.pulse-blue {
	background: radial-gradient(circle, #65c1ef 0 45%, #3da7da 46% 100%);
}
.pulse-amber {
	background: radial-gradient(circle, #ffd36e 0 45%, #e7b948 46% 100%);
}
.pulse-green {
	background: radial-gradient(circle, #46b688 0 45%, #2c9f75 46% 100%);
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25);
	}
	70% {
		box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

/* Body */
.beacon-img {
	max-width: 350px;
	height: auto;
	border-radius: var(--radius);
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
	margin-bottom: 8px;
}
.beacon-body h3 {
	margin: 0 0 6px;
	font-size: 1.1rem;
}
.beacon-body p {
	color: var(--muted);
	line-height: 1.6;
	margin: 0 0 8px;
}
.protocol {
	list-style: disc;
	margin: 0 0 4px 18px;
	color: #cfe6ee;
}

/* SOS matrix */
.sos-matrix {
	margin-top: 22px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px;
}
.sos-matrix h4 {
	margin: 0 0 8px;
	font-size: 1rem;
}
.sos-list {
	list-style: none;
	padding: 0;
	margin: 0 0 8px;
	display: grid;
	gap: 8px;
}
.sos-ico {
	max-width: 28px;
	height: auto;
	border-radius: 6px;
	vertical-align: middle;
	margin-right: 8px;
}
.note {
	color: var(--muted);
	font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 980px) {
	.beacon-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.beacon-art {
		--size: 40px;
	}
	.beacon {
		grid-template-columns: auto 1fr;
	}
	.beacon-img {
		max-width: clamp(220px, 80vw, 320px);
	}
}
.campcraft-pro {
	padding: 64px 0;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.02) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.campcraft-pro .section-title {
	text-align: center;
	font-size: clamp(22px, 3.2vw, 32px);
	margin-bottom: 10px;
}
.campcraft-pro .section-intro {
	text-align: center;
	color: var(--muted);
	max-width: 780px;
	margin: 0 auto 36px;
}

/* Grid of drills (не карточки в сетке, а “доска” упражнений) */
.drill-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.drill {
	position: relative;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	transition: transform 0.25s ease, box-shadow 0.35s ease,
		border-color 0.35s ease, background 0.35s ease;
}
.drill:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
}

/* Head */
.drill-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--brand) 0%, #2c9f75 100%);
	color: #071012;
	font-weight: 700;
	font-size: 12px;
	box-shadow: 0 0 0 6px rgba(70, 182, 136, 0.15);
}
.drill-head h3 {
	margin: 0;
	font-size: 1.15rem;
}

/* Media: основное + деталь (оба ≤ 350px) */
.drill-media {
	display: grid;
	grid-template-columns: auto auto;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
}
.tech-img {
	max-width: 320px;
	height: auto;
	border-radius: var(--radius);
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
	transition: transform 0.3s ease;
}
.detail-img {
	max-width: 160px;
	height: auto;
	border-radius: 12px;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
	transform: rotate(-2deg);
	transition: transform 0.3s ease, box-shadow 0.35s ease;
}
.drill:hover .tech-img {
	transform: scale(1.03);
}
.drill:hover .detail-img {
	transform: rotate(0deg) translateY(-2px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.drill-text {
	color: var(--muted);
	line-height: 1.65;
}

/* Notes */
.drill-notes {
	margin-top: 18px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px;
}
.drill-notes h4 {
	margin: 0 0 8px;
	font-size: 1rem;
}
.note-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}
.tip-img {
	max-width: 28px;
	height: auto;
	border-radius: 6px;
	vertical-align: middle;
	margin-right: 8px;
}

/* Responsive */
@media (max-width: 980px) {
	.drill-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.tech-img {
		max-width: clamp(220px, 78vw, 320px);
	}
	.detail-img {
		max-width: clamp(120px, 36vw, 160px);
	}
}
.contact-form {
	padding: 72px 0;
	background: radial-gradient(
			120% 80% at 15% 10%,
			rgba(101, 193, 239, 0.08) 0%,
			rgba(101, 193, 239, 0) 60%
		),
		radial-gradient(
			120% 80% at 85% 70%,
			rgba(70, 182, 136, 0.08) 0%,
			rgba(70, 182, 136, 0) 60%
		);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Анимация появления (включается js-классом .in-view) */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.in-view {
	opacity: 1;
	transform: translateY(0);
}

.contact-wrap {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 28px;
	align-items: start;
}

.contact-header h2 {
	font-size: clamp(22px, 3.2vw, 32px);
	margin: 0 0 10px;
}
.contact-header p {
	color: var(--muted);
	margin: 0 0 14px;
	max-width: 56ch;
}

.contact-highlights {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
	color: #cfe6ee;
	font-size: 0.95rem;
}
.contact-highlights .dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--accent);
	margin-right: 8px;
	box-shadow: 0 0 0 4px rgba(255, 211, 110, 0.15);
}

/* Карточка формы */
.form-card {
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	display: grid;
	gap: 14px;
	transition: transform 0.25s ease, box-shadow 0.35s ease,
		border-color 0.35s ease, background 0.35s ease;
}
.form-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
}

/* Ряд из двух полей */
.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Поля */
.field {
	display: grid;
	gap: 6px;
}
.field label {
	font-weight: 600;
	font-size: 0.95rem;
}
.field .hint {
	font-size: 0.85rem;
	color: var(--muted);
}
input[type='text'],
input[type='email'],
textarea {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.25);
	color: var(--fg);
	border-radius: 12px;
	padding: 12px 14px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
textarea {
	min-height: 140px;
	resize: vertical;
}

/* Focus / hover */
input:hover,
textarea:hover {
	border-color: rgba(255, 255, 255, 0.24);
}
input:focus,
textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 4px rgba(70, 182, 136, 0.18);
	background: rgba(0, 0, 0, 0.35);
}

/* Валидация браузера (без JS) */
input:required:user-invalid,
textarea:required:user-invalid {
	border-color: #ff8686;
	box-shadow: 0 0 0 4px rgba(255, 134, 134, 0.18);
}

/* Чекбокс */
.form-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.95rem;
	color: #cfe6ee;
}
.form-checkbox input {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	accent-color: var(--brand);
}
.form-checkbox a {
	color: var(--fg);
	text-underline-offset: 3px;
}
.form-checkbox a:hover {
	color: white;
}

/* Кнопка */
.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--brand) 0%, #2c9f75 100%);
	color: #071012;
	font-weight: 700;
	letter-spacing: 0.2px;
	border: 1px solid transparent;
	box-shadow: 0 10px 24px rgba(70, 182, 136, 0.35);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.3s ease;
}
.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(70, 182, 136, 0.45);
}
.cta-button:active {
	transform: translateY(0);
}

/* Адаптив */
@media (max-width: 920px) {
	.contact-wrap {
		grid-template-columns: 1fr;
	}
	.contact-header {
		order: 0;
	}
	.form-card {
		order: 1;
	}
}
@media (max-width: 600px) {
	.field-row {
		grid-template-columns: 1fr;
	}
}