/*
 * Voxera base styles: tokens, fonts, header, hero, buttons, footer.
 *
 * Sizing: every length is written in Figma pixels times --u (1/16 rem).
 * The root font-size scales with the viewport, so the 1920px desktop frame and the
 * 402px mobile frame are both reproduced exactly and everything in between scales.
 */

@font-face { font-family: "Gilroy"; src: url("../fonts/gilroy-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cal Sans"; src: url("../fonts/cal-sans.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
	--u: 0.0625rem;
	--vx-bg: #f1f1ff;
	--vx-dark: #090a0e;
	--vx-black: #000103;
	--vx-ink: #000002;
	--vx-blue: #2b499f;
	--vx-lime: #cbc82b;
	--vx-grey: #5f5e5e;
	--vx-card: #eaedf6;
	--vx-gradient: linear-gradient(90deg, #2b499f -38%, #cbc82b 154%);
	--vx-font-head: "Gilroy", "Satoshi", system-ui, sans-serif;
	--vx-font-body: "Satoshi", system-ui, sans-serif;
	--vx-font-ui: "Inter", system-ui, sans-serif;
	--vx-font-accent: "Playfair Display", Georgia, serif;
	--vx-container: calc(1440 * var(--u));
}

html { font-size: clamp(15px, calc(100vw / 25.125), 22px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (min-width: 1100px) {
	html { font-size: clamp(10px, calc(100vw / 120), 16px); }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--vx-bg); color: var(--vx-ink); font-family: var(--vx-font-body); font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.28; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
em { font-family: var(--vx-font-accent); font-style: italic; font-weight: 400; }
:focus-visible { outline: 2px solid var(--vx-lime); outline-offset: 3px; }

.vx-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; padding: 8px 16px; }
.vx-skip:focus { left: 8px; top: 8px; }

.vx-main { position: relative; }
/* Faint column guides behind the page, as in the design (desktop only). */
@media (min-width: 1100px) {
	.vx-main::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: calc(1587 * var(--u)); margin-left: calc(-794 * var(--u)); pointer-events: none;
		background: linear-gradient(90deg, #e6e6e6 1px, transparent 1px) 0 0 / calc(529 * var(--u)) 100%; border-right: 1px solid #e6e6e6; }
	.vx-main > * { position: relative; }
}

.vx-container { width: var(--vx-container); max-width: calc(100% - 40 * var(--u)); margin-inline: auto; }

/* Typography helpers shared by blocks */
.vx-eyebrow { font-family: var(--vx-font-head); font-weight: 600; font-size: calc(20 * var(--u)); letter-spacing: -0.05em; line-height: 1; color: var(--vx-blue); }
.vx-h2 { font-family: var(--vx-font-head); font-weight: 600; font-size: calc(50 * var(--u)); line-height: 1.1; letter-spacing: -0.05em; color: var(--vx-ink); }
.vx-h2 em { background: linear-gradient(90deg, #6f6e14, var(--vx-lime) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }

/* Button */
.vx-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: calc(28 * var(--u)); height: calc(60 * var(--u)); padding: 0 calc(7 * var(--u)) 0 calc(24 * var(--u)); border: 0; border-radius: calc(20 * var(--u)); background: var(--vx-gradient); color: #fff; font-family: var(--vx-font-head); font-weight: 600; font-size: calc(18 * var(--u)); letter-spacing: -0.05em; white-space: nowrap; transition: filter .2s, transform .2s; }
.vx-btn__icon { width: calc(42.58 * var(--u)); height: calc(42.58 * var(--u)); transition: transform .25s; }
.vx-btn:hover { filter: brightness(1.08); }
.vx-btn:hover .vx-btn__icon { transform: rotate(45deg); }

/* Header */
.vx-header { position: absolute; top: calc(61 * var(--u)); left: 0; right: 0; z-index: 20; color: #fff; }
.vx-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; width: var(--vx-container); margin-inline: auto; height: calc(60 * var(--u)); }
.vx-header__logo img { width: calc(164 * var(--u)); height: auto; margin-top: calc(3 * var(--u)); }
.vx-header__nav { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; display: flex; align-items: center; padding: 0 calc(39 * var(--u)); border-radius: calc(20 * var(--u)); background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.vx-menu { display: flex; gap: calc(52 * var(--u)); font-family: var(--vx-font-ui); font-weight: 400; font-size: calc(16 * var(--u)); line-height: 1.25; letter-spacing: -0.05em; white-space: nowrap; }
.vx-menu a { transition: opacity .2s; }
.vx-menu a:hover, .vx-menu .current-menu-item a { opacity: .7; }
.vx-header__actions { display: flex; align-items: center; gap: calc(26 * var(--u)); margin-right: calc(-7 * var(--u)); }
.vx-header__login { font-family: var(--vx-font-ui); font-weight: 400; font-size: calc(18 * var(--u)); letter-spacing: -0.05em; }
.vx-btn--header { width: calc(215 * var(--u)); gap: 0; padding-right: calc(8.4 * var(--u)); }
.vx-header__toggle, .vx-mobile-menu { display: none; }

/* Hero (inner pages) */
.vx-hero { padding: calc(21 * var(--u)) calc(22 * var(--u)) 0; }
.vx-hero__box { position: relative; max-width: calc(1875 * var(--u)); min-height: calc(811 * var(--u)); margin-inline: auto; border-radius: calc(30 * var(--u)); overflow: hidden; background: var(--vx-dark) url("../img/hero-inner.webp") center / cover no-repeat; color: #fff; }
.vx-hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(264 * var(--u)) calc(20 * var(--u)) calc(100 * var(--u)); }
.vx-hero__eyebrow, .vx-hero__text { font-family: var(--vx-font-ui); font-weight: 400; font-size: calc(20 * var(--u)); line-height: 1.5; letter-spacing: -0.05em; color: #f3f8ff; }
.vx-hero__heading { max-width: calc(1023 * var(--u)); margin: calc(23 * var(--u)) 0; font-family: var(--vx-font-head); font-weight: 600; font-size: calc(80 * var(--u)); line-height: calc(89 / 80); letter-spacing: -0.05em; }
.vx-hero__heading em { color: var(--vx-lime); }

/* Footer */
.vx-footer { position: relative; height: calc(814 * var(--u)); overflow: hidden; background: var(--vx-dark) url("../img/footer.webp") top center / calc(1929 * var(--u)) auto no-repeat; color: #fff; }
.vx-footer__inner { position: relative; z-index: 1; width: var(--vx-container); margin-inline: auto; padding-top: calc(196 * var(--u)); }
.vx-footer__top { display: grid; grid-template-columns: calc(436 * var(--u)) calc(483 * var(--u)) 1fr; align-items: start; min-height: calc(55 * var(--u)); }
.vx-footer__logo img { width: calc(164 * var(--u)); margin-top: calc(1 * var(--u)); }
.vx-footer__text { margin-top: calc(4 * var(--u)); color: var(--vx-grey); font-size: calc(18 * var(--u)); line-height: calc(23 / 18); letter-spacing: -0.05em; }
.vx-footer__social { display: flex; justify-content: flex-end; gap: calc(9.4 * var(--u)); }
.vx-footer__social a { display: block; width: calc(54.875 * var(--u)); height: calc(54.875 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .12); transition: background-color .3s, transform .3s; }
.vx-footer__social a:hover, .vx-footer__social a:focus-visible { background: #3f4af8; transform: translateY(-3px); }
.vx-footer__social img { width: 100%; height: 100%; }
.vx-footer__linkedin { display: grid; place-items: center; width: 100%; height: 100%; }
.vx-footer__linkedin img { width: calc(17.27 * var(--u)); height: calc(17.27 * var(--u)); }
.vx-footer__nav { display: flex; justify-content: center; margin-top: calc(62 * var(--u)); padding: calc(48 * var(--u)) 0 calc(51 * var(--u)); border-block: 1px solid rgba(255, 255, 255, .1); }
.vx-footer__bottom { display: flex; justify-content: space-between; margin-top: calc(40 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(23 / 18); letter-spacing: -0.05em; }
.vx-footer__bottom p:first-child { margin-left: calc(-4 * var(--u)); }
.vx-footer__wordmark { position: absolute; left: 50%; top: calc(546 * var(--u)); transform: translateX(-50%); font-family: "Cal Sans", var(--vx-font-head); font-weight: 600; font-size: calc(450 * var(--u)); line-height: calc(412 / 450); white-space: nowrap; color: rgba(255, 255, 255, .17); pointer-events: none; user-select: none; }

/* Simple fallback list (blog index until its design lands) */
.vx-simple-list { padding: calc(80 * var(--u)) 0 calc(160 * var(--u)); display: grid; gap: calc(40 * var(--u)); }
.vx-simple-list h2 { font-family: var(--vx-font-head); font-size: calc(30 * var(--u)); letter-spacing: -0.05em; }

/* ---------- Mobile (Figma frame: 402px) ---------- */
@media (max-width: 1099.98px) {
	:root { --vx-container: calc(362 * var(--u)); }
	body { font-size: calc(12 * var(--u)); line-height: calc(20 / 12); }
	.vx-container { max-width: none; }

	.vx-eyebrow { font-size: calc(14 * var(--u)); }
	.vx-h2 { font-size: calc(30 * var(--u)); line-height: 1.1; }

	.vx-btn { gap: calc(15.33 * var(--u)); height: calc(32.86 * var(--u)); padding: 0 calc(3.83 * var(--u)) 0 calc(13.14 * var(--u)); border-radius: calc(10.95 * var(--u)); font-size: calc(12 * var(--u)); }
	.vx-btn__icon { width: calc(23.32 * var(--u)); height: calc(23.32 * var(--u)); }

	.vx-header { top: calc(25 * var(--u)); }
	.vx-header__inner { width: auto; height: calc(50 * var(--u)); margin: 0 calc(25.6 * var(--u)) 0 calc(38 * var(--u)); }
	.vx-header__logo img { width: calc(100 * var(--u)); margin-top: calc(2 * var(--u)); }
	.vx-header__nav, .vx-header__actions { display: none; }
	.vx-header__toggle { display: grid; place-items: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); padding: 0; border: 0; border-radius: calc(15 * var(--u)); background: var(--vx-gradient); }
	.vx-header__toggle img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
	.vx-mobile-menu:not([hidden]) { display: block; margin: calc(12 * var(--u)) calc(20 * var(--u)) 0; padding: calc(24 * var(--u)); border-radius: calc(20 * var(--u)); background: rgba(9, 10, 14, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
	.vx-mobile-menu__list { display: grid; gap: calc(18 * var(--u)); font-family: var(--vx-font-ui); font-weight: 400; font-size: calc(16 * var(--u)); }
	.vx-mobile-menu__actions { display: flex; align-items: center; justify-content: space-between; margin-top: calc(24 * var(--u)); padding-top: calc(20 * var(--u)); border-top: 1px solid rgba(255, 255, 255, .12); }
	.vx-header__login { font-size: calc(14 * var(--u)); }

	.vx-hero { padding: calc(8 * var(--u)) calc(7.5 * var(--u)) 0; }
	.vx-hero__box { min-height: calc(407 * var(--u)); background-image: url("../img/hero-inner-mobile.webp"); }
	.vx-hero__content { align-items: flex-start; text-align: left; padding: calc(116 * var(--u)) calc(31 * var(--u)) calc(60 * var(--u)); }
	.vx-hero__eyebrow { font-size: calc(14 * var(--u)); line-height: calc(30 / 14); }
	.vx-hero__heading { max-width: calc(325 * var(--u)); margin: calc(17 * var(--u)) 0 calc(17 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1; }
	.vx-hero__heading br { display: none; }
	.vx-hero__text { max-width: calc(273 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16.43 / 12); }

	.vx-footer { height: calc(581 * var(--u)); background-image: url("../img/footer-mobile.webp"); background-size: cover; }
	.vx-footer__inner { padding-top: calc(50 * var(--u)); }
	.vx-footer__top { display: flex; flex-direction: column; align-items: center; text-align: center; }
	.vx-footer__logo img { width: calc(164 * var(--u)); margin: 0; }
	.vx-footer__text { width: calc(324 * var(--u)); margin-top: calc(29 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20 / 12); }
	.vx-footer__social { margin-top: calc(29 * var(--u)); }
	.vx-footer__nav { margin-top: calc(66 * var(--u)); padding: calc(21 * var(--u)) 0 calc(20 * var(--u)); }
	.vx-footer__nav .vx-menu { gap: calc(30 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20 / 12); }
	.vx-footer__bottom { flex-direction: column; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(36 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(23 / 12); }
	.vx-footer__bottom p:first-child { margin-left: 0; }
	.vx-footer__wordmark { left: 0; top: calc(508 * var(--u)); transform: none; font-size: calc(130 * var(--u)); line-height: calc(100 / 130); }
}

/* Motion */
.vx-reveal { opacity: 0; transform: translateY(calc(28 * var(--u))); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--vx-delay, 0s); }
.vx-reveal.is-in { opacity: 1; transform: none; }
.vx-btn { position: relative; overflow: hidden; }
.vx-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.vx-btn:hover::after { transform: translateX(120%); }
.vx-btn:hover { transform: translateY(-2px); }
.vx-btn:active { transform: translateY(0) scale(.98); }
.vx-menu a { position: relative; }
.vx-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-6 * var(--u)); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.vx-menu a:hover::after, .vx-menu .current-menu-item a::after { transform: scaleX(1); }
.vx-menu a:hover, .vx-menu .current-menu-item a { opacity: 1; }
.vx-hero__box { animation: vx-hero-in 1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vx-hero-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.vx-reveal { opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}