/* AlphaSoft "Space" — global tokens, fonts, reset, typography, header, footer, shared components. */

/* ---------- Fonts (self-hosted, swap, metric-matched fallbacks for CLS 0) ---------- */

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, 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";
	font-style: normal;
	font-weight: 400 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: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, 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: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-400-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: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, 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: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-500-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: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, 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: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-italic-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;
}

/* Fallbacks tuned to each webfont's vertical metrics so the swap doesn't shift layout. */
@font-face {
	font-family: "Space Grotesk Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 104%;
	ascent-override: 94.6%;
	descent-override: 28.1%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "IBM Plex Mono Fallback";
	src: local("Courier New"), local("Menlo");
	size-adjust: 100%;
	ascent-override: 102.5%;
	descent-override: 27.5%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Instrument Serif Fallback";
	src: local("Times New Roman Italic"), local("Times New Roman"), local("Georgia Italic");
	size-adjust: 96%;
	ascent-override: 103%;
	descent-override: 32.3%;
	line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
	--bg: #07070a;
	--bg-raised: rgb(14 14 20 / 78%);
	--bg-card: #111118;
	--text: #ededf0;
	--muted: #a0a0aa;
	--muted-2: #8a8a94;
	--muted-3: #7a7a84;
	--muted-4: #6e6e78;
	--nav: #b4b4bc;
	--line: #1c1c24;
	--line-soft: #16161c;
	--line-chip: #26262e;
	--line-strong: rgb(255 255 255 / 18%);
	--indigo: #5157e8;
	--indigo-hover: #3a40d6;
	--indigo-light: #8b90ff;
	--indigo-pale: #b9bcff;
	--flame: #f59a5b;
	--sans: "Space Grotesk", "Space Grotesk Fallback", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--serif: "Instrument Serif", "Instrument Serif Fallback", georgia, serif;
	--mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SFMono-Regular", menlo, monospace;
	--gutter: 4vw;
	--header-h: 69px;
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--radius-card: 20px;
	--radius-lg: 24px;
	--h1: clamp(52px, 8.4vw, 136px);
	--h2: clamp(36px, 4.6vw, 68px);

	/* Legacy aliases still referenced by old markup during the transition. */
	--ink: var(--bg);
	--paper: var(--text);
	--blue: var(--indigo);
	--side-padding: var(--gutter);
	--brand-flame: var(--flame);
	color-scheme: dark;
}

@media (max-width: 759px) {
	:root {
		--gutter: 20px;
		--header-h: 61px;
		/* Phone display sizes: long words ("razumevanjem", "involvement.") must
		   never break mid-word at 320px, and 3–4 line heroes stay scannable. */
		--h1: clamp(38px, 11vw, 52px);
	}
}

/* ---------- Reset / base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

html {
	background: var(--bg);
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html body {
	margin: 0;
	/* No body background on purpose: html paints the page background, so the
	   fixed starfield canvas (z-index -1) sits between it and the content without
	   needing a stacking context on .wp-site-blocks, which would trap the fixed
	   header below the mobile menu. */
	background: transparent;
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
	margin: 0;
	font-weight: 600;
	line-height: 1;
	text-wrap: balance;
}

html p {
	margin: 0;
	text-wrap: pretty;
}

body.menu-open {
	overflow: hidden;
}

a,
a:hover,
a:visited {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
}

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

img {
	height: auto;
}

::selection {
	background: var(--indigo);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--indigo-light);
	outline-offset: 3px;
	border-radius: 4px;
}

input[type="range"] {
	accent-color: var(--indigo);
}

main {
	display: block;
	position: relative;
}

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

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--indigo);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	transform: translateY(-160%);
	transition: transform 0.2s var(--ease-out);
}

.skip-link:focus {
	transform: none;
	color: #fff;
}

/* ---------- Starfield ---------- */

.space-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	/* Large-viewport height: keeps covering when the mobile URL bar collapses. */
	height: 100vh;
	height: 100lvh;
	pointer-events: none;
	z-index: -1;
}

/* ---------- Typography primitives ---------- */

.eyebrow,
.mono {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--muted-3);
}

.mono {
	text-transform: none;
	letter-spacing: 0;
}

.display-1 {
	font-size: var(--h1);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.045em;
}

.display-2 {
	font-size: var(--h2);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
}

.display-1 em,
.display-2 em,
.serif,
em.serif {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--indigo-pale);
}

.lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--muted);
}

/* Compound words ("e-commerce") that must not break at the hyphen on narrow lines. */
.nobr {
	white-space: nowrap;
}

.body-muted {
	font-size: 16px;
	line-height: 1.6;
	color: var(--muted);
}

/* Masked line reveal for H1s: <span class="line-mask"><span data-line>…</span></span> */
.line-mask {
	display: block;
	overflow: hidden;
	/* Room for descenders (g, j, p, y and the serif italic) below a <1 line-height
	   line box; the negative margin keeps the stacked lines at their design rhythm. */
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}

.line-mask:last-child {
	margin-bottom: -0.1em;
}

.line-mask > [data-line] {
	display: block;
}

/* ---------- Layout ---------- */

.section {
	position: relative;
	padding: 120px var(--gutter);
}

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

.page-hero {
	position: relative;
	padding: calc(var(--header-h) + 100px) var(--gutter) 80px;
}

@media (max-width: 759px) {
	.section {
		padding-block: 80px;
	}

	.page-hero {
		padding-top: calc(var(--header-h) + 60px);
		padding-bottom: 56px;
	}
}

/* ---------- Buttons & chips ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.btn--primary,
.btn--primary:visited {
	background: var(--indigo);
	color: #fff;
}

.btn--primary:hover {
	background: var(--indigo-hover);
	color: #fff;
}

.btn--ghost {
	border-color: var(--line-strong);
	color: var(--text);
	background: transparent;
}

.btn--ghost:hover {
	border-color: var(--text);
	color: var(--text);
}

.btn--lg {
	padding: 18px 28px;
	font-size: 16px;
}

.btn--sm {
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 400;
}

.btn .btn-arrow {
	font-size: 1.15em;
	line-height: 1;
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border: 1px solid var(--line-chip);
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--nav);
	white-space: nowrap;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

@media (max-width: 759px) {
	.chip {
		font-size: 13px;
		padding: 6px 12px;
	}
}

.text-link {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--indigo-light);
	transition: color 0.2s;
}

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

/* Standalone text links are real tap targets: 44px tall, pulled back into
   the text rhythm with negative block margins. */
a.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	margin-block: -13px;
}

.card {
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--bg-raised);
	transition: border-color 0.3s;
}

a.card:hover {
	border-color: var(--indigo);
	color: var(--text);
}

/* Shared rocket glyph (inline SVG, 64×64 viewBox). */
.rocket-glyph {
	width: 22px;
	height: 22px;
	flex: none;
}

/* ---------- Scroll reveal ----------
   Nothing is hidden by CSS alone: space.js marks only elements that start
   below the fold as .is-pending, so above-the-fold content (the LCP) paints
   with the first frame and never waits for JavaScript. */

[data-reveal] {
	transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), background-color 0.3s, border-color 0.3s;
}

[data-reveal].is-pending {
	opacity: 0;
	transform: translateY(28px);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* H1 line intro runs as a pure CSS animation (no JS dependency). */
@keyframes alphasoft-line-in {
	from {
		transform: translateY(105%);
	}

	to {
		transform: none;
	}
}

.line-mask > [data-line] {
	animation: alphasoft-line-in 1.2s var(--ease-expo) 0.15s both;
}

.line-mask:nth-child(2) > [data-line] {
	animation-delay: 0.27s;
}

.line-mask:nth-child(3) > [data-line] {
	animation-delay: 0.39s;
}

.line-mask:nth-child(4) > [data-line] {
	animation-delay: 0.51s;
}

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	height: var(--header-h);
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: rgb(7 7 10 / 55%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgb(255 255 255 / 6%);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 44px;
	color: var(--text);
}

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

.brand .brand-svg {
	width: 36px;
	height: 20px;
	flex: none;
}

.brand-name {
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.02em;
	line-height: 1;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 14px;
}

/* Nav links are 44px tall tap targets (tablets use this nav too); the gap
   stands in for the collapsed inter-word space around inline arrows / slashes. */
.site-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--nav);
	transition: color 0.2s;
}

.site-nav a:not(.header-cta) {
	min-height: 44px;
}

.site-nav .header-cta {
	position: relative;
}

.site-nav .header-cta::after {
	content: "";
	position: absolute;
	inset: -5px 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--text);
}

.site-nav .lang-switch {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted-2);
	letter-spacing: 0.02em;
}

.lang-switch b {
	font-weight: 400;
	color: var(--text);
}

.site-nav .header-cta {
	border: 1px solid var(--line-strong);
	padding: 9px 16px;
	border-radius: 999px;
	color: var(--text);
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.site-nav .header-cta:hover {
	background: var(--indigo);
	border-color: var(--indigo);
	color: #fff;
}

.menu-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.menu-toggle span {
	position: absolute;
	left: 11px;
	right: 11px;
	height: 1.5px;
	background: var(--text);
	transition: transform 0.35s var(--ease-expo), top 0.35s var(--ease-expo);
}

.menu-toggle span:first-child {
	top: 18px;
}

.menu-toggle span:last-child {
	top: 25px;
}

.menu-toggle.active span:first-child {
	top: 21.5px;
	transform: rotate(45deg);
}

.menu-toggle.active span:last-child {
	top: 21.5px;
	transform: rotate(-45deg);
}

@media (max-width: 759px) {
	.site-nav {
		display: none;
	}

	.menu-toggle {
		display: block;
	}
}

/* ---------- Mobile menu ---------- */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 45;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: calc(var(--header-h) + 24px) var(--gutter) max(24px, env(safe-area-inset-bottom));
	/* Scrolls when the links are taller than a short (landscape) viewport;
	   the auto margins below centre them whenever there is room. */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: rgb(7 7 10 / 96%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}

.mobile-menu.open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s var(--ease-out);
}

.mobile-menu > a:first-child {
	margin-top: auto;
}

.mobile-menu > a {
	display: flex;
	flex: none;
	align-items: baseline;
	gap: 16px;
	min-height: 44px;
	padding: 10px 0;
	font-size: clamp(30px, 9vw, 52px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.05;
	border-bottom: 1px solid var(--line-soft);
}

.mobile-menu > a span {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	color: var(--muted-3);
}

.mobile-menu .mobile-menu-meta {
	flex: none;
	margin-top: 20px;
	margin-bottom: auto;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--muted-3);
}

.mobile-menu .mobile-menu-meta .lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.32em;
	min-height: 44px;
	padding: 0 2px;
	letter-spacing: 0.04em;
}

.mobile-menu .lang-switch b {
	font-weight: 400;
	color: var(--text);
}

/* ---------- Footer CTA + footer ---------- */

.footer-cta {
	position: relative;
	z-index: 1;
	padding: 120px var(--gutter);
	border-top: 1px solid var(--line-soft);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

.footer-cta h2 {
	font-size: clamp(44px, 7vw, 112px);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.05em;
	max-width: 1100px;
}

.footer-cta h2 em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--indigo-pale);
}

.site-footer {
	position: relative;
	z-index: 1;
	padding: 40px var(--gutter);
	border-top: 1px solid var(--line-soft);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--muted-3);
}

.site-footer .brand .brand-svg {
	width: 30px;
	height: 17px;
}

.site-footer .brand-name {
	font-size: 15px;
}

.footer-links {
	display: flex;
	gap: 0 20px;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--mono);
	font-size: 11px;
}

/* 44px tall hit areas without changing the visual rhythm of the row. */
.footer-links a,
.footer-links span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.footer-links a {
	color: var(--muted-3);
	transition: color 0.2s;
}

.footer-links a:hover {
	color: var(--text);
}

@media (max-width: 759px) {
	.footer-cta {
		padding-block: 80px;
		gap: 24px;
	}

	.footer-cta .btn--lg {
		max-width: 100%;
		white-space: normal;
		text-align: left;
	}

	.site-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-block: 32px 28px;
		font-size: 14px;
	}

	.site-footer .brand {
		margin-top: -12px;
	}

	.footer-links {
		gap: 0 24px;
		font-size: 12px;
		margin-top: 4px;
		margin-bottom: -10px;
	}
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-3);
}

.breadcrumbs li {
	display: inline-flex;
	align-items: center;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: #33333b;
}

/* Tappable crumbs: 44px tall hit area, pulled back into the visual rhythm with negative margins. */
.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
	margin: -14px -5px;
	padding-inline: 5px;
}

.breadcrumbs a:hover {
	color: var(--text);
}

.breadcrumbs [aria-current="page"] {
	color: var(--nav);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	[data-reveal],
	[data-line] {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

.footer-address {
	font-style: normal;
}