/* ============================================================
   Bastion v0.3.1 — rich Elementor-style components (REPALETTE)
   All purple/pink stops removed. Navy + cyan + sky-blue throughout.
   ============================================================ */

@layer components {

	/* ================================================================
	   HERO — photo background + navy/cyan gradient overlay + caption
	   ================================================================ */
	.hero {
		position: relative;
		min-height: 640px;
		display: flex;
		align-items: center;
		padding: var(--space-9) var(--space-5);
		overflow: hidden;
		isolation: isolate;
		color: #fff;
	}
	.hero__bg {
		position: absolute;
		inset: 0;
		z-index: -2;
		background-size: cover;
		background-position: center;
	}
	.hero__overlay {
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(135deg,
				rgba(15, 23, 42, 0.94) 0%,
				rgba(15, 23, 42, 0.78) 35%,
				rgba(8, 145, 178, 0.55) 70%,
				rgba(3, 105, 161, 0.42) 100%);
	}
	.hero__inner {
		max-width: var(--page-max);
		margin: 0 auto;
		width: 100%;
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: var(--space-7);
		align-items: center;
	}
	@media (max-width: 880px) {
		.hero__inner { grid-template-columns: 1fr; }
	}
	.hero__copy { max-width: 640px; }
	.hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--fs-sm);
		font-weight: 600;
		color: #fff;
		background: rgba(255, 255, 255, 0.12);
		backdrop-filter: blur(8px);
		padding: var(--space-2) var(--space-4);
		border-radius: 99px;
		border: 1px solid rgba(94, 230, 255, 0.4);
		margin-bottom: var(--space-5);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}
	.hero__eyebrow svg { width: 14px; height: 14px; color: #67e8f9; }
	.hero__title {
		font-size: clamp(2.25rem, 1.8rem + 2.5vw, 3.75rem);
		line-height: 1.08;
		letter-spacing: -0.025em;
		color: #fff;
		margin: 0 0 var(--space-4);
		font-weight: 800;
	}
	/* Highlighted word: white → pale cyan → bright cyan. NO purple, NO pink. */
	.hero__title em {
		font-style: normal;
		background: linear-gradient(120deg, #ffffff 0%, #67e8f9 50%, #38bdf8 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		padding-right: 4px;
	}
	.hero__sub {
		font-size: var(--fs-lg);
		color: rgba(255, 255, 255, 0.92);
		max-width: 580px;
		margin: 0 0 var(--space-6);
		line-height: 1.55;
	}
	.hero__ctas {
		display: flex;
		gap: var(--space-3);
		flex-wrap: wrap;
		margin-bottom: var(--space-6);
	}
	.hero__ctas .btn--secondary {
		background: rgba(255, 255, 255, 0.96);
		color: var(--c-text);
		border-color: transparent;
	}
	.hero__ctas .btn--secondary:hover { color: var(--c-accent); }
	.hero__ctas .btn--ghost {
		color: #fff;
		border: 1px solid rgba(255, 255, 255, 0.3);
	}
	.hero__ctas .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
	.hero__trustline {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		color: rgba(255, 255, 255, 0.85);
		font-size: var(--fs-sm);
	}
	.hero__avatars { display: inline-flex; }
	.hero__avatars img {
		width: 36px; height: 36px;
		border-radius: 50%;
		border: 2px solid #fff;
		margin-left: -10px;
		object-fit: cover;
	}
	.hero__avatars img:first-child { margin-left: 0; }

	.hero__feature-card {
		background: rgba(255, 255, 255, 0.97);
		border-radius: var(--radius-xl);
		padding: var(--space-5);
		box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
		color: var(--c-text);
		max-width: 420px;
		margin-left: auto;
		position: relative;
		animation: hero-card-float 6s ease-in-out infinite alternate;
	}
	@keyframes hero-card-float {
		from { transform: translateY(0); }
		to   { transform: translateY(-12px); }
	}
	@media (prefers-reduced-motion: reduce) {
		.hero__feature-card { animation: none; }
	}
	.hero__feature-card__photo {
		width: 100%;
		aspect-ratio: 16/10;
		border-radius: var(--radius);
		background-size: cover;
		background-position: center;
		margin-bottom: var(--space-4);
	}
	.hero__feature-card__row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-2) 0;
		border-bottom: 1px solid var(--c-border-subtle);
		font-size: var(--fs-sm);
	}
	.hero__feature-card__row:last-child { border-bottom: 0; }
	.hero__feature-card__check {
		width: 20px; height: 20px;
		border-radius: 50%;
		background: var(--grad-cyan);
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.hero__feature-card__check svg { width: 12px; height: 12px; }

	/* ================================================================
	   GRADIENT ICON TILE — navy/cyan/sky/teal family only
	   ================================================================ */
	.icon-tile {
		width: 56px; height: 56px;
		border-radius: 14px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		flex-shrink: 0;
		box-shadow: 0 6px 16px -4px rgba(8, 145, 178, 0.35);
	}
	.icon-tile svg { width: 28px; height: 28px; stroke-width: 1.75; }
	.icon-tile--cyan   { background: var(--grad-cyan);  box-shadow: 0 6px 16px -4px rgba(6, 182, 212, 0.4); }
	.icon-tile--sky    { background: var(--grad-sky);   box-shadow: 0 6px 16px -4px rgba(2, 132, 199, 0.4); }
	.icon-tile--blue   { background: var(--grad-blue);  box-shadow: 0 6px 16px -4px rgba(59, 130, 246, 0.4); }
	.icon-tile--teal   { background: var(--grad-teal);  box-shadow: 0 6px 16px -4px rgba(20, 184, 166, 0.4); }
	.icon-tile--navy   { background: var(--grad-navy);  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.45); }
	.icon-tile--slate  { background: var(--grad-slate); box-shadow: 0 6px 16px -4px rgba(71, 85, 105, 0.4); }
	.icon-tile--amber  { background: var(--grad-amber); box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.4); }
	.icon-tile--red    { background: var(--grad-red);   box-shadow: 0 6px 16px -4px rgba(220, 38, 38, 0.4); }
	.icon-tile--brand  { background: var(--grad-brand); box-shadow: var(--shadow-brand); }
	.icon-tile--green  { background: var(--grad-green); box-shadow: 0 6px 16px -4px rgba(22, 163, 74, 0.4); }
	.icon-tile--sm { width: 36px; height: 36px; border-radius: 10px; }
	.icon-tile--sm svg { width: 18px; height: 18px; }

	/* ================================================================
	   SECTION SHELL
	   ================================================================ */
	.section { padding: var(--space-9) var(--space-5); }
	.section--alt { background: var(--c-sunken); }
	.section--brand { background: linear-gradient(180deg, var(--c-canvas) 0%, var(--c-accent-soft) 100%); }
	.section--dark { background: #0f172a; color: #cbd5e1; }
	.section--dark h2, .section--dark h3 { color: #fff; }
	.section__inner { max-width: var(--page-max); margin: 0 auto; }
	.section__head {
		text-align: center;
		max-width: 720px;
		margin: 0 auto var(--space-7);
	}
	.section__eyebrow {
		display: inline-block;
		font-size: var(--fs-sm);
		font-weight: 700;
		color: var(--c-accent);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin-bottom: var(--space-3);
	}
	.section__title {
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
		margin: 0 0 var(--space-3);
	}
	.section__intro {
		color: var(--c-text-muted);
		font-size: var(--fs-lg);
		margin: 0 auto;
	}

	/* ================================================================
	   FEATURE GRID + SERVICE CARDS
	   ================================================================ */
	.feature-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--space-5);
	}
	.feature {
		background: var(--c-canvas);
		border: 1px solid var(--c-border-subtle);
		border-radius: var(--radius-lg);
		padding: var(--space-6);
		box-shadow: var(--shadow-sm);
		transition:
			transform var(--motion-fast) var(--ease-out),
			box-shadow var(--motion-base) var(--ease-out),
			border-color var(--motion-fast) var(--ease-base);
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		text-decoration: none;
		color: var(--c-text);
		position: relative;
		overflow: hidden;
	}
	.feature:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-lg);
		border-color: transparent;
	}
	.feature__title {
		font-size: var(--fs-lg);
		font-weight: 700;
		color: var(--c-text);
		margin: 0;
		letter-spacing: -0.015em;
	}
	.feature__desc {
		color: var(--c-text-muted);
		font-size: var(--fs-sm);
		line-height: 1.6;
		margin: 0;
		flex: 1;
	}
	.feature__cta {
		font-weight: 600;
		font-size: var(--fs-sm);
		color: var(--c-accent);
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		transition: gap var(--motion-fast) var(--ease-base);
	}
	.feature:hover .feature__cta { gap: var(--space-3); color: var(--c-accent-strong); }
	.feature__cta svg { width: 14px; height: 14px; }

	/* ================================================================
	   STAT STRIP — navy → cyan (no purple/pink)
	   ================================================================ */
	.stat-band {
		background:
			radial-gradient(circle at 25% 50%, rgba(6, 182, 212, 0.32), transparent 60%),
			radial-gradient(circle at 80% 30%, rgba(56, 189, 248, 0.22), transparent 60%),
			linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0e7490 100%);
		color: #fff;
		padding: var(--space-8) var(--space-5);
		position: relative;
		overflow: hidden;
	}
	.stat-band::before, .stat-band::after {
		content: "";
		position: absolute;
		width: 600px;
		height: 600px;
		border-radius: 50%;
		filter: blur(120px);
		opacity: 0.28;
		pointer-events: none;
	}
	.stat-band::before { background: #06b6d4; top: -200px; left: 10%; }
	.stat-band::after  { background: #0ea5e9; bottom: -200px; right: 10%; }
	.stat-band__grid {
		max-width: var(--page-max);
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--space-5);
		position: relative;
		z-index: 1;
	}
	.stat-band__cell {
		text-align: center;
		padding: var(--space-3) var(--space-4);
		border-left: 2px solid rgba(94, 230, 255, 0.22);
	}
	.stat-band__cell:first-child { border-left: 0; }
	@media (max-width: 700px) { .stat-band__cell { border-left: 0; } }
	.stat-band__num {
		font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.03em;
		color: #fff;
		display: block;
	}
	.stat-band__suffix { font-size: 0.55em; color: #67e8f9; margin-left: 4px; }
	.stat-band__label {
		display: block;
		margin-top: var(--space-3);
		font-size: var(--fs-sm);
		color: rgba(255, 255, 255, 0.85);
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	/* ================================================================
	   ABOUT / FEATURE ROWS
	   ================================================================ */
	.feature-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
		align-items: center;
		margin-bottom: var(--space-9);
	}
	.feature-row:last-child { margin-bottom: 0; }
	.feature-row--reverse > :first-child { order: 2; }
	@media (max-width: 880px) {
		.feature-row { grid-template-columns: 1fr; gap: var(--space-5); }
		.feature-row--reverse > :first-child { order: 0; }
	}
	.feature-row__photo {
		position: relative;
		border-radius: var(--radius-xl);
		overflow: hidden;
		aspect-ratio: 4/3;
		background-size: cover;
		background-position: center;
		box-shadow: var(--shadow-md);
	}
	.feature-row__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(160deg, transparent 60%, rgba(8, 145, 178, 0.18));
	}
	.feature-row__photo-badge {
		position: absolute;
		bottom: var(--space-4);
		left: var(--space-4);
		background: rgba(255, 255, 255, 0.97);
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius);
		box-shadow: var(--shadow-md);
		display: flex;
		align-items: center;
		gap: var(--space-3);
		color: var(--c-text);
		font-size: var(--fs-sm);
		font-weight: 600;
		z-index: 1;
	}
	.feature-row__copy h2 { margin-bottom: var(--space-4); }
	.feature-row__bullets {
		list-style: none;
		padding: 0;
		margin: var(--space-5) 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}
	.feature-row__bullets li {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		color: var(--c-text);
	}
	.feature-row__bullets li svg {
		flex-shrink: 0;
		width: 22px;
		height: 22px;
		color: var(--c-success);
		margin-top: 2px;
	}

	/* ================================================================
	   PROCESS
	   ================================================================ */
	.process {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: var(--space-5);
		max-width: var(--page-max);
		margin: 0 auto;
		position: relative;
	}
	.process__step {
		text-align: center;
		padding: var(--space-4);
		position: relative;
	}
	.process__num {
		width: 64px; height: 64px;
		border-radius: 50%;
		background: var(--grad-brand);
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: var(--fs-xl);
		font-weight: 800;
		margin: 0 auto var(--space-4);
		box-shadow: var(--shadow-brand);
		position: relative;
	}
	.process__num::after {
		content: "";
		position: absolute;
		inset: -6px;
		border: 2px dashed rgba(8, 145, 178, 0.3);
		border-radius: 50%;
	}
	.process__title {
		font-size: var(--fs-lg);
		font-weight: 700;
		margin: 0 0 var(--space-2);
	}
	.process__desc { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; }

	/* ================================================================
	   TEAM CARDS
	   ================================================================ */
	.team-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: var(--space-5);
	}
	.team-card {
		background: var(--c-canvas);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		transition: all var(--motion-base) var(--ease-out);
		text-align: center;
		padding-bottom: var(--space-5);
	}
	.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
	.team-card__photo {
		width: 100%;
		aspect-ratio: 1/1;
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.team-card__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 60%, rgba(8, 145, 178, 0.45));
		opacity: 0;
		transition: opacity var(--motion-base) var(--ease-base);
	}
	.team-card:hover .team-card__photo::after { opacity: 1; }
	.team-card__name {
		font-size: var(--fs-lg);
		font-weight: 700;
		margin: var(--space-4) var(--space-3) var(--space-1);
	}
	.team-card__role {
		color: var(--c-accent);
		font-size: var(--fs-sm);
		font-weight: 500;
		margin: 0 var(--space-3) var(--space-3);
	}
	.team-card__socials { display: inline-flex; gap: var(--space-2); }
	.team-card__socials a {
		width: 32px; height: 32px;
		border-radius: 50%;
		background: var(--c-sunken);
		color: var(--c-text-muted);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: all var(--motion-fast) var(--ease-base);
	}
	.team-card__socials a:hover { background: var(--grad-brand); color: #fff; }
	.team-card__socials svg { width: 14px; height: 14px; }

	/* ================================================================
	   TESTIMONIALS
	   ================================================================ */
	.testimonials {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		gap: var(--space-5);
	}
	.testimonial {
		background: var(--c-canvas);
		border: 1px solid var(--c-border-subtle);
		border-radius: var(--radius-lg);
		padding: var(--space-6);
		position: relative;
		box-shadow: var(--shadow-sm);
		transition: all var(--motion-base) var(--ease-out);
	}
	.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
	.testimonial__quote-mark {
		font-size: 4rem;
		line-height: 0.5;
		color: var(--c-accent);
		opacity: 0.22;
		font-family: Georgia, serif;
		margin-bottom: var(--space-3);
		display: block;
	}
	.testimonial__stars {
		display: inline-flex;
		gap: 2px;
		margin-bottom: var(--space-3);
		color: #fbbf24;
	}
	.testimonial__stars svg { width: 16px; height: 16px; }
	.testimonial__body {
		color: var(--c-text);
		font-size: var(--fs-base);
		line-height: 1.55;
		margin: 0 0 var(--space-5);
	}
	.testimonial__author {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding-top: var(--space-4);
		border-top: 1px solid var(--c-border-subtle);
	}
	.testimonial__avatar {
		width: 48px; height: 48px;
		border-radius: 50%;
		background-size: cover;
		background-position: center;
		flex-shrink: 0;
	}
	.testimonial__name { font-weight: 700; color: var(--c-text); margin: 0; }
	.testimonial__role { font-size: var(--fs-sm); color: var(--c-text-subtle); margin: 0; }

	/* ================================================================
	   LOGO MARQUEE
	   ================================================================ */
	.trust-bar {
		padding: var(--space-6) 0;
		overflow: hidden;
		background: var(--c-canvas);
		border-block: 1px solid var(--c-border-subtle);
	}
	.trust-bar__label {
		text-align: center;
		font-size: var(--fs-xs);
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--c-text-subtle);
		margin-bottom: var(--space-4);
		font-weight: 600;
	}
	.trust-bar__track {
		display: flex;
		gap: var(--space-8);
		animation: marquee 30s linear infinite;
		width: max-content;
	}
	.trust-bar:hover .trust-bar__track { animation-play-state: paused; }
	@keyframes marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}
	.trust-bar__logo {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-weight: 600;
		font-size: var(--fs-lg);
		color: var(--c-text-subtle);
		opacity: 0.65;
		white-space: nowrap;
		transition: opacity var(--motion-fast) var(--ease-base), color var(--motion-fast) var(--ease-base);
	}
	.trust-bar__logo:hover { opacity: 1; color: var(--c-text); }
	.trust-bar__logo svg { width: 22px; height: 22px; opacity: 0.8; }

	/* ================================================================
	   BLOG CARDS
	   ================================================================ */
	.blog-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: var(--space-5);
	}
	.blog-card {
		background: var(--c-canvas);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		transition: all var(--motion-base) var(--ease-out);
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: var(--c-text);
	}
	.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
	.blog-card__thumb {
		aspect-ratio: 16/10;
		background-size: cover;
		background-position: center;
		position: relative;
		overflow: hidden;
	}
	.blog-card__thumb::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(45deg, rgba(8, 145, 178, 0.15), transparent);
	}
	.blog-card__cat {
		position: absolute;
		top: var(--space-3);
		left: var(--space-3);
		background: rgba(255, 255, 255, 0.95);
		padding: var(--space-1) var(--space-3);
		border-radius: 99px;
		font-size: var(--fs-xs);
		font-weight: 700;
		color: var(--c-accent);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		z-index: 1;
	}
	.blog-card__body {
		padding: var(--space-5);
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.blog-card__meta {
		display: flex;
		gap: var(--space-4);
		font-size: var(--fs-xs);
		color: var(--c-text-subtle);
		margin-bottom: var(--space-3);
	}
	.blog-card__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
	.blog-card__meta svg { width: 13px; height: 13px; }
	.blog-card__title {
		font-size: var(--fs-lg);
		font-weight: 700;
		line-height: 1.35;
		margin: 0 0 var(--space-3);
		color: var(--c-text);
	}
	.blog-card:hover .blog-card__title { color: var(--c-accent); }
	.blog-card__excerpt {
		color: var(--c-text-muted);
		font-size: var(--fs-sm);
		line-height: 1.6;
		margin: 0 0 var(--space-4);
		flex: 1;
	}
	.blog-card__more {
		font-weight: 600;
		font-size: var(--fs-sm);
		color: var(--c-accent);
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}
	.blog-card__more svg { width: 14px; height: 14px; transition: transform var(--motion-fast) var(--ease-base); }
	.blog-card:hover .blog-card__more svg { transform: translateX(4px); }

	/* ================================================================
	   SINGLE POST
	   ================================================================ */
	.single-hero {
		background-size: cover;
		background-position: center;
		min-height: 480px;
		position: relative;
		display: flex;
		align-items: flex-end;
		padding: var(--space-9) var(--space-5) var(--space-7);
		color: #fff;
		isolation: isolate;
	}
	.single-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.88) 100%);
		z-index: -1;
	}
	.single-hero__inner {
		max-width: 900px;
		margin: 0 auto;
		width: 100%;
	}
	.single-hero__cat {
		display: inline-block;
		background: var(--grad-brand);
		color: #fff;
		font-size: var(--fs-xs);
		font-weight: 700;
		padding: var(--space-1) var(--space-3);
		border-radius: 99px;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		margin-bottom: var(--space-4);
		text-decoration: none;
	}
	.single-hero__title {
		font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
		color: #fff;
		margin: 0 0 var(--space-4);
		line-height: 1.1;
	}
	.single-hero__meta {
		display: flex;
		gap: var(--space-5);
		flex-wrap: wrap;
		color: rgba(255, 255, 255, 0.85);
		font-size: var(--fs-sm);
	}
	.single-hero__meta-cell { display: inline-flex; align-items: center; gap: var(--space-2); }
	.single-hero__meta svg { width: 16px; height: 16px; }
	.single-hero__author-avatar {
		width: 32px; height: 32px;
		border-radius: 50%;
		background-size: cover;
		background-position: center;
		border: 2px solid rgba(255, 255, 255, 0.5);
		display: inline-block;
	}

	.single-body {
		max-width: var(--page-max);
		margin: 0 auto;
		padding: var(--space-8) var(--space-5);
		display: grid;
		grid-template-columns: 1fr 280px;
		gap: var(--space-7);
		align-items: start;
	}
	@media (max-width: 880px) { .single-body { grid-template-columns: 1fr; } }
	.single-content {
		font-size: var(--fs-lg);
		line-height: 1.75;
		color: var(--c-text);
		max-width: var(--prose-max);
	}
	.single-content > * + * { margin-top: var(--space-5); }
	.single-content h2 {
		font-size: var(--fs-2xl);
		margin-top: var(--space-7);
		margin-bottom: var(--space-3);
	}
	.single-content h3 {
		font-size: var(--fs-xl);
		margin-top: var(--space-6);
		margin-bottom: var(--space-3);
	}
	.single-content p { color: var(--c-text); }
	.single-content img { border-radius: var(--radius); margin: var(--space-5) 0; }
	.single-content ul, .single-content ol {
		padding-left: var(--space-5);
		color: var(--c-text);
	}
	.single-content ul li, .single-content ol li { margin-bottom: var(--space-2); }

	.single-sidebar {
		position: sticky;
		top: 100px;
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}
	.sidebar-card {
		background: var(--c-canvas);
		border: 1px solid var(--c-border-subtle);
		border-radius: var(--radius);
		padding: var(--space-5);
		box-shadow: var(--shadow-sm);
	}
	.sidebar-card h4 {
		margin: 0 0 var(--space-3);
		font-size: var(--fs-base);
		font-weight: 700;
	}
	.sidebar-card ul { list-style: none; padding: 0; margin: 0; }
	.sidebar-card li { padding: var(--space-2) 0; border-bottom: 1px solid var(--c-border-subtle); font-size: var(--fs-sm); }
	.sidebar-card li:last-child { border-bottom: 0; }
	.sidebar-card a { color: var(--c-text-muted); text-decoration: none; }
	.sidebar-card a:hover { color: var(--c-accent); }

	/* ================================================================
	   CTA BAND — navy / cyan (no purple/pink)
	   ================================================================ */
	.cta-band {
		background:
			radial-gradient(circle at 20% 50%, rgba(6, 182, 212, 0.4), transparent 60%),
			radial-gradient(circle at 80% 30%, rgba(56, 189, 248, 0.28), transparent 60%),
			linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0e7490 100%);
		color: #fff;
		padding: var(--space-9) var(--space-5);
		position: relative;
		overflow: hidden;
		text-align: center;
	}
	.cta-band::before, .cta-band::after {
		content: "";
		position: absolute;
		width: 500px;
		height: 500px;
		border-radius: 50%;
		filter: blur(100px);
		opacity: 0.4;
	}
	.cta-band::before { background: #06b6d4; top: -200px; left: -100px; }
	.cta-band::after  { background: #0ea5e9; bottom: -200px; right: -100px; }
	.cta-band__inner {
		max-width: 720px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}
	.cta-band__title { color: #fff; margin: 0 0 var(--space-3); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
	.cta-band__sub { color: rgba(255, 255, 255, 0.92); font-size: var(--fs-lg); margin: 0 0 var(--space-6); max-width: 540px; margin-left: auto; margin-right: auto; }
	.cta-band__form {
		display: flex;
		gap: var(--space-2);
		max-width: 480px;
		margin: 0 auto;
		flex-wrap: wrap;
		justify-content: center;
	}
	.cta-band__form input[type="email"] {
		flex: 1;
		min-width: 240px;
		padding: var(--space-4) var(--space-5);
		border-radius: var(--radius);
		border: 0;
		background: rgba(255, 255, 255, 0.96);
		color: var(--c-text);
		font-size: var(--fs-base);
	}
	.cta-band__form input[type="email"]:focus-visible { outline: 3px solid #67e8f9; outline-offset: 2px; }
	.cta-band__form .btn--primary {
		background: #fff;
		color: var(--c-accent-strong);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	}
	.cta-band__form .btn--primary:hover { background: #f8fafc; color: var(--c-cyan-3); }

	/* ================================================================
	   PAGINATION
	   ================================================================ */
	.pagination {
		display: flex;
		justify-content: center;
		gap: var(--space-2);
		margin-top: var(--space-8);
	}
	.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 40px;
		padding: 0 var(--space-3);
		border-radius: var(--radius-sm);
		background: var(--c-canvas);
		border: 1px solid var(--c-border-subtle);
		color: var(--c-text-muted);
		font-weight: 600;
		text-decoration: none;
		transition: all var(--motion-fast) var(--ease-base);
	}
	.pagination .page-numbers:hover {
		background: var(--c-accent-soft);
		border-color: var(--c-accent);
		color: var(--c-accent);
	}
	.pagination .page-numbers.current {
		background: var(--grad-brand);
		color: #fff;
		border-color: transparent;
		box-shadow: var(--shadow-brand);
	}

	/* ================================================================
	   REVEAL-ON-SCROLL UTILITY
	   ================================================================ */
	[data-reveal] {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
	}
	[data-reveal].is-revealed {
		opacity: 1;
		transform: translateY(0);
	}
	@media (prefers-reduced-motion: reduce) {
		[data-reveal] { opacity: 1; transform: none; transition: none; }
	}
}