@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');

:root {
	--brand: #0878f9;
	--cyan: #23d4ff;
	--navy: #031326;
	--ink: #07182b;
	--muted: #66768b;
	--line: #dce8f4;
	--pale: #f3f8fd
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	color: var(--ink);
	font-family: Manrope, "Noto Sans SC", sans-serif;
	background: #fff;
	overflow-x: hidden
}

a {
	text-decoration: none
}

.shell {
	width: min(1200px, calc(100% - 40px));
	margin-inline: auto
}

.section {
	padding: 108px 0
}

.section-sm {
	padding: 76px 0
}

.kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase
}

.kicker:before {
	content: "";
	width: 30px;
	height: 2px;
	background: linear-gradient(90deg, var(--brand), var(--cyan))
}

.title {
	margin: 14px 0 0;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.18;
	letter-spacing: -.045em;
	font-weight: 800
}

.lead {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.9
}

.gradient-text {
	color: transparent;
	background: linear-gradient(92deg, #fff 0%, #8be6ff 85%);
	background-clip: text
}

.brand-btn {
	border: 0;
	border-radius: 2px;
	color: #fff;
	background: linear-gradient(105deg, #086ef0, #12a9f4);
	box-shadow: 0 12px 28px rgba(8, 120, 249, .24)
}

.brand-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-2px)
}

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: 82px;
	border-bottom: 1px solid rgba(255, 255, 255, .13);
	transition: .3s
}

.site-header.solid,
.site-header.scrolled {
	height: 72px;
	background: rgba(255, 255, 255, .95);
	border-color: #e4edf6;
	box-shadow: 0 8px 32px rgba(10, 37, 68, .08);
	backdrop-filter: blur(18px)
}

.nav-inner {
	height: 100%;
	display: flex;
	align-items: center
}

.logo {
	height: 39px;
	width: auto
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 38px;
	margin: auto
}

.nav-links a {
	position: relative;
	color: #fff;
	font-size: 14px;
	font-weight: 600
}

.site-header.solid .nav-links a,
.site-header.scrolled .nav-links a {
	color: #26384d
}

.nav-links a:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -16px;
	width: 0;
	height: 2px;
	background: var(--brand);
	transform: translateX(-50%);
	transition: .25s
}

.nav-links a:hover:after,
.nav-links a.active:after {
	width: 100%
}

.nav-phone {
	color: #fff;
	font-size: 13px;
	font-weight: 700
}

.site-header.solid .nav-phone,
.site-header.scrolled .nav-phone {
	color: var(--ink)
}

.mobile-menu {
	display: none;
	margin-left: auto
}

.mobile-panel {
	position: fixed;
	inset: 72px 14px auto;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 18px 40px rgba(0, 30, 70, .16)
}

.mobile-panel a {
	display: block;
	padding: 13px;
	color: var(--ink);
	font-weight: 600;
	border-bottom: 1px solid #edf2f7
}

.hero {
	position: relative;
	min-height: 820px;
	color: #fff;
	background: linear-gradient(90deg, rgba(1, 14, 31, .94), rgba(1, 30, 62, .76) 53%, rgba(1, 20, 45, .42)), url("https://www.corec.cc/static/upload/image/20250604/1749018014833664.png") center/cover;
	overflow: hidden
}

.grid-overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(75, 190, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 190, 255, .06) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(#000 20%, transparent 90%)
}

.hero-inner {
	position: relative;
	z-index: 2;
	min-height: 740px;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	align-items: center;
	padding-top: 90px
}

.hero h1 {
	margin: 20px 0 0;
	font-size: clamp(50px, 6.6vw, 88px);
	line-height: 1.04;
	letter-spacing: -.06em
}

.hero-copy {
	max-width: 700px;
	margin-top: 26px;
	color: #c8d9eb;
	font-size: 18px;
	line-height: 1.8
}

.orbit {
	position: relative;
	width: min(430px, 38vw);
	aspect-ratio: 1;
	margin: auto;
	border: 1px solid rgba(63, 199, 255, .3);
	border-radius: 50%;
	animation: spin 22s linear infinite
}

.orbit:before,
.orbit:after {
	content: "";
	position: absolute;
	border: 1px solid rgba(63, 199, 255, .22);
	border-radius: 50%;
	inset: 14%;
	transform: rotate(55deg)
}

.orbit:after {
	inset: 30%;
	background: radial-gradient(circle, rgba(18, 159, 255, .4), rgba(1, 31, 69, .2) 65%, transparent);
	box-shadow: 0 0 80px rgba(25, 176, 255, .35)
}

.node {
	position: absolute;
	width: 13px;
	height: 13px;
	border: 3px solid #baf3ff;
	border-radius: 50%;
	background: #11adff;
	box-shadow: 0 0 18px #28d4ff
}

.node.a {
	left: 8%;
	top: 26%
}

.node.b {
	right: 3%;
	top: 54%
}

.node.c {
	left: 46%;
	bottom: -6px
}

.core {
	position: absolute;
	inset: 41%;
	z-index: 2;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 40px #2bc8ff;
	animation: pulse 2s ease-in-out infinite
}

.ticker {
	position: absolute;
	z-index: 3;
	inset: auto 0 0;
	background: rgba(2, 18, 38, .78);
	border-top: 1px solid rgba(255, 255, 255, .13);
	backdrop-filter: blur(16px)
}

.ticker-grid {
	display: grid;
	grid-template-columns: 170px repeat(3, 1fr)
}

.ticker-item {
	padding: 23px 26px;
	border-right: 1px solid rgba(255, 255, 255, .1);
	color: #d6e5f2
}

.ticker-item small {
	display: block;
	color: #43ccff;
	margin-bottom: 5px
}

.page-hero {
	position: relative;
	padding: 176px 0 90px;
	color: #fff;
	background: radial-gradient(circle at 78% 28%, rgba(0, 154, 255, .3), transparent 28%), linear-gradient(120deg, #031326, #073c78);
	overflow: hidden
}

.page-hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(82, 197, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 197, 255, .06) 1px, transparent 1px);
	background-size: 54px 54px
}

.page-hero .shell {
	position: relative;
	z-index: 2
}

.page-hero h1 {
	font-size: clamp(40px, 5vw, 66px);
	margin: 15px 0 16px;
	letter-spacing: -.05em
}

.crumbs {
	color: #9fb5ca;
	font-size: 13px
}

.crumbs a {
	color: #fff
}

.page-hero p {
	max-width: 650px;
	color: #c6d7e7;
	line-height: 1.8
}

.tech-bg {
	background-color: var(--pale);
	background-image: radial-gradient(#b9d2ea 1px, transparent 1px);
	background-size: 24px 24px
}

.glass-card {
	position: relative;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: rgba(255, 255, 255, .9);
	overflow: hidden;
	transition: .35s
}

.glass-card:before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--brand), var(--cyan));
	transition: .35s
}

.glass-card:hover {
	border-color: #84c9ff;
	transform: translateY(-7px);
	box-shadow: 0 22px 60px rgba(21, 81, 145, .13)
}

.glass-card:hover:before {
	width: 100%
}

.icon-box {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	color: var(--brand);
	background: linear-gradient(145deg, #e8f5ff, #f8fcff);
	border: 1px solid #d6ecff
}

.stat-band {
	background: radial-gradient(circle at 50% 0, rgba(19, 129, 244, .25), transparent 48%), #041629;
	color: #fff
}

.stat-num {
	font-size: clamp(45px, 5vw, 70px);
	line-height: 1;
	font-weight: 800
}

.stat-num b {
	color: var(--cyan);
	font-size: .42em
}

.solution-grid,
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px
}

.visual-card {
	position: relative;
	min-height: 370px;
	overflow: hidden;
	color: #fff;
	background: #071a30
}

.visual-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .75;
	transition: .55s
}

.visual-card:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2, 16, 34, .05), rgba(2, 16, 34, .92))
}

.visual-card:hover img {
	transform: scale(1.07);
	opacity: .9
}

.visual-body {
	position: absolute;
	z-index: 2;
	inset: auto 28px 26px
}

.visual-body small {
	color: #59d8ff;
	letter-spacing: .14em
}

.visual-body h3 {
	font-size: 24px;
	margin: 10px 0
}

.visual-body p {
	color: #c6d5e2;
	font-size: 14px;
	line-height: 1.7
}

.filter-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 36px 0
}

.filter-btn.active {
	color: #fff;
	background: var(--brand);
	border-color: var(--brand)
}

.news-card {
	border: 1px solid var(--line);
	background: #fff;
	transition: .3s
}

.news-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 45px rgba(15, 63, 112, .11)
}

.news-img {
	height: 220px;
	width: 100%;
	object-fit: cover
}

.news-body {
	padding: 26px
}

.news-date {
	color: var(--brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em
}

.news-body h3 {
	min-height: 60px;
	margin: 12px 0;
	font-size: 20px;
	line-height: 1.5
}

.news-body p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.8
}

.featured {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	background: #061b33;
	color: #fff
}

.featured img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover
}

.featured-copy {
	padding: 54px;
	display: flex;
	flex-direction: column;
	justify-content: center
}

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 820px) 280px;
	gap: 72px;
	align-items: start
}

.article h2 {
	margin: 45px 0 16px;
	font-size: 28px
}

.article p {
	color: #4c5f73;
	font-size: 16px;
	line-height: 2;
	margin: 16px 0
}

.article img {
	width: 100%;
	margin: 28px 0
}

.toc {
	position: sticky;
	top: 110px;
	border-left: 2px solid #dce8f4;
	padding-left: 22px
}

.toc a {
	display: block;
	color: #68798b;
	padding: 8px 0;
	font-size: 14px
}

.toc a:hover {
	color: var(--brand)
}

.quote {
	padding: 26px 30px;
	border-left: 3px solid var(--brand);
	background: #eef7ff;
	color: #284661;
	line-height: 1.8
}

.about-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center
}

.about-img {
	position: relative
}

.about-img img {
	width: 100%;
	height: 510px;
	object-fit: cover
}

.about-img:before {
	content: "";
	position: absolute;
	inset: -18px 18px 18px -18px;
	border: 1px solid #65cfff;
	z-index: -1
}

.value-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line)
}

.value {
	padding: 35px 28px;
	background: #fff
}

.value b {
	font-size: 38px;
	color: #9bdfff;
	font-weight: 400
}

.timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	position: relative
}

.timeline:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	height: 1px;
	background: #bad6ed
}

.time-item {
	position: relative;
	padding: 35px 30px 0 0
}

.time-item:before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 1px var(--brand)
}

.contact-grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 70px
}

.contact-list {
	display: grid;
	gap: 16px
}

.contact-item {
	display: flex;
	gap: 18px;
	padding: 22px;
	border: 1px solid var(--line);
	background: #fff
}

.contact-form {
	padding: 42px;
	border: 1px solid var(--line);
	background: #fff;
	box-shadow: 0 24px 65px rgba(15, 66, 119, .1)
}

.map-box {
	min-height: 380px;
	display: grid;
	place-items: center;
	text-align: center;
	background: radial-gradient(circle at center, rgba(17, 147, 244, .14), transparent 25%), linear-gradient(45deg, #e9f3fb 25%, transparent 25%) 0 0/38px 38px, #f5f9fc;
	border: 1px solid var(--line)
}

.cta {
	position: relative;
	padding: 62px;
	color: #fff;
	overflow: hidden;
	background: linear-gradient(110deg, #075fdc, #079af0 62%, #29c9f9)
}

.cta:after {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	right: -90px;
	top: -210px;
	border: 70px solid rgba(255, 255, 255, .09);
	border-radius: 50%
}

.site-footer {
	background: #03111f;
	color: #8295a9;
	padding-top: 64px
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr .7fr .8fr 1.2fr;
	gap: 45px;
	padding-bottom: 48px
}

.site-footer h4 {
	color: #fff;
	margin: 0 0 18px
}

.site-footer p,
.site-footer li {
	font-size: 13px;
	line-height: 1.9
}

.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.site-footer a {
	color: #8295a9
}

.site-footer a:hover {
	color: #fff
}

.foot-bottom {
	display: flex;
	justify-content: space-between;
	padding: 21px 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 12px
}

.qr {
	width: 82px;
	height: 82px
}

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: .75s ease
}

.reveal.show {
	opacity: 1;
	transform: none
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

@keyframes pulse {
	50% {
		transform: scale(1.18);
		box-shadow: 0 0 60px #2bc8ff
	}
}

@media(max-width:950px) {

	.nav-links,
	.nav-phone {
		display: none
	}

	.mobile-menu {
		display: block
	}

	.hero-inner {
		grid-template-columns: 1fr
	}

	.orbit {
		display: none
	}

	.ticker {
		position: relative
	}

	.ticker-grid {
		grid-template-columns: 1fr 1fr
	}

	.ticker-item:first-child {
		grid-column: 1/-1
	}

	.solution-grid,
	.news-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.article-layout {
		grid-template-columns: 1fr
	}

	.toc {
		display: none
	}

	.about-split,
	.contact-grid {
		grid-template-columns: 1fr
	}

	.value-grid,
	.footer-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.timeline {
		grid-template-columns: repeat(2, 1fr);
		gap: 35px
	}

	.featured {
		grid-template-columns: 1fr
	}

	.featured-copy {
		padding: 36px
	}
}

@media(max-width:620px) {
	.shell {
		width: calc(100% - 28px)
	}

	.section {
		padding: 76px 0
	}

	.section-sm {
		padding: 58px 0
	}

	.hero {
		min-height: 760px
	}

	.hero-inner {
		min-height: 700px
	}

	.hero h1 {
		font-size: 48px
	}

	.ticker-grid,
	.solution-grid,
	.news-grid,
	.value-grid,
	.footer-grid,
	.timeline {
		grid-template-columns: 1fr
	}

	.ticker-item:first-child {
		grid-column: auto
	}

	.ticker-item {
		padding: 16px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .1)
	}

	.page-hero {
		padding: 140px 0 70px
	}

	.featured img {
		min-height: 260px
	}

	.featured-copy {
		padding: 28px
	}

	.contact-form {
		padding: 25px
	}

	.cta {
		padding: 36px 26px
	}

	.foot-bottom {
		flex-direction: column;
		gap: 8px
	}

	.about-img img {
		height: 360px
	}
}

/* Brand palette: derived from the provided gold-orange-red logo */
:root {
	--brand: #ff4d00;
	--cyan: #ffb000;
	--navy: #1c0904;
	--ink: #2b150e;
	--muted: #78655d;
	--line: #f0ddd3;
	--pale: #fff8f3;
	--color-primary: #ff4d00;
	--color-primary-content: #fff;
	--color-secondary: #ff9a00;
	--color-secondary-content: #351000;
	--color-accent: #f20d0d;
	--color-accent-content: #fff
}

.brand-btn {
	background: linear-gradient(105deg, #ffad00 0%, #ff6500 48%, #f20d0d 100%);
	box-shadow: 0 13px 30px rgba(242, 54, 13, .24)
}

.brand-btn:hover {
	box-shadow: 0 16px 36px rgba(242, 54, 13, .34)
}

.site-header:not(.solid):not(.scrolled) .logo {
	height: 52px;
	padding: 8px 12px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 8px 24px rgba(32, 7, 0, .15)
}

.nav-links a:after {
	background: linear-gradient(90deg, #ffad00, #ff4d00, #f20d0d)
}

.hero {
	background: radial-gradient(circle at 82% 46%, rgba(255, 74, 0, .34), transparent 24%), radial-gradient(circle at 70% 30%, rgba(255, 178, 0, .13), transparent 30%), linear-gradient(118deg, #170703 0%, #3a1005 48%, #150403 100%)
}

.grid-overlay {
	background-image: linear-gradient(rgba(255, 153, 31, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 153, 31, .075) 1px, transparent 1px)
}

.gradient-text {
	background: linear-gradient(92deg, #fff 0%, #ffd18c 44%, #ff6a1b 100%);
	background-clip: text
}

.orbit {
	border-color: rgba(255, 125, 26, .38);
	box-shadow: 0 0 90px rgba(255, 61, 0, .1)
}

.orbit:before,
.orbit:after {
	border-color: rgba(255, 160, 39, .27)
}

.orbit:after {
	background: radial-gradient(circle, rgba(255, 87, 0, .45), rgba(87, 18, 3, .2) 65%, transparent);
	box-shadow: 0 0 85px rgba(255, 68, 0, .38)
}

.node {
	border-color: #fff1d0;
	background: #ff6a00;
	box-shadow: 0 0 20px #ff9d00
}

.core {
	background: #fff4da;
	box-shadow: 0 0 44px #ff6a00
}

.ticker {
	background: rgba(27, 7, 2, .82);
	border-top-color: rgba(255, 169, 73, .2)
}

.ticker-item small {
	color: #ffb646
}

.page-hero {
	background: radial-gradient(circle at 80% 28%, rgba(255, 74, 0, .34), transparent 30%), radial-gradient(circle at 67% 60%, rgba(255, 174, 0, .11), transparent 26%), linear-gradient(120deg, #190803, #481304 62%, #230503)
}

.page-hero:after {
	background-image: linear-gradient(rgba(255, 154, 45, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 154, 45, .07) 1px, transparent 1px)
}

.tech-bg {
	background-color: #fff8f3;
	background-image: radial-gradient(#e8cbbd 1px, transparent 1px)
}

.glass-card:hover {
	border-color: #ffb28c;
	box-shadow: 0 22px 60px rgba(153, 53, 9, .12)
}

.icon-box {
	color: #ff4d00;
	background: linear-gradient(145deg, #fff0e5, #fffaf6);
	border-color: #ffd5bf
}

.stat-band {
	background: radial-gradient(circle at 50% 0, rgba(255, 87, 0, .24), transparent 48%), #1a0904
}

.stat-num b {
	color: #ffae28
}

.visual-card:after {
	background: linear-gradient(180deg, rgba(28, 5, 0, .04), rgba(28, 6, 0, .94))
}

.visual-body small {
	color: #ffbb52
}

.news-card:hover {
	box-shadow: 0 18px 45px rgba(128, 43, 7, .12)
}

.quote {
	border-left-color: #ff4d00;
	background: #fff2e8;
	color: #63301f
}

.contact-form {
	box-shadow: 0 24px 65px rgba(128, 43, 7, .1)
}

.map-box {
	background: radial-gradient(circle at center, rgba(255, 98, 20, .14), transparent 25%), linear-gradient(45deg, #f9eae1 25%, transparent 25%) 0 0/38px 38px, #fff9f5
}

.cta {
	background: linear-gradient(110deg, #ffad00 0%, #ff6500 48%, #f20d0d 100%)
}

.site-footer {
	background: #180904
}

.site-footer .logo {
	height: 52px;
	padding: 8px 12px;
	border-radius: 3px;
	background: #fff
}

.timeline:before {
	background: #f1c9b3
}

.time-item:before {
	background: #ff4d00;
	box-shadow: 0 0 0 1px #ff4d00
}

.about-img:before {
	border-color: #ff8a45
}

.link-primary,
.text-blue-600 {
	color: #ff4d00 !important
}

.text-blue-700 {
	color: #a72b00 !important
}

.text-sky-100 {
	color: #fff0d7 !important
}

.text-sky-300,
.text-sky-400 {
	color: #ffbc52 !important
}

.bg-blue-50 {
	background-color: #fff2e8 !important
}

.border-sky-400 {
	border-color: #ff7a2c !important
}

[style*="#54d5ff"],
[style*="#55d7ff"] {
	color: #ffb319 !important
}

@keyframes pulse {
	50% {
		transform: scale(1.18);
		box-shadow: 0 0 62px #ff6400
	}
}

/* Rounded visual system and enhanced motion */
:root {
	--pointer-x: 72%;
	--pointer-y: 18%
}

body:before {
	content: "";
	position: fixed;
	z-index: -1;
	left: var(--pointer-x);
	top: var(--pointer-y);
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 88, 0, .07), transparent 68%);
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: left .25s ease-out, top .25s ease-out
}

.btn,
.input,
.select,
.textarea,
.badge {
	border-radius: 12px !important
}

.brand-btn {
	position: relative;
	overflow: hidden;
	border-radius: 13px !important
}

.brand-btn:after {
	content: "";
	position: absolute;
	inset: -40% auto -40% -45%;
	width: 32%;
	transform: skewX(-22deg);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
	animation: buttonShine 3.8s ease-in-out infinite
}

.glass-card,
.news-card,
.visual-card,
.contact-item,
.contact-form,
.featured,
.map-box,
.cta,
.mobile-panel {
	border-radius: 20px !important
}

.visual-card img,
.news-img,
.featured img {
	border-radius: 20px
}

.value-grid {
	overflow: hidden;
	border-radius: 22px
}

.value:first-child {
	border-radius: 21px 0 0 21px
}

.value:last-child {
	border-radius: 0 21px 21px 0
}

.contact-item .icon-box,
.icon-box {
	border-radius: 18px
}

.about-img img {
	border-radius: 24px
}

.about-img:before {
	border-radius: 26px
}

.page-hero {
	border-radius: 0 0 36px 36px
}

.ticker {
	border-radius: 24px 24px 0 0
}

.site-footer {
	border-radius: 36px 36px 0 0
}

.site-header:not(.solid):not(.scrolled) .logo,
.site-footer .logo {
	border-radius: 12px
}

.mobile-panel {
	border-radius: 18px !important
}

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 12px;
	margin-left: 18px;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 999px;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	font: 700 12px/1 Manrope, sans-serif;
	letter-spacing: .06em;
	cursor: pointer;
	transition: .25s
}

.lang-switch:hover {
	color: #321006;
	border-color: #ff9b3f;
	background: #fff;
	transform: translateY(-2px)
}

.site-header.solid .lang-switch,
.site-header.scrolled .lang-switch {
	color: #553126;
	border-color: #edd3c7;
	background: #fff8f3
}

.site-header.solid .lang-switch:hover,
.site-header.scrolled .lang-switch:hover {
	color: #fff;
	border-color: #ff5b0a;
	background: #ff5b0a
}

.lang-switch svg {
	width: 15px;
	height: 15px
}

.hero:after,
.page-hero:before {
	content: "";
	position: absolute;
	width: 44vw;
	height: 44vw;
	right: -12vw;
	top: -18vw;
	border-radius: 50%;
	border: 1px solid rgba(255, 156, 44, .14);
	box-shadow: 0 0 0 70px rgba(255, 111, 0, .025), 0 0 0 140px rgba(255, 76, 0, .018);
	animation: haloPulse 7s ease-in-out infinite
}

.page-hero:before {
	z-index: 1;
	top: -28vw
}

.grid-overlay {
	animation: gridDrift 18s linear infinite
}

.orbit {
	animation: spin 22s linear infinite, floatY 5s ease-in-out infinite
}

.node {
	animation: nodeGlow 2.4s ease-in-out infinite
}

.node.b {
	animation-delay: .8s
}

.node.c {
	animation-delay: 1.6s
}

.visual-card:before,
.news-card:before,
.glass-card:after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	opacity: 0;
	border-radius: inherit;
	background: linear-gradient(120deg, transparent 25%, rgba(255, 190, 96, .15) 48%, transparent 70%);
	transform: translateX(-70%);
	transition: opacity .3s;
	pointer-events: none
}

.visual-card:hover:before,
.news-card:hover:before,
.glass-card:hover:after {
	opacity: 1;
	animation: cardSweep 1.15s ease
}

.motion-card {
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .25s ease, box-shadow .3s ease
}

.motion-card:hover {
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) !important
}

.motion-card .visual-body,
.motion-card .card-body,
.motion-card .news-body {
	transform: translateZ(18px)
}

.reveal {
	filter: blur(5px);
	transform: translateY(30px) scale(.985);
	transition: opacity .78s ease, transform .78s cubic-bezier(.2, .75, .25, 1), filter .78s ease
}

.reveal.show {
	filter: none;
	transform: none
}

.stat-num.counted {
	animation: numberGlow 1.1s ease
}

.kicker:before {
	transform-origin: left;
	animation: lineBreath 2.4s ease-in-out infinite
}

.cta {
	background-size: 180% 180%;
	animation: gradientFlow 7s ease infinite
}

.site-header {
	animation: headerDrop .65s ease both
}

@keyframes buttonShine {

	0%,
	55% {
		left: -45%
	}

	78%,
	100% {
		left: 130%
	}
}

@keyframes haloPulse {
	50% {
		transform: scale(1.08);
		opacity: .65
	}
}

@keyframes gridDrift {
	to {
		background-position: 64px 64px
	}
}

@keyframes floatY {
	50% {
		translate: 0 -12px
	}
}

@keyframes nodeGlow {
	50% {
		transform: scale(1.35);
		box-shadow: 0 0 30px #ff8a00
	}
}

@keyframes cardSweep {
	to {
		transform: translateX(80%)
	}
}

@keyframes numberGlow {
	50% {
		text-shadow: 0 0 28px rgba(255, 111, 0, .75)
	}
}

@keyframes lineBreath {
	50% {
		transform: scaleX(.55);
		opacity: .65
	}
}

@keyframes gradientFlow {
	50% {
		background-position: 100% 50%
	}
}

@keyframes headerDrop {
	from {
		transform: translateY(-100%);
		opacity: 0
	}

	to {
		transform: none;
		opacity: 1
	}
}

@media(max-width:950px) {
	.lang-switch {
		margin-left: auto;
		margin-right: 9px
	}

	.mobile-menu {
		margin-left: 0
	}

	.value:first-child,
	.value:last-child {
		border-radius: 0
	}
}

@media(max-width:620px) {
	.lang-switch {
		height: 34px;
		padding: 0 10px
	}

	.site-footer,
	.page-hero {
		border-radius: 24px 24px 0 0
	}

	.page-hero {
		border-radius: 0 0 24px 24px
	}

	.ticker {
		border-radius: 18px 18px 0 0
	}
}

@media(prefers-reduced-motion:reduce) {

	*,
	*:before,
	*:after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important
	}

	.reveal {
		opacity: 1;
		filter: none;
		transform: none
	}

	.motion-card:hover {
		transform: none !important
	}
}

/* Scroll performance optimization */
body:before {
	display: none !important
}

.site-header.scrolled,
.site-header.solid {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: rgba(255, 255, 255, .985)
}

.ticker {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: rgba(27, 7, 2, .96)
}

.section,
.section-sm {
	content-visibility: auto;
	contain-intrinsic-size: auto 760px
}

.glass-card,
.visual-card,
.news-card,
.contact-item,
.value {
	contain: layout style
}

.reveal {
	filter: none !important;
	transform: translate3d(0, 24px, 0) scale(.99);
	backface-visibility: hidden
}

.reveal.show {
	transform: translate3d(0, 0, 0) scale(1)
}

.motion-card {
	will-change: auto !important;
	backface-visibility: hidden
}

.motion-card:hover {
	will-change: transform
}

.motion-card .visual-body,
.motion-card .card-body,
.motion-card .news-body {
	transform: none !important
}

.grid-overlay {
	animation: none !important
}

.node {
	animation: none !important
}

.cta {
	animation: none !important;
	background-size: 100% 100%
}

.brand-btn:after {
	left: -55%;
	animation: none !important;
	transform: translate3d(0, 0, 0) skewX(-22deg)
}

.brand-btn:hover:after {
	animation: buttonShineGpu .72s ease-out 1 !important
}

.hero:after,
.page-hero:before,
.orbit {
	animation-play-state: paused !important
}

.hero.is-visible:after,
.page-hero.is-visible:before,
.hero.is-visible .orbit {
	animation-play-state: running !important
}

.hero,
.page-hero {
	isolation: isolate
}

.hero:after,
.page-hero:before {
	will-change: transform, opacity
}

.orbit {
	will-change: transform
}

.news-img,
.visual-card img,
.featured img,
.about-img img {
	content-visibility: auto
}

.site-header {
	transform: translateZ(0)
}

@keyframes buttonShineGpu {
	from {
		transform: translate3d(0, 0, 0) skewX(-22deg)
	}

	to {
		transform: translate3d(700%, 0, 0) skewX(-22deg)
	}
}

@media(max-width:950px) {
	.motion-card:hover {
		transform: translateY(-5px) !important
	}

	.hero:after,
	.page-hero:before {
		display: none
	}

	.section,
	.section-sm {
		contain-intrinsic-size: auto 620px
	}
}

@media(prefers-reduced-motion:reduce) {

	.hero:after,
	.page-hero:before,
	.orbit {
		animation-play-state: paused !important
	}
}

html.page-hidden *,
html.page-hidden *::before,
html.page-hidden *::after {
	animation-play-state: paused !important
}

/* Contact requirement field */
.contact-form textarea.textarea {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 144px;
	height: auto;
	padding: 14px 16px;
	line-height: 1.75;
	resize: vertical;
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-word;
	background: #fff;
	border-color: var(--line)
}

.contact-form textarea.textarea:focus {
	border-color: var(--brand);
	outline: 3px solid rgba(255, 77, 0, .12);
	outline-offset: 0
}

.contact-form .form-control {
	width: 100%;
	min-width: 0
}

/* Rich article and solution detail pages */
.reading-progress,
[data-reading-progress] {
	position: fixed;
	z-index: 120;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	transform: scaleX(0);
	transform-origin: left;
	background: linear-gradient(90deg, #ffb000, #ff5c00, #f20d0d);
	box-shadow: 0 0 12px rgba(255, 82, 0, .45);
	will-change: transform
}

.detail-badges {
	display: flex;
	gap: 9px;
	flex-wrap: wrap
}

.detail-badges span {
	padding: 7px 12px;
	border: 1px solid rgba(255, 190, 100, .35);
	border-radius: 999px;
	color: #ffd290;
	background: rgba(255, 105, 0, .08);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em
}

.article-meta {
	display: flex;
	gap: 24px;
	flex-wrap: wrap
}

.article-meta span+span:before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 13px 3px 0;
	border-radius: 50%;
	background: #ffad34
}

.article-stage {
	padding-top: 56px;
	background: linear-gradient(#fff8f3, #fff)
}

.article-cover {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 28px;
	background: #1b0904;
	box-shadow: 0 28px 80px rgba(78, 24, 4, .14)
}

.article-cover img {
	display: block;
	width: 100%;
	height: min(52vw, 590px);
	object-fit: cover;
	opacity: .84
}

.article-cover:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(24, 6, 1, .88))
}

.article-cover figcaption {
	position: absolute;
	z-index: 2;
	left: 42px;
	right: 42px;
	bottom: 34px;
	display: flex;
	justify-content: space-between;
	align-items: end;
	color: #fff
}

.article-cover figcaption span {
	color: #ffba4d;
	font-size: 12px;
	letter-spacing: .16em
}

.article-cover figcaption b {
	font-size: 20px
}

.article-section {
	padding-top: 78px
}

.article-summary {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 22px;
	align-items: start;
	margin-bottom: 36px;
	padding: 27px 30px;
	border: 1px solid #f2d9ca;
	border-radius: 20px;
	background: #fff8f2
}

.summary-mark {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	color: #fff;
	font-weight: 800;
	background: linear-gradient(145deg, #ffad00, #f1260b)
}

.article-summary p {
	margin: 0 !important;
	color: #553326 !important;
	font-size: 17px !important;
	font-weight: 600
}

.article-lead {
	font-size: 19px !important;
	color: #263a4d !important
}

.article h3 {
	margin: 30px 0 10px;
	font-size: 21px
}

.insight-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 30px 0
}

.insight-grid div {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff
}

.insight-grid b,
.insight-grid span {
	display: block
}

.insight-grid b {
	margin-bottom: 8px;
	color: var(--brand)
}

.insight-grid span {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.7
}

.article-steps {
	display: grid;
	gap: 12px;
	margin: 28px 0
}

.article-steps>div {
	display: flex;
	gap: 20px;
	padding: 21px 23px;
	border: 1px solid var(--line);
	border-radius: 17px;
	background: #fff
}

.article-steps i {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	height: 42px;
	border-radius: 13px;
	color: #fff;
	font-style: normal;
	font-weight: 800;
	background: linear-gradient(145deg, #ff9f00, #f23b0b)
}

.article-steps b {
	font-size: 17px
}

.article-steps p {
	margin: 5px 0 0 !important;
	font-size: 14px !important
}

.article-inline-cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	margin: 50px 0 35px;
	padding: 32px;
	border-radius: 22px;
	color: #fff;
	background: radial-gradient(circle at 85% 0, rgba(255, 174, 0, .22), transparent 30%), #251009
}

.article-inline-cta small {
	color: #ffbd58;
	letter-spacing: .12em
}

.article-inline-cta h3 {
	margin: 8px 0 4px
}

.article-inline-cta p {
	margin: 0 !important;
	color: #d9c4b9 !important;
	font-size: 14px !important
}

.article-end {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 25px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line)
}

.article-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.article-tags span {
	padding: 7px 11px;
	border-radius: 999px;
	background: #fff1e8;
	color: #a63b12;
	font-size: 12px
}

.share-button {
	padding: 8px 13px;
	border: 1px solid #efcdbb;
	border-radius: 999px;
	color: #76402d;
	background: #fff;
	cursor: pointer
}

.author-card {
	display: flex;
	gap: 18px;
	align-items: center;
	margin-top: 32px;
	padding: 24px;
	border-radius: 20px;
	background: #f7f9fb
}

.author-avatar {
	display: grid;
	place-items: center;
	flex: 0 0 62px;
	height: 62px;
	border-radius: 18px;
	color: #fff;
	font-size: 25px;
	font-weight: 900;
	background: linear-gradient(145deg, #ffad00, #f20d0d)
}

.author-card small,
.author-card b {
	display: block
}

.author-card p {
	margin: 5px 0 0 !important;
	font-size: 13px !important
}

.toc-cta {
	margin-top: 28px;
	padding: 20px;
	border-radius: 16px;
	background: #fff1e8
}

.toc-cta small {
	color: var(--brand);
	font-weight: 800
}

.toc-cta p {
	color: #6c554a;
	font-size: 13px;
	line-height: 1.7
}

.toc-cta a {
	color: var(--brand) !important;
	font-weight: 700
}

.toc a.active {
	color: var(--brand);
	font-weight: 800
}

.article-nav-section {
	padding: 0 0 76px
}

.article-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px
}

.article-nav a {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 25px 28px;
	border: 1px solid var(--line);
	border-radius: 18px;
	color: var(--ink);
	transition: .25s
}

.article-nav a:hover {
	border-color: #ff9b62;
	transform: translateY(-3px)
}

.article-nav small {
	color: var(--brand)
}

.article-nav .next {
	text-align: right
}

.mini-news {
	display: block;
	padding: 28px !important;
	color: var(--ink)
}

.mini-news span {
	color: var(--brand);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em
}

.mini-news h3 {
	min-height: auto;
	margin: 15px 0 8px
}

.mini-news p {
	color: var(--muted);
	font-size: 14px
}

.solution-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	margin-top: 28px
}

.solution-ghost {
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	background: rgba(255, 255, 255, .06)
}

.solution-ghost:hover {
	color: #321006;
	background: #fff
}

.solution-intro {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 70px;
	align-items: center
}

.solution-value {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	padding: 1px;
	overflow: hidden;
	border: 1px solid #efd7c9;
	border-radius: 24px;
	background: #efd7c9
}

.solution-value>small {
	grid-column: 1/-1;
	padding: 18px 22px;
	color: var(--brand);
	font-weight: 800;
	letter-spacing: .12em;
	background: #fff8f3
}

.solution-value>div {
	padding: 25px;
	background: #fff
}

.solution-value b,
.solution-value span {
	display: block
}

.solution-value b {
	font-size: 28px
}

.solution-value span {
	margin-top: 5px;
	color: var(--muted);
	font-size: 13px
}

.challenge-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 38px
}

.challenge-grid article {
	padding: 27px
}

.challenge-grid i {
	color: #ff9c5d;
	font-size: 34px;
	font-style: normal;
	font-weight: 300
}

.challenge-grid h3 {
	margin: 26px 0 10px;
	font-size: 20px
}

.challenge-grid p,
.capability-grid p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.8
}

.solution-architecture {
	color: #fff;
	background: radial-gradient(circle at 50% 20%, rgba(255, 99, 0, .22), transparent 38%), #190904
}

.solution-architecture .text-center>p {
	color: #bda99f
}

.architecture-map {
	max-width: 1000px;
	margin: 48px auto 0;
	padding: 38px;
	border: 1px solid rgba(255, 175, 82, .2);
	border-radius: 28px;
	background: rgba(255, 255, 255, .035)
}

.arch-source,
.arch-output {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 11px
}

.arch-source span,
.arch-output span {
	padding: 15px 10px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 13px;
	text-align: center;
	color: #e1d2ca;
	background: rgba(255, 255, 255, .045);
	font-size: 13px
}

.arch-line {
	display: grid;
	place-items: center;
	height: 38px
}

.arch-line i {
	display: block;
	width: 1px;
	height: 100%;
	background: linear-gradient(#ffb145, #f24a13)
}

.arch-core {
	padding: 30px;
	border: 1px solid rgba(255, 155, 49, .38);
	border-radius: 22px;
	text-align: center;
	background: linear-gradient(120deg, rgba(255, 173, 0, .13), rgba(242, 13, 13, .1));
	box-shadow: 0 0 55px rgba(255, 72, 0, .1)
}

.arch-core small,
.arch-core b {
	display: block
}

.arch-core small {
	color: #ffbd58;
	letter-spacing: .14em
}

.arch-core b {
	margin: 8px 0 22px;
	font-size: 27px
}

.arch-core div {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 9px
}

.arch-core span {
	padding: 10px 5px;
	border-radius: 10px;
	color: #f4ddd2;
	background: rgba(255, 255, 255, .07);
	font-size: 12px
}

.arch-output {
	grid-template-columns: repeat(4, 1fr)
}

.arch-output b {
	display: block;
	color: #fff;
	margin-bottom: 4px
}

.capability-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 45px
}

.capability-grid article {
	padding: 28px
}

.capability-grid h3 {
	margin: 23px 0 9px;
	font-size: 19px
}

.delivery-flow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: 55px
}

.delivery-flow article {
	position: relative;
	display: flex;
	gap: 16px;
	padding-right: 26px
}

.delivery-flow article:not(:last-child):after {
	content: "";
	position: absolute;
	left: 46px;
	right: 7px;
	top: 20px;
	height: 1px;
	background: linear-gradient(90deg, #ff7d2b, #efd5c7)
}

.delivery-flow i {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	height: 42px;
	border-radius: 50%;
	color: #fff;
	font-style: normal;
	font-weight: 800;
	background: linear-gradient(145deg, #ffad00, #f22b0c)
}

.delivery-flow small {
	color: var(--brand);
	font-weight: 800
}

.delivery-flow h3 {
	margin: 5px 0 8px
}

.delivery-flow p {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.7
}

.outcome-band {
	color: #fff;
	background: linear-gradient(120deg, #2b1008, #170603)
}

.outcome-band>.shell {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 70px;
	align-items: center
}

.outcome-band p {
	color: #cbb7ad
}

.outcome-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px
}

.outcome-grid div {
	padding: 25px 15px;
	border: 1px solid rgba(255, 169, 68, .2);
	border-radius: 17px;
	text-align: center;
	background: rgba(255, 255, 255, .035)
}

.outcome-grid b,
.outcome-grid span {
	display: block
}

.outcome-grid b {
	font-size: 19px;
	color: #ffb64b
}

.outcome-grid span {
	margin-top: 7px;
	color: #cbb7ad;
	font-size: 12px
}

@media(max-width:950px) {

	.solution-intro,
	.outcome-band>.shell {
		grid-template-columns: 1fr
	}

	.challenge-grid,
	.capability-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.arch-source {
		grid-template-columns: repeat(3, 1fr)
	}

	.arch-core div {
		grid-template-columns: repeat(3, 1fr)
	}

	.delivery-flow {
		grid-template-columns: repeat(2, 1fr);
		gap: 35px
	}

	.delivery-flow article:nth-child(2):after {
		display: none
	}

	.article-cover figcaption {
		left: 25px;
		right: 25px
	}

	.article-cover figcaption b {
		display: none
	}
}

@media(max-width:620px) {
	.article-summary {
		grid-template-columns: 1fr;
		padding: 22px
	}

	.summary-mark {
		width: 52px;
		height: 52px
	}

	.insight-grid,
	.article-nav,
	.challenge-grid,
	.capability-grid,
	.delivery-flow,
	.outcome-grid {
		grid-template-columns: 1fr
	}

	.article-inline-cta,
	.article-end {
		align-items: flex-start;
		flex-direction: column
	}

	.article-cover img {
		height: 280px
	}

	.article-cover figcaption {
		bottom: 20px
	}

	.arch-source,
	.arch-output,
	.arch-core div {
		grid-template-columns: repeat(2, 1fr)
	}

	.architecture-map {
		padding: 20px
	}

	.arch-core b {
		font-size: 21px
	}

	.delivery-flow article:after {
		display: none !important
	}

	.article-meta {
		gap: 7px 14px
	}

	.article-meta span+span:before {
		display: none
	}
}

/* ================= PBootCMS article content (solution-detail page) =================
   Scoped entirely to .container/.page-t/.showCont, which are only used on the
   pbootcms-rendered solution detail page, so this cannot affect any other page. */
.container {
	width: min(1200px, calc(100% - 40px));
	margin: 0 auto
}

.page-t {
	position: relative;
	padding: 168px 0 42px;
	color: #fff;
	overflow: hidden;
	background: radial-gradient(circle at 80% 25%, rgba(255, 107, 0, .32), transparent 30%), linear-gradient(120deg, #190803, #481304 62%, #230503)
}

.page-t:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 154, 45, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 154, 45, .07) 1px, transparent 1px);
	background-size: 54px 54px
}

.page-t.fy.ac {
	text-align: left
}

.page-t h2 {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.2
}

.page-t p {
	position: relative;
	z-index: 2;
	margin: 16px 0 0;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	color: #d8c3b8;
	font-size: 13px
}

.page-t p span {
	color: #d8c3b8
}

.showCont {
	max-width: 980px;
	margin: 64px auto 90px;
	padding: 0 20px;
	color: #425163;
	font-size: 15px;
	line-height: 1.95
}

.showCont title {
	display: none
}

.showCont p:empty {
	display: none;
	margin: 0
}

.showCont p {
	margin: 0 0 14px
}

.showCont img {
	max-width: 100%;
	border-radius: 16px
}

.showCont table {
	width: 100% !important;
	margin-bottom: 26px !important;
	border-collapse: collapse;
	box-shadow: 0 14px 40px rgba(30, 10, 0, .05)
}

.showCont td {
	font-family: inherit
}

.showCont table p {
	margin: 0
}

/* Section labels: plain <p>方案介绍</p> etc are direct children of .showCont, styled as kicker-style headings */
.showCont>p {
	margin: 46px 0 18px;
	padding-left: 16px;
	border-left: 3px solid var(--brand);
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.01em
}

.showCont>p:first-of-type {
	margin-top: 0
}

/* Brand-color remap: the pbootcms editor's canned blue palette (#1f497d/#2e75b6 and their
   tints) is force-mapped to the site's orange brand so pasted articles stay on-brand.
   Add more hex values below if the CMS template introduces new accent colors. */
.showCont [style*="background:#1f497d"] {
	background: linear-gradient(135deg, #2b1008, #170603) !important
}

.showCont [style*="background:#2e75b6"] {
	background: linear-gradient(120deg, #ffad00, #ff3d00) !important
}

.showCont [style*="#1f497d"] p,
.showCont [style*="background:#2e75b6"] p {
	color: #fff !important
}

.showCont [style*="border-left:4px solid #2e75b6"] {
	border-left: 4px solid var(--brand) !important;
	background: var(--pale) !important;
	border-radius: 12px !important
}

.showCont [style*="background:#ebf3fb"] {
	background: var(--pale) !important
}

.showCont [style*="color:#2e75b6"] {
	color: var(--brand) !important
}

.showCont [style*="color:#1f497d"] {
	color: #a72b00 !important
}

.showCont [style*="background:#f8fbff"] {
	background: #fff !important;
	border-color: var(--line) !important;
	border-radius: 10px !important
}

.showCont [style*="border:1px solid #dce8f5"] {
	border-color: var(--line) !important
}

@media(max-width:768px) {

	.showCont table,
	.showCont tbody,
	.showCont tr,
	.showCont td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box
	}

	.showCont td[colspan] {
		width: 100% !important
	}
}

@media(max-width:620px) {
	.page-t {
		padding: 130px 0 30px
	}

	.showCont {
		margin: 40px auto 60px;
		padding: 0 14px;
		font-size: 14px
	}

	.showCont>p {
		font-size: 18px;
		margin: 36px 0 14px
	}
}

/* 隐藏谷歌翻译 */
/* 隐藏 Google 翻译顶部横条 */
.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

/* 隐藏 Google 翻译的 iframe 横幅 */
.goog-te-banner-frame {
    display: none !important;
}

#goog-gt-tt {
    display: none !important;
}

.goog-te-balloon-frame {
    display: none !important;
}