:root {
	--bg: #000d19;
	--surface: #001527;
	--hero: #36404c;
	--white: #ffffff;
	--muted: rgba(255, 255, 255, .78);
	--line: rgba(255, 255, 255, .2);
	--blue: #005eab;
	--cyan: #60c5c5;
	--yellow: #f2d523;
	--grad: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%);
	--container: 1280px;
	--content: 768px;
	--radius: 8px;
	--pill: 30px;
	--pad: 64px;
	--h1: 72px;
	--h2: 52px;
	--h3: 44px;
	--h4: 36px;
	--h5: 28px;
	--h6: 22px;
	--body: 16px;
	--body-m: 18px;
	--body-s: 14px;
}

* {
	box-sizing: border-box
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--white);
	font-family: "Roboto", sans-serif
}

body {
	min-width: 320px;
	overflow-x: hidden
}

img {
	max-width: 100%;
	display: block
}

a {
	text-decoration: none;
	color: inherit
}

button,
input,
textarea {
	font: inherit
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
	margin: 0
}

.container {
	margin: 0 auto;
	width: 100%;
	max-width:var(--container);
}

.content-narrow .wp-block-heading {
	margin: 24px 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -.02em;
	font-size: 44px;
}

.content-narrow p {
	font-size: 16px;
}

.content-narrow img {
	border-radius: 8px;
	margin: 32px auto;
}

.content-narrow {
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 1.5;
}

.content-narrow {
	max-width: var(--content);
	margin: 0 auto;
	width: 100%
}

.title-xl,
.title-lg,
.title-md,
.title-sm,
.title-xs,
.title-xxs {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -1px;
}

.title-xl {
	font-size: var(--h1)
}

.title-lg {
	font-size: var(--h2);
	letter-spacing: -.6px
}

.title-md {
	font-size: var(--h3);
	letter-spacing: -.5px
}

.title-sm {
	font-size: var(--h4);
	letter-spacing: -.4px
}

.title-xs {
	font-size: var(--h5);
	line-height: 1.1;
	letter-spacing: -.35px
}

.title-xxs {
	font-size: var(--h6);
	line-height: 1.1;
	letter-spacing: -.25px
}

.tagline {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5
}

.text {
	font-size: var(--body);
	line-height: 1.5
}

.text-m {
	font-size: var(--body-m);
	line-height: 1.5
}

.text-s {
	font-size: var(--body-s);
	line-height: 1.5
}

.muted {
	color: var(--muted)
}

.center {
	text-align: center
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	border: 1px solid transparent;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease
}

.btn.pill {
	border-radius: var(--pill)
}

.btn.small {
	padding: 8px 20px
}

.btn-grad {
	background: var(--grad);
	color: #000d19;
	border: 0;
	font-weight: 600
}

.btn-grad::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #8AF8FB;
	transform: translateY(101%);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1);
	z-index: -1;
	border-radius: var(--pill)
}

.btn-grad:hover::before,
.btn-grad:focus-visible::before {
	transform: translateY(0)
}

.btn-outline {
	background: rgba(255, 255, 255, .2);
	border: 2px solid var(--yellow);
	color: #fff;
	font-weight: 600
}

.btn-outline::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--yellow);
	transform: translateY(101%);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1);
	z-index: -1;
	border-radius: var(--pill)
}

.btn-outline:hover::before,
.btn-outline:focus-visible::before {
	transform: translateY(0)
}

.btn-outline:hover,
.btn-outline:focus-visible {
	color: #000d19
}

.hero {
	position: relative;
	overflow: hidden;
	color: #fff;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('your-image.jpg'); /* or PHP */
	background-size: cover;
	background-position: center;

	filter: blur(8px);
	transform: scale(1.1); /* avoid edges after blur */
	z-index: 1;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 2;
}

.hero-card {
	position: relative;
	z-index: 3;
}

.hero-card {
	min-height: 460px;
	display: flex;
	align-items: center;
	padding: 112px 64px
}

.hero-inner {
	max-width: 768px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center
}

.breadcrumb .sep {
	opacity: .75;
	font-size: 15px
}

.article-section {
	padding: 112px var(--pad)
}

.article-layout {
	display: flex;
	flex-direction: column;
	gap: 64px;
	align-items: center;
	max-width: var(--content);
	border-bottom: 1px solid #a3a5a6;
	padding-bottom: 48px;
}

.share-icons {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 16px;
}

.share-btn {
	width: 32px;
	height: 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.share-btn svg {
	fill: #fff;
	width: 24px;
	height: 24px;
}

.rich {
	display: flex;
	flex-direction: column;
	gap: 0
}

.rich h2 {
	padding: 24px 0 16px
}

.rich h3 {
	padding: 20px 0 16px
}

.rich p {
	padding: 0 0 16px
}

.rich figure {
	padding: 48px 0 16px;
	display: flex;
	flex-direction: column;
	gap: 16px
}

.rich figure img {
	width: 100%;
	aspect-ratio: 768/400;
	object-fit: cover;
	border-radius: 8px;
	background: #d9d9d9
}

figcaption {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
	color: var(--white)
}

figcaption::before {
	content: "";
	width: 2px;
	height: 21px;
	background: var(--line);
	display: block;
	flex: none
}

blockquote {
	margin: 20px 0 20px;
	padding: 0 20px;
	border-left: 2px solid var(--line);
	font-family: "Inter", sans-serif;
	font-style: italic;
	font-size: 20px;
	line-height: 28px;
	color: var(--white)
}

.post-end {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: center
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center
}

.chip {
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid var(--line);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	background: rgba(255, 255, 255, .02)
}

.mini-divider {
	width: 100%;
	height: 1px;
	background: var(--line)
}

.author {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	text-align: center
}

.author img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover
}

.section-divider {
	width: 100%;
	max-width: var(--container);
	height: auto;
	display: block;
	margin: 0 auto
}

.wave-divider {
	width: 100%;
	max-width: var(--container);
	height: 60px;
	display: block;
	margin: 0 auto;
	object-fit: cover
}

.cta-block {
	padding: 32px var(--pad) 36px;
	background: var(--bg)
}

.cta-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.cta-copy {
	display: flex;
	flex-direction: column;
	gap: 32px
}

.cta-text {
	display: flex;
	flex-direction: column;
	gap: 24px
}

.cta-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap
}

.cta-image {
	border-radius: 8px;
	overflow: hidden
}

.cta-image img {
	width: 100%;
	aspect-ratio: 600/400;
	object-fit: cover
}

.faq-section {
	padding: 112px var(--pad);
	background: var(--bg)
}

.faq-shell {
	display: flex;
	flex-direction: column;
	gap: 80px
}

.section-title {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 768px;
	margin: 0 auto;
	text-align: center;
	align-items: center
}

.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px
}

.faq-col {
	border-bottom: 1px solid var(--line)
}

.faq-item {
	border-top: 1px solid var(--line)
}

.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5
}

.faq-item summary::-webkit-details-marker {
	display: none
}

.faq-item .faq-icon {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: transform .2s ease;
	transform: rotate(180deg);
}

.faq-item[open] .faq-icon {
	transform: rotate(0);
}

.faq-answer {
	padding: 0 0 24px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--white)
}

.related-section {
	padding: 80px 20px;
	background: var(--bg)
}

.related-shell {
	display: flex;
	flex-direction: column;
	gap: 80px
}

.related-head {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: flex-end
}

.related-copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 768px
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px
}

.blog-card {
	display: flex;
	flex-direction: column;
	gap: 24px
}

.blog-card img {
	width: 100%;
	aspect-ratio: 394/262.6;
	object-fit: cover;
	border-radius: 8px;
	background: #d9d9d9
}

.blog-info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
}

.blog-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center
}

.blog-title {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 1.5
}

.readmore svg {
	width: 18px;
	height: 18px;
	flex: none
}

.related-slider .blog-card {
	margin: 0 10px;
}

.related-slider .slick-list {
	margin: 0 -10px;
}

.related-wrapper {
	position: relative;
}

.related-controls {
	display: flex;
	justify-content: left;
	align-items: center;
	margin-top: 20px;
	gap: 40px;

}

/* DOTS */
.related-dots ul {
	display: flex !important;
	gap: 8px;
	padding: 0;
	margin: 0;
}

.related-dots li {
	list-style: none;
	line-height: 0;
}

.related-dots button {
	width: 8px;
	height: 12px;
	background: #5C646C;
	border-radius: 50%;
	border: none;
	font-size: 0;
}

.related-dots .slick-active button {
	background: #fff;
}

/* ARROWS */
.related-arrows {
	display: flex;
	gap: 16px;
}

.related-arrows button {
	background: #001527;
	color: #fff;
	border: none;
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 4px;
	line-height: 0;
	width: 46px;
	height: 46px;
	border: 1px solid #001221;
}

/* SVG sizing */
.related-arrows svg {
	width: 16px;
	height: 16px;
}

/* 👉 flip previous arrow */
.related-arrows .slick-prev svg {
	transform: rotate(180deg);
}

.related-arrows .slick-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width:1200px) {
	:root {
		--pad: 28px;
		--h1: 56px;
		--h2: 42px;
		--h3: 38px;
		--h4: 34px;
		--h5: 26px
	}

	.hero-card {
		padding: 88px 40px;
		min-height: 400px
	}

	.cta-wrap,
	.faq-grid,
	.related-grid {
		grid-template-columns: 1fr
	}

	.related-head {
		align-items: flex-start;
		flex-direction: column
	}
}

@media (max-width:780px) {
	:root {
		--pad: 18px;
		--h1: 40px;
		--h2: 32px;
		--h3: 30px;
		--h4: 26px;
		--h5: 22px;
		--h6: 20px
	}

	.hero-card {
		padding: 72px 24px;
		min-height: 320px
	}

	.article-section,
	.faq-section {
		padding-top: 80px;
		padding-bottom: 80px
	}

	.article-head {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 24px
	}

	.share-icons {
		align-self: flex-end
	}

	.cta-actions .btn {
		width: 100%
	}

	.faq-grid {
		gap: 0
	}

	.faq-col {
		border-bottom: none
	}

	.faq-col:last-child .faq-item:last-child {
		border-bottom: 1px solid var(--line)
	}
}