:root {
	--red: #f00808;
	--teal: #19d4d8;
    --teal-dark: #0aa6ad;
    --deep-teal: #0d3e4a;
	--gold: #ffc62e;
	--ink: #07111f;
	--navy: #07101c;
	--deep: #02050b;
	--muted: #6d7484;
	--white: #fff;
    --blush: rgba(242, 202, 202, 0.25);
	--glass: rgba(255, 255, 255, .08);
	--line: rgba(255, 255, 255, .14);
	--shadow: 0 24px 80px rgba(0, 0, 0, .22)
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	background: #f8fbff;
	color: var(--ink);
	line-height: 1.65;
	overflow-x: hidden
}

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

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

.container {
	width: min(1180px, 92vw);
	margin: auto
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: linear-gradient(90deg, #02050b, var(--ink) 55%, #031d28);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 14px 50px rgba(0, 0, 0, .28)
}

.nav {
	width: min(1280px, 96vw);
	margin: auto;
	min-height: 88px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem
}

.brand {
	display: flex;
	align-items: center;
	min-width: 230px
}

.brand img {
	width: 220px;
	max-height: 72px;
	object-fit: contain
}

.nav-links {
	display: flex;
	align-items: center;
	gap: .75rem
}

.nav-links a {
	color: #eaf9ff;
	font-weight: 800;
	font-size: .9rem;
	padding: .65rem .72rem;
	border-radius: 999px
}

.nav-links a:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff
}

.nav-cta {
	background: var(--gold);
	color: var(--deep-teal) !important
}

.menu-toggle {
	display: none;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	padding: .7rem .9rem;
	font-size: 1.3rem
}

.hero {
	position: relative;
	isolation: isolate;
	min-height: calc(100vh - 88px);
	display: flex;
	align-items: center;
	padding: 5rem 0;
	background: radial-gradient(circle at 15% 20%, rgba(25, 212, 216, .25), transparent 32%), linear-gradient(135deg, #050914, #071827 60%, #052f39);
	color: var(--white);
	overflow: hidden
}

.hero-light {
	position: relative;
	isolation: isolate;
	min-height: calc(100vh - 88px);
	display: flex;
	align-items: center;
	padding: 5rem 0;
	background: var(--white);
	color: var(--deep-teal);
	overflow: hidden;
    & h2 {
        font-size: clamp(2rem, 4vw, 4rem);
	    margin: .1rem 0 1.3rem;
        color: var(--ink);
    }
    & h3 {
        color: var(--gold);
    }
}

.hero:after {
	content: "";
	position: absolute;
	inset: auto -20% -25% -20%;
	height: 45%;
	background: linear-gradient(90deg, rgba(240, 8, 8, .25), rgba(25, 212, 216, .25), rgba(255, 198, 46, .18));
	filter: blur(70px);
	z-index: -1
}

.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(30px);
	opacity: .65;
	z-index: -1
}

.orb-one {
	width: 250px;
	height: 250px;
	background: var(--red);
	right: 8%;
	top: 15%
}

.orb-two {
	width: 180px;
	height: 180px;
	background: var(--teal);
	left: 10%;
	bottom: 18%
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 3rem;
	align-items: center
}

.eyebrow {
	margin: 0 0 .9rem;
	color: var(--red);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .78rem
}
/* .hero-light .eyebrow {
    color: var(--teal-dark)
} */

.hero h1,
.hero-light h1,
.section h2 {
	font-family: "Space Grotesk", Inter, sans-serif;
	line-height: 1.02;
	letter-spacing: -.05em
}

.hero h1,
.hero-light h1 {
	font-size: clamp(2.5rem, 6vw, 6rem);
	margin: 0 0 1.25rem
}

.lede {
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	color: #dceaf0;
	max-width: 760px
}

.lede-light {
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	color: var(--deep-teal);
	max-width: 760px
}

.hero-actions,
.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2rem 0
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: .95rem 1.3rem;
	font-weight: 900;
	border: 1px solid rgba(255, 255, 255, .18)
}

.btn.primary {
	background: var(--gold);
	color: var(--deep-teal);
	box-shadow: 0 18px 50px rgba(25, 212, 216, .2)
}

.btn.ghost {
	background: rgba(255, 255, 255, .08);
	color: var(--white);
}
.btn.secondary {
	border: 1px solid var(--blush);
    background: rgba(246, 238, 238, 0.08);
	color: linear-gradient(135deg, var(--red), var(--teal-dark));
}

.hero-pills,
.hero-light-pills,
.mini-tags {
	display: flex;
	gap: .7rem;
	flex-wrap: wrap
}

.hero-pills span,
.mini-tags span {
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .08);
	padding: .55rem .8rem;
	border-radius: 999px;
	color: #eaf9ff;
	font-size: .86rem;
	font-weight: 700
}
.hero-light-pills span {
	border: 1px solid var(--white);;
	background: var(--blush);
	padding: .55rem .8rem;
	border-radius: 999px;
	color: var(--deep-teal);
	font-size: .86rem;
	font-weight: 700
}

.hero-visual {
	position: relative;
	justify-self: center;
	width: min(440px, 90vw)
}

.portrait-frame {
	position: relative;
	border-radius: 42px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(240, 8, 8, .22), rgba(25, 212, 216, .22));
	box-shadow: var(--shadow);
	border: 1px solid rgba(255, 255, 255, .16)
}

.portrait-frame img {
	width: 100%;
	object-fit: contain;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .06))
}

.floating-card {
	position: absolute;
	left: -25px;
	bottom: 28px;
	background: rgba(2, 5, 11, .78);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 22px;
	padding: 1rem 1.2rem;
	box-shadow: var(--shadow)
}

.floating-card strong {
	display: block;
	color: #fff
}

.floating-card span {
	color: var(--gold);
	font-weight: 800
}

.section {
	padding: 6.5rem 0
}

.split {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 4rem;
	align-items: center
}

.split.reverse {
	grid-template-columns: 1.1fr .9fr
}

.photo-card {
	border-radius: 34px;
	overflow: hidden;
	box-shadow: var(--shadow);
	background: #0b1220
}

.photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.teal {
  color: var(--teal-dark);  
}
.copy h2,
.section-head h2,
.founder-card h2,
.author h2,
.contact h2 {
	font-size: clamp(2rem, 4vw, 4rem);
	margin: .1rem 0 1.3rem
}

.copy p {
	font-size: 1.06rem;
	color: #3d4656
}

.mission {
	font-weight: 900;
	color: var(--red) !important;
	border-left: 5px solid var(--teal);
	padding-left: 1rem
}

.dark {
	background: linear-gradient(135deg, #02050b, #07111f 65%, #061f27);
	color: #fff;
	position: relative;
	overflow: hidden
}

.dark p {
	color: #cbd7e4
}
.dark .timeline p {
	color: var(--ink);
}

.section-head {
	max-width: 850px;
	margin-bottom: 2.3rem
}

.grid.cards {
	display: grid;
	gap: 1rem
}

.six {
	grid-template-columns: repeat(3, 1fr)
}
.resume {
    color: var(--ink);
}
.cards article,
.resume-card,
.ecosystem-card,
.book-stack>div {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 28px;
	padding: 1.4rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .12)
}

.cards article span,
.ecosystem-card .icon {
	color: var(--gold);
	font-weight: 900
}

.cards h3,
.ecosystem-card h3,
.resume-card h3 {
	font-family: "Space Grotesk";
	font-size: 1.35rem;
	margin: .5rem 0
}
.resume-card h3 {
    color: var(--gold)
}
.impact {
	background: linear-gradient(180deg, #2d0202, #f2fbff)
}

.timeline {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
    color: var(--ink);
}

.timeline-item {
	padding: 1.5rem;
	border-radius: 28px;
	background: #fff;
	border: 1px solid #e2edf5;
	box-shadow: 0 18px 55px rgba(7, 17, 31, .08);
	position: relative;
    &p {
        color: var(--ink);
    }
}

.timeline-item:before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.5rem;
	width: 5px;
	height: 44px;
	background: linear-gradient(var(--red), var(--teal));
	border-radius: 999px
}

.timeline-item strong {
	font-family: "Space Grotesk";
	font-size: 1.25rem
}

.ecosystem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem
}

.ecosystem-card {
	min-height: 360px;
	display: flex;
	flex-direction: column
}

.ecosystem-card.featured {
	background: linear-gradient(145deg, rgba(240, 8, 8, .18), rgba(25, 212, 216, .14));
	border-color: rgba(25, 212, 216, .35)
}

.ecosystem-card a {
	margin-top: auto;
	color: var(--red);
	font-weight: 900;
	background: var(--blush);
	border: 1px solid var(--blush);
	padding: .8rem 1rem;
	border-radius: 999px;
	align-self: center;
}
/* .btn.secondary {
	border: 1px solid var(--blush);
    background: rgba(246, 238, 238, 0.08);
	color: linear-gradient(135deg, var(--red), var(--teal-dark));
} */

.beyond {
	background: #fff
}

.author-grid,
.contact-grid,
.credential-grid {
	display: grid;
	gap: 1.2rem
}

.author-grid {
	grid-template-columns: 1.1fr .9fr;
	align-items: center
}

.book-stack {
	display: grid;
	gap: 1rem
}

.book-stack strong {
	display: block;
	color: var(--gold);
	font-family: "Space Grotesk";
	font-size: 1.2rem
}

.book-stack span {
	color: #e8f4f8
}

.credentials {
	background: linear-gradient(180deg, #f7fbff, #fff)
}

.credential-grid {
	grid-template-columns: repeat(4, 1fr)
}

.resume-card {
	background: #fff;
	border: 1px solid #e4eef6
}

.resume-card ul {
	padding-left: 1.1rem;
	margin: 0
}

.resume-card li {
	margin: .55rem 0;
	color: #3d4656
}

.contact-grid {
	grid-template-columns: 1.25fr .75fr;
	align-items: center
}

.contact-photo {
	border-radius: 999px;
	overflow: hidden;
	border: 4px solid rgba(25, 212, 216, .35);
	box-shadow: var(--shadow);
	background: #fff;
	max-width: 330px;
	justify-self: center
}

.footer {
	background: #02050b;
	color: #fff;
	padding: 1.5rem 0;
	border-top: 1px solid rgba(255, 255, 255, .12)
}

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap
}

.footer img {
	width: 150px
}

.footer p {
	color: #cbd7e4;
	margin: 0
}

.footer a {
	color: var(--teal);
	font-weight: 900
}
.founder-section {
	background: linear-gradient(135deg, var(--red), var(--teal-dark));
	color: #fff
}

.founder-card {
	display: grid;
	grid-template-columns: .7fr 1fr;
	gap: 40px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 34px;
	padding: 44px
}

.founder-card .eyebrow {
	color: var(--gold)
}

.founder-card p {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, .88)
}
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s ease, transform .8s ease
}

.reveal.show {
	opacity: 1;
	transform: none
}

.delay-1 {
	transition-delay: .12s
}

.delay-2 {
	transition-delay: .24s
}

.author-hero-light {
	background: radial-gradient(circle at 18% 18%, rgba(25, 212, 216, .20), transparent 30%), radial-gradient(circle at 85% 20%, rgba(240, 8, 8, .12), transparent 28%), linear-gradient(135deg, #ffffff 0%, #f8fdff 55%, #fff8e8 100%);
	color: var(--ink);
	position: relative;
	overflow: hidden
}

.author-hero-light .eyebrow {
	color: var(--red)
}

.author-hero-light h2 {
	color: var(--ink)
}

.author-hero-light p {
	color: #3d4656
}

.author-glow {
	position: absolute;
	border-radius: 999px;
	filter: blur(45px);
	opacity: .45;
	pointer-events: none
}

.author-glow-one {
	width: 250px;
	height: 250px;
	background: var(--teal);
	left: -80px;
	top: 10%
}

.author-glow-two {
	width: 220px;
	height: 220px;
	background: var(--gold);
	right: -70px;
	bottom: 12%
}

.author-copy {
	position: relative;
	z-index: 1
}

.publication-cards {
	display: grid;
	gap: 1rem;
	position: relative;
	z-index: 1
}

.publication-card {
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(7, 17, 31, .10);
	border-radius: 28px;
	box-shadow: 0 24px 70px rgba(7, 17, 31, .10);
	overflow: hidden;
	backdrop-filter: blur(18px)
}

.publication-card summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.2rem 1.25rem
}

.publication-card summary::-webkit-details-marker {
	display: none
}

.publication-card strong {
	display: block;
	color: var(--ink);
	font-family: "Space Grotesk";
	font-size: 1.15rem
}

.publication-card em {
	display: block;
	font-style: normal;
	color: var(--red);
	font-weight: 900;
	font-size: .82rem;
	margin-top: .2rem
}

.publication-card summary b {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: var(--gold);
	color: #fff;
	font-size: 1.45rem;
	line-height: 1;
	flex: 0 0 auto;
	transition: transform .25s ease
}

.publication-card[open] summary b {
	transform: rotate(45deg);
	background: var(--teal);
}

.publication-detail {
	padding: 0 1.25rem 1.25rem;
	border-top: 1px solid rgba(7, 17, 31, .08)
}

.publication-detail p {
	margin: 1rem 0;
	color: #3d4656
}
.modal {

	position: fixed;
	inset: 0;

	background: rgba(0, 0, 0, .82);

	display: none;

	align-items: center;

	justify-content: center;

	z-index: 9999;

	backdrop-filter: blur(10px);

}

.modal.show {

	display: flex;

}

.modal-content {

	background: var(--deep);

	padding: 40px;

	border-radius: 24px;

	max-width: 650px;

	width: 92%;

	border: 1px solid var(--deep-teal);

	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);

}

.modal input,
.modal textarea {

	width: 100%;

	margin: 12px 0;

	padding: 15px;

	border-radius: 14px;

	border: none;

	background: var(--white);

	color: var(--deep-teal);

}

@media(max-width:1020px) {
	.brand {
		min-width: 200px
	}

	.brand img {
		width: 195px
	}

	.menu-toggle {
		display: block
	}

	.nav-links {
		position: absolute;
		top: 88px;
		left: 2vw;
		right: 2vw;
		display: none;
		flex-direction: column;
		align-items: stretch;
		background: #050914;
		border: 1px solid rgba(255, 255, 255, .14);
		border-radius: 24px;
		padding: 1rem;
		box-shadow: var(--shadow)
	}

	.nav-links.open {
		display: flex
	}

	.nav-links a {
		text-align: center
	}

	.hero-grid,
	.split,
	.split.reverse,
	.author-grid,
	.contact-grid {
		grid-template-columns: 1fr
	}

	.hero {
		padding: 4rem 0
	}

	.hero-visual {
		width: min(390px, 86vw)
	}

	.six,
	.ecosystem-grid,
	.timeline,
	.credential-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.photo-card {
		max-height: 680px
	}

	.photo-card img {
		object-position: top center
	}

	.contact-photo {
		justify-self: start
	}
}

@media(max-width:640px) {
	.nav {
		min-height: 78px
	}

	.brand {
		min-width: 170px
	}

	.brand img {
		width: 168px
	}

	.nav-links {
		top: 78px
	}

	.hero {
		min-height: auto;
		padding: 3rem 0 4rem
	}

	.hero h1 {
		font-size: 2.65rem
	}

	.section {
		padding: 4.2rem 0
	}

	.six,
	.ecosystem-grid,
	.timeline,
	.credential-grid {
		grid-template-columns: 1fr
	}

	.floating-card {
		left: 12px;
		right: 12px;
		bottom: 12px
	}

	.split {
		gap: 2rem
	}

	.copy h2,
	.section-head h2,
	.author h2,
	.contact h2 {
		font-size: 2.2rem
	}

	.ecosystem-card {
		min-height: auto
	}

	.footer-inner {
		align-items: flex-start;
		flex-direction: column
	}

	.footer img {
		width: 138px
	}

	.btn {
		width: 100%
	}

	.contact-actions .btn {
		width: auto
	}

	.hero-pills span,
	.mini-tags span {
		font-size: .78rem
	}

	.photo-card {
		border-radius: 26px
	}
}

@media(max-width:420px) {
	.brand img {
		width: 150px
	}

	.hero h1 {
		font-size: 2.25rem
	}

	.lede {
		font-size: 1rem
	}

	.container {
		width: 90vw
	}
}