:root {
	--brand: #1e272e;

	/* derived palette */
	--brand-rgb: 30, 39, 46;
	--brand-soft: rgba(var(--brand-rgb), 0.12);
	--brand-border: rgba(var(--brand-rgb), 0.2);
	--brand-muted: rgba(255, 255, 255, 0.75);
}

/* =====================
   HERO
===================== */
.hero {
	position: relative;
	background: url('../img/data-center.jpg') center/cover no-repeat;
	background-blend-mode: overlay;
	background-color: rgba(0, 0, 0, 0.6);
}

.hero * {
	color: #fff;
}

.small-muted {
	color: var(--brand-muted);
}

/* =====================
   BADGES / ICONS
===================== */
.badge-soft {
	background: var(--brand-soft);
	border: 1px solid var(--brand-border);
}

.icon-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--brand);
	font-size: 22px;
	color: #fff;
}

/* =====================
   CARDS / SHADOWS
===================== */
.shadow-soft {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.feature-card,
.pricing-card {
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
}

/* =====================
   NAV / UTIL
===================== */
.nav-link {
	cursor: pointer;
}

.anchor-offset {
	scroll-margin-top: 84px;
}

.nav-pills .nav-link.active {
	background-color: var(--brand) !important;
}

.nav-link:hover,
.nav-link:active {
	color: color-mix(in srgb, var(--brand) 85%, black 15%);
	text-decoration: underline;
}

/* =====================
   ACCORDIONS
===================== */
.accordion-button {
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
}

.accordion-button:not(.collapsed) {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.accordion-button:not(.collapsed)::after {
	filter: invert(100%);
}

/* =====================
   BOOTSTRAP 5 BUTTON OVERRIDES
===================== */

/* Primary */
.btn-primary {
	--bs-btn-bg: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, black 15%);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, black 15%);
	--bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, black 25%);
	--bs-btn-active-border-color: color-mix(in srgb, var(--brand) 75%, black 25%);
}

/* Outline Primary */
.btn-outline-primary {
	--bs-btn-color: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand);
	--bs-btn-hover-border-color: var(--brand);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: color-mix(in srgb, var(--brand) 85%, black 15%);
	--bs-btn-active-border-color: color-mix(in srgb, var(--brand) 85%, black 15%);
}

/* Outline light */
.btn-outline-light:hover .bi {
	color: var(--brand) !important;
}

/* Secondary mapped to brand-muted style */
.btn-secondary {
	--bs-btn-bg: var(--brand-soft);
	--bs-btn-border-color: var(--brand-border);
	--bs-btn-color: var(--brand);
	--bs-btn-hover-bg: var(--brand);
	--bs-btn-hover-border-color: var(--brand);
	--bs-btn-hover-color: #fff;
}

/* Link buttons */
.btn-link {
	color: var(--brand);
}

.btn-link:hover {
	color: color-mix(in srgb, var(--brand) 85%, black 15%);
	text-decoration: underline;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
	pointer-events: none;
	background-color: rgba(var(--brand-rgb), 0.5);
	border-color: rgba(var(--brand-rgb), 0.5);
}

/* ==========================================================================
   intl-tel-input overrides
   ========================================================================== */
.iti {
	--iti-path-flags-1x: url('/assets/img/flags/flags.webp');
	--iti-path-flags-2x: url('/assets/img/flags/flags@2x.webp');

	width: 100%;
	display: block;
}

/* ==========================================================================
   DataTables overrides
   ========================================================================== */
.active > .page-link,
.page-link.active {
	color: #fff;
	background-color: var(--brand);
	border-color: var(--brand);
}