:root {
			--bg: #03070f;
			--fg: #f5f7ff;
			--muted: #aab1ca;
			--surface: rgba(13, 18, 32, 0.92);
			--surface-alt: rgba(18, 24, 42, 0.9);
			--border: rgba(255, 255, 255, 0.08);
			--accent: #5ef1a7;
			--accent-soft: #7ad9ff;
			--shadow: 0 40px 80px rgba(3, 4, 20, 0.55);
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-family: "Space Grotesk", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
			background: radial-gradient(circle at 10% 20%, rgba(94, 241, 167, 0.18), transparent 40%),
			            radial-gradient(circle at 90% 0%, rgba(122, 217, 255, 0.2), transparent 35%),
			            var(--bg);
			color: var(--fg);
			line-height: 1.6;
			min-height: 100vh;
		}

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

		a {
			color: var(--accent-soft);
			text-decoration: none;
		}

		a:hover {
			opacity: 0.85;
		}

		.noise {
			position: fixed;
			inset: 0;
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E") repeat;
			pointer-events: none;
			opacity: 0.45;
			z-index: 0;
		}

		header,
		section {
			position: relative;
			z-index: 1;
		}

		.container {
			width: min(1200px, 100% - 2.5rem);
			margin: 0 auto;
		}

		header.hero {
			padding: 4.5rem 0 3rem;
		}

		.hero__grid {
			display: grid;
			grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
			gap: 3rem;
			align-items: center;
		}

		.hero__content h1 {
			font-size: clamp(2.4rem, 4vw, 3.4rem);
			line-height: 1.2;
			margin-bottom: 1.25rem;
		}

		.eyebrow {
			text-transform: uppercase;
			letter-spacing: 0.2em;
			font-size: 0.78rem;
			color: var(--accent);
			margin-bottom: 0.8rem;
		}

		.lede {
			color: var(--muted);
			font-size: 1.05rem;
			margin-bottom: 1.5rem;
		}

		.hero__ctas {
			display: flex;
			flex-wrap: wrap;
			gap: 0.9rem;
		}

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0.85rem 1.5rem;
			border-radius: 999px;
			font-weight: 600;
			border: 1px solid transparent;
			transition: transform 0.2s ease, box-shadow 0.2s ease;
		}

		.btn.primary {
			background: linear-gradient(120deg, var(--accent), #38d8ff);
			color: #06121f;
			box-shadow: 0 20px 45px rgba(94, 241, 167, 0.35);
		}

		.btn.ghost {
			border-color: var(--border);
			background: transparent;
			color: var(--fg);
		}

		.btn:hover {
			transform: translateY(-1px);
		}

		.stats {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
			gap: 1rem;
			margin-top: 2rem;
		}

		.stats dt {
			font-size: 1.6rem;
			font-weight: 600;
			color: var(--accent);
		}

		.stats dd {
			margin: 0.5rem 0 0;
			color: var(--muted);
		}

		.hero__card {
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: 1.5rem;
			overflow: hidden;
			box-shadow: var(--shadow);
			max-width: 260px;
		}

		.hero__card img {
			width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: cover;
			object-position: center 10%;
		}

		.card__body {
			padding: 1.5rem;
		}

		.card__title {
			font-weight: 600;
			margin-bottom: 0.5rem;
		}

		.hero__card ul {
			padding-left: 1.2rem;
			margin: 0;
			color: var(--muted);
		}

		.section {
			padding: 4.5rem 0;
		}

		.section.alt {
			background: linear-gradient(180deg, rgba(13, 18, 32, 0.7), rgba(3, 7, 15, 0.95));
		}

		.section__heading h2 {
			font-size: clamp(1.8rem, 3vw, 2.4rem);
			margin-bottom: 0.5rem;
		}

		.section__heading p {
			max-width: 620px;
			color: var(--muted);
		}

		.section__heading p.section__heading-line {
			max-width: none;
		}

		.cards {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 1.5rem;
			margin-top: 2.5rem;
		}

		.card {
			padding: 1.8rem;
			border-radius: 1.2rem;
			border: 1px solid var(--border);
			background: var(--surface);
			box-shadow: var(--shadow);
		}

		.card__eyebrow {
			font-size: 0.85rem;
			color: var(--muted);
			text-transform: uppercase;
			letter-spacing: 0.2em;
			margin-bottom: 0.5rem;
		}

		.card h3 {
			margin: 0 0 0.5rem;
		}

		.toolchain {
			margin-top: 2rem;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 1.5rem;
		}

		.toolchain article {
			padding: 1.5rem;
			border: 1px dashed var(--border);
			border-radius: 1rem;
			background: rgba(6, 12, 24, 0.6);
		}

		.toolchain h4 {
			margin-bottom: 0.3rem;
		}

		.toolchain p {
			font-size: 0.92rem;
			color: var(--muted);
		}

		.timeline {
			margin-top: 2.2rem;
			display: grid;
			gap: 1.5rem;
		}

		.timeline__item {
			padding: 1.8rem;
			border-radius: 1.2rem;
			border: 1px solid var(--border);
			background: var(--surface-alt);
		}

		.timeline__role {
			font-weight: 600;
			font-size: 1.1rem;
		}

		.timeline__meta {
			color: var(--muted);
			margin-bottom: 0.9rem;
		}

		.timeline__item ul {
			margin: 0;
			padding-left: 1.2rem;
			color: var(--muted);
		}

		.pillars {
			margin-top: 2rem;
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;
			list-style: none;
			padding: 0;
		}

		.pillars li {
			padding: 0.65rem 1rem;
			border-radius: 999px;
			border: 1px solid var(--border);
			background: rgba(255, 255, 255, 0.02);
			font-size: 0.92rem;
			color: var(--muted);
		}

		.edu-grid {
			margin-top: 2rem;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 1.5rem;
		}

		.edu-grid article {
			padding: 1.5rem;
			border-radius: 1rem;
			border: 1px solid var(--border);
			background: rgba(8, 12, 22, 0.75);
		}

		.contact {
			padding: 4rem 0 5rem;
		}

		.contact__grid {
			display: grid;
			grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
			gap: 2rem;
			align-items: center;
		}

		.contact__actions {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;
		}

		.contact__card {
			padding: 1.6rem;
			border-radius: 1.2rem;
			border: 1px solid var(--border);
			background: var(--surface);
		}

		.contact__card ul {
			list-style: none;
			padding: 0;
			margin: 1rem 0 0;
			display: grid;
			gap: 0.8rem;
			color: var(--muted);
		}

		footer {
			padding: 1.5rem 0 2.5rem;
			text-align: center;
			font-size: 0.9rem;
			color: var(--muted);
		}

		@media (max-width: 980px) {
			.hero__grid {
				grid-template-columns: 1fr;
			}

			.contact__grid {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 640px) {
			header.hero {
				padding-top: 3rem;
			}

			.hero__ctas {
				flex-direction: column;
				align-items: stretch;
			}

			.section {
				padding: 3.5rem 0;
			}

			.stats {
				grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
			}
		}