/* ==== HERO SECTION (start.html: Section 1) ==== */
.hero {
	position: relative;
	padding: clamp(48px, 6vw, 96px) 0;
	overflow: clip;
	background: radial-gradient(
			1200px 600px at 110% -10%,
			#ffffff 0%,
			#f4f7ff 60%,
			transparent 100%
		),
		linear-gradient(#ffffff, #f7f9fc);
}

.hero__grid {
	display: grid;
	gap: clamp(20px, 4vw, 40px);
	grid-template-columns: 1.2fr 0.8fr;
	align-items: center;
}

.hero__text h1 {
	margin: 8px 0 10px;
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
	line-height: 1.2;
	color: #0d1320;
}
.hero__text .lede {
	margin: 8px 0 16px;
	max-width: 64ch;
}
.hero__bullets {
	margin: 0 0 16px 1rem;
	padding: 0;
}
.hero__bullets li {
	margin-bottom: 0.45rem;
}

.hero__cta {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 8px;
}
.hero__meta {
	margin-top: 10px;
}

.hero__media {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(160px, 1fr));
	align-content: start;
}
.hero-card {
	background: #ffffff;
	padding: 10px;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(13, 19, 32, 0.06);
	transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.hero-card:hover {
	box-shadow: 0 16px 40px rgba(13, 19, 32, 0.09);
	transform: translateY(-4px);
}
.hero-card figcaption {
	font-size: 0.85rem;
	color: #5b6478;
	margin-top: 6px;
}

/* Subtle depth scaling */
.hero-card[data-float][depth='1'] {
	transform: translateY(0);
}
.hero-card[data-float][depth='2'] {
	transform: translateY(2px);
}
.hero-card[data-float][depth='3'] {
	transform: translateY(4px);
}

/* Background bubbles */
.hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.bg-bubble {
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 30% 30%,
		#ffffff,
		#eaf1ff 60%,
		#e4ecff 100%
	);
	filter: blur(1px);
	opacity: 0.7;
	animation: floatY 8s ease-in-out infinite;
}
.bg-bubble:nth-child(1) {
	left: -60px;
	top: 10%;
	animation-delay: 0s;
}
.bg-bubble:nth-child(2) {
	right: -70px;
	top: 30%;
	animation-delay: 0.8s;
	width: 140px;
	height: 140px;
}
.bg-bubble:nth-child(3) {
	left: 20%;
	bottom: -60px;
	animation-delay: 1.2s;
	width: 220px;
	height: 220px;
}

@keyframes floatY {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* Responsive */
@media (max-width: 980px) {
	.hero__grid {
		grid-template-columns: 1fr;
	}
	.hero__media {
		order: -1;
		grid-template-columns: repeat(3, minmax(120px, 1fr));
	}
}
@media (max-width: 700px) {
	.hero__media {
		grid-template-columns: repeat(2, minmax(120px, 1fr));
	}
}
@media (max-width: 420px) {
	.hero__media {
		grid-template-columns: 1fr 1fr;
	}
}
.hero-card {
	margin: 10px 10px 10px;
}
/* ==== SECTION HEAD SHARED ==== */
.sec-head {
	text-align: left;
	max-width: 72ch;
	margin-bottom: 18px;
}
.sec-title {
	margin: 6px 0 8px;
	font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
	color: #0d1320;
}
.sec-lede {
	color: #2a3446;
}

/* ==== SECTION 2: Benefits ==== */
.benefits {
	position: relative;
	padding: clamp(40px, 6vw, 90px) 0;
}
.benefits__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}
.bcard {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.bcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(13, 19, 32, 0.1);
}
.bpoints {
	margin: 10px 0 0 1rem;
}
.bmedia {
	margin: 0;
}
.bmedia figcaption {
	margin-top: 6px;
}

.benefits__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
			800px 420px at -10% 50%,
			#eef3ff 0%,
			transparent 70%
		),
		radial-gradient(800px 420px at 110% 30%, #eef7ff 0%, transparent 70%);
	opacity: 0.6;
}

/* ==== SECTION 3: Materials ==== */
.materials {
	padding: clamp(40px, 6vw, 90px) 0;
}
.materials__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}
.mcard {
	background: #ffffff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.mlist {
	margin: 10px 0 0 1rem;
}
.mmedia {
	margin: 0;
}
.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 14px;
	list-style: none;
	padding: 0;
}
.badge {
	background: #eef3ff;
	color: #24406b;
	border-radius: 999px;
	padding: 0.4rem 0.7rem;
	font-weight: 600;
}

/* ==== SECTION 4: Science Tabs ==== */
.science {
	padding: clamp(40px, 6vw, 90px) 0;
}
.tabs__list {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 10px 0 14px;
}
.tab {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: #eef3ff;
	color: #1d2330;
	padding: 0.6rem 0.9rem;
	border-radius: 999px;
	font-weight: 600;
	transition: transform 0.15s ease, background 0.2s ease;
}
.tab:hover {
	transform: translateY(-1px);
}
.tab.is-active {
	background: #3b7be3;
	color: #fff;
}

.panel {
	display: none;
}
.panel.is-active {
	display: block;
}

.panel__grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: 1.2fr 0.8fr;
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}

/* ==== RESPONSIVE for sections 2–4 ==== */
@media (max-width: 980px) {
	.benefits__grid,
	.materials__grid {
		grid-template-columns: 1fr;
	}
	.panel__grid {
		grid-template-columns: 1fr;
	}
}
/* ==== ЕДИНЫЙ КОНТРОЛЬ ОТСТУПОВ МЕЖДУ СЕКЦИЯМИ ==== */
:root {
	--section-pad: clamp(28px, 3.5vw, 48px); /* было до 90px x2 */
	--section-pad-first: clamp(36px, 5vw, 60px);
}

/* общий паттерн для секций в main */
.do-main > section {
	padding-block: var(--section-pad);
}
.do-main > section:first-child {
	padding-block: var(--section-pad-first);
}

/* убираем лишние margin-коллапсы у первых/последних элементов */
.do-main > section > *:first-child {
	margin-top: 0;
}
.do-main > section > *:last-child {
	margin-bottom: 0;
}

/* компактнее заголовочный блок */
.sec-head {
	margin-bottom: 12px;
}
.sec-title {
	margin: 4px 0 6px;
}
.sec-lede {
	margin: 0 0 10px;
}

/* ==== УБАВЛЯЕМ ПАДДИНГИ КОНКРЕТНЫХ СЕКЦИЙ (перекрывает старые правила) ==== */
.benefits,
.materials,
.science {
	padding-block: var(--section-pad);
}

/* карточки и подписи — чуть плотнее */
.bcard,
.mcard,
.panel__grid {
	padding: 14px;
}
.bpoints,
.mlist {
	margin-top: 8px;
}
.bmedia figcaption,
.mmedia figcaption {
	margin-top: 4px;
}

/* на мобильных — ещё компактнее */
@media (max-width: 700px) {
	:root {
		--section-pad: clamp(22px, 4vw, 36px);
	}
	.sec-head {
		margin-bottom: 10px;
	}
	.panel__grid,
	.bcard,
	.mcard {
		padding: 12px;
	}
}
/* ==== SECTION 5: Feel Scale ==== */
.feel {
	padding-block: var(--section-pad);
}
.feel__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}
.fcard {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.fcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(13, 19, 32, 0.1);
}
.fmedia {
	margin: 8px 0 0;
}

.meter {
	margin-top: 16px;
}
.meter__label {
	font-weight: 700;
	margin-right: 0.6rem;
}
.meter__track {
	position: relative;
	height: 12px;
	background: #eef3ff;
	border-radius: 999px;
	overflow: hidden;
}
.meter__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 34%;
	background: linear-gradient(90deg, #a7c4ff, #3b7be3);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.meter__tick {
	position: absolute;
	top: -28px;
	font-size: 0.85rem;
	color: #24406b;
	cursor: pointer;
	user-select: none;
	transition: transform 0.15s ease;
}
.meter__tick:hover {
	transform: translateY(-2px);
}
.meter__tick[data-tick='soft'] {
	left: 8%;
}
.meter__tick[data-tick='medium'] {
	left: 46%;
}
.meter__tick[data-tick='firm'] {
	right: 6%;
}
.meter__hint {
	margin-top: 8px;
}

/* ==== SECTION 6: Positions ==== */
.positions {
	padding-block: var(--section-pad);
}
.positions__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, 1fr);
}
.pitem {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.pmedia {
	margin-top: 8px;
}

/* ==== SECTION 7: Edge Support ==== */
.edge {
	padding-block: var(--section-pad);
}
.edge__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, 1fr);
}
.ecard {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.emedia {
	margin-top: 8px;
}

/* ==== Responsive adjustments ==== */
@media (max-width: 980px) {
	.feel__grid {
		grid-template-columns: 1fr;
	}
	.positions__grid,
	.edge__grid {
		grid-template-columns: 1fr;
	}
	.meter__tick {
		top: -26px;
	}
}
/* ==== SECTION 8: Care & Hygiene ==== */
.care {
	padding-block: var(--section-pad);
}
.care__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
}
.ccard {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.clist {
	margin: 8px 0 0 1rem;
}
.cmedia {
	margin: 0;
}
.cmedia figcaption {
	margin-top: 6px;
}

/* ==== SECTION 9: Monsoon Airflow Test ==== */
.monsoon {
	padding-block: var(--section-pad);
}
.monsoon__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
}
.mcard {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.vent {
	margin-top: 10px;
}
.vent__track {
	position: relative;
	height: 12px;
	background: #eef3ff;
	border-radius: 999px;
	overflow: hidden;
}
.vent__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 70%;
	background: linear-gradient(90deg, #b9d1ff, #3b7be3);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vent__note {
	margin-top: 8px;
}

/* ==== SECTION 10: Comparison Matrix ==== */
.compare {
	padding-block: var(--section-pad);
}
.compare__top {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 12px;
}
.cavatar {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
	text-align: center;
}
.tablewrap {
	background: #fff;
	border-radius: 16px;
	padding: 12px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
	overflow-x: auto;
}
.ctable {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}
.ctable th,
.ctable td {
	padding: 10px;
	text-align: left;
	border-bottom: 1px solid #eef1f6;
	white-space: nowrap;
}
.ctable thead th {
	font-weight: 700;
	color: #0d1320;
}
.ctable tbody tr:hover {
	background: #f6f9ff;
}
.ctable td.ok {
	font-weight: 600;
	color: #24406b;
}

/* ==== Responsive (8–10) ==== */
@media (max-width: 980px) {
	.care__grid,
	.monsoon__grid {
		grid-template-columns: 1fr;
	}
	.compare__top {
		grid-template-columns: 1fr;
	}
	.ctable {
		min-width: 520px;
	}
}
/* ==== 11. Timeline ==== */
.timeline {
	padding-block: var(--section-pad);
}
.tl {
	position: relative;
	padding-left: 0;
	margin: 0;
}
.tl::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #e6ecfb;
}
.tl__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 16px 0;
}
.tl__item.left .tl__card {
	grid-column: 1;
}
.tl__item.left .tl__media {
	grid-column: 2;
	justify-self: start;
}
.tl__item.right .tl__card {
	grid-column: 2;
}
.tl__item.right .tl__media {
	grid-column: 1;
	justify-self: end;
}
.tl__media img {
	border-radius: 14px;
}
.tl__card {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.pull {
	margin: 8px 0 0;
	padding-left: 12px;
	border-left: 3px solid #3b7be3;
	color: #24406b;
	font-weight: 600;
}

@media (max-width: 980px) {
	.tl::before {
		left: 8px;
	}
	.tl__item {
		grid-template-columns: 1fr;
		padding-left: 22px;
	}
	.tl__item .tl__media {
		justify-self: start;
	}
}

/* ==== 12. KPIs band ==== */
.kpis {
	padding-block: var(--section-pad);
}
.kpis__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: start;
}
.kband {
	background: #ffffff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.kband__title {
	margin: 0 0 8px;
}
.kband__nums {
	display: flex;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
	flex-wrap: wrap;
}
.kband__nums .num {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	color: #0d1320;
}
.kband__nums small {
	display: block;
	color: #6a7386;
}
.kcheck {
	list-style: none;
	padding: 0;
	margin: 0;
}
.kcheck li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.35rem 0;
}
.kcheck i {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #e6f0ff;
	box-shadow: inset 0 0 0 2px #3b7be3;
}

.kvis {
	display: grid;
	gap: 12px;
}
.kvis__item {
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
}
.knote {
	display: grid;
	gap: 10px;
}

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

/* ==== 13. Fit Decision Tree ==== */
.fit {
	padding-block: var(--section-pad);
}
.fit__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.2fr 0.8fr;
}
.fit__tree details {
	background: #fff;
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 8px 18px rgba(13, 19, 32, 0.06);
	margin-bottom: 10px;
}
.fit__tree summary {
	cursor: pointer;
	font-weight: 700;
}
.fit__tree summary::marker {
	color: #3b7be3;
}
.fit__mosaic {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}
.fit__mosaic figure {
	background: #fff;
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 8px 18px rgba(13, 19, 32, 0.06);
}

@media (max-width: 980px) {
	.fit__grid {
		grid-template-columns: 1fr;
	}
}
/* ==== SECTION 14: Contact ==== */
.contact {
	padding-block: var(--section-pad);
}
.contact__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}

/* Left column */
.contact__figure {
	margin: 0 0 10px;
}
.contact__head .sec-title {
	margin-top: 6px;
}

/* Right column (form) */
.contact__formwrap {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 22px rgba(13, 19, 32, 0.06);
	padding: 16px;
}
.contact__form {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}
.field {
	display: grid;
	gap: 6px;
}
.field--wide {
	grid-column: 1 / -1;
}
.field__label {
	font-weight: 600;
	color: #0d1320;
}

.contact input[type='text'],
.contact input[type='email'],
.contact textarea {
	width: 100%;
	border: 1px solid #e3e8f3;
	background: #f9fbff;
	border-radius: 12px;
	padding: 0.8rem 0.9rem;
	font: inherit;
	color: #1d2330;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.contact textarea {
	resize: vertical;
}

.contact input:focus,
.contact textarea:focus {
	border-color: #3b7be3;
	box-shadow: 0 0 0 3px rgba(59, 123, 227, 0.18);
	background: #fff;
}

.check {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: #1d2330;
}
.check a {
	color: #3b7be3;
	text-decoration: none;
}
.check a:hover {
	text-decoration: underline;
}

.contact__submit {
	margin-top: 4px;
}
.contact__note {
	margin-top: 10px;
}

/* Responsive */
@media (max-width: 980px) {
	.contact__grid {
		grid-template-columns: 1fr;
	}
	.contact__form {
		grid-template-columns: 1fr;
	}
}