/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--ink-900: #0f0f12;
	--ink-700: #1a1a1f;
	--ink-600: #202028;
	--chalk-50: #fafafb;
	--chalk-100: #f4f4f6;
	--chalk-200: #e6e6ea;
	--chalk-300: #c9c9d1;
	--chalk-400: #9b9ba6;
	--chalk-500: #6e6e78;
	--line: rgba(255, 255, 255, 0.06);
	--ring: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--font-display: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
	--font-sans: "Inter", "Inter Fallback", system-ui, sans-serif;
}

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url(../fonts/space-grotesk-vietnamese.woff2) format("woff2"); unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab; }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url(../fonts/space-grotesk-latin-ext.woff2) format("woff2"); unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff; }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url(../fonts/space-grotesk-latin.woff2) format("woff2"); unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; }
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"); ascent-override: 89.71%; descent-override: 26.62%; line-gap-override: 0%; size-adjust: 109.69%; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-cyrillic-ext.woff2) format("woff2"); unicode-range: u+0460-052f, u+1c80-1c8a, u+20b4, u+2de0-2dff, u+a640-a69f, u+fe2e-fe2f; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-cyrillic.woff2) format("woff2"); unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-greek-ext.woff2) format("woff2"); unicode-range: u+1f??; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-greek.woff2) format("woff2"); unicode-range: u+0370-0377, u+037a-037f, u+0384-038a, u+038c, u+038e-03a1, u+03a3-03ff; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-vietnamese.woff2) format("woff2"); unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; }

/* ==========================================================================
   Base
   ========================================================================== */
*, ::before, ::after { box-sizing: border-box; border: 0 solid rgba(255, 255, 255, 0.05); }

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	font-family: var(--font-sans);
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	overflow-x: hidden;
	color: var(--chalk-100);
	background-color: var(--ink-900);
	background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(244, 244, 246, 0.07), transparent), linear-gradient(180deg, #0f0f12, #131316 50%, #0f0f12);
	background-attachment: fixed;
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, dl, dd { margin: 0; font-size: inherit; font-weight: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
button { padding: 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; background: transparent; cursor: pointer; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }

::selection { color: var(--ink-900); background-color: var(--chalk-100); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: #2a2a33; border-radius: 999px; border: 2px solid var(--ink-900); }
::-webkit-scrollbar-thumb:hover { background: #3a3a45; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip: auto;
	color: var(--ink-900);
	background: var(--chalk-100);
	border-radius: 999px;
}

.container {
	width: 100%;
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.section { position: relative; padding-top: 7rem; padding-bottom: 7rem; }

.icon { width: 1rem; height: 1rem; }

.triangle {
	display: block;
	width: 0;
	height: 0;
	border-left: 0 solid transparent;
	border-right: 0 solid transparent;
}

.dot { display: block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--chalk-400); }
.dot--square { border-radius: 2px; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: var(--chalk-400);
}

.eyebrow__dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--chalk-300); }

.section-heading { display: flex; flex-direction: column; align-items: center; text-align: center; }
.section-heading .eyebrow { margin-bottom: 1.25rem; }
.section-heading__title {
	font-family: var(--font-display);
	font-size: calc(2.25rem * var(--heading-scale, 1));
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--chalk-50);
}
.section-heading__text {
	max-width: 42rem;
	margin: 1.5rem auto 0;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--chalk-400);
}

/* Buttons
   ========================================================================== */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	overflow: hidden;
	padding: 0.875rem 1.75rem;
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), scale 0.2s ease;
	will-change: transform;
}
.btn:active { scale: 0.95; }
.btn--primary { color: var(--ink-900); background: var(--chalk-100); }
.btn--primary:hover { box-shadow: 0 18px 40px -12px rgba(244, 244, 246, 0.4); }
.btn--ghost { color: var(--chalk-100); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }

.btn__shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
	transform: translateX(-100%);
	transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1);
}
.btn:hover .btn__shine { transform: translateX(100%); }

.btn__label { position: relative; z-index: 10; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn__arrow { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn:hover .btn__arrow { transform: translateX(0.25rem); }

/* Split headings
   ========================================================================== */
.split { display: inline-flex; flex-wrap: wrap; }
.split__word { position: relative; display: inline-flex; overflow: hidden; margin-right: 0.28em; padding-bottom: 0.12em; }
.split__inner { display: inline-block; will-change: transform; }

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--ink-900);
	transition: translate 0.9s var(--ease);
}
.js .preloader { display: flex; }
.is-loaded .preloader { translate: 0 -100%; }

.preloader__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(244, 244, 246, 0.06), transparent);
}

.preloader__shapes { position: relative; display: flex; align-items: flex-end; gap: 1.25rem; }
.preloader__shape {
	opacity: 0;
	scale: 0;
	transition: opacity 0.7s var(--ease), scale 0.7s var(--ease), rotate 0.7s var(--ease);
}
.preloader__shape--square { width: 3rem; height: 3rem; border-radius: 6px; background: var(--chalk-100); rotate: -45deg; transition-delay: 0.1s; }
.preloader__shape--circle { width: 3rem; height: 3rem; border-radius: 999px; background: var(--chalk-100); transition-delay: 0.26s; }
.preloader__shape--triangle {
	width: 0;
	height: 0;
	border-left: 26px solid transparent;
	border-right: 26px solid transparent;
	border-bottom: 44px solid var(--chalk-100);
	rotate: 45deg;
	transition-delay: 0.42s;
}
.is-ready .preloader__shape { opacity: 1; scale: 1; rotate: 0deg; }

.preloader__label {
	margin-top: 2.5rem;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	color: var(--chalk-300);
	opacity: 0;
	transition: opacity 0.6s ease 0.6s;
}
.is-ready .preloader__label { opacity: 1; }

.preloader__track { width: 11rem; height: 2px; margin-top: 2rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.preloader__bar { width: 0; height: 100%; background: var(--chalk-100); transition: width 0.6s linear; }
.is-ready .preloader__bar { width: 100%; }

.js.has-preloader:not(.is-loaded) body { overflow: hidden; }

/* ==========================================================================
   Page fade and scroll progress
   ========================================================================== */
.site-main { transition: opacity 0.8s var(--ease) 0.1s; }
.js.has-preloader:not(.is-loaded) .site-main { opacity: 0; }

.scroll-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 60;
	height: 2px;
	transform-origin: left;
	transform: scaleX(0);
	background-image: linear-gradient(to right, var(--chalk-400), var(--chalk-100), var(--chalk-400));
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 50;
}

/* "none" at rest: a translate would become the containing block of the fixed mobile menu. */
.js .site-header { translate: 0 -80px; opacity: 0; transition: translate 0.8s var(--ease) 0.2s, opacity 0.8s var(--ease) 0.2s; }
.js.is-ready .site-header { translate: none; opacity: 1; }

.admin-bar .site-header, .admin-bar .scroll-progress { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header, .admin-bar .scroll-progress { top: 46px; }
}

.site-header__bar { border-bottom: 1px solid transparent; transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.is-scrolled .site-header__bar { border-bottom-color: var(--line); background-color: rgba(15, 15, 18, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

.site-header__nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand__logo { position: relative; display: block; width: 2.25rem; height: 2.25rem; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.brand__logo img { width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand__logo { transform: rotate(8deg); }
.brand__name { font-family: var(--font-display); font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--chalk-50); white-space: pre-wrap; }
.brand__muted { color: var(--chalk-400); }

.brand--footer .brand__logo { width: 2.5rem; height: 2.5rem; }
.brand--footer:hover .brand__logo { transform: none; }
.brand--footer .brand__name { font-size: 1.125rem; line-height: 1.75rem; }

.site-nav { display: none; align-items: center; gap: 0.25rem; }
.site-nav__link {
	position: relative;
	display: block;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--chalk-300);
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav__link:hover { color: var(--chalk-50); }
.site-nav__line {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: -0.125rem;
	height: 1px;
	transform-origin: left;
	transform: scaleX(0);
	background: var(--chalk-100);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav__link:hover .site-nav__line { transform: scaleX(1); }

.press-link {
	display: none;
	padding: 0.625rem 1.25rem;
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--ink-900);
	background: var(--chalk-100);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.press-link:hover { transform: scale(1.05); }

.menu-toggle {
	position: relative;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	box-shadow: var(--ring);
}
.menu-toggle__bars { position: relative; display: block; width: 1.25rem; height: 0.75rem; }
.menu-toggle__bar { position: absolute; left: 0; width: 1.25rem; height: 1.5px; background: var(--chalk-100); transition: transform 0.3s ease; }
.menu-toggle__bar--top { top: 0; }
.menu-toggle__bar--bottom { bottom: 0; }
.menu-open .menu-toggle__bar--top { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-toggle__bar--bottom { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
	position: fixed;
	inset: 72px 0 0;
	z-index: 40;
	visibility: hidden;
	opacity: 0;
	background: rgba(15, 15, 18, 0.95);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.menu-open .mobile-menu { visibility: visible; opacity: 1; transition: opacity 0.3s ease; }
.mobile-menu__list { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 2rem; }
.mobile-menu__item { opacity: 0; translate: -24px 0; transition: opacity 0.4s var(--ease), translate 0.4s var(--ease); }
.menu-open .mobile-menu__item { opacity: 1; translate: 0 0; transition-delay: calc(var(--i) * 0.07s); }
.mobile-menu__link {
	display: block;
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-family: var(--font-display);
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 500;
	color: var(--chalk-100);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	overflow: hidden;
	padding-top: 7rem;
	padding-bottom: 5rem;
}

.hero__shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-shape { position: absolute; will-change: transform; animation: hero-spin var(--spin) ease-in-out infinite; }
@keyframes hero-spin {
	0%, 100% { rotate: var(--from); }
	50% { rotate: var(--to); }
}
.hero-shape__circle { border-radius: 999px; background: rgba(244, 244, 246, 0.06); }
.hero-shape__ring { border-radius: 999px; border: 1px solid rgba(244, 244, 246, 0.1); }
.hero-shape__square { border-radius: 6px; border: 1px solid rgba(244, 244, 246, 0.1); background: rgba(244, 244, 246, 0.03); }

.hero__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.4;
	background-image: linear-gradient(rgba(244, 244, 246, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 244, 246, 0.04) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000, transparent);
	mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000, transparent);
}

.hero__content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero__logo {
	position: relative;
	isolation: isolate;
	width: 6rem;
	height: 6rem;
	margin-bottom: 2rem;
	transition: opacity 1.1s var(--ease), scale 1.1s var(--ease), filter 1.1s var(--ease);
}
.js .hero__logo { opacity: 0; scale: 0.8; filter: blur(12px); }
.is-ready .hero__logo { opacity: 1; scale: 1; filter: blur(0); }
.hero__logo img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.hero__logo-glow { position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: rgba(244, 244, 246, 0.1); filter: blur(40px); }

.hero__badge {
	margin-bottom: 1.75rem;
	padding: 0.375rem 1rem;
	border-radius: 999px;
	box-shadow: var(--ring);
	transition: opacity 0.7s var(--ease) 0.3s, translate 0.7s var(--ease) 0.3s;
}
.js .hero__badge { opacity: 0; translate: 0 16px; }
.is-ready .hero__badge { opacity: 1; translate: 0 0; }
.hero__badge-dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: #34d399; }

.hero__title {
	max-width: 56rem;
	font-family: var(--font-display);
	font-size: calc(3rem * var(--heading-scale, 1));
	line-height: 0.98;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--chalk-50);
}
.hero__title-mask { display: block; margin-top: 0.25rem; overflow: hidden; padding-bottom: 0.12em; }
.hero__title-gradient {
	display: block;
	will-change: transform;
	color: transparent;
	background-image: linear-gradient(to bottom right, var(--chalk-50), var(--chalk-200), var(--chalk-400));
	-webkit-background-clip: text;
	background-clip: text;
	transition: translate 0.9s var(--ease) 0.9s;
}
.js .hero__title-gradient { translate: 0 110%; }
.is-ready .hero__title-gradient { translate: 0 0; }

.hero__text {
	max-width: 36rem;
	margin-top: 1.75rem;
	font-size: 1rem;
	line-height: 1.625;
	text-wrap: balance;
	color: var(--chalk-400);
	transition: opacity 0.8s var(--ease) 1.1s, translate 0.8s var(--ease) 1.1s;
}
.js .hero__text { opacity: 0; translate: 0 20px; }
.is-ready .hero__text { opacity: 1; translate: 0 0; }

.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.hero__action { transition: opacity 0.8s var(--ease), translate 0.8s var(--ease); transition-delay: calc(1.3s + var(--i) * 0.12s); }
.js .hero__action { opacity: 0; translate: 0 28px; }
.is-ready .hero__action { opacity: 1; translate: 0 0; }

.hero__scroll { position: absolute; bottom: 2rem; left: 50%; z-index: 10; display: none; transform: translateX(-50%); transition: opacity 0.8s ease 1.8s; }
.js .hero__scroll { opacity: 0; }
.is-ready .hero__scroll { opacity: 1; }
.hero__scroll-mouse { display: flex; align-items: flex-start; justify-content: center; width: 1.5rem; height: 2.5rem; padding: 0.375rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; }
.hero__scroll-dot { width: 0.25rem; height: 0.5rem; border-radius: 999px; background: var(--chalk-300); animation: scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot {
	0%, 100% { translate: 0 0; opacity: 1; }
	50% { translate: 0 10px; opacity: 0.2; }
}

/* ==========================================================================
   Scroll reveals
   ========================================================================== */
.split--immediate .split__inner,
[data-inview] > .split__word .split__inner,
.split[data-inview] .split__inner {
	transition: translate 0.9s var(--ease);
	transition-delay: calc(var(--split-delay, 0s) + var(--i) * var(--split-stagger, 0.06s));
}
.js .split .split__inner { translate: 0 110%; }
.js.is-ready .split--immediate .split__inner,
.js .split.is-inview .split__inner { translate: 0 0; }

.eyebrow--reveal { transition: opacity 0.6s ease-out, translate 0.6s ease-out; }
.js .eyebrow--reveal { opacity: 0; translate: 0 12px; }
.js .eyebrow--reveal.is-inview { opacity: 1; translate: 0 0; }

.reveal { transition: opacity 0.8s var(--ease) var(--reveal-delay, 0s), translate 0.8s var(--ease) var(--reveal-delay, 0s); }
.js .reveal { opacity: 0; translate: 0 28px; }
.js .reveal.is-inview { opacity: 1; translate: 0 0; }

.stagger__item {
	transition:
		opacity 0.8s var(--ease) calc(var(--i) * var(--stagger)),
		translate 0.8s var(--ease) calc(var(--i) * var(--stagger));
}
.js .stagger__item { opacity: 0; translate: 0 28px; }
.js .stagger.is-inview .stagger__item { opacity: 1; translate: 0 0; }

/* ==========================================================================
   About
   ========================================================================== */
.about__grid { display: grid; align-items: start; gap: 3.5rem; }
.about__eyebrow { margin-bottom: 1.5rem; }
.about__title { font-family: var(--font-display); font-size: calc(2.25rem * var(--heading-scale, 1)); line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; color: var(--chalk-50); }
.about__text { max-width: 42rem; margin-top: 2rem; font-size: 1rem; line-height: 1.625; color: var(--chalk-400); }
.about__text > * + * { margin-top: 1.25rem; }

.stats { display: grid; grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.stats__value { font-family: var(--font-display); font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; color: var(--chalk-50); }
.stats__label { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--chalk-400); }

.about__features { display: flex; flex-direction: column; gap: 1rem; }

.feature {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: 1.5rem;
	background-color: rgba(255, 255, 255, 0.025);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s var(--ease);
}
.feature:hover { background-color: rgba(255, 255, 255, 0.04); transform: translateY(-4px); }
.feature__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: var(--ring);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature:hover .feature__icon { transform: rotate(10deg); }
.feature__shape { width: 1.75rem; height: 1.75rem; border: 2px solid var(--chalk-100); }
.feature__shape--circle { border-radius: 999px; }
.feature__shape--square { border-radius: 5px; }
.feature__title { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--chalk-50); }
.feature__body { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.625; color: var(--chalk-400); }

/* ==========================================================================
   Games
   ========================================================================== */
.games { overflow: hidden; }
.games__heading { margin-bottom: 4rem; }

.games__glow {
	position: absolute;
	left: 50%;
	top: 33.333333%;
	z-index: -10;
	width: 460px;
	height: 460px;
	pointer-events: none;
	opacity: 0.12;
	border-radius: 999px;
	filter: blur(140px);
	transform: translateX(-50%);
	transition: background-color 1s var(--ease);
}

.games__carousel { position: relative; }
.games__viewport { padding: 1.5rem; overflow-x: auto; }
.js .games__viewport { overflow: visible; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.js .games__viewport.is-dragging { cursor: grabbing; }

.games__track { position: relative; display: flex; }
.js .games__track { transition: transform 0.7s ease; will-change: transform; }
.js .games__track.is-instant { transition: none; }

.game-slide { flex: 0 0 auto; width: 72vw; max-width: 300px; margin-right: 28px; }
.js .game-slide {
	opacity: 0.35;
	transform: scale(0.82);
	transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.js .game-slide.is-active { z-index: 5; opacity: 1; transform: scale(1); }
.js .game-slide.is-adjacent { opacity: 0.6; transform: scale(0.88); }

.game-card { position: relative; overflow: hidden; border-radius: 26px; }
.game-card::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: var(--ring); }
.game-card__media { position: relative; width: 100%; aspect-ratio: 2 / 3; background: var(--ink-700); }
.game-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1); }
.game-card:hover .game-card__image { transform: scale(1.06); }
.game-card__shade { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to top, rgba(15, 15, 18, 0.9), rgba(15, 15, 18, 0.1), transparent); }
.game-card__dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: rgba(15, 15, 18, 0.4); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.game-card:hover .game-card__dim { opacity: 1; }
.game-card__select { position: absolute; inset: 0; z-index: 1; width: 100%; border-radius: inherit; }

.status {
	position: absolute;
	left: 1rem;
	top: 1rem;
	z-index: 2;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	pointer-events: none;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.status--available { color: #6ee7b7; background: rgba(52, 211, 153, 0.15); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3); }
.status--soon { color: #fcd34d; background: rgba(251, 191, 36, 0.15); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3); }
.status--development { color: #7dd3fc; background: rgba(56, 189, 248, 0.15); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3); }
/* The blue ring matches the live site, where a class-name typo drops its amber ring. */
.status--demo { color: #fcd34d; background: rgba(251, 191, 36, 0.15); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.5); }

.game-card__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 1.25rem;
	text-align: left;
	pointer-events: none;
}
.game-card__title { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.25; font-weight: 600; color: var(--chalk-50); }
.game-card__tag { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--chalk-300); }
.game-card__link {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	color: var(--ink-900);
	background: var(--chalk-100);
	opacity: 0;
	pointer-events: auto;
	transform: translateY(0.75rem);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.game-card:hover .game-card__link, .game-card__link:focus-visible { opacity: 1; transform: translateY(0); }

.games__arrows {
	position: absolute;
	inset: 50% 0 0;
	z-index: 10;
	display: none;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
	transform: translateY(-50%);
}
.games__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	color: var(--chalk-100);
	background: rgba(26, 26, 31, 0.6);
	box-shadow: var(--ring);
	pointer-events: auto;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), scale 0.2s var(--ease);
}
.games__arrow:hover { background: var(--ink-600); scale: 1.1; }
.games__arrow:active { scale: 0.92; }
.games__arrow-icon { width: 1.25rem; height: 1.25rem; }
.games__arrow-icon--prev { transform: rotate(180deg); }

.games__dots { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-top: 2.5rem; }
.games__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.25); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.games__dot:hover { background: rgba(255, 255, 255, 0.5); }
.games__dot[aria-current="true"] { width: 1.75rem; background: var(--chalk-100); }

.games__details { margin-top: 3.5rem; }
.games__panels { max-width: 48rem; margin: 0 auto; }

.game-panel { display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity 0.5s var(--ease), translate 0.5s var(--ease); }
.game-panel + .game-panel { margin-top: 4rem; }
.js .game-panel { display: none; margin-top: 0; }
.js .game-panel.is-active { display: flex; }
.js .game-panel.is-entering { opacity: 0; translate: 0 18px; }
.js .game-panel.is-leaving { opacity: 0; translate: 0 -12px; }

.game-panel__count { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; font-family: var(--font-display); font-size: 0.875rem; line-height: 1.25rem; }
.game-panel__current { color: var(--chalk-400); }
.game-panel__rule { width: 2rem; height: 1px; background: rgba(255, 255, 255, 0.15); }
.game-panel__total { color: var(--chalk-500); }
.game-panel__title { font-family: var(--font-display); font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: var(--chalk-50); }
.game-panel__tagline { margin-top: 0.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: var(--chalk-300); }
.game-panel__description { max-width: 36rem; margin-top: 1rem; font-size: 0.875rem; line-height: 1.625; color: var(--chalk-400); }
.game-panel__tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }
.game-panel__tag { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; line-height: 1rem; color: var(--chalk-300); background: rgba(255, 255, 255, 0.04); box-shadow: var(--ring); }
.game-panel__links { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-top: 2rem; }

/* ==========================================================================
   Community
   ========================================================================== */
.socials__heading { margin-bottom: 3.5rem; }
.socials__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.social-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	overflow: hidden;
	padding: 1.5rem;
	border-radius: 1.5rem;
	background: rgba(255, 255, 255, 0.025);
	box-shadow: inset 0 0 0 1px var(--line);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-card:hover { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); transform: translateY(-0.375rem); }
.social-card__glow {
	position: absolute;
	inset: -1px;
	border-radius: 1.5rem;
	pointer-events: none;
	opacity: 0;
	background-image: radial-gradient(120px 80px at 50% 0, rgba(244, 244, 246, 0.12), transparent);
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-card:hover .social-card__glow { opacity: 1; }
.social-card__top { display: flex; align-items: center; justify-content: space-between; }
.social-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: var(--ring);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-card:hover .social-card__icon { background: var(--chalk-100); transform: scale(1.1); }
.social-card__svg { width: 1.25rem; height: 1.25rem; color: var(--chalk-200); transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.social-card:hover .social-card__svg { color: var(--ink-900); }
.social-card__arrow { color: var(--chalk-400); opacity: 0; transform: translate(-0.25rem, 0.25rem); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.social-card:hover .social-card__arrow { opacity: 1; transform: translate(0, 0); }
.social-card__text { margin-top: 2rem; }
.social-card__name { font-family: var(--font-display); font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--chalk-50); }
.social-card__handle { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--chalk-400); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { overflow: hidden; }
.contact__bg { position: absolute; inset: 0; pointer-events: none; }

/* These sit with their top-left corner at the section's centre, not centred on it.
   That off-centre placement is how the live site actually renders. */
.contact__sweep {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 700px;
	height: 700px;
	border-radius: 999px;
	opacity: 0.07;
	background: conic-gradient(from 0deg, transparent, #f4f4f6, transparent 60%);
	animation: spin 28s linear infinite;
}
.contact__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--size);
	height: var(--size);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 999px;
	animation: pulse var(--pulse) ease-in-out infinite;
}
.contact__orbit { position: absolute; left: 50%; top: 50%; width: 480px; height: 480px; animation: spin 24s linear infinite; }
.contact__orbit-circle { position: absolute; left: 50%; top: 0; width: 1rem; height: 1rem; border-radius: 999px; background: rgba(244, 244, 246, 0.3); transform: translateX(-50%); }
.contact__orbit-square { position: absolute; left: 50%; bottom: 0; width: 1rem; height: 1rem; border-radius: 3px; background: rgba(244, 244, 246, 0.2); transform: translateX(-50%); }
.contact__orbit-triangle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 0.4; }
	50% { transform: scale(1.04); opacity: 0.7; }
}

.contact__container { position: relative; z-index: 10; }
.contact__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
	transition: opacity 0.8s var(--ease), scale 0.8s var(--ease);
}
.js .contact__content { opacity: 0; scale: 0.97; }
.js .contact__content.is-inview { opacity: 1; scale: 1; }
.contact__eyebrow { margin-bottom: 1.5rem; }
.contact__title { font-family: var(--font-display); font-size: calc(2.25rem * var(--heading-scale, 1)); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; color: var(--chalk-50); }
.contact__title-muted { display: block; margin-top: 0.25rem; color: var(--chalk-400); }
.contact__text { max-width: 32rem; margin-top: 1.5rem; font-size: 1rem; line-height: 1.625; color: var(--chalk-400); }
.contact__actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 5rem; }
.contact__emails { display: flex; flex-direction: column; align-items: flex-start; padding-right: 0.5rem; text-align: left; }
.contact__email { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.contact__email-2 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 300; }
.contact__copy {
	padding: 0.875rem 1.25rem;
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--chalk-300);
	box-shadow: var(--ring);
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact__copy:hover { color: var(--chalk-50); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; border-top: 1px solid var(--line); background: rgba(15, 15, 18, 0.6); }
.marquee { overflow: hidden; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; white-space: nowrap; -webkit-user-select: none; user-select: none; }
.marquee__group { display: flex; justify-content: space-around; gap: 2.5rem; min-width: 100%; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item { display: flex; align-items: center; gap: 2.5rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; color: rgba(110, 110, 120, 0.4); }

.site-footer__body { padding-top: 4rem; padding-bottom: 4rem; }
.site-footer__grid { display: grid; gap: 3rem; }
.site-footer__tagline { max-width: 20rem; margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.625; color: var(--chalk-400); }
.site-footer__title { font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--chalk-500); }

.footer-links { margin-top: 1.25rem; }
.footer-links > * + * { margin-top: 0.75rem; }
.footer-links__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--chalk-300); transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.footer-links__link:hover { color: var(--chalk-50); }
.footer-links__line { width: 0; height: 1px; background: var(--chalk-100); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.footer-links__link:hover .footer-links__line { width: 1rem; }

.footer-socials { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.footer-socials__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	color: var(--chalk-300);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: var(--ring);
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s var(--ease);
}
.footer-socials__link:hover { color: var(--ink-900); background: var(--chalk-100); transform: translateY(-3px); }
.footer-socials__icon { width: 18px; height: 18px; }

.site-footer__bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.25rem; color: var(--chalk-500); }
.site-footer__marks { display: inline-flex; align-items: center; gap: 0.375rem; }

/* ==========================================================================
   Other pages
   ========================================================================== */
.content-page { min-height: 70vh; padding-top: 9rem; padding-bottom: 7rem; }
.content-page--center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; }
.content-page__entry + .content-page__entry { margin-top: 3.5rem; }
.content-page__title { font-family: var(--font-display); font-size: 2.25rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; color: var(--chalk-50); }
.content-page__body { max-width: 42rem; margin-top: 1.5rem; font-size: 1rem; line-height: 1.625; color: var(--chalk-300); }
.content-page__body a { text-decoration: underline; }
.content-page__body img { border-radius: 1rem; }

/* ==========================================================================
   Breakpoints (same as the original: 640, 768, 1024)
   ========================================================================== */
@media (min-width: 640px) {
	.container { padding-left: 2rem; padding-right: 2rem; }
	.section { padding-top: 9rem; padding-bottom: 9rem; }
	.contact.section { padding-top: 10rem; padding-bottom: 10rem; }

	.preloader__shape--square, .preloader__shape--circle { width: 3.5rem; height: 3.5rem; }
	.preloader__shape--triangle { border-left-width: 30px; border-right-width: 30px; border-bottom-width: 52px; }

	.hero__logo { width: 7rem; height: 7rem; }
	.hero__title { font-size: calc(4.5rem * var(--heading-scale, 1)); line-height: 1; }
	.hero__text { font-size: 1.125rem; line-height: 1.75rem; }
	.hero__actions { flex-direction: row; }
	.hero__scroll { display: block; }

	.section-heading__title { font-size: calc(3rem * var(--heading-scale, 1)); line-height: 1; }
	.section-heading__text { font-size: 1.125rem; line-height: 1.75rem; }

	.about__title { font-size: calc(3rem * var(--heading-scale, 1)); line-height: 1; }
	.about__text { font-size: 1.125rem; line-height: 1.75rem; }
	.stats__value { font-size: 2.25rem; line-height: 2.5rem; }

	.game-panel__title { font-size: 2.25rem; line-height: 2.5rem; }
	.game-panel__description { font-size: 1rem; line-height: 1.5rem; }
	.game-panel__links { flex-direction: row; }

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

	.contact__title { font-size: calc(3.75rem * var(--heading-scale, 1)); line-height: 1; }
	.contact__text { font-size: 1.125rem; line-height: 1.75rem; }
	.contact__actions { flex-direction: row; }

	.site-footer__bottom { flex-direction: row; }
}

@media (min-width: 768px) {
	.site-nav { display: flex; }
	.press-link { display: inline-flex; }
	.menu-toggle, .mobile-menu { display: none; }

	.site-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.site-footer__about { grid-column: span 5 / span 5; }
	.site-footer__explore { grid-column: span 3 / span 3; }
	.site-footer__follow { grid-column: span 4 / span 4; }
}

@media (min-width: 1024px) {
	.container { padding-left: 3rem; padding-right: 3rem; }

	.hero__title { font-size: calc(5.5rem * var(--heading-scale, 1)); }
	.section-heading__title { font-size: calc(3.75rem * var(--heading-scale, 1)); }
	.about__title { font-size: calc(3.4rem * var(--heading-scale, 1)); }

	.about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5rem; }
	.about__intro { grid-column: span 7 / span 7; }
	.about__features { grid-column: span 5 / span 5; }

	.js .games__arrows { display: flex; }
	.socials__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, ::before, ::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
	}
}