@charset "utf-8";

/* ============================================================
   E-VENX — Prism Flux 2.0
   Public site styles (admin pages keep templatemo-prism-flux.css)
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
	--bg: #060b15;
	--bg-raise: #0b1424;
	--bg-card: linear-gradient(165deg, rgba(23, 39, 63, 0.96), rgba(9, 17, 31, 0.98));
	--line: rgba(148, 196, 242, 0.12);
	--line-strong: rgba(148, 196, 242, 0.22);
	--blue: #3aa6ff;
	--cyan: #00e0d0;
	--violet: #8b7bff;
	--grad: linear-gradient(100deg, var(--blue), var(--cyan));
	--glow-blue: rgba(58, 166, 255, 0.22);
	--glow-cyan: rgba(0, 224, 208, 0.2);
	--text: #f2f7fc;
	--text-2: #aebdcd;
	--text-3: #6e8298;
	--nav-bg: rgba(8, 14, 26, 0.72);
	--input-bg: rgba(8, 15, 28, 0.7);
	--shadow-card: 0 24px 60px rgba(2, 6, 14, 0.55);
	--radius: 22px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--header-h: 76px;
}

body.light {
	--bg: #f3f7fb;
	--bg-raise: #ffffff;
	--bg-card: linear-gradient(165deg, rgba(255, 255, 255, 0.97), rgba(228, 239, 250, 0.98));
	--line: rgba(22, 70, 116, 0.14);
	--line-strong: rgba(22, 70, 116, 0.26);
	--blue: #0d7ec7;
	--cyan: #00a7a0;
	--violet: #6c5ce7;
	--grad: linear-gradient(100deg, #0d7ec7, #00a7a0);
	--glow-blue: rgba(13, 126, 199, 0.16);
	--glow-cyan: rgba(0, 167, 160, 0.15);
	--text: #0c1626;
	--text-2: #3c5168;
	--text-3: #64798e;
	--nav-bg: rgba(248, 251, 254, 0.78);
	--input-bg: rgba(255, 255, 255, 0.85);
	--shadow-card: 0 24px 60px rgba(30, 60, 95, 0.14);
}

/* ── Base ───────────────────────────────────────────────── */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* overflow-x on BOTH html and body: any horizontal overflow would
   widen the mobile layout viewport and push the fixed nav off-screen.
   `clip` (no scroll container) where supported, `hidden` as fallback. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 24px);
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	font-family: 'Inter', system-ui, sans-serif;
	background: var(--bg);
	color: var(--text);
	overflow-x: hidden;
	overflow-x: clip;
	line-height: 1.6;
	transition: background 0.35s ease, color 0.35s ease;
	-webkit-font-smoothing: antialiased;
}

/* Subtle film-grain so flat areas never look dead */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	opacity: 0.035;
	pointer-events: none;
	z-index: 3;
}

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

::selection {
	background: rgba(0, 224, 208, 0.32);
	color: #fff;
}

body.light ::selection {
	color: #0c1626;
}

.grad {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.skip-link {
	position: fixed;
	top: -60px;
	left: 16px;
	z-index: 2000;
	padding: 10px 18px;
	background: var(--bg-raise);
	color: var(--text);
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	text-decoration: none;
	transition: top 0.25s ease;
}

.skip-link:focus-visible {
	top: 16px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ── Loader ─────────────────────────────────────────────── */
.loader {
	position: fixed;
	inset: 0;
	background: var(--bg);
	display: grid;
	place-items: center;
	z-index: 9999;
	transition: opacity 0.55s ease, visibility 0.55s ease;
}

.loader.hidden {
	opacity: 0;
	visibility: hidden;
}

.loader-inner {
	display: grid;
	justify-items: center;
	gap: 26px;
}

.loader-logo {
	width: 88px;
	animation: loaderPulse 1.4s ease-in-out infinite alternate;
}

@keyframes loaderPulse {
	from {
		transform: scale(0.94);
		opacity: 0.75;
	}

	to {
		transform: scale(1.04);
		opacity: 1;
	}
}

.loader-beam {
	width: 160px;
	height: 2px;
	border-radius: 2px;
	background: var(--line);
	position: relative;
	overflow: hidden;
}

.loader-beam::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--grad);
	transform: translateX(-100%);
	animation: loaderBeam 1.1s var(--ease) infinite;
}

@keyframes loaderBeam {
	to {
		transform: translateX(100%);
	}
}

/* ── Progress bar & cursor glow ─────────────────────────── */
.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--grad);
	z-index: 1500;
	box-shadow: 0 0 12px var(--glow-cyan);
}

.cursor-glow {
	position: fixed;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--glow-blue) 0%, transparent 65%);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
	transform: translate(-50%, -50%);
	left: 50vw;
	top: 30vh;
	transition: opacity 0.4s ease;
}

@media (hover: none), (pointer: coarse) {
	.cursor-glow {
		display: none;
	}
}

/* ── Header ─────────────────────────────────────────────── */
.header {
	position: fixed;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: min(1240px, calc(100% - 28px));
	z-index: 1000;
	transition: top 0.3s ease;
}

.nav-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 18px 8px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--nav-bg);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 12px 40px rgba(2, 6, 14, 0.35);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
	top: 8px;
}

.header.scrolled .nav-shell {
	border-color: var(--line-strong);
	box-shadow: 0 16px 48px rgba(2, 6, 14, 0.5), 0 0 0 1px rgba(0, 224, 208, 0.06);
}

.brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	min-width: 0;
}

.brand-mark {
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.brand-word {
	height: 56px;
	width: auto;
	object-fit: contain;
	margin-left: -6px;
}

.nav-menu {
	display: flex;
	list-style: none;
	gap: 2px;
}

.nav-link {
	display: block;
	padding: 9px 16px;
	border-radius: 999px;
	color: var(--text-2);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color 0.25s ease, background 0.25s ease;
}

.nav-link:hover {
	color: var(--text);
}

.nav-link.active {
	color: var(--text);
	background: rgba(58, 166, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(58, 166, 255, 0.25);
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.icon-btn {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cyan);
	font-size: 15px;
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.icon-btn:hover {
	border-color: var(--line-strong);
	background: rgba(0, 224, 208, 0.08);
	transform: translateY(-1px);
}

.lang-btn {
	font-family: 'Orbitron', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 38px;
	height: 38px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	padding: 0 8px;
}

.menu-toggle span {
	height: 2px;
	border-radius: 2px;
	background: var(--text);
	transition: transform 0.3s var(--ease), opacity 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Shared section chrome ──────────────────────────────── */
.section {
	position: relative;
	padding: clamp(90px, 11vw, 150px) 24px;
	z-index: 1;
}

.section-head {
	max-width: 820px;
	margin: 0 auto clamp(48px, 6vw, 80px);
	text-align: center;
}

.eyebrow {
	font-family: 'Orbitron', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: var(--cyan);
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.eyebrow::before,
.eyebrow::after {
	content: '';
	width: 36px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan));
}

.eyebrow::after {
	background: linear-gradient(90deg, var(--cyan), transparent);
}

.section-title {
	font-size: clamp(34px, 4.6vw, 58px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin-bottom: 18px;
}

.section-sub {
	color: var(--text-2);
	font-size: clamp(15px, 1.3vw, 18px);
	max-width: 640px;
	margin: 0 auto;
	font-weight: 300;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background 0.25s ease;
}

.btn-primary {
	background: var(--grad);
	color: #04121c;
	box-shadow: 0 10px 30px var(--glow-blue);
}

body.light .btn-primary {
	color: #ffffff;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 38px var(--glow-cyan), 0 6px 18px var(--glow-blue);
}

.btn-ghost {
	color: var(--text);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn-ghost:hover {
	transform: translateY(-2px);
	background: rgba(58, 166, 255, 0.08);
	box-shadow: inset 0 0 0 1px var(--blue);
}

.btn-block {
	width: 100%;
}

/* Scroll-reveal */
.reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
	transition-delay: var(--reveal-delay, 0s);
}

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

/* ── Hero ───────────────────────────────────────────────── */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: calc(var(--header-h) + 26px) 16px 36px;
	/* keeps the 3D side cards from widening the page on mobile */
	overflow: hidden;
	z-index: 1;
}

.hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Slow-rotating prism beam.
   No filter:blur here — it makes compositing/screenshots crawl.
   Softness comes from wide gradient stops + a radial feather mask. */
.hero-beam {
	position: absolute;
	left: 50%;
	top: 42%;
	width: min(1200px, 130vw);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: conic-gradient(from 0deg,
			transparent 0deg,
			rgba(58, 166, 255, 0.05) 40deg,
			rgba(58, 166, 255, 0.08) 60deg,
			rgba(0, 224, 208, 0.11) 95deg,
			rgba(0, 224, 208, 0.05) 125deg,
			transparent 160deg,
			transparent 200deg,
			rgba(139, 123, 255, 0.04) 235deg,
			rgba(139, 123, 255, 0.07) 265deg,
			transparent 320deg);
	border-radius: 50%;
	-webkit-mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0.6) 45%, transparent 72%);
	mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0.6) 45%, transparent 72%);
	animation: beamSpin 38s linear infinite;
	will-change: transform;
}

@keyframes beamSpin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
}

.hero-orb-a {
	width: 480px;
	height: 480px;
	top: -120px;
	left: -140px;
	background: var(--glow-blue);
	animation: orbDrift 17s ease-in-out infinite alternate;
}

.hero-orb-b {
	width: 420px;
	height: 420px;
	bottom: -140px;
	right: -120px;
	background: var(--glow-cyan);
	animation: orbDrift 21s ease-in-out infinite alternate-reverse;
}

@keyframes orbDrift {
	to {
		transform: translate(70px, -50px) scale(1.12);
	}
}

/* Dot grid, fading out radially */
.hero-grid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(148, 196, 242, 0.22) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, black 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, black 0%, transparent 100%);
	opacity: 0.5;
}

.hero-inner {
	position: relative;
	text-align: center;
	max-width: 980px;
	animation: heroIn 0.9s var(--ease) 0.15s backwards;
}

@keyframes heroIn {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.hero-title {
	font-size: clamp(31px, 4.4vw, 58px);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin-bottom: 14px;
}

.hero-sub {
	font-size: clamp(14px, 1.25vw, 17px);
	font-weight: 300;
	color: var(--text-2);
	max-width: 560px;
	margin: 0 auto 22px;
}

.hero-cta {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.hero-cta .btn {
	padding: 12px 26px;
	font-size: 13px;
}

/* ── Stage (3D carousel inside the hero) ────────────────── */
.stage {
	position: relative;
	width: min(1600px, 100%);
	margin: clamp(8px, 2svh, 26px) auto 0;
	perspective: 1500px;
	animation: heroIn 0.9s var(--ease) 0.3s backwards;
}

.stage-track {
	position: relative;
	height: clamp(420px, 54svh, 600px);
	transform-style: preserve-3d;
	touch-action: pan-y;
	cursor: grab;
}

.stage-track.dragging {
	cursor: grabbing;
}

.exp-card {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(300px, 25vw, 430px);
	/* track-relative so the deck always fits the first screen */
	height: min(100%, 580px);
	transform-style: preserve-3d;
	transition: transform 0.75s var(--ease), opacity 0.75s var(--ease), filter 0.75s var(--ease);
	will-change: transform, opacity;
}

.exp-card-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	position: relative;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.exp-card-inner::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 224, 208, 0.55), transparent);
	opacity: 0.6;
}

.exp-card.is-center:hover .exp-card-inner {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-card), 0 0 50px var(--glow-cyan);
}

.exp-media {
	height: 46%;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background: var(--bg-raise);
}

.exp-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.exp-card.is-center:hover .exp-media img {
	transform: scale(1.05);
}

.exp-media::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 60%;
	background: linear-gradient(180deg, transparent, rgba(6, 11, 21, 0.55));
}

body.light .exp-media::after {
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.25));
}

.exp-media.exp-media-empty {
	display: grid;
	place-items: center;
	background:
		radial-gradient(ellipse at 28% 18%, rgba(58, 166, 255, 0.2), transparent 60%),
		radial-gradient(ellipse at 75% 85%, rgba(0, 224, 208, 0.16), transparent 60%),
		var(--bg-raise);
}

.exp-media-empty img {
	width: 34%;
	height: auto;
	object-fit: contain;
	opacity: 0.9;
}

.exp-media-empty::after {
	display: none;
}

.exp-num {
	position: absolute;
	top: 14px;
	right: 18px;
	font-family: 'Orbitron', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgba(242, 247, 252, 0.85);
	background: rgba(6, 11, 21, 0.5);
	border: 1px solid rgba(148, 196, 242, 0.25);
	padding: 5px 12px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
	z-index: 1;
}

body.light .exp-num {
	color: #0c1626;
	background: rgba(255, 255, 255, 0.65);
}

.exp-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(20px, 1.6vw, 28px);
	min-height: 0;
}

.exp-title {
	font-size: clamp(20px, 1.5vw, 25px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.exp-desc {
	color: var(--text-2);
	font-size: clamp(13.5px, 0.95vw, 15px);
	font-weight: 300;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.exp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.exp-tag {
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid rgba(58, 166, 255, 0.3);
	background: rgba(58, 166, 255, 0.07);
	color: var(--cyan);
	font-family: 'Orbitron', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.exp-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	color: var(--text);
	background: none;
	border: none;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}

.exp-cta i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--grad);
	color: #04121c;
	font-size: 13px;
	transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}

body.light .exp-cta i {
	color: #fff;
}

.exp-cta:hover i {
	transform: translateX(5px);
	box-shadow: 0 6px 18px var(--glow-cyan);
}

/* Stage nav */
.stage-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	margin-top: clamp(12px, 2svh, 26px);
}

.stage-btn {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: var(--bg-raise);
	border: 1px solid var(--line);
	color: var(--cyan);
	font-size: 17px;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.stage-btn:hover {
	border-color: var(--line-strong);
	box-shadow: 0 8px 26px var(--glow-cyan);
	transform: translateY(-2px);
}

.stage-dots {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 380px;
}

.stage-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: none;
	background: var(--line-strong);
	cursor: pointer;
	padding: 0;
	transition: width 0.35s var(--ease), background 0.35s ease;
}

.stage-dot.active {
	width: 26px;
	background: var(--grad);
	box-shadow: 0 0 10px var(--glow-cyan);
}

/* ── About / pillars ────────────────────────────────────── */
.section-about {
	background:
		radial-gradient(ellipse 60% 50% at 15% 20%, rgba(58, 166, 255, 0.05), transparent 70%),
		radial-gradient(ellipse 50% 45% at 88% 80%, rgba(0, 224, 208, 0.05), transparent 70%);
}

.pillars {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
}

.pillar {
	position: relative;
	padding: 38px 30px 34px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
}

.pillar::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease);
}

.pillar:hover {
	transform: translateY(-8px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-card), 0 0 36px var(--glow-cyan);
}

.pillar:hover::before {
	transform: scaleX(1);
}

.pillar-num {
	position: absolute;
	top: 22px;
	right: 26px;
	font-family: 'Orbitron', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--text-3);
}

.pillar-icon {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: rgba(0, 224, 208, 0.08);
	border: 1px solid var(--line);
	color: var(--cyan);
	font-size: 22px;
	margin-bottom: 22px;
	transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}

.pillar:hover .pillar-icon {
	transform: scale(1.08) rotate(-4deg);
	box-shadow: 0 0 22px var(--glow-cyan);
}

.pillar-title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}

.pillar-desc {
	color: var(--text-2);
	font-size: 14.5px;
	font-weight: 300;
}

/* ── Demos grid ─────────────────────────────────────────── */
.demos-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
	justify-items: stretch;
}

.demo-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 34px 20px 28px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s var(--ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

.demo-tile::after {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.demo-tile:hover {
	transform: translateY(-7px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-card), 0 0 32px var(--glow-cyan);
}

.demo-tile:hover::after {
	opacity: 1;
}

.demo-icon {
	width: 76px;
	height: 76px;
	display: grid;
	place-items: center;
	border-radius: 20px;
	background: rgba(0, 224, 208, 0.07);
	border: 1px solid var(--line);
	color: var(--cyan);
	font-size: 30px;
	transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}

.demo-tile:hover .demo-icon {
	transform: scale(1.1);
	box-shadow: 0 0 24px var(--glow-cyan);
}

.demo-icon img {
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.demo-name {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.demo-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Orbitron', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
	transition: color 0.3s ease;
}

.demo-go i {
	font-size: 10px;
	transition: transform 0.3s var(--ease);
}

.demo-tile:hover .demo-go {
	color: var(--cyan);
}

.demo-tile:hover .demo-go i {
	transform: translateX(4px);
}

/* ── Contact ────────────────────────────────────────────── */
.section-contact {
	background:
		radial-gradient(ellipse 55% 45% at 85% 15%, rgba(58, 166, 255, 0.05), transparent 70%);
}

.contact-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 22px;
	align-items: start;
}

.contact-cards {
	display: grid;
	gap: 14px;
}

.contact-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 18px;
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
	transform: translateX(6px);
	border-color: var(--line-strong);
	box-shadow: 0 10px 30px rgba(2, 6, 14, 0.35), 0 0 24px var(--glow-blue);
}

.contact-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--grad);
	color: #04121c;
	font-size: 18px;
	transition: transform 0.3s var(--ease);
}

body.light .contact-icon {
	color: #fff;
}

.contact-card:hover .contact-icon {
	transform: scale(1.07) rotate(-4deg);
}

.contact-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.contact-text strong {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text);
}

.contact-text span {
	color: var(--text-2);
	font-size: 14px;
	font-weight: 300;
}

.contact-ext {
	margin-left: auto;
	font-size: 12px;
	color: var(--text-3);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.contact-card:hover .contact-ext {
	opacity: 1;
}

/* Form */
.contact-form {
	padding: clamp(26px, 3vw, 38px);
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: grid;
	gap: 18px;
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.field {
	display: grid;
	gap: 8px;
}

.field label {
	font-family: 'Orbitron', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--text-3);
}

.field input,
.field textarea {
	width: 100%;
	padding: 13px 16px;
	background: var(--input-bg);
	border: 1px solid var(--line);
	border-radius: 12px;
	color: var(--text);
	font-size: 14.5px;
	font-family: inherit;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--cyan);
	box-shadow: 0 0 0 3px rgba(0, 224, 208, 0.12);
}

.field textarea {
	resize: vertical;
	min-height: 110px;
}

.form-feedback {
	display: none;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 14px;
	border: 1px solid rgba(0, 224, 208, 0.45);
	background: rgba(0, 224, 208, 0.08);
	color: var(--text);
}

.form-feedback.show {
	display: block;
	animation: feedbackIn 0.4s var(--ease);
}

.form-feedback.is-error {
	border-color: rgba(255, 92, 92, 0.45);
	background: rgba(255, 92, 92, 0.08);
}

@keyframes feedbackIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Footer ─────────────────────────────────────────────── */
.footer {
	border-top: 1px solid var(--line);
	padding: clamp(56px, 6vw, 80px) 24px 32px;
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, transparent, rgba(8, 14, 26, 0.55));
}

body.light .footer {
	background: linear-gradient(180deg, transparent, rgba(220, 234, 247, 0.5));
}

.footer-grid {
	max-width: 1200px;
	margin: 0 auto 48px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 40px;
	align-items: start;
}

.footer-brand .brand {
	margin-bottom: 6px;
}

.footer-tagline {
	color: var(--text-2);
	font-size: 14px;
	font-weight: 300;
	max-width: 300px;
}

.footer-col {
	display: grid;
	gap: 10px;
	justify-items: start;
}

.footer-col h4 {
	font-family: 'Orbitron', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--text);
	margin-bottom: 8px;
}

.footer-col a {
	color: var(--text-2);
	text-decoration: none;
	font-size: 14px;
	font-weight: 300;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	transition: color 0.25s ease, transform 0.25s ease;
}

.footer-col a:hover {
	color: var(--cyan);
	transform: translateX(3px);
}

.footer-col a i {
	color: var(--cyan);
	font-size: 12px;
}

.footer-bottom {
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.copyright {
	color: var(--text-3);
	font-size: 13px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 860px) {

	/* The fixed header is transformed, so position the dropdown
	   relative to it (absolute), not the viewport. */
	.nav-menu {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		transform: translateY(-12px);
		flex-direction: column;
		gap: 4px;
		padding: 14px;
		background: var(--nav-bg);
		backdrop-filter: blur(22px);
		-webkit-backdrop-filter: blur(22px);
		border: 1px solid var(--line);
		border-radius: 22px;
		box-shadow: 0 24px 60px rgba(2, 6, 14, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, transform 0.3s var(--ease), visibility 0.3s;
	}

	.nav-menu.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nav-menu .nav-link {
		text-align: center;
		padding: 13px;
		font-size: 15px;
	}

	.menu-toggle {
		display: flex;
	}

	.brand-word {
		height: 40px;
		max-width: min(34vw, 140px);
		object-fit: contain;
	}

	.stage-track {
		height: clamp(400px, 52svh, 520px);
	}

	.exp-card {
		width: min(76vw, 330px);
	}

	.field-row {
		grid-template-columns: 1fr;
	}
}

/* Short or narrow screens: drop the subtitle so the deck stays on screen 1 */
@media (max-width: 640px), (max-height: 740px) {
	.hero-sub {
		display: none;
	}

	.hero-title {
		margin-bottom: 16px;
	}

	.hero .eyebrow {
		margin-bottom: 12px;
	}

	.hero-cta .btn {
		padding: 11px 22px;
		font-size: 12.5px;
	}

	.stage-track {
		height: clamp(380px, 50svh, 520px);
	}
}

/* Narrow phones: compact card — shorter image, 2-line description, no tag chips */
@media (max-width: 640px) {
	.exp-media {
		height: 40%;
	}

	.exp-desc {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.exp-tags {
		display: none;
	}

	.stage-dots {
		gap: 6px;
	}

	.stage-dot {
		width: 6px;
		height: 6px;
	}

	.stage-dot.active {
		width: 20px;
	}
}

@media (max-width: 560px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-bottom {
		justify-content: center;
		text-align: center;
	}
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto;
	}

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

	.cursor-glow {
		display: none;
	}
}