/* ========================================
   Toprunner Product Page Styles (Template aligned)
   ======================================== */

:root {
	--gary: #333;
	--dark: #0e0e0e;
	--gold: #f1a322;
	--bg: #f5f8fb;
	--line: #dbe2ea;
	--text: #222;
	--muted: #667;
	--max: 1120px
}

body.light-bg h1,
body.light-bg h2,
body.light-bg h3,
body.light-bg h4,
body.light-bg h5,
body.light-bg h6,
.light-bg h1,
.light-bg h2,
.light-bg h3,
.light-bg h4,
.light-bg h5,
.light-bg h6,
.content-box h1,
.content-box h2,
.content-box h3,
.content-box h4,
.content-box h5,
.content-box h6,
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5,
.page-header h6,
.section:not(.news-section) h1,
.section:not(.news-section) h2,
.section:not(.news-section) h3,
.section:not(.news-section) h4,
.section:not(.news-section) h5,
.section:not(.news-section) h6 {
  color: #fff;
}
.wrap {
	width: min(calc(100% - 40px), var(--max));
	margin: auto
}

.breadcrumb {
	background: var(--bg);
	padding: 12px 0;
	font-size: 13px;
	color: var(--muted)
}
.hero {
	padding: 88px 0 76px;
	color: #fff;
	background: #333;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 48px;
	align-items: center
}
.tag {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: #ffffff20;
	font-size: 13px;
	font-weight: 700
}
.solutions-page-top-runer .section h1,h2 {
   color: #fff;
}
.solutions-page-top-runer .section p {
   color: #fff;
}
.hero h1 {
	font-size: clamp(36px, 5vw, 58px);
	line-height: 1.3;
	margin: 18px 0
}
.hero p {
	font-size: 18px;
	margin: 0 0 28px
}
.hero-box {
   color: #fff;
	padding: 28px;
	border: 1px solid #ffffff40;
	border-radius: 16px;
	background: #ffffff14
}
.hero-box ul li {
   color: #fff;
}
.hero-box strong {
	display: block;
	font-size: 20px;
	margin-bottom: 10px
}
.btns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap
}
.btn {
	display: inline-flex;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 800
}
.primary {
	background: var(--gold);
	color: #222
}
.outline {
	border: 1px solid #ffffffaa;
	color: #fff
}
section {
	padding: 86px 0
}
.alt {
	background: var(--gary)
}
.warp h2 {
   color: #fff;
}
h2 {
   color: #fff;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.4;
	text-align: center;
	margin: 0 0 16px
}
.lead {
	max-width: 820px;
	margin: 0 auto 48px;
	text-align: center;
	color: var(--muted)
}
.two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 46px;
	align-items: center
}
.two h3, .card h3, .feature h3 {
   color: #fff;
	margin-top: 0
}
.placeholder {
	min-height: 320px;
	border: 2px dashed #9eb0c3;
	border-radius: 14px;
	display: flex;
   justify-content: center;
	place-items: center;
	text-align: center;
	color: #5f7387;
	background: #eef3f8;
	padding: 24px;
	font-weight: 700
}
.placeholder img {
   max-width: 200px;
   margin: 0 8px;
}
.note {
	border-left: 4px solid var(--gold);
	background: #fff7e8;
	padding: 16px 18px
}
.cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}
.card, .feature {
	background: #383838;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 26px;
	box-shadow: 0 8px 24px #0b3a6f0d
}
.num {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--gary);
	color: #fff;
	font-weight: 800;
	margin-bottom: 16px
}
.card p, .feature p {
	color: var(--muted);
	font-size: 15px;
	margin-bottom: 0
}
.table {
   color: #fff;
	overflow: auto;
	border: 1px solid var(--line);
	border-radius: 12px
}
table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse
}
th, td {
	padding: 17px 20px;
	border-bottom: 1px solid var(--line);
	text-align: left
}
th {
	background: var(--gary);
	color: #fff
}
.features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px
}
.icon {
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: #eaf1f8;
	color: var(--gary);
	font-weight: 800;
	font-size: 21px;
	margin-bottom: 15px
}
.faq {
	max-width: 900px;
	margin: auto
}
details {
	border: 1px solid var(--line);
	border-radius: 10px;
	margin-bottom: 14px;
	background: #fff
}
summary {
	cursor: pointer;
	padding: 19px 24px;
	font-weight: 800
}
.answer {
	padding: 0 24px 20px;
	color: var(--muted)
}
.support {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px
}
.support div {
	background: #edf4fa;
	padding: 17px;
	border-radius: 8px;
	text-align: center;
	font-weight: 700
}
.contact {
	background: var(--dark);
	color: #fff;
	text-align: center
}
.contact h2 {
	color: #fff
}
.contact p {
	max-width: 720px;
	margin: 0 auto 26px
}


@media(max-width:900px) {
	.nav {
		display: none
	}
	.hero-grid, .two {
		grid-template-columns: 1fr
	}
	.cards {
		grid-template-columns: 1fr 1fr
	}
	.features, .support {
		grid-template-columns: 1fr 1fr
	}
}
@media(max-width:640px) {
	.wrap {
		width: min(calc(100% - 28px), var(--max))
	}
	.head {
		height: 62px
	}
	.hero {
		padding: 58px 0
	}
	.hero h1 {
		font-size: 34px
	}
	.hero p {
		font-size: 16px
	}
	section {
		padding: 62px 0
	}
	.cards, .features, .support {
		grid-template-columns: 1fr
	}
	.btn {
		width: 100%
	}
	.placeholder {
		min-height: 230px
	}
}