/* ==========================================================================
   NAMESPACED DESIGN SYSTEM TOKENS
   ========================================================================== */
:root,
.judi-scope {
	--judi-color-dark-bg: #160b3b;
	--judi-color-purple: #5015a4;
	--judi-color-dark-surface: #1e0e4c;

	--judi-color-cyan-bright: #00e5b0;
	--judi-color-cyan-hover: #00c296;
	--judi-color-cyan-light: #e0f7f6;
	--judi-color-teal-banner: #00a896;

	--judi-color-orange-bright: #ffa63e;

	--judi-color-operational-drag: #5e17eb;
	--judi-color-quality-erosion: #00b4d8;
	--judi-color-cost-overruns: #ff9800;

	--judi-color-bg-light: #f8f9fa;
	--judi-color-card-bg: #ffffff;
	--judi-color-text-primary: #1c1d21;
	--judi-color-text-secondary: #4a4d55;
	--judi-color-text-muted: #717582;
	--judi-color-text-white: #ffffff;
	--judi-color-border-light: #e4e7ec;

	--judi-font-family-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--judi-max-width-container: 1240px;
	--judi-radius-sm: 8px;
	--judi-radius-md: 16px;
	--judi-radius-lg: 24px;
	--judi-radius-pill: 999px;

	--judi-shadow-card: 0px 0px 11px -3px rgba(0, 0, 0, 0.5);
	--judi-shadow-card-hover: 0px 0px 11px -3px rgba(0, 0, 0, 0.8);
	--judi-shadow-cyan-glow: 0 0 25px rgba(0, 229, 176, 0.4);

	--judi-transition-base: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.col-purple {
	color: var(--judi-color-purple);
}

/* Scoped box-sizing for Judi components */
.container,
.hero,
.video-section,
.stats-scale,
.problem-section,
.results-banner,
.feature-grid-section,
.cta-banner,
.ai-section,
.capabilities,
.reach-banner,
.faq,
.contact-section,
.footer {
	box-sizing: border-box;
	font-family: var(--judi-font-family-base);
}

.container *,
.hero *,
.video-section *,
.stats-scale *,
.problem-section *,
.results-banner *,
.feature-grid-section *,
.cta-banner *,
.ai-section *,
.capabilities *,
.reach-banner *,
.faq *,
.contact-section *,
.footer * {
	box-sizing: border-box;
}

/* ==========================================================================
   LAYOUT UTILITIES & BEM BASE COMPONENTS
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--judi-max-width-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.75rem;
	font-weight: 700;
	font-size: 0.95rem;
	border-radius: var(--judi-radius-pill);
	border: none;
	cursor: pointer;
	transition: var(--judi-transition-base);
	text-align: center;
	white-space: nowrap;
}

.button--cyan {
	background-color: var(--judi-color-cyan-bright);
	color: #ffffff;
	box-shadow: 0 4px 15px rgba(0, 229, 176, 0.3);
}

.button--cyan:hover {
	background-color: var(--judi-color-cyan-hover);
	transform: translateY(-2px);
	box-shadow: var(--judi-shadow-cyan-glow);
}

.button--purple-link {
	font-weight: 600;
	padding: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: underline !important;
}

.button--purple-link:hover {
	color: var(--judi-color-cyan-bright);
}

.badge {
	display: inline-block;
	padding: 0.35rem 1rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--judi-radius-pill);
}

.badge--orange {
	background-color: var(--judi-color-orange-bright);
	color: #52199f;
}

.badge--purple {
	color: var(--judi-color-purple);
	font-size: 0.85rem;
}

/* ==========================================================================
   HEADER & NAVIGATION BLOCK (.header, .nav)
   ========================================================================== */
.header {
	background-color: var(--judi-color-dark-bg);
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.logo__mark {
	width: 32px;
	height: 32px;
}

.logo__text {
	color: var(--judi-color-text-white);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
}

.logo__subtext {
	font-size: 0.65rem;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	display: block;
	margin-top: -4px;
}

.nav {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.nav__list {
	display: flex;
	list-style: none;
	gap: 2rem;
	align-items: center;
	margin: 0;
	padding: 0;
}

.nav__link {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	font-size: 0.95rem;
	transition: var(--judi-transition-base);
}

.nav__link:hover {
	color: var(--judi-color-cyan-bright);
}

.nav__actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.nav__action-link {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	font-weight: 500;
}

.nav__action-link:hover {
	color: var(--judi-color-text-white);
}

.nav__toggle {
	display: none;
	background: none;
	border: none;
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
}

/* ==========================================================================
   HERO BLOCK (.hero)
   ========================================================================== */
.hero {
	background: linear-gradient(135deg, var(--judi-color-dark-bg) 0%, var(--judi-color-dark-surface) 60%, var(--judi-color-purple) 100%);
	color: var(--judi-color-text-white);
	padding: 5rem 0 6rem;
	position: relative;
	overflow: hidden;
}

.hero::after {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(124, 77, 255, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
	pointer-events: none;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.hero__title {
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--judi-color-text-white);
	margin: 0;
}

.hero__subtitle {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.8);
	max-width: 520px;
	line-height: 1.6;
	margin: 0;
}

.hero__graphic-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero__graphic-img {
	width: 100%;
	max-width: 520px;
	height: auto;
	filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
	animation: floatSlow 6s ease-in-out infinite alternate;
}

@keyframes floatSlow {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-12px);
	}
}

/* ==========================================================================
   VIDEO EXPLAINER BLOCK (.video-section)
   ========================================================================== */
.video-section {
	padding: 6rem 0;
	background-color: var(--judi-color-card-bg);
}

.video-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.video-section__player {
	position: relative;
	background: #e8ecef;
	border-radius: var(--judi-radius-md);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--judi-shadow-card);
	overflow: hidden;
	border: 1px solid var(--judi-color-border-light);
}

.video-section__play-btn {
	width: 80px;
	height: 80px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--judi-transition-base);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.video-section__play-btn:hover {
	transform: scale(1.1);
	background-color: var(--judi-color-card-bg);
}

.video-section__play-icon {
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 20px solid var(--judi-color-purple);
	margin-left: 4px;
}

.video-section__title {
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--judi-color-purple);
	margin-bottom: 1.25rem;
	line-height: 1.25;
}

.video-section__description {
	color: var(--judi-color-text-secondary);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* ==========================================================================
   STATS AT SCALE BLOCK (.stats-scale)
   ========================================================================== */
.stats-scale {
	background-color: var(--judi-color-purple);
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px);
	background-size: 24px 24px;
	color: var(--judi-color-text-white);
	padding: 5rem 0;
	text-align: center;
}

.stats-scale__title {
	font-size: 2.5rem;
	font-weight: 800;
	margin-top: 0;
	margin-bottom: 3.5rem;
	color: var(--judi-color-text-white);
}

.stats-scale__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.stats-scale__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stats-scale__number {
	font-size: 3.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--judi-color-text-white);
	margin-bottom: 0.75rem;
	letter-spacing: -0.02em;
}

.stats-scale__label {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f9ab4c;
}

/* ==========================================================================
   PROBLEM SECTION (.problem-section)
   ========================================================================== */
.problem-section {
	padding: 6rem 0;
	background-color: var(--judi-color-bg-light);
}

.problem-section__hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
	margin-bottom: 4rem;
}

.problem-section__image-container {
	position: relative;
	border-radius: var(--judi-radius-md);
	overflow: hidden;
	box-shadow: var(--judi-shadow-card);
}

.problem-section__image-container img {
	width: 100%;
	height: auto;
	display: block;
}

.problem-section__title {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--judi-color-text-primary);
	margin-top: 0px;
	margin-bottom: 1.25rem;
}

.problem-section__title-highlight {
	color: var(--judi-color-purple);
}

.problem-section__description {
	color: var(--judi-color-text-secondary);
	font-size: 1.05rem;
	line-height: 1.7;
}

.problem-section__cards-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	box-shadow: var(--judi-shadow-card);
	border-radius: var(--judi-radius-md);
	overflow: hidden;
}

.problem-card {
	background-color: var(--judi-color-card-bg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 2px solid #ecedf6;
}

.problem-card:first-child {
	border-top-left-radius: var(--judi-radius-md);
	border-top-right-radius: var(--judi-radius-md);
}

.problem-card:nth-child(2) {
	border-top-width: 0px;
	border-bottom-width: 0px;
}

.problem-card:last-child {
	border-bottom-left-radius: var(--judi-radius-md);
	border-bottom-right-radius: var(--judi-radius-md);
}

@media only screen and (min-width: 1024px) {
	.problem-section__cards-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.problem-card:first-child {
		border-top-right-radius: 0px;
		border-top-left-radius: var(--judi-radius-md);
		border-bottom-left-radius: var(--judi-radius-md);
	}

	.problem-card:nth-child(2) {
		border-left-width: 0px;
		border-right-width: 0px;
		border-top-width: 2px;
		border-bottom-width: 2px;
	}

	.problem-card:last-child {
		border-bottom-left-radius: 0px;
		border-top-right-radius: var(--judi-radius-md);
		border-bottom-right-radius: var(--judi-radius-md);
	}
}

.problem-card__header {
	padding: 1.25rem 1.5rem;
	color: var(--judi-color-text-white);
	font-weight: 700;
	font-size: 1.15rem;
	text-align: center;
}

.problem-card--drag .problem-card__header {
	background-color: var(--judi-color-operational-drag);
}

.problem-card--erosion .problem-card__header {
	background-color: var(--judi-color-quality-erosion);
}

.problem-card--overruns .problem-card__header {
	background-color: var(--judi-color-cost-overruns);
}

.problem-card__body {
	padding: 1.75rem 1.5rem;
	flex-grow: 1;
}

.problem-card__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.problem-card__item {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.95rem;
	color: var(--judi-color-text-secondary);
	line-height: 1.5;
}

.problem-card__item::before {
	content: '•';
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.2rem;
	color: var(--judi-color-text-primary);
	font-weight: bold;
}

.problem-card:first-child .problem-card__item::before {
	color: var(--judi-color-operational-drag);
}

.problem-card:last-child .problem-card__item::before {
	color: var(--judi-color-cost-overruns);
}

.problem-card__item-strong {
	font-weight: 700;
	color: var(--judi-color-text-primary);
}

/* ==========================================================================
   RESULTS BANNER BLOCK (.results-banner)
   ========================================================================== */
.results-banner {
	background: linear-gradient(135deg, #00c29e 0%, #009688 100%);
	color: var(--judi-color-text-white);
	padding: 5rem 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.results-banner__title {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 3.5rem;
	color: var(--judi-color-text-white);
}

.results-banner__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-bottom: 3rem;
}

.results-banner__metric {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.results-banner__number {
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.5rem;
	letter-spacing: -0.02em;
}

.results-banner__label {
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.35rem;
	color: #561fad;
}

.results-banner__subtext {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
}

.results-banner__footnote {
	font-size: 0.8rem;
	color: #017673;
	font-weight: 500;
	margin: 0;
}

/* ==========================================================================
   FEATURE GRID BLOCK (.feature-grid)
   ========================================================================== */
.feature-grid-section {
	padding: 6rem 0;
	background-color: var(--judi-color-card-bg);
}

.feature-grid-section__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 4rem;
}

.feature-grid-section__title {
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--judi-color-text-primary);
	line-height: 1.25;
	margin: 0;
}

.feature-grid-section__title-highlight {
	color: var(--judi-color-purple);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 2rem;
}

.feature-card {
	background: var(--judi-color-card-bg);
	border-radius: var(--judi-radius-md);
	padding: 2.25rem;
	display: flex;
	gap: 1.5rem;
	box-shadow: var(--judi-shadow-card);
	transition: var(--judi-transition-base);
	flex-direction: column;
}

@media only screen and (min-width: 768px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.feature-card {
		flex-direction: row;
	}
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--judi-shadow-card-hover);
	border-color: rgba(94, 23, 235, 0.3);
}

.feature-card__icon-wrapper {
	width: 56px;
	height: 56px;
	background-color: #f4effd;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--judi-color-purple);
}

.feature-card__icon {
	width: 28px;
	height: 28px;
}

.feature-card__content {
	display: flex;
	flex-direction: column;
}

.feature-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--judi-color-purple);
	margin-bottom: 0.5rem;
	margin-top: 0;
}

.feature-card__description {
	font-size: 0.95rem;
	color: var(--judi-color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   CTA BANNER BLOCK (.cta-banner)
   ========================================================================== */
.cta-banner {
	background: linear-gradient(135deg, var(--judi-color-dark-bg) 0%, var(--judi-color-purple) 100%);
	color: var(--judi-color-text-white);
	padding: 4.5rem 0;
	position: relative;
	overflow: hidden;
}

.cta-banner__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.cta-banner__title {
	font-size: 2.15rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--judi-color-text-white);
	margin: 0;
}

/* ==========================================================================
   AI AT WORK SECTION (.ai-section)
   ========================================================================== */
.ai-section {
	padding: 6rem 0;
	background-color: var(--judi-color-bg-light);
}

.ai-section__header {
	text-align: center;
	margin-bottom: 4rem;
}

.ai-section__title {
	font-size: 2.25rem;
	font-weight: 800;
	margin: 0;
}

.ai-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: center;
	margin-bottom: 6rem;
}

.ai-block--reverse {
	grid-template-columns: 1fr 1fr;
}

.ai-block--reverse .ai-block__content {
	order: 1;
}

.ai-block--reverse .ai-block__media {
	order: 2;
}

.ai-block__media {
	position: relative;
	border-radius: var(--judi-radius-md);
	overflow: hidden;
	box-shadow: var(--judi-shadow-card);
}

.ai-block__media img {
	width: 100%;
	height: auto;
	display: block;
}

.ai-block__tag {
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--judi-color-purple);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	display: block;
}

.ai-block__title {
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--judi-color-text-primary);
	margin-bottom: 1.25rem;
	line-height: 1.2;
	margin-top: 0;
}

.ai-block__description {
	font-size: 1.05rem;
	color: var(--judi-color-text-secondary);
	margin-bottom: 1.75rem;
	line-height: 1.7;
}

.ai-block__feature-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.ai-block__feature-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.ai-block__feature-icon {
	width: 24px;
	height: 24px;
	color: var(--judi-color-purple);
	flex-shrink: 0;
	margin-top: 2px;
}

.ai-block__feature-text {
	font-size: 0.95rem;
	color: var(--judi-color-text-secondary);
	line-height: 1.5;
}

.ai-block__list-bold {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ai-block__list-bold-item {
	font-size: 1rem;
	color: var(--judi-color-text-secondary);
}

.ai-block__list-bold-item strong {
	color: var(--judi-color-purple);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.9rem;
}

/* ==========================================================================
   PLATFORM CAPABILITIES BLOCK (.capabilities)
   ========================================================================== */
.capabilities {
	padding: 6rem 0;
	background-color: var(--judi-color-card-bg);
}

.capabilities__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 4rem;
}

.capabilities__tag {
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--judi-color-purple);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	display: block;
}

.capabilities__title {
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--judi-color-text-primary);
	line-height: 1.25;
	margin: 0;
}

.capabilities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.capability-card {
	background: var(--judi-color-card-bg);
	border: 1px solid var(--judi-color-border-light);
	border-radius: var(--judi-radius-md);
	padding: 1.75rem;
	display: flex;
	gap: 1.25rem;
	transition: var(--judi-transition-base);
}

.capability-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--judi-shadow-card);
	border-color: rgba(94, 23, 235, 0.3);
}

.capability-card__icon-wrapper {
	width: 44px;
	height: 44px;
	background-color: #f4effd;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--judi-color-purple);
}

.capability-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--judi-color-text-primary);
	margin-bottom: 0.4rem;
	margin-top: 0;
}

.capability-card__description {
	font-size: 0.88rem;
	color: var(--judi-color-text-secondary);
	line-height: 1.5;
	margin: 0;
}

/* ==========================================================================
   GLOBAL REACH BANNER BLOCK (.reach-banner)
   ========================================================================== */
.reach-banner {
	background: linear-gradient(135deg, #ff6b00 0%, #ff8800 100%);
	color: var(--judi-color-text-white);
	padding: 5.5rem 0;
	text-align: center;
}

.reach-banner__title {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 3.5rem;
	color: var(--judi-color-text-white);
}

.reach-banner__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-bottom: 3rem;
}

.reach-banner__metric {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.reach-banner__number {
	font-size: 4.25rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.5rem;
	letter-spacing: -0.02em;
}

.reach-banner__label {
	font-size: 0.95rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.reach-banner__subtext {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.9);
	margin-top: 0.25rem;
}

.reach-banner__footnote {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

/* ==========================================================================
   FAQ ACCORDION BLOCK (.faq)
   ========================================================================== */
.faq {
	padding: 6rem 0;
	background-color: var(--judi-color-card-bg);
}

.faq__title {
	font-size: 2.25rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 3.5rem;
	color: var(--judi-color-text-primary);
}

.faq__list {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.faq__item {
	border-bottom: 1px solid var(--judi-color-border-light);
	padding: 1.25rem 0;
}

.faq__question-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: none;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--judi-color-text-primary);
	text-align: left;
	cursor: pointer;
	padding: 0.5rem 0;
	transition: var(--judi-transition-base);
}

.faq__question-btn:hover {
	color: var(--judi-color-purple);
}

.faq__icon {
	font-size: 1.4rem;
	color: var(--judi-color-text-secondary);
	transition: transform 0.3s ease;
	font-weight: 400;
}

.faq__item--active .faq__icon {
	transform: rotate(45deg);
}

.faq__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
	color: var(--judi-color-text-secondary);
	font-size: 1rem;
	line-height: 1.6;
}

.faq__item--active .faq__answer {
	max-height: 500px;
	transition: max-height 0.3s ease-in-out;
	padding-top: 1rem;
}

/* ==========================================================================
   CONTACT SECTION BLOCK (.contact-section, .contact-form)
   ========================================================================== */
.contact-section {
	background: linear-gradient(135deg, var(--judi-color-dark-bg) 0%, var(--judi-color-purple) 100%);
	color: var(--judi-color-text-white);
	padding: 6rem 0;
}

.contact-section__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 4rem;
	align-items: center;
}

.contact-section__info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.contact-section__tag {
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--judi-color-cyan-bright);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-section__title {
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--judi-color-text-white);
	margin: 0;
}

.contact-section__description {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.8);
	max-width: 480px;
	line-height: 1.6;
	margin: 0;
}

.contact-section__orb-img {
	max-width: 320px;
	height: auto;
	margin-top: 1rem;
	filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
}

.contact-form-card {
	background-color: var(--judi-color-card-bg);
	border-radius: var(--judi-radius-lg);
	padding: 2.5rem;
	color: var(--judi-color-text-primary);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.contact-form__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--judi-color-text-secondary);
}

.contact-form__input,
.contact-form__textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border-radius: var(--judi-radius-sm);
	border: 1px solid var(--judi-color-border-light);
	background-color: #f8f9fa;
	color: var(--judi-color-text-primary);
	outline: none;
	transition: var(--judi-transition-base);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
	border-color: var(--judi-color-purple);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(94, 23, 235, 0.1);
}

.contact-form__textarea {
	resize: vertical;
	min-height: 110px;
}

.contact-form__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.8rem;
	color: var(--judi-color-text-muted);
	cursor: pointer;
	margin-top: 0.5rem;
}

.contact-form__checkbox {
	margin-top: 3px;
}

.contact-form__submit {
	width: 100%;
	margin-top: 1rem;
}

/* ==========================================================================
   FOOTER BLOCK (.footer)
   ========================================================================== */
.footer {
	background-color: var(--judi-color-dark-bg);
	color: rgba(255, 255, 255, 0.6);
	padding: 2.5rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.85rem;
}

.footer__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.footer__links {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer__link {
	color: rgba(255, 255, 255, 0.6);
	transition: var(--judi-transition-base);
}

.footer__link:hover {
	color: var(--judi-color-text-white);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
	.hero__title {
		font-size: 2.75rem;
	}
	.capabilities__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.contact-section__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}

@media (max-width: 768px) {
	.nav__list,
	.nav__actions {
		display: none;
	}
	.nav__toggle {
		display: block;
	}
	.mobile-menu--open .nav__list {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 80px;
		left: 0;
		width: 100%;
		background-color: var(--judi-color-dark-surface);
		padding: 2rem;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	}
	.hero__grid,
	.video-section__grid,
	.problem-section__hero-grid,
	.ai-block,
	.ai-block--reverse {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.ai-block--reverse .ai-block__content,
	.ai-block--reverse .ai-block__media {
		order: initial;
	}
	.stats-scale__grid,
	.results-banner__grid,
	.reach-banner__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.capabilities__grid {
		grid-template-columns: 1fr;
	}
	.cta-banner__container {
		flex-direction: column;
		text-align: center;
	}
	.contact-form__row {
		grid-template-columns: 1fr;
	}
	.footer__container {
		flex-direction: column;
		text-align: center;
	}
}