@font-face { font-family: 'Inter';          font-weight: 100 900; font-style: normal; font-display: swap; src: url('/exp-fonts/Inter-Variable.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk';  font-weight: 300 700; font-style: normal; font-display: swap; src: url('/exp-fonts/SpaceGrotesk-Variable.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 100 800; font-style: normal; font-display: swap; src: url('/exp-fonts/JetBrainsMono-Variable.woff2') format('woff2'); }

:root {
	--bg-0: #06080c;
	--bg-1: #0d1117;
	--bg-2: #141b25;
	--ink: #e6ebf2;
	--ink-soft: #8a95a5;
	--ink-faint: #4a5466;
	--mint: #5eead4;
	--mint-deep: #14b8a6;
	--coral: #fb7185;
	--rule: rgba(94, 234, 212, 0.12);
	--card-bg: rgba(20, 27, 37, 0.55);
	--card-border: rgba(230, 235, 242, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	background: var(--bg-0);
	background-image:
		radial-gradient(circle at 18% 12%, rgba(94, 234, 212, 0.10), transparent 45%),
		radial-gradient(circle at 82% 88%, rgba(251, 113, 133, 0.06), transparent 50%),
		linear-gradient(180deg, var(--bg-0), var(--bg-1) 50%, var(--bg-0));
	background-attachment: fixed;
	color: var(--ink);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "ss01", "cv11";
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(230, 235, 242, 0.04) 1px, transparent 1px);
	background-size: 36px 36px;
	z-index: 0;
}

.shell { position: relative; z-index: 1; }

a { color: var(--mint); text-decoration: none; }
a:hover { color: #99f6e4; }
a:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 3px; }

.mono { font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace; font-feature-settings: "calt" 0; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

nav.top {
	position: sticky;
	top: 0;
	z-index: 9;
	padding: 18px 0;
	background: rgba(6, 8, 12, 0.65);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	border-bottom: 1px solid var(--rule);
	display: grid;
	grid-template-columns: 1fr minmax(0, 1100px) 1fr;
	align-items: center;
	column-gap: 0;
}
nav.top .brand { grid-column: 1; justify-self: start; padding-left: 32px; }
nav.top .links { grid-column: 2; justify-self: start; padding-left: 32px; }
nav.top .lang  { grid-column: 3; justify-self: end;   padding-right: 32px; }
nav.top .brand {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.01em;
	color: var(--ink);
	display: flex;
	align-items: baseline;
	gap: 10px;
}
nav.top .brand .pre { color: var(--mint); font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 400; }
nav.top .brand .fc { color: var(--mint); }
nav.top .links { display: flex; gap: 26px; font-size: 13px; color: var(--ink-soft); font-family: 'JetBrains Mono', monospace; }
nav.top .links a { color: var(--ink-soft); transition: color 0.15s ease; }
nav.top .links a:hover { color: var(--ink); }
nav.top .lang { display: flex; gap: 14px; font-family: 'JetBrains Mono', monospace; font-size: 13px; align-items: center; }
nav.top .lang a { color: var(--ink-faint); }
nav.top .lang a[aria-current="true"] { color: var(--mint); }
nav.top .lang .sep { color: var(--ink-faint); }

.hero {
	position: relative;
	overflow: hidden;
	padding: 18vh 32px 16vh;
}
.hero-content {
	max-width: 1100px;
	margin: 0 auto;
}

.hero-bg, .about-bg, .services-bg, .experience-bg, .contact-bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: saturate(0.75) contrast(1.05);
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.hero-bg {
	background-image:
		linear-gradient(180deg, rgba(6, 8, 12, 0.55) 0%, rgba(6, 8, 12, 0.4) 35%, rgba(6, 8, 12, 0.55) 65%, rgba(6, 8, 12, 0.85) 100%),
		radial-gradient(circle at 30% 40%, rgba(94, 234, 212, 0.18), transparent 55%),
		url('/images/bg.webp');
}

.hero-content {
	position: relative;
	z-index: 1;
}
.hero-content > * { max-width: 720px; }

.hero .pre {
	font-family: 'JetBrains Mono', monospace;
	color: var(--mint);
	font-size: 13px;
	letter-spacing: 0.02em;
	margin-bottom: 28px;
	display: inline-block;
}

.hero h1 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: clamp(64px, 12vw, 144px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	margin-bottom: 16px;
	color: var(--ink);
}
.hero h1 .fc { color: var(--mint); }

.hero .tag {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 400;
	font-size: clamp(20px, 2.4vw, 28px);
	color: var(--ink);
	letter-spacing: -0.005em;
	margin-bottom: 28px;
}

.hero .lede {
	font-size: 18px;
	color: var(--ink-soft);
	max-width: 56ch;
	line-height: 1.55;
	margin-bottom: 36px;
}

section { padding: 12vh 32px; position: relative; }
section h2 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: clamp(36px, 5vw, 56px);
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin-bottom: 36px;
	max-width: 22ch;
	position: relative;
}
section h2 .fc { color: var(--mint); }
section h2::after {
	content: '';
	display: block;
	width: 56px;
	height: 2px;
	background: var(--mint);
	margin-top: 22px;
	border-radius: 2px;
}
section .body { color: var(--ink-soft); max-width: 60ch; font-size: 17px; line-height: 1.65; }
section .body p + p { margin-top: 1em; }
section .body strong { color: var(--ink); font-weight: 600; }
.lede-block { color: var(--ink); font-size: 18px; max-width: 60ch; margin-bottom: 36px; }

.about-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 56px;
	align-items: stretch;
}
.mission { color: var(--mint); margin-top: 0; margin-bottom: 0.8em; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.mission-list { list-style: none; padding: 0; margin: 0; max-width: 60ch; }
.mission-list li {
	color: var(--ink);
	font-size: 17px;
	line-height: 1.6;
	padding: 12px 0 12px 28px;
	border-bottom: 1px solid var(--rule);
	position: relative;
}
.mission-list li:last-child { border-bottom: 0; }
.mission-list li::before {
	content: '>';
	position: absolute;
	left: 0;
	color: var(--mint);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 500;
}
.mission-list li strong { color: var(--mint); font-weight: 600; }

.about-figure, .contact-figure {
	position: relative;
	padding: 36px 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-figure::before, .about-figure::after,
.contact-figure::before, .contact-figure::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border-color: rgba(94, 234, 212, 0.55);
	border-style: solid;
	border-width: 0;
}
.about-figure::before, .contact-figure::before {
	top: 0;
	left: 0;
	border-top-width: 1px;
	border-left-width: 1px;
}
.about-figure::after, .contact-figure::after {
	bottom: 0;
	right: 0;
	border-bottom-width: 1px;
	border-right-width: 1px;
}
.about-figure img, .contact-figure img {
	display: block;
	max-width: 200px;
	height: auto;
	filter:
		brightness(0)
		invert(1)
		drop-shadow(0 0 28px rgba(94, 234, 212, 0.45))
		drop-shadow(0 0 6px rgba(94, 234, 212, 0.25));
	opacity: 0.88;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 24px;
	max-width: 1040px;
}
.card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 28px 26px 30px;
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
	position: relative;
	overflow: hidden;
}
.card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(94, 234, 212, 0.12), transparent 60%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.card:hover { border-color: rgba(94, 234, 212, 0.4); transform: translateY(-2px); }
.card:hover::after { opacity: 1; }
.card .num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--ink-faint);
	letter-spacing: 0.16em;
	display: block;
	margin-bottom: 18px;
}
.card .icon-wrap {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	border-radius: 12px;
	background: rgba(94, 234, 212, 0.08);
	border: 1px solid rgba(94, 234, 212, 0.15);
}
.card .icon-wrap img {
	width: 32px;
	height: 32px;
	filter: invert(1) brightness(1.4) sepia(1) hue-rotate(120deg) saturate(2);
	opacity: 0.9;
}
.card h3 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 21px;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--ink);
}
.card h3 .fc { color: var(--mint); }

.about, .services, .experience, .contact { padding-top: 14vh; padding-bottom: 14vh; }
.about .wrap, .services .wrap, .experience .wrap, .contact .wrap { position: relative; z-index: 1; }

.about-bg {
	background-image:
		linear-gradient(180deg, rgba(6, 8, 12, 0.78) 0%, rgba(6, 8, 12, 0.55) 35%, rgba(6, 8, 12, 0.55) 65%, rgba(6, 8, 12, 0.85) 100%),
		radial-gradient(circle at 70% 35%, rgba(167, 243, 208, 0.16), transparent 60%),
		url('/images/pic02.webp');
}

.services-bg {
	background-position: 70% center;
	background-image:
		linear-gradient(180deg, rgba(6, 8, 12, 0.88) 0%, rgba(6, 8, 12, 0.62) 35%, rgba(6, 8, 12, 0.62) 65%, rgba(6, 8, 12, 0.88) 100%),
		radial-gradient(circle at 25% 60%, rgba(125, 211, 252, 0.10), transparent 60%),
		url('/images/pic01.webp');
}

.experience-bg {
	background-image:
		linear-gradient(180deg, rgba(6, 8, 12, 0.78) 0%, rgba(6, 8, 12, 0.55) 35%, rgba(6, 8, 12, 0.55) 65%, rgba(6, 8, 12, 0.85) 100%),
		radial-gradient(circle at 70% 50%, rgba(251, 191, 36, 0.10), transparent 60%),
		url('/images/pic03.webp');
}
.experience-bg::after {
	content: '';
	position: absolute;
	inset: -40px;
	background-image:
		linear-gradient(180deg, rgba(6, 8, 12, 0.78) 0%, rgba(6, 8, 12, 0.55) 35%, rgba(6, 8, 12, 0.55) 65%, rgba(6, 8, 12, 0.85) 100%),
		radial-gradient(circle at 70% 50%, rgba(251, 191, 36, 0.10), transparent 60%),
		url('/images/pic03.webp');
	background-size: cover, cover, cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(14px) saturate(0.75) contrast(1.05);
	mask-image: radial-gradient(ellipse 65% 70% at center, transparent 50%, black 100%);
	-webkit-mask-image: radial-gradient(ellipse 65% 70% at center, transparent 50%, black 100%);
	pointer-events: none;
}

.contact-bg {
	background-image:
		linear-gradient(180deg, rgba(6, 8, 12, 0.88) 0%, rgba(6, 8, 12, 0.7) 35%, rgba(6, 8, 12, 0.7) 65%, rgba(6, 8, 12, 0.9) 100%),
		radial-gradient(circle at 70% 50%, rgba(196, 181, 253, 0.10), transparent 60%),
		url('/images/contact3.webp');
}
.experience .wrap { position: relative; z-index: 1; }
.industry-list {
	list-style: none;
	padding: 0;
	margin: 0 0 32px 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1040px;
}
@media (max-width: 820px) {
	.industry-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.industry-list { grid-template-columns: 1fr; }
}
.industry-list li {
	color: var(--ink);
	font-size: 15.5px;
	padding: 14px 18px;
	border: 1px solid var(--card-border);
	background: var(--card-bg);
	border-radius: 10px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: baseline;
	gap: 12px;
	line-height: 1.5;
}
.industry-list li::before {
	content: '>';
	color: var(--mint);
	font-family: 'JetBrains Mono', monospace;
	flex-shrink: 0;
}
.experience .closing {
	color: var(--ink);
	font-size: 17px;
	max-width: 60ch;
	margin-top: 8px;
}

.contact-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 56px;
	align-items: stretch;
}
.contact-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 14px 36px;
	align-items: baseline;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	max-width: 640px;
	padding-top: 14px;
}
.contact-grid dt { color: var(--ink-faint); letter-spacing: 0.04em; }
.contact-grid dd { font-variant-numeric: tabular-nums; padding-bottom: 14px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.contact-grid dd:last-child { border-bottom: 0; }
.contact-grid a { color: var(--mint); border-bottom: 1px dashed var(--mint); padding-bottom: 1px; }
.contact-grid a:hover { color: #99f6e4; border-bottom-color: #99f6e4; }

footer.site {
	padding: 18px 0;
	border-top: 1px solid var(--rule);
	color: var(--ink-faint);
	font-size: 13px;
	font-family: 'JetBrains Mono', monospace;
	display: flex;
	align-items: center;
	min-height: 66px;
}
footer.site .wrap { width: 100%; }
footer.site a { color: var(--ink-soft); }
footer.site a:hover { color: var(--mint); }
footer.site .wrap p { line-height: 1.6; text-align: center; }

@media (max-width: 820px) {
	.about-row, .contact-row { grid-template-columns: 1fr; gap: 28px; }
	.about-figure, .contact-figure { justify-self: start; }
}
@media (max-width: 600px) {
	nav.top { padding: 14px 0; }
	nav.top .brand { padding-left: 18px; }
	nav.top .lang  { padding-right: 18px; }
	nav.top .links { display: none; }
	.hero { padding: 12vh 20px 10vh; }
	section { padding: 10vh 20px; }
}