:root {
	color-scheme: dark;

	--di-color-canvas: #090a0d;
	--di-color-canvas-alt: #0d1016;
	--di-color-surface-1: #12161d;
	--di-color-surface-2: #191f29;
	--di-color-surface-3: #222938;
	--di-color-line-soft: rgba(255, 255, 255, 0.08);
	--di-color-line-strong: rgba(255, 255, 255, 0.16);
	--di-color-text-strong: #f4efe6;
	--di-color-text: #d4cec3;
	--di-color-text-muted: #999484;
	--di-color-accent: #d3a061;
	--di-color-accent-strong: #efc48b;
	--di-color-signal: #84bbff;
	--di-color-success: #7bcf9b;
	--di-color-danger: #ef7c74;

	--di-gradient-hero:
		radial-gradient(circle at top left, rgba(132, 187, 255, 0.16), transparent 42%),
		radial-gradient(circle at top right, rgba(211, 160, 97, 0.15), transparent 34%),
		linear-gradient(180deg, rgba(9, 10, 13, 0.96), rgba(9, 10, 13, 1));
	--di-gradient-panel: linear-gradient(180deg, rgba(34, 41, 56, 0.7), rgba(18, 22, 29, 0.92));
	--di-gradient-cta: linear-gradient(135deg, rgba(211, 160, 97, 0.14), rgba(132, 187, 255, 0.12));

	--di-font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
	--di-font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
	--di-font-editorial: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
	--di-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

	--di-font-size-xs: 0.75rem;
	--di-font-size-sm: 0.875rem;
	--di-font-size-md: 1rem;
	--di-font-size-lg: 1.125rem;
	--di-font-size-xl: clamp(1.5rem, 2vw, 2rem);
	--di-font-size-2xl: clamp(2.25rem, 4vw, 3.75rem);
	--di-font-size-3xl: clamp(3.5rem, 6vw, 6rem);
	--di-line-tight: 1.05;
	--di-line-heading: 1.1;
	--di-line-body: 1.6;

	--di-space-2xs: 0.375rem;
	--di-space-xs: 0.5rem;
	--di-space-sm: 0.75rem;
	--di-space-md: 1rem;
	--di-space-lg: 1.5rem;
	--di-space-xl: 2rem;
	--di-space-2xl: 3rem;
	--di-space-3xl: 4rem;
	--di-space-4xl: 5.5rem;
	--di-space-5xl: 7rem;

	--di-radius-sm: 0.75rem;
	--di-radius-md: 1.125rem;
	--di-radius-lg: 1.5rem;
	--di-radius-pill: 999px;

	--di-shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.16);
	--di-shadow-md: 0 24px 60px rgba(0, 0, 0, 0.22);
	--di-shadow-lg: 0 36px 90px rgba(0, 0, 0, 0.34);

	--di-border-width: 1px;
	--di-border-soft: var(--di-border-width) solid var(--di-color-line-soft);
	--di-border-strong: var(--di-border-width) solid var(--di-color-line-strong);

	--di-content-width: 860px;
	--di-wide-width: 1280px;
	--di-grid-gap: clamp(1rem, 2vw, 1.75rem);

	--di-transition-fast: 160ms ease;
	--di-transition-base: 260ms ease;
	--di-transition-slow: 420ms ease;
}

body.dopeinspired-theme {
	background:
		radial-gradient(circle at top center, rgba(132, 187, 255, 0.08), transparent 28%),
		linear-gradient(180deg, #090a0d 0%, #090a0d 100%);
	color: var(--di-color-text);
	font-family: var(--di-font-body);
	line-height: var(--di-line-body);
}

body.dopeinspired-theme::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
	background-size: 120px 120px;
	mask-image: radial-gradient(circle at center, black 50%, transparent 95%);
	opacity: 0.3;
}

body.dopeinspired-theme h1,
body.dopeinspired-theme h2,
body.dopeinspired-theme h3,
body.dopeinspired-theme h4,
body.dopeinspired-theme h5,
body.dopeinspired-theme h6 {
	color: var(--di-color-text-strong);
	font-family: var(--di-font-display);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: var(--di-line-heading);
}

body.dopeinspired-theme p,
body.dopeinspired-theme li {
	color: var(--di-color-text);
}

body.dopeinspired-theme a {
	color: var(--di-color-text-strong);
	text-decoration: none;
	transition: color var(--di-transition-fast), opacity var(--di-transition-fast);
}

body.dopeinspired-theme a:hover,
body.dopeinspired-theme a:focus {
	color: var(--di-color-accent-strong);
}

body.dopeinspired-theme img {
	border-radius: var(--di-radius-md);
}

.di-content-shell {
	width: min(calc(100% - 2rem), var(--di-content-width));
	margin-inline: auto;
}

.di-wide-shell {
	width: min(calc(100% - 2rem), var(--di-wide-width));
	margin-inline: auto;
}

.di-section {
	position: relative;
	padding-block: clamp(4rem, 7vw, 7rem);
}

.di-section-tight {
	padding-block: clamp(2.5rem, 4vw, 4rem);
}

.di-grid {
	display: grid;
	gap: var(--di-grid-gap);
}

.di-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.di-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.di-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.di-stack > * + * {
	margin-top: var(--di-space-lg);
}

.di-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--di-space-sm);
	color: var(--di-color-accent);
	font-family: var(--di-font-body);
	font-size: var(--di-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.di-kicker::before {
	content: "";
	width: 2.75rem;
	height: 1px;
	background: linear-gradient(90deg, var(--di-color-accent), transparent);
}

.di-display {
	font-size: var(--di-font-size-3xl);
	line-height: var(--di-line-tight);
}

.di-title-xl {
	font-size: var(--di-font-size-2xl);
}

.di-lead {
	max-width: 60ch;
	color: var(--di-color-text);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

.di-meta {
	color: var(--di-color-text-muted);
	font-size: var(--di-font-size-sm);
	letter-spacing: 0.02em;
}

.di-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--di-space-xs);
	min-height: 2.25rem;
	padding: 0.5rem 0.875rem;
	border: var(--di-border-soft);
	border-radius: var(--di-radius-pill);
	background: rgba(255, 255, 255, 0.03);
	color: var(--di-color-text-strong);
	font-size: var(--di-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.di-button,
.et_pb_button.di-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--di-space-sm);
	min-height: 3.375rem;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: var(--di-radius-pill);
	background: linear-gradient(135deg, var(--di-color-accent), var(--di-color-accent-strong));
	box-shadow: var(--di-shadow-sm);
	color: #0d1016;
	font-size: var(--di-font-size-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: transform var(--di-transition-fast), box-shadow var(--di-transition-base), opacity var(--di-transition-fast);
}

.di-button:hover,
.et_pb_button.di-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--di-shadow-md);
}

.di-button.is-secondary,
.et_pb_button.di-button.is-secondary {
	border: var(--di-border-soft);
	background: rgba(255, 255, 255, 0.02);
	color: var(--di-color-text-strong);
	box-shadow: none;
}

.di-card {
	position: relative;
	overflow: hidden;
	height: 100%;
	padding: clamp(1.25rem, 1.4vw, 1.75rem);
	border: var(--di-border-soft);
	border-radius: var(--di-radius-lg);
	background: var(--di-gradient-panel);
	box-shadow: var(--di-shadow-sm);
	backdrop-filter: blur(18px);
}

.di-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 45%);
	opacity: 0;
	transition: opacity var(--di-transition-base);
}

.di-card:hover::before,
.di-card:focus-within::before {
	opacity: 1;
}

.di-cta-strip {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: var(--di-border-strong);
	border-radius: var(--di-radius-lg);
	background: var(--di-gradient-cta);
	box-shadow: var(--di-shadow-md);
}

.di-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(5rem, 8vw, 8rem) 0;
	background: var(--di-gradient-hero);
}

.di-hero::after {
	content: "";
	position: absolute;
	right: -8rem;
	bottom: -8rem;
	width: 24rem;
	height: 24rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(211, 160, 97, 0.15), transparent 68%);
	filter: blur(10px);
}

.di-spotlight {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

.di-newsletter {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: var(--di-border-soft);
	border-radius: var(--di-radius-lg);
	background:
		radial-gradient(circle at top right, rgba(132, 187, 255, 0.16), transparent 35%),
		linear-gradient(180deg, rgba(25, 31, 41, 0.96), rgba(18, 22, 29, 0.96));
	box-shadow: var(--di-shadow-md);
}

.di-newsletter input,
.di-newsletter textarea,
.di-newsletter select,
.di-contact-shell input,
.di-contact-shell textarea,
.di-contact-shell select {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.9rem 1rem;
	border: var(--di-border-soft);
	border-radius: var(--di-radius-md);
	background: rgba(255, 255, 255, 0.04);
	color: var(--di-color-text-strong);
}

.di-monetization-slot,
.di-disclosure-slot {
	padding: 1rem 1.125rem;
	border-left: 3px solid var(--di-color-accent);
	border-radius: var(--di-radius-md);
	background: rgba(255, 255, 255, 0.03);
	color: var(--di-color-text);
	font-size: var(--di-font-size-sm);
}

.di-disclosure-slot {
	border-left-color: var(--di-color-signal);
}

.di-prose {
	max-width: 70ch;
}

.di-prose h2,
.di-prose h3 {
	margin-top: var(--di-space-2xl);
}

.di-prose p + p,
.di-prose ul + p,
.di-prose p + ul {
	margin-top: var(--di-space-lg);
}

.di-divider {
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--di-color-line-strong), transparent);
}

@media (max-width: 980px) {
	.di-grid-3,
	.di-grid-4,
	.di-spotlight {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.di-grid-2,
	.di-grid-3,
	.di-grid-4 {
		grid-template-columns: 1fr;
	}

	.di-section {
		padding-block: 4rem;
	}
}