:root {
	--navy: #080c18;
	--blue: #5b5ef7;
	--blue-dark: #4144d8;
	--cyan: #59f2c7;
	--violet: #a776ff;
	--soft: #f3f5f9;
	--radius: 22px;
	--shadow: 0 24px 70px rgba(9, 14, 31, 0.14);
	--wrap: 1240px;
}

body {
	background: #fafbfc;
}

.reading-progress {
	position: absolute;
	inset: auto 0 -1px;
	height: 3px;
	background: linear-gradient(90deg, var(--blue), var(--violet), var(--cyan));
	transform: scaleX(0);
	transform-origin: left;
}

.home-hero {
	position: relative;
	padding: clamp(64px, 8vw, 112px) 0 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 78% 35%, rgba(91, 94, 247, 0.38), transparent 28%),
		radial-gradient(circle at 15% 5%, rgba(89, 242, 199, 0.13), transparent 30%),
		linear-gradient(145deg, #070914 0%, #101426 55%, #0a1020 100%);
	color: white;
}

.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 58px 58px;
	-webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
	mask-image: linear-gradient(to bottom, black, transparent 88%);
	pointer-events: none;
}

.home-hero__inner {
	position: relative;
	grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
	gap: clamp(48px, 7vw, 100px);
}

.hero-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 11px;
	margin: 0 0 25px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: #cdd5e6;
	font-size: 0.74rem;
	font-weight: 760;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hero-status span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 0 5px rgba(89, 242, 199, 0.12);
}

.home-hero h1 {
	max-width: 760px;
	font-size: clamp(2.5rem, 5.2vw, 4.7rem);
	line-height: 1;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.home-hero h1 em {
	display: block;
	padding-bottom: 0.08em;
	background: linear-gradient(100deg, var(--cyan), #9ab7ff 50%, var(--violet));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: normal;
}

.home-hero .search-field {
	height: 56px;
	border-color: rgba(255, 255, 255, 0.14);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-hero .search-form button {
	min-height: 56px;
	padding-inline: 26px;
	border-radius: 15px;
}

.hero-proof {
	display: flex;
	gap: clamp(24px, 4vw, 48px);
	margin-top: 36px;
}

.hero-proof div {
	display: grid;
}

.hero-proof strong {
	font-size: 1.45rem;
	line-height: 1;
	letter-spacing: -0.04em;
}

.hero-proof span {
	margin-top: 6px;
	color: #8390a9;
	font-size: 0.72rem;
}

.hero-console {
	position: relative;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 25px;
	background: rgba(10, 14, 29, 0.78);
	box-shadow: 0 45px 100px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transform: rotate(1.5deg);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.hero-console__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 16px 19px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #77849d;
	font: 600 0.7rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.hero-console__bar i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff6b6b;
}

.hero-console__bar i:nth-child(2) { background: #ffd166; }
.hero-console__bar i:nth-child(3) { background: var(--cyan); }
.hero-console__bar span { margin-left: auto; }

.hero-console__body {
	padding: 32px;
}

.hero-console__body > p {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 14px;
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #dbe2ef;
	font: 650 0.9rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.hero-console__body p span { color: #65728b; }
.hero-console__body p b { color: var(--cyan); }

.console-command {
	padding: 19px;
	margin-top: 24px;
	border: 1px solid rgba(89, 242, 199, 0.2);
	border-radius: 15px;
	background: rgba(89, 242, 199, 0.07);
}

.console-command small {
	display: block;
	margin-bottom: 6px;
	color: var(--cyan);
	font: 700 0.64rem ui-monospace, monospace;
	text-transform: uppercase;
}

.console-command code {
	color: #e9fff9;
	font: 0.82rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.hero-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 13px;
	background: rgba(24, 29, 49, 0.92);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
	color: #d8dfec;
	font-size: 0.68rem;
	font-weight: 720;
}

.hero-float--one { right: -32px; bottom: 70px; }
.hero-float--one > span,
.hero-float--one strong { color: var(--cyan); }
.hero-float--one strong { font-size: 0.58rem; }
.hero-float--two { left: 44%; top: -26px; color: white; font-size: 1rem; }
.hero-float--two span { color: #8e9ab0; font-size: 0.64rem; }

.home-topics {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 28px;
	padding: 20px 25px;
	margin-top: clamp(58px, 8vw, 94px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 0;
	border-radius: 20px 20px 0 0;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.home-topics > span {
	color: #78859c;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.home-topics ul {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.home-topics a {
	display: block;
	padding: 8px 13px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: white;
	font-size: 0.8rem;
	font-weight: 690;
	text-decoration: none;
}

.home-topics a:hover {
	border-color: var(--cyan);
	background: var(--cyan);
	color: var(--navy);
}

.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
}

.section-heading__note {
	max-width: 260px;
	margin: 0;
	color: var(--muted);
	font-size: 0.86rem;
	text-align: right;
}

.post-grid--home .post-card:not(:first-child) {
	grid-template-columns: 1fr;
}

.post-grid--home .post-card:not(:first-child) .post-card__media {
	height: 230px;
}

.post-grid--home .post-card:first-child {
	grid-column: 1 / -1;
	min-height: 410px;
	border: 0;
	background: var(--navy);
	box-shadow: 0 30px 80px rgba(8, 12, 24, 0.18);
	color: white;
}

.post-grid--home .post-card:first-child .post-card__media img,
.post-grid--home .post-card:first-child .post-card__placeholder {
	min-height: 410px;
}

.post-grid--home .post-card:first-child .post-card__title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	line-height: 1.06;
}

.post-grid--home .post-card:first-child .post-card__title a { color: white; }
.post-grid--home .post-card:first-child .post-card__excerpt,
.post-grid--home .post-card:first-child .post-card__meta { color: #aab5c9; }
.post-grid--home .post-card:first-child .post-card__body { padding: clamp(28px, 4vw, 48px); }

.post-card__placeholder {
	background:
		radial-gradient(circle at 70% 25%, rgba(167, 118, 255, 0.7), transparent 28%),
		linear-gradient(145deg, var(--navy), #2830a5);
}

.article-header {
	position: relative;
	padding: clamp(35px, 6vw, 68px) clamp(22px, 5vw, 58px);
	margin-bottom: 42px;
	overflow: hidden;
	border-radius: 28px;
	background:
		radial-gradient(circle at 80% 0, rgba(91, 94, 247, 0.18), transparent 35%),
		linear-gradient(145deg, #f6f7fb, #fff);
}

.article-cta {
	background:
		radial-gradient(circle at 90% 10%, rgba(167, 118, 255, 0.35), transparent 35%),
		var(--navy);
}

.site-footer {
	background:
		radial-gradient(circle at 15% 100%, rgba(91, 94, 247, 0.25), transparent 30%),
		linear-gradient(145deg, #070914, #11172c);
}

@media (max-width: 1020px) {
	.home-hero__inner {
		grid-template-columns: 1fr;
	}

	.hero-console {
		width: min(100%, 620px);
		margin-inline: auto;
	}
}

@media (max-width: 700px) {
	.home-hero { padding-top: 52px; }
	.home-hero h1 { font-size: clamp(2.7rem, 15vw, 4.4rem); }
	.hero-console { transform: none; }
	.hero-float { display: none; }
	.hero-console__body { padding: 22px; }
	.hero-proof { justify-content: space-between; gap: 12px; }
	.hero-proof strong { font-size: 1.2rem; }
	.home-topics { grid-template-columns: 1fr; gap: 12px; padding: 17px; }
	.section-heading { align-items: start; flex-direction: column; }
	.section-heading__note { text-align: left; }
	.post-grid--home .post-card:first-child {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.post-grid--home .post-card:first-child .post-card__media img,
	.post-grid--home .post-card:first-child .post-card__placeholder {
		min-height: 250px;
	}
}