@charset "UTF-8";
/* ============================================================
       VIKING CODERS BRAND DESIGN SYSTEM
       Primary:   #10719b  (Viking Blue)
       Light:     #4caad8  (Sky Blue)
       Gold:      var(--vc-gold)  (Viking Gold)
       Dark BG:   #0c1a24  (Deep Navy)
       Mid BG:    #112233  (Navy)
       Accent BG: #152b3e  (Teal Navy)
       Text Muted:var(--vc-blue-light2)  (Steel Blue)
       Font:      Montserrat (400/500/600/700/800/900)
    ============================================================ */

:root {
	--vc-blue: #10719b;
	--vc-blue-light: #4caad8;
	--vc-blue-light2: #8aabbd;
	--vc-gold: #cda61c;
	--vc-dark: #0e0d0d;
	--vc-off-white: #f1ecec;
	--vc-blush: #e8d6d6;
	--vc-white: #ffffff;
	--vc-grey: #343a40;
	--font-heading: "Montserrat", sans-serif;
	--font-body: "Montserrat", sans-serif;
	--max-width: 1200px;
	--section-pad: 30px 0;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	background: #0c1a24;
}
::-webkit-scrollbar-thumb {
	background: linear-gradient(var(--vc-blue), var(--vc-gold));
	border-radius: 3px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: "Montserrat", sans-serif;
	background: var(--vc-dark);
	color: var(--vc-off-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img {
	max-width: 100%;
	display: block;
}
a {
	text-decoration: none;
}

.container {
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.25rem !important;
	padding-right: 1.25rem !important;
}

.c-yellow {
	color: var(--vc-gold);
}

/* Scroll progress bar */
#scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--vc-blue), var(--vc-gold));
	z-index: 9999;
	width: 0%;
	transition: width 0.1s linear;
}

/* Container */
.container {
	width: 100% !important;
	margin: 0 auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	max-width: 96rem !important;
}
@media (min-width: 640px) {
	.container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}
@media (min-width: 1024px) {
	.container {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

.color-black {
	color: var(--vc-black);
}

/* Utility classes */
.section-label {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vc-gold);
}
.section-label-blue {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vc-blue);
}
.tag-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(39, 137, 179, 0.35);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--vc-blue-light);
	background: rgba(39, 137, 179, 0.1);
	white-space: nowrap;
}
.btn-primary {
	background: var(--vc-blue);
	color: white;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.85rem 2.25rem;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.25s ease;
}
.btn-primary:hover {
	background: var(--vc-blue-light);
	box-shadow: 0 0 32px rgba(39, 137, 179, 0.45);
	transform: translateY(-1px);
}
.btn-gold {
	background: transparent;
	color: var(--vc-gold);
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.85rem 2.25rem;
	border-radius: 4px;
	border: 1.5px solid var(--vc-gold);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.25s ease;
}
.btn-gold:hover {
	background: rgba(205, 166, 28, 0.12);
	box-shadow: 0 0 24px rgba(205, 166, 28, 0.3);
	transform: translateY(-1px);
}

/* Grid helpers */
.grid {
	display: grid;
}
.grid-2 {
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.grid-3 {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.grid-4 {
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
@media (max-width: 767px) {
	.grid-2 {
		grid-template-columns: 1fr;
	}
	.grid-3 {
		grid-template-columns: 1fr;
	}
	.grid-4 {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.grid-3 {
		grid-template-columns: 1fr 1fr;
	}
}

/* Fade-in animation */
.fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.65s ease,
		transform 0.65s ease;
}
.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}
.fade-in-left {
	opacity: 0;
	transform: translateX(-32px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
.fade-in-left.visible {
	opacity: 1;
	transform: translateX(0);
}
.fade-in-right {
	opacity: 0;
	transform: translateX(32px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
.fade-in-right.visible {
	opacity: 1;
	transform: translateX(0);
}
.delay-1 {
	transition-delay: 0.1s;
}
.delay-2 {
	transition-delay: 0.2s;
}
.delay-3 {
	transition-delay: 0.3s;
}
.delay-4 {
	transition-delay: 0.4s;
}
.delay-5 {
	transition-delay: 0.5s;
}
.delay-6 {
	transition-delay: 0.6s;
}
.delay-7 {
	transition-delay: 0.7s;
}

/* ── NAVBAR ── */
#navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	transition: all 0.3s ease;
}
#navbar.scrolled {
	background: rgba(12, 26, 36, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4rem;
}
.navbar-logo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}
.navbar-logo-icon {
	width: 2rem;
	height: 2rem;
	border-radius: 4px;
	background: var(--vc-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.navbar-logo-text {
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	color: white;
	transition: color 0.2s;
}
.navbar-logo:hover .navbar-logo-text {
	color: var(--vc-blue-light);
}
.navbar-breadcrumb {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--vc-blue-light2);
}
@media (min-width: 768px) {
	.navbar-breadcrumb {
		display: flex;
	}
}
.navbar-breadcrumb a:hover {
	color: white;
}
.navbar-cta {
	display: none;
}
@media (min-width: 640px) {
	.navbar-cta {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		border: 1px solid rgba(205, 166, 28, 0.5);
		border-radius: 4px;
		color: var(--vc-gold);
		font-size: 0.875rem;
		font-weight: 700;
		transition: all 0.2s;
	}
	.navbar-cta:hover {
		background: rgba(205, 166, 28, 0.12);
	}
}

/* ---- HERO ---- */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding-bottom: 4rem;
	padding-top: 7rem;
}
.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("spamart-banner-2.jpg");
	background-size: cover;
	background-position: center;
}
.hero-overlay-1 {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #0c1a24 0%, rgba(12, 26, 36, 0.8) 50%, rgba(12, 26, 36, 0.3) 100%);
}
.hero-overlay-2 {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(12, 26, 36, 0.9) 0%,
		rgba(12, 26, 36, 0.5) 50%,
		rgba(12, 26, 36, 0.2) 100%
	);
}
.hero-content {
	position: relative;
	z-index: 10;
	padding-bottom: 4rem;
	padding-top: 7rem;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: flex-end;
}
@media (min-width: 1024px) {
	.hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}
.hero-label-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}
.hero-dot {
	color: rgba(255, 255, 255, 0.59);
	font-size: 0.75rem;
}
.hero-site-link {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--vc-blue-light2);
	transition: color 0.2s;
}
.hero-site-link:hover {
	color: var(--vc-blue-light);
}
.hero-h1 {
	font-weight: 900;
	font-size: clamp(3.5rem, 8vw, 7rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: white;
	margin-bottom: 0.75rem;
}
.hero-subtitle {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vc-gold);
	margin-bottom: 1.25rem;
}
.hero-copy {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.6);
	max-width: 32rem;
	margin-bottom: 1.75rem;
	line-height: 1.7;
	font-weight: 500;
}
.hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}
.hero-scroll {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	font-weight: 500;
}
.hero-scroll-line {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}
.hero-scroll-bar {
	width: 1px;
	height: 2rem;
	background: linear-gradient(to bottom, var(--vc-blue), transparent);
}
.hero-scroll-dot {
	position: relative;
	width: 0.6rem;
	height: 0.6rem;
	animation: scrollBob 1.6s ease-in-out infinite;
}
.hero-scroll-dot::before,
.hero-scroll-dot::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 0.07rem;
	height: 0.6rem;
	background: var(--vc-blue-light);
	border-radius: 1px;
}
.hero-scroll-dot::before {
	left: 75%;
	transform: rotate(45deg);
}
.hero-scroll-dot::after {
	right: 75%;
	transform: rotate(-45deg);
}

@keyframes scrollBob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
}

/* Hero right column — stat card */
.hero-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}
.hero-stat-card {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid rgba(205, 166, 28, 0.3);
	background: linear-gradient(
		135deg,
		rgba(205, 166, 28, 0.15) 0%,
		rgba(12, 26, 36, 0.8) 50%,
		rgba(12, 26, 36, 0.6) 100%
	);
	backdrop-filter: blur(12px);
	padding: 1.5rem 1.75rem;
}
.hero-stat-glow {
	position: absolute;
	top: -2rem;
	right: -2rem;
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background: rgba(205, 166, 28, 0.1);
	filter: blur(2rem);
	pointer-events: none;
}
.hero-stat-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	position: relative;
	z-index: 1;
}
.hero-stat-icon {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: rgba(205, 166, 28, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-stat-number {
	font-weight: 900;
	font-size: 3.75rem;
	color: var(--vc-gold);
	line-height: 1;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}
.hero-stat-divider {
	width: 1px;
	height: 3rem;
	background: rgba(205, 166, 28, 0.2);
	flex-shrink: 0;
}
.hero-stat-label {
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--vc-gold);
	white-space: nowrap;
}
.hero-stat-desc {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 0.25rem;
	line-height: 1.4;
}
.hero-bottom-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6rem;
	background: linear-gradient(to top, #0c1a24, transparent);
}

/* ---- STATS ---- */
.stats-section {
	background: var(--vc-off-white);
	padding: 50px 0;
}
.stats-label {
	text-align: center;
	margin-bottom: 3rem;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, 0.08);
}
.stat-card {
	background: #0c1a24;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: background 0.3s;
}
.stat-card:hover {
	background: #112233;
}
.stat-number {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 900;
	line-height: 1;
}
.stat-number.c-blue {
	color: var(--vc-blue-light);
}
.stat-number.gold {
	color: var(--vc-gold);
}
.stat-label {
	font-weight: 700;
	font-size: 0.9rem;
}
.stat-label.c-blue {
	color: var(--vc-blue-light);
}
.stat-label.gold {
	color: var(--vc-gold);
}
.stat-desc {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	line-height: 1.6;
	font-weight: 400;
}

/* ---- SECTIONS COMMON ---- */
.section-dark {
	background: var(--vc-dark);
	padding: 50px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.section-light {
	background: var(--vc-off-white);
	padding: 50px 0;
}
.split-grid {
	display: grid;
	gap: 3rem;
}
.section-heading {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	color: white;
	margin-bottom: 0;
}
.section-light .section-heading {
	color: var(--vc-black);
}
.gold-bar {
	width: 3rem;
	height: 4px;
	background: var(--vc-gold);
	margin-top: 1.25rem;
}
.blue-bar {
	width: 3rem;
	height: 4px;
	background: var(--vc-blue);
	margin-top: 1.25rem;
}

.body-text {
	color: var(--vc-blue-light2);
	font-size: 0.95rem;
	line-height: 1.75;
	font-weight: 400;
}
.section-light .body-text {
	color: var(--vc-black);
}
.body-text + .body-text {
	margin-top: 1rem;
}

/* ---- CHALLENGE CARDS ---- */
.cards-grid-3 {
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.08);
}
.challenge-card {
	background: #0c1a24;
	padding: 2rem;
	border-left: 2px solid transparent;
	transition:
		background 0.3s,
		border-color 0.3s;
	cursor: default;
}
.challenge-card:hover {
	background: #112233;
	border-left-color: var(--vc-gold);
}
.card-number {
	font-size: 2.5rem;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.47);
	display: block;
	margin-bottom: 1rem;
	transition: color 0.3s;
}
.challenge-card:hover .card-number {
	color: rgba(205, 166, 28, 0.5);
}
.card-body {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	line-height: 1.65;
	font-weight: 400;
}

.card-filler {
	background: #0c1a24;
	padding: 2rem;
	display: none;
	align-items: center;
	justify-content: center;
}
.card-filler-inner {
	text-align: center;
}
.card-filler-circle {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 2px solid rgba(39, 137, 179, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.75rem;
}
.card-filler-text {
	font-size: 0.7rem;
	color: var(--vc-blue-light2);
	font-weight: 500;
	line-height: 1.5;
}

/* ---- SOLUTION CARDS ---- */
.cards-grid-2 {
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.08);
}
.solution-card {
	background: #112233;
	padding: 2rem;
	border-top: 2px solid transparent;
	transition:
		background 0.3s,
		border-top-color 0.3s;
}
.solution-card:hover {
	background: #152b3e;
}
.solution-card.gold:hover {
	border-top-color: var(--vc-gold);
}
.solution-card.c-blue:hover {
	border-top-color: var(--vc-blue);
}

.solution-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}
.solution-icon.gold {
	background: rgba(205, 166, 28, 0.12);
	border: 1px solid rgba(205, 166, 28, 0.25);
	color: var(--vc-gold);
}
.solution-icon.c-blue {
	background: rgba(39, 137, 179, 0.12);
	border: 1px solid rgba(39, 137, 179, 0.25);
	color: var(--vc-blue-light);
}
.solution-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}
.solution-subtitle {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}
.solution-subtitle.gold {
	color: var(--vc-gold);
}
.solution-subtitle.c-blue {
	color: var(--vc-blue-light);
}
.solution-title {
	font-weight: 700;
	color: white;
	font-size: 1rem;
	margin-bottom: 0.75rem;
}
.solution-body {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	line-height: 1.65;
	font-weight: 400;
	margin-bottom: 1.25rem;
}
.solution-bullets {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.solution-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}
.bullet-check {
	flex-shrink: 0;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: 2px;
}
.bullet-check.gold {
	color: var(--vc-gold);
}
.bullet-check.c-blue {
	color: var(--vc-blue-light);
}
.bullet-text {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	line-height: 1.55;
	font-weight: 400;
}

/* Ongoing support badge */
.ongoing-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1rem;
	background: rgba(39, 137, 179, 0.1);
	border: 1px solid rgba(39, 137, 179, 0.25);
	border-radius: 4px;
	margin-bottom: 2.5rem;
}
.ongoing-badge svg {
	width: 1rem;
	height: 1rem;
	color: var(--vc-blue-light);
	flex-shrink: 0;
}
.ongoing-badge-title {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--vc-blue-light);
}
.ongoing-badge-text {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--vc-blue-light2);
}
/* ── CHALLENGE SECTION ── */
#challenge {
	padding: 6rem 0 7rem;
	background: #0c1a24;
}
.section-header-2col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 5rem;
}
@media (min-width: 1024px) {
	.section-header-2col {
		grid-template-columns: 1fr 1fr;
		gap: 5rem;
	}
}
.section-accent-bar {
	width: 3rem;
	height: 4px;
	margin-top: 1.25rem;
}
.section-body-text {
	color: var(--vc-blue-light2);
	font-size: 1rem;
	line-height: 1.75;
	font-weight: 400;
}
.section-body-text + .section-body-text {
	margin-top: 1rem;
}

/* Problem / Result cards */
.card-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}
.card-grid-3.owl-carousel {
	display: grid;
}
.problem-card {
	position: relative;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #0f2030;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s;
}
.problem-card:hover {
	border-color: rgba(255, 255, 255, 0.16);
}
.card-accent-bar {
	height: 4px;
	width: 100%;
}
.card-body {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.card-icon-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}
.card-icon-wrap {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.card-tag {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
}
.card-num-title {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.card-num {
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1;
	margin-top: 0.125rem;
	flex-shrink: 0;
}
.card-title {
	font-weight: 700;
	font-size: 1rem;
	color: white;
	line-height: 1.35;
	margin-bottom: 0 !important;
}
.problem-card .card-title {
	min-height: 3rem;
}
.card-text {
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	line-height: 1.65;
	font-weight: 400;
	flex: 1;
}
.card-impact {
	margin-top: 1.25rem;
	padding: 1rem 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(39, 137, 179, 0.1);
	border-radius: 0.75rem;
}
.card-impact-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	flex-shrink: 0;
}
.card-impact-text {
	font-size: 0.75rem;
	font-weight: 600;
}

/* Summary panel */
.summary-panel {
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #0f2030;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.summary-big-num {
	font-weight: 900;
	font-size: 3.75rem;
	color: #2789b3;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.summary-title {
	font-weight: 700;
	font-size: 1.125rem;
	color: white;
	line-height: 1.35;
	margin-bottom: 0.75rem;
}
.summary-text {
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	line-height: 1.65;
	font-weight: 400;
}
.summary-icons {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.summary-icon-wrap {
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Product image strip */
.product-strip {
	margin-top: 4rem;
}
.product-strip-label {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--vc-blue-light2);
	text-align: center;
	margin-bottom: 1.25rem;
}
.product-strip-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
@media (min-width: 768px) {
	.product-strip-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.product-img-wrap {
	position: relative;
	border-radius: 0.75rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #0f2030;
}
.product-img-wrap img {
	width: 100%;
	height: 10rem;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.product-img-wrap:hover img {
	transform: scale(1.05);
}
.product-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(12, 26, 36, 0.8), transparent);
}
.product-img-label {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: white;
}

/* ---- BEFORE/AFTER ---- */
.tab-toggle {
	display: flex;
	gap: 4px;
	background: #0c1a24;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	padding: 4px;
	width: fit-content;
	margin-bottom: 1.5rem;
}
.tab-btn {
	padding: 0.6rem 1.5rem;
	border-radius: 3px;
	font-size: 0.8rem;
	font-weight: 700;
	font-family: "Montserrat", sans-serif;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	color: var(--vc-blue-light2);
	background: transparent;
}
.tab-btn:hover {
	color: white;
}
.tab-btn.active-before {
	background: rgba(127, 29, 29, 0.7);
	color: #fca5a5;
}
.before-after-grid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}
.mockup-wrap {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.mockup-wrap img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}
.mockup-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.3rem 0.75rem;
	border-radius: 3px;
}
.mockup-badge.before {
	background: rgba(127, 29, 29, 0.8);
	color: #fca5a5;
	border: 1px solid rgba(185, 28, 28, 0.5);
}
.mockup-badge.after {
	background: rgba(39, 137, 179, 0.8);
	color: white;
	border: 1px solid rgba(76, 170, 216, 0.5);
}

.ba-title {
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}
.ba-desc {
	font-size: 0.82rem;
	line-height: 1.7;
	font-weight: 400;
	margin-bottom: 2rem;
}
.ba-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.ba-list.owl-carousel {
	display: flex;
}
.ba-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: #0f2030;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0.5rem;
}
.ba-icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.ba-icon.before {
	background: rgba(127, 29, 29, 0.4);
	border: 1px solid rgba(185, 28, 28, 0.5);
}
.ba-icon.after {
	background: rgba(39, 137, 179, 0.2);
	border: 1px solid rgba(39, 137, 179, 0.4);
}
.ba-icon svg {
	width: 0.6rem;
	height: 0.6rem;
}
.ba-icon.before svg {
	color: #f87171;
}
.ba-icon.after svg {
	color: var(--vc-blue-light);
}
.ba-text {
	color: var(--vc-blue-light2);
	font-size: 0.82rem;
	line-height: 1.6;
	font-weight: 400;
}

/* ---- SPA BUILDER ---- */
.spa-builder-grid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}
.spa-builder-img-wrap {
	position: relative;
}
.spa-builder-img-inner {
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
}
.spa-builder-img-inner img {
	width: 100%;
	height: auto;
	display: block;
}
.spa-builder-img-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6rem;
	background: linear-gradient(to top, #0c1a24, transparent);
}
.spa-builder-glow {
	position: absolute;
	inset: -0.5rem;
	background: rgba(39, 137, 179, 0.08);
	border-radius: 4px;
	filter: blur(2rem);
	z-index: -1;
}
.renders-callout {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: #112233;
	border-left: 4px solid var(--vc-gold);
	border-radius: 2px;
}
.renders-callout-label {
	margin-bottom: 0.5rem;
}
.renders-callout-text {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	line-height: 1.65;
	font-weight: 400;
}

.customizable-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	background: rgba(205, 166, 28, 0.12);
	border: 1px solid rgba(205, 166, 28, 0.3);
	border-radius: 3px;
	margin-top: 1rem;
}
.customizable-badge svg {
	width: 0.85rem;
	height: 0.85rem;
	color: var(--vc-gold);
}
.customizable-badge span {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--vc-gold);
}

.steps-label {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	font-weight: 500;
	margin-bottom: 1.25rem;
}
.step-item {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 4px;
	transition: border-color 0.2s;
	cursor: pointer;
}
.step-item:hover {
	border-color: rgba(255, 255, 255, 0.15);
}
.step-item.active {
	border-color: rgba(39, 137, 179, 0.5);
	background: #152b3e;
}
.step-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
}
.step-num {
	font-size: 0.8rem;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.65);
	transition: color 0.2s;
}
.step-item.active .step-num {
	color: var(--vc-blue-light);
}
.step-icon {
	color: var(--vc-blue-light2);
	transition: color 0.2s;
}
.step-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}
.step-item.active .step-icon {
	color: var(--vc-blue-light);
}
.step-title {
	flex: 1;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--vc-blue-light2);
	transition: color 0.2s;
}
.step-item.active .step-title {
	color: white;
}
.step-chevron {
	color: var(--vc-blue-light2);
	transition: transform 0.3s;
}
.step-chevron svg {
	width: 1rem;
	height: 1rem;
}
.step-item.active .step-chevron {
	transform: rotate(180deg);
}
.step-body {
	display: none;
	padding: 0 1rem 1rem 3.5rem;
}
.step-item.active .step-body {
	display: block;
}
.step-body p {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	line-height: 1.65;
	font-weight: 400;
}

/* ---- MOBILE SECTION ---- */
.mobile-grid {
	display: grid;
	gap: 4rem;
	align-items: center;
}
.mobile-features {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}
.mobile-feature {
	display: flex;
	gap: 1rem;
}
.mobile-feature-bar {
	flex-shrink: 0;
	width: 3px;
	background: linear-gradient(to bottom, var(--vc-blue), rgba(39, 137, 179, 0.1));
	border-radius: 2px;
	margin-top: 2px;
}
.mobile-feature-title {
	font-weight: 700;
	color: white;
	font-size: 0.85rem;
	margin-bottom: 0.4rem;
}
.mobile-feature-body {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	line-height: 1.65;
	font-weight: 400;
}

.phones-row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 1.5rem;
}
.phones-row.owl-carousel {
	display: flex;
}
.phone-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.phone-wrap.raised {
	margin-bottom: 2rem;
}
.phone-frame {
	position: relative;
	width: 10rem;
}
.phone-shell {
	background: #152b3e;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 2.5rem;
	overflow: hidden;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
.phone-notch-row {
	display: flex;
	justify-content: center;
	padding: 0.75rem 0 0.25rem;
}
.phone-notch {
	width: 5rem;
	height: 1rem;
	background: #0c1a24;
	border-radius: 100px;
}
.phone-screen {
	margin: 0 4px 4px;
	border-radius: 1.75rem;
	overflow: hidden;
	aspect-ratio: 9/18;
}
.phone-screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.phone-glow {
	position: absolute;
	inset: -0.75rem;
	background: rgba(39, 137, 179, 0.1);
	border-radius: 50%;
	filter: blur(2rem);
	z-index: -1;
}
.phone-label {
	font-size: 0.65rem;
	color: var(--vc-blue-light2);
	text-align: center;
	max-width: 9rem;
	line-height: 1.4;
	font-weight: 400;
}
.mobile-caption {
	text-align: center;
	color: var(--vc-blue-light2);
	font-size: 0.7rem;
	font-style: italic;
	font-weight: 400;
	margin-top: 2.5rem;
}

/* ---- RESULTS ---- */
.results-grid {
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin-bottom: 5rem;
}
.result-card {
	background: #0c1a24;
	padding: 1.75rem;
	border-bottom: 2px solid transparent;
	transition:
		background 0.3s,
		border-bottom-color 0.3s;
}
.result-card:hover {
	background: #112233;
	border-bottom-color: var(--vc-blue);
}
.result-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.result-icon.c-blue {
	background: rgba(39, 137, 179, 0.12);
	border: 1px solid rgba(39, 137, 179, 0.25);
	color: var(--vc-blue-light);
}
.result-icon.gold {
	background: rgba(205, 166, 28, 0.12);
	border: 1px solid rgba(205, 166, 28, 0.25);
	color: var(--vc-gold);
}
.result-icon svg {
	width: 1.1rem;
	height: 1.1rem;
}
.result-title {
	font-weight: 700;
	color: white;
	font-size: 0.85rem;
	margin-bottom: 0.5rem;
}
.result-body {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	line-height: 1.65;
	font-weight: 400;
}

/* ── Testimonial ── */
.testimonial-section {
	background: var(--vc-dark);
	padding: 50px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.testimonial-inner {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
}
.testimonial-quote-mark {
	color: var(--vc-blue);
	font-size: 4rem;
	line-height: 1;
	font-family: Georgia, serif;
	margin-bottom: -0.5rem;
}
.testimonial-text {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	font-weight: 500;
	color: white;
	line-height: 1.7;
	font-style: italic;
}
.testimonial-rule {
	width: 48px;
	height: 2px;
	background: var(--vc-blue);
	border-radius: 2px;
}
.testimonial-name {
	font-weight: 700;
	font-size: 0.95rem;
	color: white;
	letter-spacing: 0.03em;
}
.testimonial-title {
	font-size: 0.82rem;
	color: var(--vc-blue-light);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}
.testimonial-placeholder {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
}
.toggle-checkbox {
	display: none;
}
.testimonial-toggle {
	display: none;
	font-size: 1.1rem;
	font-weight: 600;
	margin-top: -2rem;
	cursor: pointer;
}

/* ---- CTA ---- */
.cta-section {
	background: var(--vc-dark);
	padding: 50px 0;
	position: relative;
	overflow: hidden;
}
.cta-glow-1 {
	position: absolute;
	width: 37rem;
	height: 25rem;
	background: rgba(39, 137, 179, 0.08);
	border-radius: 50%;
	filter: blur(7rem);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.cta-glow-2 {
	position: absolute;
	width: 25rem;
	height: 18rem;
	background: rgba(205, 166, 28, 0.05);
	border-radius: 50%;
	filter: blur(6rem);
	top: 50%;
	left: 65%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.cta-inner {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}
.cta-heading {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 900;
	color: white;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}
.cta-body {
	color: var(--vc-blue-light2);
	font-size: 1rem;
	line-height: 1.7;
	font-weight: 400;
	margin-bottom: 2.5rem;
}
.cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
}
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 2rem;
	background: #0157a7;
	color: white;
	font-weight: 700;
	font-size: 0.85rem;
	font-family: "Montserrat", sans-serif;
	border-radius: 4px;
	text-decoration: none;
	transition:
		background 0.2s,
		transform 0.2s;
	letter-spacing: 0.02em;
	border: none;
	cursor: pointer;
}
.btn-primary:hover {
	background: var(--vc-blue-light);
	transform: translateY(-2px);
}
.btn-primary svg {
	width: 1rem;
	height: 1rem;
}
.btn-gold {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 2rem;
	background: transparent;
	color: var(--vc-gold);
	font-weight: 700;
	font-size: 0.85rem;
	font-family: "Montserrat", sans-serif;
	border-radius: 4px;
	text-decoration: none;
	border: 1px solid rgba(205, 166, 28, 0.4);
	transition:
		background 0.2s,
		border-color 0.2s,
		transform 0.2s;
	letter-spacing: 0.02em;
	cursor: pointer;
}
.btn-gold:hover {
	background: rgba(205, 166, 28, 0.1);
	border-color: var(--vc-gold);
	transform: translateY(-2px);
}
.btn-gold svg {
	width: 1rem;
	height: 1rem;
}

.trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.trust-badge {
	text-align: center;
}
.trust-badge-label {
	font-weight: 700;
	color: var(--vc-blue-light);
	font-size: 0.82rem;
}
.trust-badge-sub {
	color: var(--vc-blue-light2);
	font-size: 0.7rem;
	font-weight: 400;
	margin-top: 2px;
}

/* ---- FOOTER ---- */
footer {
	background: #060f16;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 4rem 0 2rem;
}
.footer-grid {
	display: grid;
	gap: 2.5rem;
	margin-bottom: 3rem;
}
.footer-brand-name {
	font-weight: 700;
	font-size: 1rem;
	color: white;
	margin-bottom: 0.5rem;
}
.footer-brand-desc {
	color: var(--vc-blue-light2);
	font-size: 0.8rem;
	line-height: 1.6;
	font-weight: 400;
	max-width: 22rem;
}
.footer-col-title {
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vc-blue-light);
	margin-bottom: 1rem;
}
.footer-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.footer-links li a {
	color: var(--vc-blue-light2);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 400;
	transition: color 0.2s;
}
.footer-links li a:hover {
	color: var(--vc-blue-light);
}
.footer-bottom {
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	text-align: center;
}
.footer-copy {
	color: rgba(255, 255, 255, 0.3);
	font-size: 0.72rem;
	font-weight: 400;
}
.footer-copy a {
	color: var(--vc-blue-light);
	text-decoration: none;
}

/* ---- FADE-IN ANIMATION ---- */
.fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.65s ease,
		transform 0.65s ease;
}
.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}
.fade-in-left {
	opacity: 0;
	transform: translateX(-24px);
	transition:
		opacity 0.65s ease,
		transform 0.65s ease;
}
.fade-in-left.visible {
	opacity: 1;
	transform: translateX(0);
}
.fade-in-right {
	opacity: 0;
	transform: translateX(24px);
	transition:
		opacity 0.65s ease,
		transform 0.65s ease;
}
.fade-in-right.visible {
	opacity: 1;
	transform: translateX(0);
}

/* Delay utilities */
.delay-1 {
	transition-delay: 0.1s;
}
.delay-2 {
	transition-delay: 0.2s;
}
.delay-3 {
	transition-delay: 0.3s;
}
.delay-4 {
	transition-delay: 0.4s;
}
.delay-5 {
	transition-delay: 0.5s;
}
.w-full {
	width: 100% !important;
}
.mxw-full {
	max-width: 100% !important;
}
/* ── SPA BUILDER ── */
#spa-builder {
	padding: 6rem 0 7rem;
	background: #0c1a24;
}
.spa-builder-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	margin-top: 1rem;
	background: rgba(205, 166, 28, 0.12);
	border: 1px solid rgba(205, 166, 28, 0.3);
	border-radius: 4px;
}
.spa-builder-badge-text {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--vc-gold);
}
.spa-builder-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}
@media (min-width: 1024px) {
	.spa-builder-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}
.spa-builder-img-wrap {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.spa-builder-img-wrap img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.spa-builder-img-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6rem;
	background: linear-gradient(to top, #0c1a24, transparent);
}
.spa-builder-callout {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: #112233;
	border-left: 4px solid var(--vc-gold);
	border-radius: 4px;
}
.spa-builder-callout-label {
	margin-bottom: 0.5rem;
}
.spa-builder-callout-text {
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	line-height: 1.65;
	font-weight: 400;
}
.steps-label {
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 1.25rem;
}
.step-item {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	margin-bottom: 4px;
	transition:
		border-color 0.3s,
		background 0.3s;
}
.step-item.active {
	border-color: rgba(39, 137, 179, 0.5);
	background: #152b3e;
}
.step-item:not(.active):hover {
	border-color: rgba(255, 255, 255, 0.15);
}
.step-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
}
.step-num {
	font-weight: 900;
	font-size: 0.875rem;
	transition: color 0.2s;
}
.step-num-active {
	color: var(--vc-blue-light);
}
.step-num-inactive {
	color: rgba(255, 255, 255, 0.2);
}
.step-icon {
	transition: color 0.2s;
}
.step-icon-active {
	color: var(--vc-blue-light);
}
.step-icon-inactive {
	color: var(--vc-blue-light2);
}
.step-title {
	font-weight: 600;
	font-size: 0.875rem;
	flex: 1;
	transition: color 0.2s;
}
.step-title-active {
	color: white;
}
.step-title-inactive {
	color: var(--vc-blue-light2);
}
.step-chevron {
	width: 1rem;
	height: 1rem;
	color: var(--vc-blue-light2);
	transition: transform 0.3s;
}
.step-chevron.open {
	transform: rotate(180deg);
}
.step-body {
	display: none;
	padding: 0 1rem 1rem 3.5rem;
}
.step-body.open {
	display: block;
}
.step-body-text {
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	line-height: 1.65;
	font-weight: 400;
}

/* ── SOLUTION ── */
#solution {
	padding: 6rem 0 7rem;
	background: #112233;
}
.ongoing-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	margin-bottom: 3rem;
	background: rgba(39, 137, 179, 0.1);
	border: 1px solid rgba(39, 137, 179, 0.25);
	border-radius: 0.75rem;
}
.ongoing-badge-label {
	color: var(--vc-blue-light);
	font-size: 0.875rem;
	font-weight: 600;
}
.ongoing-badge-text {
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	font-weight: 400;
}
.section-light .ongoing-badge-title {
	color: var(--vc-blue);
}
.section-light .ongoing-badge-label {
	color: var(--vc-blue);
}
.section-light .ongoing-badge-text {
	color: var(--vc-blue);
}
.section-light .ongoing-badge svg {
	color: var(--vc-blue);
}
@media (max-width: 639px) {
	.ongoing-badge-text {
		display: none;
	}
}

/* Solution card visual mini-components */
.mini-visual {
	margin-bottom: 1.25rem;
}
.mini-before-after-bar {
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0.75rem;
}
.mini-bar-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.3);
	margin-bottom: 0.5rem;
}
.mini-bar-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
}
.mini-bar-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	flex-shrink: 0;
}
.mini-bar-text {
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, 0.3);
}
.mini-arrow-row {
	display: flex;
	justify-content: center;
	margin: 0.375rem 0;
}
.mini-arrow-circle {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mini-phone {
	position: relative;
	width: 5rem;
	height: 9rem;
	border-radius: 1rem;
	border: 2px solid;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0 auto;
}
.mini-phone-notch {
	height: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mini-phone-notch-bar {
	width: 1.5rem;
	height: 0.25rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
}
.mini-phone-screen {
	flex: 1;
	padding: 0.375rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.mini-phone-home-btn {
	height: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mini-phone-home-dot {
	width: 1rem;
	height: 0.25rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
}
.mini-phone-chips {
	display: flex;
	gap: 0.375rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.5rem;
}
.mini-phone-chip {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
}
.mini-step-list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.mini-step-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	border-radius: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.mini-step-num {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 900;
	flex-shrink: 0;
}
.mini-step-text {
	font-size: 0.7rem;
}
.mini-step-dot {
	margin-left: auto;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	flex-shrink: 0;
}
.tech-card {
	border-radius: 0.75rem;
	border: 1px solid;
	padding: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.625rem;
}
.tech-card-icon {
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tech-card-name {
	font-weight: 700;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.8);
}
.tech-card-sub {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.35);
	margin-top: 0.125rem;
}
.feature-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.feature-chip {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.45);
}

/* ── TRANSFORMATION ── */
#transformation {
	padding: 6rem 0 7rem;
	background: #152b3e;
}
.tab-bar {
	display: flex;
	gap: 4px;
	background: #0c1a24;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	padding: 4px;
	width: fit-content;
	margin-bottom: 2.5rem;
}
.tab-btn {
	padding: 0.625rem 1.5rem;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	background: transparent;
	color: var(--vc-blue-light2);
}
.tab-btn:hover {
	color: white;
}
.tab-btn.active-before {
	background: rgba(127, 29, 29, 0.7);
	color: #fca5a5;
}
.tab-btn.active-after {
	background: #035f87;
	color: white;
}
.transform-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}
@media (min-width: 1024px) {
	.transform-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}
.transform-img-wrap {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.transform-img-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.375rem 0.75rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
}
.transform-img-badge-before {
	background: rgba(127, 29, 29, 0.8);
	color: #fca5a5;
	border: 1px solid rgba(185, 28, 28, 0.5);
}
.transform-img-badge-after {
	background: rgba(39, 137, 179, 0.8);
	color: white;
	border: 1px solid rgba(76, 170, 216, 0.5);
}
.transform-glow {
	position: absolute;
	inset: -4px;
	background: rgba(39, 137, 179, 0.1);
	border-radius: 8px;
	filter: blur(1rem);
	z-index: -1;
}
.transform-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.transform-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.transform-list-icon {
	margin-top: 0.125rem;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.transform-list-icon-before {
	background: rgba(127, 29, 29, 0.4);
	border: 1px solid rgba(185, 28, 28, 0.5);
}
.transform-list-icon-after {
	background: rgba(39, 137, 179, 0.2);
	border: 1px solid rgba(39, 137, 179, 0.4);
}
.transform-list-text {
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	line-height: 1.65;
	font-weight: 400;
}

/* ── MOBILE ── */
#mobile {
	padding: 6rem 0 7rem;
	background: #112233;
}
.mobile-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.mobile-grid {
		grid-template-columns: 1fr 1fr;
		gap: 6rem;
	}
}
.mobile-feature-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.mobile-feature-item {
	display: flex;
	gap: 1rem;
}
.mobile-feature-bar {
	flex-shrink: 0;
	width: 4px;
	background: linear-gradient(to bottom, var(--vc-blue), rgba(39, 137, 179, 0.1));
	border-radius: 999px;
	margin-top: 0.25rem;
}
.mobile-feature-title {
	font-weight: 700;
	color: white;
	font-size: 0.875rem;
	margin-bottom: 0.375rem;
}
.section-light .mobile-feature-title {
	color: var(--vc-black);
}
.mobile-feature-text {
	color: var(--vc-blue-light2);
	font-size: 0.875rem;
	line-height: 1.65;
	font-weight: 400;
}
.section-light .mobile-feature-body {
	color: var(--vc-black);
}
.phones-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 1rem;
}
@media (min-width: 768px) {
	.phones-wrap {
		gap: 2rem;
	}
}
.phone-col-offset {
	margin-bottom: 2rem;
}
.phone-mockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.phone-frame {
	position: relative;
	width: 11rem;
	background: #152b3e;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 2.5rem;
	overflow: hidden;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
	.phone-frame {
		width: 13rem;
	}
}
.phone-notch {
	display: flex;
	justify-content: center;
	padding: 0.75rem 0 0.25rem;
}
.phone-notch-bar {
	width: 5rem;
	height: 1rem;
	background: #0c1a24;
	border-radius: 999px;
}
.phone-screen {
	margin: 0 0.25rem 0.25rem;
	border-radius: 1.75rem;
	overflow: hidden;
	aspect-ratio: 9/18;
}
.phone-screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.phone-glow {
	position: absolute;
	inset: -0.75rem;
	background: rgba(39, 137, 179, 0.1);
	border-radius: 50%;
	filter: blur(2rem);
	z-index: -1;
}
.phone-label {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	text-align: center;
	line-height: 1.4;
	max-width: 10rem;
	font-weight: 400;
}
.mobile-caption {
	text-align: center;
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	margin-top: 2.5rem;
	font-style: italic;
	font-weight: 400;
}
.section-light .phone-label {
	color: var(--vc-blue);
}
.section-light .mobile-caption {
	color: var(--vc-blue);
}
/* ── RESULTS ── */
#results {
	padding: 6rem 0 7rem;
	background: #091520;
}
.results-highlight-panel {
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid rgba(205, 166, 28, 0.3);
	background: linear-gradient(135deg, rgba(205, 166, 28, 0.12) 0%, #0f2030 50%, #0f2030 100%);
	display: flex;
	flex-direction: column;
}
.results-50-num {
	font-weight: 900;
	font-size: 3.75rem;
	color: var(--vc-gold);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 0.25rem;
}
.results-50-label {
	font-weight: 700;
	font-size: 0.75rem;
	color: rgba(205, 166, 28, 0.8);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 0.75rem;
}

/* ── TESTIMONIAL ── */
.testimonial-wrap {
	position: relative;
	background: #0f2030;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1rem;
	padding: 2.5rem 3.5rem;
	overflow: hidden;
}
@media (max-width: 767px) {
	.testimonial-wrap {
		padding: 2rem;
	}
}
.testimonial-avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(39, 137, 179, 0.2);
	border: 1px solid rgba(39, 137, 179, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.testimonial-name {
	font-weight: 700;
	color: white;
	font-size: 0.875rem;
}
.testimonial-role {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	font-weight: 400;
	margin-top: 0.125rem;
}
.testimonial-note {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	font-style: italic;
	font-weight: 400;
}

/* ── CTA ── */
#cta {
	padding: 6rem 0 7rem;
	background: #112233;
	position: relative;
	overflow: hidden;
}
.cta-glow-1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 37.5rem;
	height: 25rem;
	background: rgba(39, 137, 179, 0.08);
	border-radius: 50%;
	filter: blur(7.5rem);
	pointer-events: none;
}
.cta-glow-2 {
	position: absolute;
	top: 50%;
	left: 60%;
	transform: translate(-50%, -50%);
	width: 25rem;
	height: 18.75rem;
	background: rgba(205, 166, 28, 0.05);
	border-radius: 50%;
	filter: blur(6.25rem);
	pointer-events: none;
}
.cta-inner {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}
.cta-h2 {
	font-weight: 900;
	font-size: clamp(2rem, 5vw, 3.75rem);
	color: white;
	line-height: 1.15;
	margin-bottom: 1.5rem;
}
.cta-body {
	color: var(--vc-blue-light2);
	font-size: 1.125rem;
	line-height: 1.75;
	margin-bottom: 2.5rem;
	font-weight: 400;
}
.cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}
@media (min-width: 640px) {
	.cta-buttons {
		flex-direction: row;
	}
}
.cta-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cta-badge-label {
	font-weight: 700;
	color: var(--vc-blue-light);
	font-size: 0.875rem;
}
.cta-badge-sub {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	font-weight: 400;
	margin-top: 0.125rem;
}

/* ── FOOTER ── */
footer {
	background: #0c1a24;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 3rem 0;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.footer-logo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1rem;
}
.footer-logo-icon {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 4px;
	background: var(--vc-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-logo-text {
	font-weight: 700;
	font-size: 0.875rem;
	color: white;
}
.footer-body {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	line-height: 1.65;
	max-width: 18rem;
	font-weight: 400;
}
.footer-heading {
	font-weight: 700;
	color: white;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}
.footer-link {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	font-weight: 500;
	display: block;
	margin-bottom: 0.5rem;
	transition: color 0.2s;
}
.footer-link:hover {
	color: var(--vc-blue-light);
}
.footer-services {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.footer-service-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.footer-service-dot {
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: var(--vc-blue);
	flex-shrink: 0;
}
.footer-service-text {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	font-weight: 400;
}
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
@media (min-width: 768px) {
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}
.footer-copy {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	font-weight: 400;
}
.footer-vc-link {
	color: var(--vc-blue-light2);
	font-size: 0.75rem;
	font-weight: 500;
	transition: color 0.2s;
}
.footer-vc-link:hover {
	color: var(--vc-blue-light);
}

/* Responsive helpers */
@media (max-width: 1023px) {
	.hide-mobile {
		display: none !important;
	}
}
/* ── INTEGRATIONS MARQUEE ── */
.cs-integrations {
	background: #e8d6d6;
	padding: 50px 0;
	overflow: hidden;
	border-top: 1px solid rgba(14, 13, 13, 0.06);
	border-bottom: 1px solid rgba(14, 13, 13, 0.06);
}
.cs-integrations__label {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(14, 13, 13, 0.6);
	margin-bottom: 20px;
}
.cs-marquee-track {
	display: flex;
	width: max-content;
	animation: marqueeScroll 36s linear infinite;
}
.cs-marquee-track:hover {
	animation-play-state: paused;
}
@keyframes marqueeScroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
.cs-marquee-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 40px;
	flex-shrink: 0;
	height: 72px;
}
.cs-marquee-item img {
	height: 84px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%) opacity(0.85);
	transition: filter 0.3s;
}
.cs-marquee-item img:hover {
	filter: grayscale(0%) opacity(1);
}
.cs-integration-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: rgba(14, 13, 13, 0.38);
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: color 0.3s;
}
.cs-integration-badge:hover {
	color: var(--vc-blue);
}
.cs-integration-badge .badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.cs-integration-desc {
	text-align: center;
	color: rgba(14, 13, 13, 0.6);
	margin-bottom: 32px;
}

.summary-finish-center-icons {
	display: flex;
	justify-content: center;
	gap: 60px;
	margin-bottom: 40px;
}
.summary-center-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 180px;
}
.summary-center-icon svg {
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
}
.summary-center-item strong {
	font-size: 18px;
	color: #ffd84d;
	margin-bottom: 4px;
}
.summary-center-item span {
	font-size: 15px;
	color: #d8e3f0;
}
.summary-finish-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: rgba(255, 216, 77, 0.1);
	border: 1px solid rgba(255, 216, 77, 0.3);
	border-radius: 12px;
}
.summary-footer-icon svg {
	width: 1.6rem;
	height: 1.6rem;
}
.summary-footer-text {
	font-size: 16px;
	color: var(--vc-gold);
	flex-grow: 1;
}
.summary-steps-block {
	background: #0d1b2a;
	padding: 40px;
	border-radius: 16px;
	font-family: "Inter", sans-serif;
	color: #ffffff;
	text-align: center;
}
.summary-steps-row {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 1.6rem;
	position: relative;
}
.summary-steps-row::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	border-bottom: 1px dashed rgba(76, 170, 216, 0.6);
	z-index: 0;
}
.summary-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 190px;
	position: relative;
	z-index: 1;
}
.summary-step-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #0c1a24;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
	margin-bottom: 12px;
}
.summary-step-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}
.summary-step-icon-yellow {
	color: var(--vc-gold);
}
.summary-step-icon-blue {
	color: var(--vc-blue-light);
}
.summary-step strong {
	font-size: 0.9rem;
	margin-bottom: 4px;
	color: var(--vc-gold);
}
.summary-step strong.c-blue {
	color: var(--vc-blue-light);
}
.summary-step span {
	font-size: 0.7rem;
	color: #d8e3f0;
	text-align: center;
}