@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root {
	--bg: #05070f;
	--panel: #070b16;
	--line: rgba(154, 167, 212, 0.12);
	--text: #f5f7fb;
	--muted: #7f8aa8;
	--pink: #e9819b;
	--lavender: #b694ff;
	--gold: #efcd61;
	--mint: #70d1b7;
	--ink: #081022;
	--hero-cycle: 8s;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif;
}

html {
	scroll-behavior: smooth;
}

/* Skip link for keyboard users */
.skip-link {
	position: absolute;
	left: 12px;
	top: 8px;
	background: #0b1220;
	color: #fff;
	padding: 8px 12px;
	z-index: 120;
	border-radius: 6px;
	transform: translateY(-120%);
	transition: transform 180ms ease;
	text-decoration: none;
	font-size: 14px;
}
.skip-link:focus,
.skip-link:hover {
	transform: translateY(0);
}

.site-shell {
	min-height: 100vh;
	padding: 16px 16px 0;
	background:
		radial-gradient(rgba(255, 255, 255, 0.07) 0.7px, transparent 0.9px),
		radial-gradient(rgba(255, 255, 255, 0.05) 0.55px, transparent 0.75px),
		radial-gradient(rgba(255, 255, 255, 0.035) 0.4px, transparent 0.6px),
		radial-gradient(1100px 650px at -18% -8%, rgba(233, 129, 155, 0.28), transparent 48%),
		radial-gradient(1000px 600px at 118% -5%, rgba(182, 148, 255, 0.26), transparent 50%),
		radial-gradient(950px 700px at -15% 15%, rgba(112, 209, 183, 0.2), transparent 52%),
		radial-gradient(1050px 650px at 122% 18%, rgba(238, 143, 133, 0.24), transparent 54%),
		radial-gradient(1200px 700px at 102% 8%, rgba(238, 143, 133, 0.16), transparent 56%),
		radial-gradient(850px 620px at -8% 20%, rgba(88, 122, 255, 0.12), transparent 60%),
		radial-gradient(900px 550px at -20% 55%, rgba(233, 129, 155, 0.2), transparent 56%),
		radial-gradient(950px 580px at 125% 42%, rgba(182, 148, 255, 0.18), transparent 54%),
		radial-gradient(950px 500px at -15% 85%, rgba(112, 209, 183, 0.18), transparent 58%),
		radial-gradient(900px 500px at 95% 68%, rgba(233, 129, 155, 0.18), transparent 64%),
		radial-gradient(800px 480px at 118% 78%, rgba(182, 148, 255, 0.16), transparent 60%),
		radial-gradient(700px 450px at 12% 78%, rgba(112, 209, 183, 0.14), transparent 62%),
		radial-gradient(850px 500px at -12% 92%, rgba(238, 143, 133, 0.16), transparent 58%),
		radial-gradient(800px 480px at 115% 88%, rgba(239, 205, 97, 0.14), transparent 60%),
		radial-gradient(600px 400px at 50% 92%, rgba(182, 148, 255, 0.12), transparent 58%),
		radial-gradient(800px 350px at 88% 45%, rgba(239, 205, 97, 0.1), transparent 60%),
		radial-gradient(750px 420px at 8% 48%, rgba(238, 143, 133, 0.14), transparent 56%),
		radial-gradient(700px 400px at 95% 35%, rgba(233, 129, 155, 0.12), transparent 54%),
		linear-gradient(180deg, #02050c, #050710 40%, #03060d);
	background-size: 5px 5px, 7px 7px, 10px 10px, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
	/* background-size: 120px 100%; */
	background-position: 0 0, 2px 3px, 1px 1px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	color: var(--text);
}

.portfolio-frame {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	padding: 14px 28px 0;
	margin-top: 148px;
	border: 1px solid rgba(153, 167, 212, 0.2);
	border-radius: 16px;
	background:
		radial-gradient(rgba(255, 255, 255, 0.07) 0.7px, transparent 0.9px),
		radial-gradient(rgba(255, 255, 255, 0.05) 0.55px, transparent 0.75px),
		radial-gradient(rgba(255, 255, 255, 0.035) 0.4px, transparent 0.6px),
		radial-gradient(1100px 650px at -18% -8%, rgba(233, 129, 155, 0.28), transparent 48%),
		radial-gradient(1000px 600px at 118% -5%, rgba(182, 148, 255, 0.26), transparent 50%),
		radial-gradient(950px 700px at -15% 15%, rgba(112, 209, 183, 0.2), transparent 52%),
		radial-gradient(1050px 650px at 122% 18%, rgba(238, 143, 133, 0.24), transparent 54%),
		radial-gradient(700px 500px at 92% 12%, rgba(227, 127, 153, 0.11), transparent 60%),
		radial-gradient(860px 620px at 16% 8%, rgba(89, 114, 235, 0.1), transparent 70%),
		radial-gradient(900px 550px at -20% 55%, rgba(233, 129, 155, 0.2), transparent 56%),
		radial-gradient(950px 580px at 125% 42%, rgba(182, 148, 255, 0.18), transparent 54%),
		radial-gradient(950px 500px at -15% 85%, rgba(112, 209, 183, 0.18), transparent 58%),
		radial-gradient(900px 500px at 95% 68%, rgba(233, 129, 155, 0.18), transparent 64%),
		radial-gradient(800px 480px at 118% 78%, rgba(182, 148, 255, 0.16), transparent 60%),
		radial-gradient(700px 450px at 12% 78%, rgba(112, 209, 183, 0.14), transparent 62%),
		radial-gradient(850px 500px at -12% 92%, rgba(238, 143, 133, 0.16), transparent 58%),
		radial-gradient(800px 480px at 115% 88%, rgba(239, 205, 97, 0.14), transparent 60%),
		radial-gradient(600px 400px at 50% 92%, rgba(182, 148, 255, 0.12), transparent 58%),
		radial-gradient(800px 350px at 88% 45%, rgba(239, 205, 97, 0.1), transparent 60%),
		radial-gradient(750px 420px at 8% 48%, rgba(238, 143, 133, 0.14), transparent 56%),
		radial-gradient(700px 400px at 95% 35%, rgba(233, 129, 155, 0.12), transparent 54%),
		linear-gradient(170deg, #060b17 0%, #040810 56%, #04070f 100%);
	background-size: 5px 5px, 7px 7px, 10px 10px, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
	background-position: 0 0, 2px 3px, 1px 1px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.portfolio-frame::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.38;
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.6px, transparent 0.7px);
	background-size: 3px 3px;
	mix-blend-mode: soft-light;
	filter: blur(0.2px);
}

.portfolio-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(94, 122, 255, 0.1), transparent 34%, transparent 72%, rgba(246, 141, 136, 0.13));
	opacity: 0.5;
}

.top-nav {
    width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	padding: 1px 2px 1px;
	z-index: 100;
	/* background: linear-gradient(180deg, rgba(6, 11, 23, 0.98), rgba(6, 11, 23, 0.92) 80%, transparent); */
	backdrop-filter: blur(8px);
}

.logo {
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.035em;
	line-height: 1;
	color: #f8f9ff;
}

.top-nav .logo img {
	height: 110px;
	display: block;
}

.footer-bottom .logo img {
	height: 60px;
	display: block;
}
.footer-link{   
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: flex-end;
}
.footer-link:hover {
    color: #ffffff;
    transition: color 0.2s ease;
}

.logo span {
	color: var(--pink);
}

.top-nav ul {
	display: flex;
	align-items: center;
	gap: 48px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 16px;
	color: rgba(231, 236, 255, 0.72);
	text-transform: lowercase;
}

.top-nav a {
	color: inherit;
	text-decoration: none;
	display: block;
}

.top-nav li {
	position: relative;
	cursor: pointer;
	transition: color 0.2s ease;
}

.top-nav li:hover {
	color: #ffffff;
}

.top-nav li:hover a {
	color: inherit;
}

.top-nav li.active {
	color: #ffffff;
}

.top-nav li.active a {
	color: inherit;
}

.top-nav li.active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 2px;
	background: linear-gradient(90deg, rgba(128, 107, 242, 0), #f4d26a, rgba(128, 107, 242, 0));
	border-radius: 999px;
}

.ghost-contact {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 20px 8px;
	border: 1px solid rgba(233, 129, 155, 0.7);
	border-radius: 999px;
	background: transparent;
	color: #ffd5de;
	font-size: 14px;
	text-transform: lowercase;
	cursor: pointer;
}

.ghost-contact svg {
	width: 44px;
	height: 8px;
	stroke: rgba(233, 129, 155, 0.8);
	fill: none;
	stroke-width: 1.2;
}

.hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 42px 4px 52px;
	gap: 20px;
	border-bottom: 1px solid var(--line);
	z-index: 2;
}

.hero-text {
	max-width: 610px;
	padding-top: 20px;
}

.eyebrow {
	margin: 0 0 28px;
	font-size: 13px;
	letter-spacing: 0.32em;
	color: #a38bd9;
}

.hero-text h1 {
	margin: 0;
	font-size: clamp(56px, 5.2vw, 78px);
	line-height: 0.98;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #f4f6fb;
}

.hero-text h1 span {
	--accent: linear-gradient(70deg, #e9819b, #b694ff 30%, #70d1b7);
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.intro-copy {
	max-width: 490px;
	margin: 34px 0 0;
	font-size: clamp(16px, 1.2vw, 22px);
	line-height: 1.55;
	color: rgba(214, 220, 240, 0.7);
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 38px;
}

.cta-primary {
    color: white;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(92deg, #f26f82, #f19686);
	color: #20162a;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(235, 130, 144, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(235, 130, 144, 0.34);
}

.cta-round {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	border: 1px solid rgba(221, 230, 255, 0.35);
	background: rgba(10, 15, 30, 0.72);
	color: rgba(226, 235, 255, 0.92);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.cta-round:hover {
	border-color: rgba(246, 253, 255, 0.88);
	color: #ffffff;
}

.hero-visual {
	position: relative;
	min-height: 410px;
	margin-right: -8px;
	animation: hero-float var(--hero-cycle) ease-in-out infinite;
}

.planet {
	position: absolute;
	right: 98px;
	top: 24px;
	width: min(31vw, 436px);
	aspect-ratio: 1;
	border-radius: 999px;
	background:
		radial-gradient(circle at 34% 32%, rgba(183, 141, 248, 0.97), rgba(148, 144, 240, 0.66) 27%, rgba(250, 208, 122, 0.66) 58%, rgba(115, 161, 221, 0.16) 82%),
		radial-gradient(circle at 76% 12%, rgba(255, 255, 255, 0.5), transparent 60%);
	box-shadow:
		0 0 70px rgba(168, 180, 255, 0.28),
		0 0 120px rgba(248, 169, 143, 0.16);
	filter: saturate(1.08);
	opacity: 0.95;
	animation: planet-drift var(--hero-cycle) ease-in-out infinite;
}

.planet-shadow {
	position: absolute;
	right: 62px;
	top: 94px;
	width: min(39vw, 540px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 48% 40%, rgba(179, 206, 255, 0.15), rgba(35, 42, 66, 0.04) 46%, rgba(15, 20, 34, 0.44));
	filter: blur(2px);
	animation: shadow-pulse var(--hero-cycle) ease-in-out infinite;
}

.orbit {
	position: absolute;
	right: 42px;
	top: 72px;
	width: min(45vw, 640px);
	height: min(29vw, 400px);
	border: 1px solid rgba(208, 216, 246, 0.12);
	border-radius: 50%;
	transform: rotate(-10deg);
	animation: orbit-breathe var(--hero-cycle) ease-in-out infinite;
}

.vertical-beam {
	position: absolute;
	right: 205px;
	top: -16px;
	width: 2px;
	height: 500px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(249, 253, 255, 0.56), rgba(255, 255, 255, 0.08));
	filter: blur(0.25px);
	animation: beam-pulse var(--hero-cycle) ease-in-out infinite;
}

.small-dot {
	position: absolute;
	border-radius: 999px;
	box-shadow: 0 0 22px currentColor;
	animation: drift var(--hero-cycle) ease-in-out infinite;
}

.small-dot.yellow {
	top: 52px;
	right: 430px;
	width: 30px;
	height: 30px;
	color: #f2d372;
	background: #f2d372;
	animation-delay: -1.5s;
}

.small-dot.green {
	top: 312px;
	right: 84px;
	width: 52px;
	height: 52px;
	color: #7cd4bf;
	background: #7cd4bf;
	animation-delay: -3.2s;
}

.small-dot.pink {
	top: 364px;
	right: 34px;
	width: 10px;
	height: 10px;
	color: #ee87bf;
	background: #ee87bf;
	animation-delay: -4.8s;
}

.wave-line {
	position: absolute;
	left: -4px;
	right: 0;
	top: 158px;
	width: calc(100% + 8px);
	height: 96px;
	overflow: visible;
}

.wave-line path {
	stroke: rgba(241, 246, 255, 0.68);
	stroke-width: 2.2;
	fill: none;
	filter: drop-shadow(0 0 8px rgba(242, 232, 225, 0.28));
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 18 12;
	animation: wave-dash var(--hero-cycle) linear infinite, wave-breathe var(--hero-cycle) ease-in-out infinite;
	transform-origin: center;
}

.wave-line path:nth-child(2) {
	animation-delay: -2s, -2s;
	opacity: 0.82;
}

.section-divider {
	border-top: 1px solid var(--line);
}

.about-row {
	display: grid;
	grid-template-columns: 0.9fr 1fr 0.95fr;
	gap: 30px;
	padding: 44px 4px 52px;
	align-items: center;
}

.section-number {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 15px;
	color: #a9b4d2;
	white-space: nowrap;
}

.section-number-mark {
	width: 10px;
	height: 10px;
	flex: 0 0 10px;
	border-radius: 999px;
	background: #9f93ff;
	box-shadow: 0 0 8px rgba(178, 167, 255, 0.7);
}

.section-number-mark.gold {
	background: #efcd61;
	box-shadow: 0 0 8px rgba(239, 205, 97, 0.6);
}

.section-number-mark.mint {
	background: #70d1b7;;
	box-shadow: 0 0 8px rgba(112, 209, 183, 0.6);
}

.section-number-mark.blue {
	background: #587aff;
	box-shadow: 0 0 8px rgba(88, 122, 255, 0.6);
}

.section-number-text {
	line-height: 1;
	letter-spacing: 0.08em;
	color: #a9b4d2;
}

.about-copy h2,
.works h2 {
	margin: 12px 0 14px;
	font-size: clamp(46px, 4.1vw, 62px);
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.about-copy p {
	margin: 0;
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.72;
	color: rgba(209, 218, 240, 0.72);
	max-width: 430px;
}

.soundwave {
	display: flex;
	align-items: center;
    justify-content: center;
	gap: 1px;
	width: 364px;
	height: 36px;
	margin-bottom: 1px;
	opacity: 0.85;
}

.soundwave span {
	width: 4px;
	border-radius: 999px;
	background: linear-gradient(180deg, #efe7ff 0%, #937bdf 100%);
	box-shadow: 0 0 8px rgba(147, 123, 223, 0.35);
	animation: wave-pulse var(--wave-speed, 2.1s) ease-in-out infinite;
}

.soundwave span:nth-child(1) { height: 9px; animation-delay: -0.05s; --wave-speed: 2.33s; }
.soundwave span:nth-child(2) { height: 16px; animation-delay: -0.41s; --wave-speed: 2.05s; }
.soundwave span:nth-child(3) { height: 23px; animation-delay: -0.87s; --wave-speed: 1.92s; }
.soundwave span:nth-child(4) { height: 14px; animation-delay: -0.22s; --wave-speed: 2.48s; }
.soundwave span:nth-child(5) { height: 20px; animation-delay: -1.14s; --wave-speed: 1.98s; }
.soundwave span:nth-child(6) { height: 12px; animation-delay: -0.63s; --wave-speed: 2.27s; }
.soundwave span:nth-child(7) { height: 26px; animation-delay: -1.37s; --wave-speed: 1.84s; }
.soundwave span:nth-child(8) { height: 11px; animation-delay: -0.31s; --wave-speed: 2.44s; }
.soundwave span:nth-child(9) { height: 18px; animation-delay: -0.95s; --wave-speed: 2.12s; }
.soundwave span:nth-child(10) { height: 24px; animation-delay: -0.58s; --wave-speed: 1.89s; }
.soundwave span:nth-child(11) { height: 13px; animation-delay: -1.26s; --wave-speed: 2.39s; }
.soundwave span:nth-child(12) { height: 21px; animation-delay: -0.16s; --wave-speed: 2.08s; }
.soundwave span:nth-child(13) { height: 15px; animation-delay: -1.48s; --wave-speed: 2.22s; }
.soundwave span:nth-child(14) { height: 27px; animation-delay: -0.74s; --wave-speed: 1.81s; }
.soundwave span:nth-child(15) { height: 10px; animation-delay: -1.05s; --wave-speed: 2.51s; }
.soundwave span:nth-child(16) { height: 19px; animation-delay: -0.44s; --wave-speed: 2.15s; }
.soundwave span:nth-child(17) { height: 25px; animation-delay: -1.32s; --wave-speed: 1.93s; }
.soundwave span:nth-child(18) { height: 14px; animation-delay: -0.28s; --wave-speed: 2.35s; }
.soundwave span:nth-child(19) { height: 22px; animation-delay: -0.82s; --wave-speed: 2.01s; }
.soundwave span:nth-child(20) { height: 12px; animation-delay: -1.19s; --wave-speed: 2.41s; }
.soundwave span:nth-child(21) { height: 17px; animation-delay: -0.67s; --wave-speed: 2.18s; }


@keyframes wave-pulse {
	0%,
	100% {
		transform: scaleY(0.7);
		opacity: 0.75;
	}
	50% {
		transform: scaleY(1.1);
		opacity: 1;
	}
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #a58ee7;
	font-size: 15px;
	cursor: pointer;
	text-transform: lowercase;
}

.text-link:hover {
	color: #bfa3ff;
}

.gold-link {
	color: #efcd61;
	margin-top: 0;
	font-size: 15px;
}

.profile-illustration {
	position: relative;
	min-height: 450px;
	display: grid;
	place-items: center;
	margin-top: 18px;
}

.profile-illustration img.profile-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	max-width: 390px;
	border-radius: 8px;
	object-fit: cover;
	transition: opacity 800ms ease-in-out;
}

.services-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 8px;
}

.service-intro {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: fit-content;
}

.speaker-icon {
	width: 38px;
	height: 38px;
	stroke: #bfa3ff;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 10px rgba(191, 163, 255, 0.26));
}

.service-item {
	display: grid;
	grid-template-columns: 70px 1fr;
	align-items: start;
	gap: 16px;
}

.service-icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 999px;
	border: 1px solid rgba(184, 199, 236, 0.2);
	background: linear-gradient(145deg, rgba(147, 166, 222, 0.18), rgba(14, 18, 29, 0.4));
}

.service-icon-violet {
	color: #af96ff;
	box-shadow: inset 0 0 32px rgba(165, 142, 248, 0.2);
}

.service-icon-amber {
	color: #ffb971;
	box-shadow: inset 0 0 32px rgba(255, 182, 114, 0.18);
}

.service-icon-mint {
	color: #8ee2c8;
	box-shadow: inset 0 0 32px rgba(117, 215, 180, 0.2);
}

.service-icon-blue {
	color: #7fb7ff;
	box-shadow: inset 0 0 32px rgba(129, 174, 247, 0.2);
}

.service-item h3 {
	margin: 4px 0 6px;
	font-size: 30px;
	font-weight: 500;
}

.service-title-violet {
	color: #bfa3ff;
    text-align: center;
}

.service-title-amber {
	color: #ffba70;
}

.service-title-mint {
	color: #86e1c4;
}

.service-title-blue {
	color: #86bbff;
}

.service-item p {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(203, 214, 241, 0.62);
}

.works {
	padding: 44px 4px 42px;
}

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

.work-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.work-card {
	padding: 8px;
	border: 1px solid rgba(166, 181, 224, 0.16);
	border-radius: 8px;
	background: rgba(7, 11, 19, 0.64);
}

.work-thumb {

	/* Mobile header & footer improvements */
	.top-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 12px;
		background: linear-gradient(180deg, rgba(6,11,23,0.98), rgba(6,11,23,0.92));
		backdrop-filter: blur(6px);
		z-index: 210;
	}

	.top-nav .logo img {
		height: 48px;
	}

	/* reduce the top offset so content doesn't get hidden under header */
	.portfolio-frame {
		margin-top: 110px;
		padding-top: 10px;
	}

	/* Footer tweaks */
	.footer {
		padding: 26px 12px 18px;
	}

	.footer-cta-row {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.footer-right {
		align-items: center;
		padding-top: 0;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding-top: 12px;
	}

	.footer-bottom ul {
		gap: 16px;
		flex-wrap: wrap;
	}

	.footer-button {
		width: 100%;
		min-width: 0;
	}
	position: relative;
	height: 176px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	overflow: hidden;
	background-color: #090f1d;
	margin-bottom: 10px;
}

.work-thumb .work-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.98;
	pointer-events: none;
	filter: saturate(1.02) contrast(0.98);
}

.work-thumb::after {
	/* content: ''; */
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 12%, rgba(1, 3, 8, 0.4) 100%);
}

.img-echoes {
	background:
		radial-gradient(220px 140px at 24% 24%, rgba(188, 123, 224, 0.95), transparent 54%),
		radial-gradient(140px 120px at 58% 50%, rgba(232, 95, 173, 0.46), transparent 62%),
		radial-gradient(190px 140px at 84% 82%, rgba(29, 38, 73, 0.8), transparent 68%),
		linear-gradient(145deg, #1e1330, #0f1329 68%, #090f1d);
}

.img-horizons {
	background:
		radial-gradient(180px 220px at 68% 8%, rgba(255, 130, 130, 0.5), transparent 66%),
		repeating-linear-gradient(90deg, rgba(16, 20, 34, 0.9) 0, rgba(16, 20, 34, 0.9) 8px, rgba(255, 112, 132, 0.14) 8px, rgba(255, 112, 132, 0.14) 10px),
		linear-gradient(165deg, #2b1731, #10172a 70%, #0a0f1f);
}

.img-resonant {
	background:
		radial-gradient(circle at 72% 42%, rgba(250, 245, 225, 0.7) 0 10px, transparent 11px),
		radial-gradient(circle at 38% 38%, rgba(160, 205, 189, 0.18) 0 62px, transparent 66px),
		conic-gradient(from 160deg at 42% 56%, #112033, #223f4b, #4d8078, #2f5562, #121d2e 84%),
		linear-gradient(160deg, #111d2e, #0d1422);
}

.img-resonant::before {
	content: '';
	position: absolute;
	inset: 16% 20% 18% 18%;
	border-radius: 4px;
	border: 1px solid rgba(186, 218, 211, 0.25);
	transform: skew(-12deg) rotate(-13deg);
	background: linear-gradient(140deg, rgba(157, 228, 195, 0.22), rgba(22, 30, 47, 0));
}

.img-signal {
	background:
		radial-gradient(circle at 61% 45%, rgba(243, 72, 128, 0.95) 0 52px, transparent 54px),
		radial-gradient(220px 170px at 20% 18%, rgba(255, 209, 103, 0.66), transparent 57%),
		linear-gradient(145deg, #28142b, #15182b 66%, #0c1323);
}

.play-btn {
	position: absolute;
	right: 9px;
	bottom: 9px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(242, 247, 255, 0.7);
	border-radius: 999px;
	background: rgba(6, 9, 17, 0.7);
	color: #f4f8ff;
	padding-left: 1px;
	cursor: pointer;
}

.play-btn:hover {
	background: rgba(50, 70, 120, 0.9);
}

.play-btn.playing {
    background: rgba(235, 130, 144, 0.92);
    border-color: rgba(235, 130, 144, 0.9);
    color: #20162a;
}

/* Focus styles for accessibility */
button:focus-visible,
.contact-link:focus-visible,
.cta-primary:focus-visible,
.text-link:focus-visible {
	outline: 3px solid rgba(191,163,255,0.28);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(191,163,255,0.08);
}

.work-card h3 {
	margin: 0;
	font-size: 21px;
	font-weight: 500;
}

.card-sub {
	margin: 2px 0 0;
	font-size: 12px;
	color: #d18cae;
}

.card-copy {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(206, 216, 242, 0.66);
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.chip-row span {
	padding: 4px 7px;
	border: 1px solid rgba(163, 178, 223, 0.2);
	border-radius: 5px;
	background: rgba(18, 24, 40, 0.86);
	font-size: 10px;
	line-height: 1;
	color: #9cb1da;
	text-transform: lowercase;
}

.research {
	padding: 44px 4px 42px;
}

.research-content {
	max-width: 100%;
}

.research h2 {
	margin: 12px 0 0;
	font-size: clamp(46px, 4.1vw, 62px);
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.research-text {
	font-size: 16px;
	line-height: 1.8;
	color: var(--text);
	margin-top: 0;
	max-width: 720px;
}

.contact {
	padding: 44px 4px 0px;
}

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
	/* gap: 34px; */
	align-items: stretch;
}

.contact-left {
	min-width: 0;
}

.contact-head {
	margin-bottom: 28px;
}

.contact-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

.contact-header {
	margin-bottom: 48px;
}

.contact-header .section-number {
	justify-content: center;
	margin-bottom: 12px;
}

.contact h2 {
	margin: 12px 0 0;
	font-size: clamp(46px, 4.1vw, 62px);
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.contact-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	gap: 28px;
	margin-top: 20px;
}

.contact-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1px solid rgba(166, 181, 224, 0.2);
	border-radius: 12px;
	background: rgba(10, 15, 30, 0.56);
	color: #a9b4d2;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.contact-link:hover {
	border-color: rgba(175, 150, 255, 0.4);
	background: rgba(10, 15, 30, 0.8);
	transform: translateY(-2px);
}

.contact-label {
	font-size: 14px;
	font-weight: 500;
	text-transform: lowercase;
	letter-spacing: 0.05em;
}

.contact-link svg {
	width: 32px;
	height: 32px;
	color: inherit;
}

.quote-panel {
	position: relative;
	display: flex;
	align-items: center;
	/* justify-content: top; */
	/* min-height: 340px; */
	/* padding: 28px; */
	/* border: 1px solid rgba(166, 181, 224, 0.16);
	border-radius: 16px; */
	/* background:
		radial-gradient(180px 180px at 20% 18%, rgba(112, 209, 183, 0.13), transparent 58%),
		radial-gradient(260px 220px at 84% 78%, rgba(182, 148, 255, 0.14), transparent 62%),
		linear-gradient(160deg, rgba(8, 12, 22, 0.8), rgba(7, 10, 18, 0.92)); */
	overflow: hidden;
}

.quote-panel::before {
	/* content: ''; */
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.22;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 0.6px, transparent 0.8px);
	background-size: 4px 4px;
	mix-blend-mode: soft-light;
}

.quote-track {
	position: relative;
	width: 100%;
	min-height: 260px;
}

.quote-item {
	position: absolute;
    justify-content: center;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	font-size: clamp(18px, 1.7vw, 28px);
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: #f5f7fb;
	opacity: 0;
	transform: translateY(14px);
	animation: quote-cycle 30s infinite ease-in-out;
	animation-delay: calc(var(--i) * 6s);
}

.quote-item span {
	display: block;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8ee2c8;
}

@keyframes quote-cycle {
	0% {
		opacity: 0;
		transform: translateY(14px);
	}
	6% {
		opacity: 1;
		transform: translateY(0);
	}
	18% {
		opacity: 1;
		transform: translateY(0);
	}
	24% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 0;
		transform: translateY(-10px);
	}
}

.footer {
	position: relative;
	padding: 34px 4px 0;
	overflow: visible;
}

.footer::before {
	content: '';
	position: absolute;
	inset: auto -120px 0;
	height: 340px;
	background:
		radial-gradient(380px 280px at 0% 100%, rgba(199, 129, 255, 0.62), transparent 68%),
		radial-gradient(380px 290px at 100% 100%, rgba(252, 117, 154, 0.66), transparent 68%),
		radial-gradient(700px 260px at 50% 96%, rgba(247, 166, 110, 0.4), transparent 74%),
		radial-gradient(700px 240px at 50% 74%, rgba(109, 128, 255, 0.32), transparent 76%),
		linear-gradient(180deg, rgba(6, 11, 23, 0.03), rgba(6, 11, 23, 0.94));
	background-blend-mode: screen, screen, screen, screen, normal;
	pointer-events: none;
	z-index: 0;
}

.footer::after {
	content: '';
	position: absolute;
	inset: auto -120px 0;
	height: 340px;
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.28) 0.7px, transparent 0.9px),
		radial-gradient(rgba(255, 255, 255, 0.2) 0.55px, transparent 0.75px),
		radial-gradient(rgba(255, 255, 255, 0.14) 0.45px, transparent 0.65px);
	background-size: 5px 5px, 7px 7px, 10px 10px;
	background-position: 0 0, 1px 2px, 3px 1px;
	opacity: 0.48;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 0;
}

.footer-cta-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding-bottom: 26px;
	z-index: 1;
}

.footer h2 {
	margin: 0;
	font-size: clamp(44px, 4.3vw, 62px);
	line-height: 1.02;
	font-weight: 500;
	letter-spacing: -0.01em;
	max-width: 720px;
}

.footer h2 span {
	/* color: #dc87cc; */
    --accent: linear-gradient(70deg, #e9819b, #b694ff 30%, #70d1b7);
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.footer-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	min-width: 300px;
	padding-top: 6px;
}

.footer-button {
	min-width: 244px;
	justify-content: center;
	text-transform: lowercase;
}

.footer-bottom {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 16px 0 10px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: rgba(211, 222, 245, 0.7);
	text-transform: lowercase;
}

.footer-bottom ul {
	display: flex;
	list-style: none;
	gap: 40px;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

.footer-bottom li {
	cursor: pointer;
	transition: color 0.2s ease;
}

.footer-bottom li:hover {
	color: #f3f7ff;
}

.footer-bottom p {
	margin: 0;
	font-size: 12px;
	color: rgba(211, 222, 245, 0.63);
	text-transform: none;
}

@keyframes drift {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-8px);
	}
}

@keyframes wave-dash {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: -120;
	}
}

@keyframes wave-breathe {
	0%,
	100% {
		transform: translateY(0px) scaleY(1);
		opacity: 0.72;
	}
	50% {
		transform: translateY(-2px) scaleY(1.08);
		opacity: 1;
	}
}

@keyframes hero-float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-5px);
	}
}

@keyframes planet-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(-5px, -4px, 0) scale(1.015);
	}
}

@keyframes shadow-pulse {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.78;
	}
	50% {
		transform: translate3d(3px, 2px, 0) scale(1.025);
		opacity: 1;
	}
}

@keyframes orbit-breathe {
	0%,
	100% {
		transform: rotate(-10deg) scale(1);
		opacity: 0.85;
	}
	50% {
		transform: rotate(-9deg) scale(1.008);
		opacity: 1;
	}
}

@keyframes beam-pulse {
	0%,
	100% {
		opacity: 0.42;
		transform: scaleY(1);
	}
	50% {
		opacity: 0.8;
		transform: scaleY(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-visual,
	.planet,
	.planet-shadow,
	.orbit,
	.vertical-beam,
	.small-dot,
	.wave-line path,
	.soundwave span {
		animation: none !important;
	}
}

@media (max-width: 1400px) {
	.top-nav .logo img {
		height: 72px;
	}

	.footer-bottom .logo img {
		height: 52px;
	}

	.top-nav ul {
		gap: 28px;
		font-size: 18px;
	}

	.ghost-contact {
		font-size: 17px;
	}

	.eyebrow {
		font-size: 14px;
	}

	.intro-copy {
		font-size: 18px;
	}

	.cta-primary {
		font-size: 17px;
		height: 52px;
	}

	.about-copy h2,
	.works h2 {
		font-size: clamp(36px, 3.2vw, 52px);
	}

	.service-item h3,
	.work-card h3 {
		font-size: 22px;
	}

	.footer h2 {
		font-size: clamp(38px, 4vw, 56px);
	}
}

@media (max-width: 1040px) {
	.site-shell {
		padding: 10px;
	}

	.portfolio-frame {
		padding: 14px 16px 0;
	}

	.top-nav {
		flex-wrap: wrap;
		justify-content: center;
	}

	.top-nav .logo img {
		height: 64px;
	}

	.footer-bottom .logo img {
		height: 46px;
	}

	.top-nav ul {
		order: 3;
		width: 100%;
		justify-content: center;
		font-size: 14px;
		gap: 16px;
	}

	.hero {
		grid-template-columns: 1fr;
		padding-top: 20px;
	}

	.hero-text {
		max-width: 100%;
	}

	.hero-visual {
		min-height: 320px;
	}

	.planet {
		right: 22%;
		top: 8px;
		width: min(64vw, 360px);
	}

	.planet-shadow {
		right: 10%;
		top: 48px;
		width: min(84vw, 480px);
	}

	.orbit {
		right: 4%;
		top: 52px;
		width: min(92vw, 560px);
		height: 250px;
	}

	.vertical-beam {
		right: 25%;
		height: 420px;
	}

	.small-dot.yellow {
		right: 62%;
	}

	.small-dot.green {
		top: 228px;
		right: 10%;
	}

	.wave-line {
		top: 140px;
	}

	.about-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.services-list {
		padding-top: 0;
	}

	.work-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-cta-row {
		flex-direction: column;
		/* align-items: flex-start; */
		gap: 18px;
	}

	.contact-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.quote-panel {
		min-height: 280px;
	}

	.footer-right {
		align-items: flex-start;
		min-width: 0;
		padding-top: 0;
	}

	.footer-bottom {
		flex-direction: column;
		/* align-items: flex-start; */
	}

	.footer-bottom ul {
		gap: 18px;
		flex-wrap: wrap;
	}
}

@media (max-width: 620px) {
    .portfolio-frame {
        margin-top: 50px;
    }
	.top-nav {
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		gap: 12px;
	}
	.top-nav ul {
		display: none;
	}

	.nav-toggle {
		margin-left: auto;
		flex: 0 0 auto;
	}

	.top-nav .logo img {
		height: 52px;
	}

	.footer-bottom .logo img {
		height: 100px;
	}

	.hero-text h1 {
		font-size: 44px;
	}

	.intro-copy {
		font-size: 16px;
	}

	.hero-actions {
		gap: 12px;
	}

	.cta-primary {
		font-size: 14px;
		padding: 0 18px;
	}

	.cta-round {
		width: 50px;
		height: 50px;
	}

	.hero-visual {
		min-height: 210px;
	}

	.planet {
		top: 0;
		width: min(72vw, 280px);
	}

	.planet-shadow {
		top: 30px;
		width: min(88vw, 340px);
	}

	.orbit {
		top: 36px;
		height: 200px;
	}

	.about-row {
		padding: 34px 4px 38px;
		gap: 18px;
	}

	.about-copy h2,
	.works h2,
	.contact h2 {
		font-size: 32px;
        text-align: center;
	}

	.about-copy p {
		max-width: none;
		font-size: 15px;
		line-height: 1.65;
	}

	.services-list {
		gap: 18px;
	}

	.service-intro {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		text-align: center;
		width: 100%;
	}

	.soundwave {
		width: 100%;
		max-width: 280px;
		height: 30px;
	}

	.service-title-violet {
		font-size: 30px;
		line-height: 1;
	}

	.service-item {
		grid-template-columns: 48px 1fr;
		gap: 12px;
	}

	.service-icon {
		width: 48px;
		height: 48px;
	}

	.service-item h3 {
		margin: 2px 0 4px;
		font-size: 20px;
	}

	.service-item p {
		font-size: 13px;
		line-height: 1.5;
	}

	.contact-layout {
		gap: 18px;
	}

	.contact-links {
		gap: 12px;
	}

	.contact-link {
		padding: 12px;
	}

	.quote-panel {
		padding: 16px;
		min-height: 220px;
	}

	.quote-item {
		font-size: 15px;
	}

	.quote-item span {
		font-size: 11px;
	}

	.vertical-beam,
	.small-dot.pink {
		display: none;
	}

	.wave-line {
		top: 106px;
		height: 70px;
	}

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

	.work-thumb {
		height: 170px;
	}

	.footer-button {
		width: 100%;
		min-width: 0;
	}
}

/* Respect reduced motion settings */
@media (prefers-reduced-motion: reduce) {
	.quote-item {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Responsive: stack contact columns on smaller screens */
@media (max-width: 1040px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
	.quote-panel {
		order: 2;
		min-height: 220px;
	}
	.contact-left {
		order: 1;
	}
}

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.nav-toggle:focus-visible { outline: 3px solid rgba(191,163,255,0.28); }
.hamburger {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
}
.hamburger::before, .hamburger::after {
	content: '';
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

/* Mobile nav styles (appear when .open on .top-nav) */
.top-nav ul { list-style: none; }

@media (max-width: 620px) {
	.nav-toggle { display: inline-flex; color: #f4f6fb; }
	.top-nav ul { display: none; }
	.top-nav.open ul {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: linear-gradient(180deg, rgba(6,11,23,0.98), rgba(6,11,23,0.96));
        backdrop-filter: blur(8px);
        opacity: 0.99;
		padding: 14px 12px 18px;
		gap: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		box-shadow: 0 12px 30px rgba(3,6,12,0.6);
	}
	.top-nav.open .hamburger { transform: rotate(45deg); }
	.top-nav.open .hamburger::before { transform: translateY(6px) rotate(90deg); }
	.top-nav.open .hamburger::after { opacity: 0; }
	.top-nav.open ul a { padding: 12px; display: block; border-radius: 8px; }
}