/* =========================================================
	CureComp Technology — red dark theme, layered over Bootstrap 5.3
	Loaded AFTER bootstrap.min.css so these overrides win.
	========================================================= */

/* ---------- 1. Brand tokens ---------- */
:root {
	/* Reds are split by job so every one of them clears WCAG AA:
		--cc-red     brand fill for graphics, borders, icons (not text)
		--cc-red-ink lighter red for text/links on dark  (6.3:1 on --cc-bg)
		--cc-btn     darker red so white button text hits 5.1:1           */
	--cc-red:      #ed2224;
	--cc-red-ink:  #ff5a5c;
	--cc-btn:      #d81a1c;
	/* Lifts on hover but stays dark enough for white label text (4.6:1);
		the pure brand #ed2224 would drop to 4.33:1. */
	--cc-btn-hover:#e51f21;

	--cc-bg:       #0d0e10;
	--cc-bg-2:     #121417;
	--cc-surface:  #17191d;
	--cc-surface-2:#1e2126;
	--cc-line:     rgba(255, 255, 255, .10);
	--cc-line-2:   rgba(255, 255, 255, .18);
	--cc-red-line: rgba(237, 34, 36, .38);

	--cc-text:     #e7eaee;
	--cc-muted:    #9aa4b0;

	--cc-ff-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--cc-ff-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

	--cc-radius:   14px;
	--cc-radius-lg:24px;
	--cc-shadow:   0 24px 60px -26px rgba(0, 0, 0, .85);
	--cc-glow:     0 0 0 1px var(--cc-red-line), 0 18px 46px -22px rgba(237, 34, 36, .5);
	--cc-sect:     clamp(3.5rem, 8vw, 6.5rem);
}

/* ---------- 2. Bootstrap variable overrides ---------- */
[data-bs-theme="dark"] {
	--bs-body-bg: var(--cc-bg);
	--bs-body-color: var(--cc-text);
	--bs-emphasis-color: #fff;
	--bs-secondary-color: var(--cc-muted);
	--bs-border-color: var(--cc-line);
	--bs-border-color-translucent: var(--cc-line);

	--bs-primary: var(--cc-red);
	--bs-primary-rgb: 237, 34, 36;
	--bs-link-color: var(--cc-red-ink);
	--bs-link-color-rgb: 255, 90, 92;
	--bs-link-hover-color: #ff8082;

	--bs-heading-color: #fff;
	--bs-code-color: var(--cc-red-ink);

	--bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--bs-body-font-size: 1.02rem;
	--bs-body-line-height: 1.68;
}

body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* Bootstrap's .row applies negative side margins of half the gutter, so a g-5
	row (48px gutter, -24px margins) pushes past the container's fixed 12px
	padding. Clamp only the horizontal gutter on narrow screens, where the
	columns stack anyway; the vertical gutter from g-5 is preserved. */
@media (max-width: 991.98px) {
	.row { --bs-gutter-x: 1.5rem; }
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3 {
	font-family: var(--cc-ff-display);
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: 1.14;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3.7vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.35rem); }

::selection { background: var(--cc-red); color: #fff; }

:focus-visible {
	outline: 2px solid var(--cc-red-ink);
	outline-offset: 3px;
	border-radius: 6px;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 3. Justified body copy ----------
	Requested: long text justified. Justification is switched off on narrow
	screens, where short line lengths open ugly rivers of white space. */
.text-justify {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}
@media (max-width: 575.98px) {
	.text-justify { text-align: left; hyphens: none; }
}

.lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--cc-muted); }
.muted, .text-muted { color: var(--cc-muted) !important; }
.small-note { font-size: .84rem; color: var(--cc-muted); }

/* ---------- 4. Section rhythm ---------- */
.section { padding-block: var(--cc-sect); position: relative; }
.section-tight { padding-block: clamp(2.4rem, 5vw, 3.8rem); }
.section-alt { background: var(--cc-bg-2); border-block: 1px solid var(--cc-line); }

.sect-head { max-width: 68ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.sect-head.mx-auto { text-align: center; }

.eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--cc-ff-mono);
	font-size: .73rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--cc-red-ink); font-weight: 600; margin-bottom: .85rem;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .65; }
.text-center .eyebrow::before, .sect-head.mx-auto .eyebrow::before { display: none; }

.grad {
	background: linear-gradient(100deg, #ff7a7c, var(--cc-red) 55%, #ff9a5c);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 5. Buttons ---------- */
.btn { font-weight: 600; border-radius: 999px; padding: .72rem 1.35rem; transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn-sm { padding: .5rem 1rem; font-size: .87rem; }
.btn svg { width: 17px; height: 17px; vertical-align: -3px; }

.btn-primary {
	--bs-btn-bg: var(--cc-btn);
	--bs-btn-border-color: var(--cc-btn);
	--bs-btn-hover-bg: var(--cc-btn-hover);
	--bs-btn-hover-border-color: var(--cc-btn-hover);
	--bs-btn-active-bg: #b81416;
	--bs-btn-active-border-color: #b81416;
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
	box-shadow: 0 12px 28px -14px rgba(237, 34, 36, .85);
}
.btn-outline-light {
	--bs-btn-border-color: var(--cc-line-2);
	--bs-btn-color: var(--cc-text);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: var(--cc-red);
	--bs-btn-hover-color: var(--cc-red-ink);
}
.btn-surface {
	--bs-btn-bg: var(--cc-surface-2);
	--bs-btn-border-color: var(--cc-line);
	--bs-btn-color: var(--cc-text);
	--bs-btn-hover-bg: var(--cc-surface-2);
	--bs-btn-hover-border-color: var(--cc-red);
	--bs-btn-hover-color: #fff;
}
.btn-wa {
	--bs-btn-bg: #25d366;
	--bs-btn-border-color: #25d366;
	--bs-btn-color: #04220e;
	--bs-btn-hover-bg: #1fbb59;
	--bs-btn-hover-border-color: #1fbb59;
	--bs-btn-hover-color: #04220e;
}

.link-arrow {
	display: inline-flex; align-items: center; gap: .4rem;
	color: var(--cc-red-ink); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .2s ease; }
.link-arrow:hover { color: #ff8082; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 6. Top bar + navbar ---------- */
.topbar {
	background: var(--cc-bg-2);
	border-bottom: 1px solid var(--cc-line);
	font-size: .8rem; color: var(--cc-muted);
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--cc-red-ink); }
.topbar .topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; flex-wrap: wrap; }

.navbar {
	background: color-mix(in srgb, var(--cc-bg) 86%, transparent);
	backdrop-filter: blur(14px) saturate(160%);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, background-color .25s ease;
	padding-block: .55rem;
}
.navbar.is-stuck { border-bottom-color: var(--cc-line); background: color-mix(in srgb, var(--cc-bg) 96%, transparent); }
.navbar-brand img { height: 34px; width: auto; display: block; }

.navbar .nav-link {
	color: var(--cc-muted);
	font-size: .93rem; font-weight: 500;
	padding: .5rem .8rem; border-radius: 999px;
	transition: color .18s ease, background-color .18s ease;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--cc-text); background: var(--cc-surface-2); }
.navbar .nav-link.active {
	color: #fff; background: var(--cc-surface-2);
	box-shadow: inset 0 0 0 1px var(--cc-red-line);
}
.navbar-toggler { border-color: var(--cc-line-2); padding: .4rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(237, 34, 36, .3); }

@media (max-width: 991.98px) {
	.navbar-collapse {
		margin-top: .8rem; padding: .6rem;
		background: var(--cc-surface); border: 1px solid var(--cc-line);
		border-radius: var(--cc-radius);
	}
	.navbar .nav-link { padding: .7rem .9rem; font-size: 1rem; }
}

/* ---------- 7. Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
/* Gradient stops are percentages of the element, not fixed pixel radii, so the
	glow keeps covering the full width on 1440p, ultrawide and 4K displays
	instead of petering out partway across. */
.hero-bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(75% 85% at 8% 0%,   rgba(237, 34, 36, .28), transparent 68%),
		radial-gradient(65% 80% at 95% 2%,  rgba(255, 122, 60, .15), transparent 70%),
		radial-gradient(85% 90% at 60% 105%, rgba(237, 34, 36, .14), transparent 70%);
}
.hero-grid {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
	background-image:
		linear-gradient(var(--cc-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--cc-line) 1px, transparent 1px);
	background-size: 58px 58px;
	mask-image: radial-gradient(ellipse 85% 85% at 50% 30%, #000 5%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 30%, #000 5%, transparent 75%);
}
.hero > .container { position: relative; z-index: 1; }

.pill {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .36rem .9rem .36rem .5rem; border-radius: 999px;
	border: 1px solid var(--cc-line-2); background: var(--cc-surface);
	font-size: .82rem; color: var(--cc-muted); margin-bottom: 1.3rem;
}
.pill b { color: var(--cc-text); font-weight: 600; }
.pill-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--cc-red);
	box-shadow: 0 0 0 4px rgba(237, 34, 36, .22);
	animation: ccPulse 2.2s ease-in-out infinite;
}
@keyframes ccPulse { 50% { box-shadow: 0 0 0 9px rgba(237, 34, 36, 0); } }
@media (prefers-reduced-motion: reduce) { .pill-dot { animation: none; } }

/* ---------- 8. Cards ---------- */
.card {
	--bs-card-bg: var(--cc-surface);
	--bs-card-border-color: var(--cc-line);
	--bs-card-border-radius: var(--cc-radius);
	--bs-card-spacer-x: 1.5rem;
	--bs-card-spacer-y: 1.5rem;
	--bs-card-color: var(--cc-text);
	height: 100%;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card-hover:hover {
	transform: translateY(-4px);
	border-color: var(--cc-red-line);
	box-shadow: var(--cc-shadow);
}
.card .card-title { font-family: var(--cc-ff-display); font-weight: 700; font-size: 1.12rem; margin-bottom: .45rem; }
.card .card-text { color: var(--cc-muted); font-size: .95rem; }
a.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
a.card .link-arrow { margin-top: auto; padding-top: 1rem; }

.card-feature {
	background: linear-gradient(165deg, var(--cc-surface), var(--cc-bg-2));
	position: relative; overflow: hidden;
}
.card-feature::after {
	content: ""; position: absolute; inset: auto -30% -60% auto; width: 260px; height: 260px;
	background: radial-gradient(circle, rgba(237, 34, 36, .22), transparent 65%);
	pointer-events: none;
}
.card-feature > * { position: relative; z-index: 1; }

.ico {
	width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
	background: linear-gradient(150deg, rgba(237, 34, 36, .26), rgba(237, 34, 36, .10));
	border: 1px solid var(--cc-red-line); color: var(--cc-red-ink);
	margin-bottom: 1rem; flex: none;
}
.ico svg { width: 22px; height: 22px; }

.tag-badge {
	position: absolute; top: 1.05rem; right: 1.05rem;
	font-family: var(--cc-ff-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
	padding: .25rem .55rem; border-radius: 999px;
	border: 1px solid var(--cc-red-line); color: var(--cc-red-ink);
	background: rgba(237, 34, 36, .12);
}

/* ---------- 9. Check lists ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--cc-muted); }
.checks li strong { color: var(--cc-text); font-weight: 600; }
.checks li::before {
	content: ""; flex: none; width: 20px; height: 20px; margin-top: .2rem; border-radius: 50%;
	background: rgba(237, 34, 36, .14);
	border: 1px solid var(--cc-red-line);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a5c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px; background-repeat: no-repeat; background-position: center;
}

/* ---------- 9b. Definition grid ----------
	Replaces the old <ul><li><strong>Label.</strong> description</li> pattern.
	A <dl class="row deflist g-0"> puts every term in one Bootstrap column and
	every description in the next, so labels and text line up as real columns
	instead of reflowing around each other. Stacks below 576px. */
.deflist { margin: 0; }
.deflist > dt, .deflist > dd { padding-block: .68rem; font-size: .95rem; line-height: 1.6; }
.deflist > dt {
	position: relative; padding-left: 1.75rem; padding-right: 1rem;
	font-weight: 600; color: var(--cc-text);
}
.deflist > dt::before {
	content: ""; position: absolute; left: 0; top: .92rem;
	width: 18px; height: 18px; border-radius: 50%;
	background: rgba(237, 34, 36, .14);
	border: 1px solid var(--cc-red-line);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a5c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 11px; background-repeat: no-repeat; background-position: center;
}
.deflist > dd { margin: 0; color: var(--cc-muted); }
.deflist > dt { border-top: 1px solid var(--cc-line); }
@media (min-width: 576px) {
	.deflist > dd { border-top: 1px solid var(--cc-line); }
	.deflist > dd { padding-left: .25rem; }
}
@media (max-width: 575.98px) {
	.deflist > dt { padding-bottom: .1rem; }
	.deflist > dd { padding-top: 0; padding-left: 1.75rem; }
}
.deflist > dt:first-of-type,
.deflist > dt:first-of-type ~ dd:first-of-type { border-top: 0; }

.chip {
	display: inline-block;
	font-family: var(--cc-ff-mono); font-size: .74rem; padding: .3rem .7rem; border-radius: 999px;
	border: 1px solid var(--cc-line); background: var(--cc-surface-2); color: var(--cc-muted);
}
.chip a { color: inherit; text-decoration: none; }

/* ---------- 10. Stats ---------- */
.stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	background: var(--cc-line); border: 1px solid var(--cc-line);
	border-radius: var(--cc-radius); overflow: hidden;
}
.stat { background: var(--cc-bg-2); padding: 1.5rem 1.2rem; text-align: center; }
.stat-n { font-family: var(--cc-ff-display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; color: #fff; letter-spacing: -.03em; }
.stat-l { font-size: .83rem; color: var(--cc-muted); }
@media (max-width: 767.98px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 11. Steps ---------- */
.steps { counter-reset: ccstep; list-style: none; padding: 0; margin: 0; }
/* Vertical variant; the .row variant lets steps flow across Bootstrap columns
	while the counter keeps incrementing in document order. */
.steps-stack { display: grid; gap: 1.1rem; }
.step { position: relative; padding-left: 3.3rem; }
.step::before {
	counter-increment: ccstep; content: counter(ccstep, decimal-leading-zero);
	position: absolute; left: 0; top: 0;
	width: 2.35rem; height: 2.35rem; border-radius: 12px; display: grid; place-items: center;
	font-family: var(--cc-ff-mono); font-size: .78rem; font-weight: 600; color: var(--cc-red-ink);
	border: 1px solid var(--cc-red-line); background: var(--cc-surface);
}
.step h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.step p { color: var(--cc-muted); font-size: .92rem; margin: 0; }

/* ---------- 12. Tables — aligned columns ----------
	Requested: table text lines up in proper columns. Fixed layout stops the
	browser re-flowing column widths per row, and every cell is top-aligned. */
.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--cc-muted);
	--bs-table-border-color: var(--cc-line);
	--bs-table-hover-bg: rgba(237, 34, 36, .06);
	--bs-table-hover-color: var(--cc-text);
	margin-bottom: 0;
	table-layout: fixed;
}
.table > :not(caption) > * > * { padding: .9rem 1.1rem; vertical-align: top; }
.table thead th {
	font-family: var(--cc-ff-mono); font-size: .71rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--cc-muted); font-weight: 600;
	background: var(--cc-surface-2); white-space: nowrap;
}
.table tbody th, .table td strong { color: var(--cc-text); font-weight: 600; }
.table tbody tr:last-child > * { border-bottom-width: 0; }
.table-wrap {
	border: 1px solid var(--cc-line); border-radius: var(--cc-radius);
	background: var(--cc-surface); overflow-x: auto; max-width: 100%;
}
/* Two-column spec/detail tables: label column fixed so values align. */
.table-spec { min-width: 460px; }
.table-spec th:first-child, .table-spec td:first-child { width: 38%; }
/* Wider comparison tables: even columns after the label. */
.table-compare { min-width: 680px; }
.table-compare th:first-child, .table-compare td:first-child { width: 28%; }
.table-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 13. Accordion ---------- */
.accordion {
	--bs-accordion-bg: var(--cc-surface);
	--bs-accordion-color: var(--cc-text);
	--bs-accordion-border-color: var(--cc-line);
	--bs-accordion-border-radius: var(--cc-radius);
	--bs-accordion-btn-color: var(--cc-text);
	--bs-accordion-btn-bg: var(--cc-surface);
	--bs-accordion-active-bg: var(--cc-surface-2);
	--bs-accordion-active-color: #fff;
	--bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(237, 34, 36, .25);
	--bs-accordion-body-color: var(--cc-muted);
}
.accordion-item { margin-bottom: .65rem; border-radius: var(--cc-radius) !important; overflow: hidden; }
.accordion-button { font-weight: 600; font-size: 1rem; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-button::after {
	filter: invert(48%) sepia(72%) saturate(4000%) hue-rotate(335deg) brightness(102%) contrast(96%);
}
.accordion-body { font-size: .95rem; }
.accordion-body a { color: var(--cc-red-ink); }

/* ---------- 14. Quote boxes ---------- */
.quote-box {
	border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.2rem);
	background: linear-gradient(160deg, var(--cc-surface), var(--cc-bg-2));
	display: flex; flex-direction: column; height: 100%;
}
.quote-box-hi { border-color: var(--cc-red-line); box-shadow: var(--cc-glow); }
.quote-box-title { font-family: var(--cc-ff-display); font-size: 1.5rem; font-weight: 700; color: #fff; margin: .25rem 0 .5rem; }
.quote-box .checks { margin: 1.1rem 0 1.5rem; }
.quote-box .btn { margin-top: auto; width: 100%; }

/* ---------- 15. Flow diagram ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; align-items: stretch; }
.flow-node {
	text-align: center; padding: 1.05rem .7rem; border-radius: var(--cc-radius);
	border: 1px solid var(--cc-line); background: var(--cc-surface);
}
.flow-node b { display: block; font-family: var(--cc-ff-display); font-size: .95rem; color: #fff; margin-bottom: .15rem; }
.flow-node span { color: var(--cc-muted); font-size: .78rem; }
.flow-node-hi { border-color: var(--cc-red-line); box-shadow: var(--cc-glow); }
.flow-arr { display: grid; place-items: center; color: var(--cc-red-ink); font-size: 1.1rem; }
@media (max-width: 991.98px) {
	.flow { grid-template-columns: 1fr; }
	.flow-arr { transform: rotate(90deg); padding: .1rem 0; }
}

/* ---------- 16. Clients ---------- */
/* Separators are drawn as a 1px box-shadow on each cell rather than as a
	background showing through the gaps, so a part-filled final row leaves
	matching empty space instead of a bare grey block. */
.client-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1px; background: var(--cc-bg-2);
	border: 1px solid var(--cc-line); border-radius: var(--cc-radius); overflow: hidden;
}
.client-cell {
	background: var(--cc-bg-2); box-shadow: 0 0 0 1px var(--cc-line); padding: 1rem 1.1rem;
	display: flex; align-items: center; gap: .75rem;
	font-size: .92rem; color: var(--cc-text); min-height: 68px;
	transition: background-color .2s ease;
}
.client-cell:hover { background: var(--cc-surface-2); }
.client-cell .client-no {
	font-family: var(--cc-ff-mono); font-size: .72rem; color: var(--cc-red-ink);
	flex: none; width: 1.6rem;
}
.client-cell .client-name { line-height: 1.35; }

/* ---------- 17. Open PON Foundation badge ---------- */
.opf-badge {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .45rem .95rem; border-radius: 999px;
	border: 1px solid var(--cc-red-line); background: rgba(237, 34, 36, .1);
	font-size: .84rem; color: var(--cc-text); text-decoration: none;
}
.opf-badge svg { width: 16px; height: 16px; color: var(--cc-red-ink); flex: none; }
.opf-badge b { font-weight: 600; }

.opf-panel {
	border: 1px solid var(--cc-red-line); border-radius: var(--cc-radius-lg);
	background:
		radial-gradient(60% 120% at 12% 0%, rgba(237, 34, 36, .16), transparent 62%),
		linear-gradient(150deg, rgba(237, 34, 36, .10), var(--cc-bg-2) 62%);
	padding: clamp(1.5rem, 3.5vw, 2.4rem);
}

/* Peer foundations the Open PON Foundation aligns with. */
.opf-peers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.opf-peer {
	border: 1px solid var(--cc-line); border-radius: var(--cc-radius);
	background: var(--cc-surface); padding: 1rem 1.1rem;
}
.opf-peer b { display: block; color: #fff; font-family: var(--cc-ff-display); font-size: .98rem; }
.opf-peer span { display: block; font-size: .84rem; color: var(--cc-muted); margin-top: .2rem; }

/* ---------- 18. CTA band ---------- */
/* Percentage-sized glows layered directly on the element so the wash covers the
	whole band at any width, rather than a fixed-height pseudo-element that ran
	out partway across on large displays. */
.cta {
	position: relative; overflow: hidden; border-radius: var(--cc-radius-lg);
	border: 1px solid var(--cc-line-2); padding: clamp(2rem, 5vw, 3.2rem);
	background:
		radial-gradient(70% 130% at 15% 0%,  rgba(237, 34, 36, .24), transparent 62%),
		radial-gradient(65% 120% at 88% 100%, rgba(237, 34, 36, .16), transparent 62%),
		linear-gradient(140deg, var(--cc-surface), var(--cc-bg-2) 60%);
	text-align: center;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { max-width: 24ch; margin-inline: auto; }

/* ---------- 19. Footer ---------- */
.footer { background: var(--cc-bg-2); border-top: 1px solid var(--cc-line); padding-block: clamp(2.6rem, 6vw, 3.8rem) 1.5rem; }
.footer img.footer-logo { height: 38px; width: auto; margin-bottom: 1rem; }
.footer h4 {
	font-family: var(--cc-ff-mono); font-size: .71rem; letter-spacing: .16em;
	text-transform: uppercase; color: var(--cc-muted); margin: 0 0 1rem; font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li + li { margin-top: .5rem; }
.footer a { font-size: .92rem; color: var(--cc-muted); text-decoration: none; overflow-wrap: break-word; }
.footer a:hover { color: var(--cc-red-ink); }
.footer p { font-size: .92rem; color: var(--cc-muted); }
.footer-bottom {
	margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--cc-line);
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	font-size: .81rem; color: var(--cc-muted);
}
.socials { display: flex; gap: .5rem; margin-top: 1rem; }
.socials a {
	width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
	border: 1px solid var(--cc-line); color: var(--cc-muted); transition: all .2s ease;
}
.socials a:hover { border-color: var(--cc-red); color: var(--cc-red-ink); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

/* ---------- 20. Forms ---------- */
.form-label { font-size: .85rem; font-weight: 600; color: var(--cc-text); margin-bottom: .35rem; }
.form-label .req { color: var(--cc-red-ink); }
.form-control, .form-select {
	background: var(--cc-bg); border: 1px solid var(--cc-line); color: var(--cc-text);
	border-radius: 10px; padding: .75rem .95rem; font-size: .94rem;
}
.form-control::placeholder { color: #6d7885; }
.form-control:focus, .form-select:focus {
	background: var(--cc-bg); color: var(--cc-text);
	border-color: var(--cc-red); box-shadow: 0 0 0 3px rgba(237, 34, 36, .2);
}
textarea.form-control { min-height: 130px; }

/* ---------- 21. Map ---------- */
.map-frame { border: 0; display: block; width: 100%; height: 320px; border-radius: var(--cc-radius); }

/* ---------- 22. Skip link ---------- */
.skip {
	position: absolute; left: -9999px; top: 0; z-index: 2000;
	background: var(--cc-red); color: #fff; padding: .7rem 1.1rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- 23. Reveal on scroll ----------
	Progressive enhancement only: the hidden start state is scoped to .js so a
	blocked script or a non-executing renderer shows content instead of a blank page. */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	.js .rv { opacity: 1; transform: none; }
}

/* ---------- 24. Print ---------- */
@media print {
	.navbar, .topbar, .footer, .cta, .skip { display: none !important; }
	body { background: #fff; color: #000; }
}