:root {
	--brand-navy: #080808;
	--brand-red: #e40b0b;
	--brand-red-bright: #ff4a4a;
	--surface: #161616;
	--surface-raised: #202020;
	--surface-soft: #0b0b0c;
	--text: #f5f5f5;
	--muted: #b5b5ba;
	--border: #343438;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}

body { background: var(--surface-soft); color: var(--text); }

#sidebar {
	background: linear-gradient(180deg, #070707 0%, #171717 100%);
	border-right: 1px solid rgba(228, 11, 11, .2);
	box-shadow: 8px 0 30px rgba(0, 0, 0, 0.3);
}

#sidebar nav a { color: rgba(255, 255, 255, 0.66); letter-spacing: .11em; }
#sidebar nav a:hover, #sidebar nav a.active { color: #fff; }
#sidebar nav a:after { background: linear-gradient(90deg, var(--brand-red), var(--brand-red-bright)); }

#intro {
	background: radial-gradient(circle at 82% 18%, rgba(228, 11, 11, .22), transparent 30%),
		radial-gradient(circle at 62% 85%, rgba(255, 74, 74, .08), transparent 34%),
		linear-gradient(135deg, #080808 0%, #151515 58%, #241010 100%);
}

#intro .inner { max-width: 900px; }
#intro .logo { max-width: 210px; margin-bottom: 1.75rem; }
#intro h1 { font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: 1.03; letter-spacing: -.045em; margin-bottom: 1.25rem; }
#intro .intro-copy { color: rgba(255,255,255,.78); font-size: 1.15rem; max-width: 680px; }

.eyebrow { color: var(--brand-red-bright) !important; font-size: .78rem !important; font-weight: 800; letter-spacing: .16em; margin-bottom: .7rem !important; text-transform: uppercase; }

.faq-search { margin: 2.25rem 0 1.5rem; max-width: 720px; }
.faq-search > label { display: block; color: #fff; font-size: .8rem; font-weight: 700; margin-bottom: .55rem; }
.faq-search-field { align-items: center; background: #171719; border: 1px solid #48484d; border-radius: 14px; box-shadow: 0 16px 36px rgba(0,0,0,.3); display: flex; min-height: 64px; padding: 0 .7rem; position: relative; }
.faq-search-field .icon { color: var(--brand-red-bright); left: 1.2rem; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.faq-search-field input[type="search"] { background: transparent; border: 0; box-shadow: none; color: var(--text); flex: 1; height: 62px; min-width: 0; padding: 0 1rem 0 2.8rem; position: relative; z-index: 1; }
.faq-search-field input[type="search"]:focus { background: transparent; box-shadow: none; }
.faq-search-field input[type="search"]::placeholder { color: #7f93a8; opacity: 1; }
.faq-search-field:focus-within { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(228,11,11,.14), 0 16px 36px rgba(0,0,0,.3); }
.faq-search-field button { background: #321717; border: 0; border-radius: 9px; box-shadow: none; color: #ff7979 !important; display: none; font-size: .72rem; font-weight: 800; height: 38px; letter-spacing: .06em; line-height: 38px; padding: 0 1rem; }
.faq-search-field button.visible { display: block; }
.search-status { color: rgba(255,255,255,.78) !important; font-size: .82rem !important; margin: .65rem 0 0 !important; min-height: 1.2rem; }

.wrapper:not(#intro) { background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.wrapper > .inner { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.wrapper:not(#intro) h2, .wrapper:not(#intro) h3 { color: var(--text); }
.wrapper:not(#intro) p, .wrapper:not(#intro) td { color: var(--muted); }

.section-heading { background: linear-gradient(135deg, #111111, #211313); border-bottom: 1px solid var(--border); padding: 4.5rem 8%; }
.section-heading h2 { color: var(--text); font-size: 2.35rem; margin-bottom: .65rem; }
.section-heading p:last-child { color: var(--muted); margin: 0; }

.features { background: transparent; border: 0; gap: 1rem; }
.features section {
	background: linear-gradient(145deg, var(--surface-raised), var(--surface));
	border: 1px solid var(--border) !important;
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
	margin: 0;
	padding: 2.25rem 2rem 2rem 5.8rem;
	display: flex;
	flex-direction: column;
	width: calc(50% - .5rem);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.features section:hover { border-color: #8f3030 !important; box-shadow: var(--shadow); transform: translateY(-3px); }
.features section .icon { color: var(--brand-red); left: 1.75rem; top: 2rem; }
.features section .icon:before { color: #fff; }
.features section .actions { margin-top: auto; }

/* MicroSIP: use the same card language as the remaining sections. */
#one.spotlights {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 0 6% 5.5rem;
}
#one.spotlights > .section-heading {
	grid-column: 1 / -1;
	margin: 0 -6.85% 1.25rem;
	padding-left: 12.8%;
}
#one.spotlights > section {
	background: linear-gradient(145deg, var(--surface-raised), var(--surface));
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
	display: grid;
	grid-template-columns: 32% 68%;
	min-height: 220px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#one.spotlights > section:hover {
	border-color: #8f3030;
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}
#one.spotlights > section > .image {
	background-position: center;
	background-size: cover;
	height: 100%;
	min-height: 220px;
	overflow: hidden;
	width: 100%;
}
#one.spotlights > section > .image:after {
	background: linear-gradient(90deg, transparent 65%, rgba(17, 28, 42, .35));
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}
#one.spotlights > section > .image img {
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
	width: 100%;
}
#one.spotlights > section:hover > .image img { transform: scale(1.055); }
#one.spotlights > section > .content {
	background: transparent;
	padding: 0;
	width: 100%;
}
#one.spotlights > section > .content > .inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem;
}
#one.spotlights > section h2 { font-size: 1.35rem; line-height: 1.3; }
#one.spotlights > section .actions { margin-top: auto; padding-top: .5rem; }

.button { border-color: var(--brand-red) !important; color: var(--brand-red-bright) !important; }
.button:hover { background: var(--brand-red); color: #fff !important; }
#intro .button { border-color: rgba(255,255,255,.75) !important; color: #fff !important; }

table { background: rgba(4, 13, 22, .28); }
table tbody tr { border-color: var(--border); }
table tbody tr:nth-child(2n + 1) { background-color: rgba(255, 255, 255, .025); }
table td { border-color: var(--border); }

a { color: #ff6262; }
a:hover { color: #ff9898; }

input, select, textarea { color: var(--text); }
hr { border-bottom-color: var(--border); }

.faq-hidden, .faq-empty-card { display: none !important; }
.wrapper.faq-section-hidden { display: none; }

#eleven .split > section:first-child { display: none; }
#eleven .split > section:last-child { width: 100%; }
#footer { background: #050505; border-top: 1px solid var(--border); }

@media screen and (max-width: 980px) {
	#intro h1 { font-size: 3.5rem; }
	.section-heading { padding: 3.5rem 3rem; }
	.features section { width: 100%; }
	.features section + section { margin-top: 1rem; }
	#one.spotlights { grid-template-columns: 1fr; padding-left: 3rem; padding-right: 3rem; }
	#one.spotlights > .section-heading { margin-left: -3rem; margin-right: -3rem; padding-left: 3rem; }
}

@media screen and (max-width: 736px) {
	#intro h1 { font-size: 2.55rem; }
	#intro .logo { max-width: 170px; }
	.faq-search-field { min-height: 56px; }
	.faq-search-field input[type="search"] { height: 54px; font-size: .9rem; }
	.section-heading { padding: 3rem 2rem; }
	.wrapper > .inner { padding-top: 3.5rem; padding-bottom: 3.5rem; }
	.features { gap: .8rem; }
	.features section + section { margin-top: .8rem; }
	.features section { padding: 1.8rem 1.4rem 1.8rem 4.8rem; }
	.features section .icon { left: 1.25rem; top: 1.55rem; }
	#one.spotlights { padding: 0 1.25rem 3.5rem; }
	#one.spotlights > .section-heading { margin: 0 -1.25rem 1rem; padding-left: 2rem; }
	#one.spotlights > section { display: flex; flex-direction: column; min-height: 0; }
	#one.spotlights > section > .image { height: 145px; min-height: 145px; }
	#one.spotlights > section > .content > .inner { padding: 1.75rem; }
}

@media screen and (max-width: 480px) {
	.features section { padding-left: 4.5rem; }
	.features section .icon { left: 1.1rem; position: absolute; top: 1.55rem; }
}