@font-face { font-family: "Bebas Neue"; src: url(/fonts/BebasNeue_400Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter_400Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter_600SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter_800ExtraBold.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/JetBrainsMono_500Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
:root {
color-scheme: dark;
--c-bg: #000000;
--c-surface: #0E1620;
--c-raised: #16212E;
--c-border: #1E2A38;
--c-field-border: #646D7A;
--c-text: #EDF2F8;
--c-text-2: #8A97A6;
--c-accent: #4A90D9;
--c-accent-strong: #2A78C8;
--c-accent-strong-hover: #2670BC;
--c-accent-deep: #1B3A5C;
--c-accent-soft: #142433;
--c-on-accent: #FFFFFF;
--c-warm: #D4B896;
--c-chalk: #F2EFE8;
--c-success: #5fae72;
--c-warning: #e0b23e;
--c-danger: #e2483f;
--c-gold: #F2B01E;
--c-nav-bg: rgba(0, 0, 0, 0.92);
--c-device: #0B0E14;
--hold-green: #54BE72;
--hold-yellow: #F5C93F;
--hold-orange: #F28C42;
--hold-red: #E2565A;
--hold-purple: #9E74D6;
--hold-cuzca: #4E95DC;
--font-display: "Bebas Neue", "Arial Narrow", sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
--fs-hero: clamp(3rem, 1.9rem + 4.7vw, 5.5rem);
--fs-h2: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
--fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
--fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-caption: 0.75rem;
--fs-price: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
--fs-nav: 0.9375rem;
--lh-display: 1;
--lh-heading: 1.2;
--lh-body: 1.6;
--tracking-display: 0.01em;
--tracking-label: 0.14em;
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 26px;
--s-8: 32px; --s-10: 48px; --s-12: 64px; --s-16: 96px; --s-20: 128px;
--section-y: 96px;
--gutter: 16px;
--grid-gap: 16px;
--container: 1200px;
--container-wide: 1320px;
--measure: 62ch;
--nav-h: 64px;
--r-card: 14px 14px 14px 2px;
--r-button: 10px 10px 10px 2px;
--r-field: 8px 8px 8px 1px;
--r-pill: 999px;
--meaning-bar: 3px;
--shadow-phone: 0 24px 60px -12px rgba(27, 58, 92, 0.45);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--t-press: 80ms;
--t-fast: 160ms;
--t-toggle: 200ms;
--t-reveal: 280ms;
--press-y: 2px;
--reveal-y: 24px;
--stagger: 40ms;
--z-nav: 10;
--z-skip: 20;
}
@media (min-width: 48rem) {
:root { --gutter: 32px; --grid-gap: 24px; --section-y: clamp(128px, 20vh, 220px); }
}
@media (min-width: 64rem) {
:root { --grid-gap: 32px; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
font-synthesis: none;
scroll-padding-top: calc(var(--nav-h) + var(--s-4));
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
min-height: 100vh;
min-height: 100svh;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
main { overflow-x: clip; }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
a { color: var(--c-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
strong { font-weight: 800; }
[hidden] { display: none !important; }
:focus-visible {
outline: 2px solid var(--c-chalk);
outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--c-accent-deep); color: var(--c-text); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: absolute;
top: var(--s-2);
left: var(--s-2);
z-index: var(--z-skip);
padding: var(--s-3) var(--s-4);
background: var(--c-accent-strong);
color: var(--c-on-accent);
font-weight: 600;
border-radius: var(--r-button);
text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
.container {
width: min(100% - 2 * var(--gutter), var(--container));
margin-inline: auto;
}
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--grid-gap);
}
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.grid > * { grid-column: 1 / -1; min-width: 0; }
.section { padding-block: var(--section-y); }
.section--surface {
background: var(--c-surface);
border-block: 1px solid var(--c-border);
}
.section + .section--surface, .section--surface + .section { margin-top: 0; }
.display, h1, .h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-hero);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
h2, .h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
h3, .h3 {
font-family: var(--font-body);
font-weight: 800;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: -0.01em;
}
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--c-text-2);
max-width: 52ch;
text-wrap: pretty;
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose p { text-wrap: pretty; }
.muted { color: var(--c-text-2); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.label {
font-size: var(--fs-caption);
font-weight: 800;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--c-text-2);
}
.mono { font-family: var(--font-mono); font-weight: 500; }
.tel { white-space: nowrap; }
.tagline {
margin-top: var(--s-3);
font-size: var(--fs-small);
line-height: 1.5;
color: var(--c-text);
max-width: 44ch;
text-wrap: pretty;
}
.tagline__wink { color: var(--c-warm); font-style: italic; }
.facts-section { padding-block: 0 var(--s-16); }
.facts-section > .container { border-top: 1px solid var(--c-border); padding-top: var(--s-10); }
.facts__label { margin-bottom: var(--s-3); }
.facts__h { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: -0.01em; }
.facts__def { margin-top: var(--s-3); font-size: var(--fs-lead); line-height: 1.55; max-width: var(--measure); text-wrap: pretty; }
.facts { margin-top: var(--s-8); display: grid; gap: var(--s-4); max-width: 60rem; }
.facts__row { display: grid; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.facts__row:first-child { padding-top: 0; border-top: 0; }
.facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--c-text); }
.facts dd { font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }
@media (min-width: 48rem) {
.facts__row { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-6); }
}
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: 48px;
padding: 12px 22px;
border: 1px solid transparent;
border-radius: var(--r-button);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 600;
line-height: 1.25;
text-decoration: none;
white-space: nowrap;
transition:
background-color var(--t-fast) ease,
border-color var(--t-fast) ease,
transform var(--t-press) var(--ease-out);
-webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(var(--press-y)); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--c-accent-strong); color: var(--c-on-accent); }
.btn--secondary { background: transparent; color: var(--c-text); border-color: var(--c-field-border); }
@media (hover: hover) and (pointer: fine) {
.btn--primary:hover { background: var(--c-accent-strong-hover); }
.btn--secondary:hover { border-color: var(--c-text-2); background: var(--c-surface); }
}
.btn[aria-busy="true"], .btn:disabled { cursor: progress; }
.btn:disabled { opacity: 0.8; }
.link-action {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--c-accent);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
background: none;
border: 0;
padding: 0;
}
@media (hover: hover) and (pointer: fine) {
.link-action:hover { text-decoration-thickness: 2px; }
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3) var(--s-4);
}
.icon {
width: 20px;
height: 20px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon--24 { width: 24px; height: 24px; }
.site-header {
position: sticky;
top: 0;
z-index: var(--z-nav);
background: var(--c-nav-bg);
border-bottom: 1px solid var(--c-border);
}
@media (min-width: 64rem) and (hover: hover) {
.site-header { background: rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (prefers-reduced-transparency: reduce) {
.site-header { background: var(--c-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: var(--nav-h);
}
.wordmark {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--c-text);
}
.wordmark svg { height: 22px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--s-6); }
.site-nav__links { display: none; }
.site-nav__links a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--c-text-2);
font-size: var(--fs-nav);
font-weight: 600;
text-decoration: none;
transition: color var(--t-fast) ease;
}
.site-nav__links a[aria-current="page"],
.site-nav__links a[aria-current="location"] { color: var(--c-text); }
.site-nav__links.has-section a[aria-current="page"] { color: var(--c-text-2); }
.site-nav__links.has-section a[aria-current="page"]::after { content: none; }
.site-nav__links a[aria-current="page"]::after,
.site-nav__links a[aria-current="location"]::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 8px;
height: 2px;
background: var(--c-accent);
}
@media (hover: hover) and (pointer: fine) {
.site-nav__links a:hover { color: var(--c-text); }
}
.site-header .btn { min-height: 44px; padding: 10px 18px; }
.is-hero-cta-visible .site-header .btn { opacity: 0; visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
.site-header .btn { transition: opacity var(--t-fast) ease, visibility var(--t-fast); }
}
@media (hover: none) {
.site-header .btn { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}
@media (min-width: 48rem) {
.site-nav__links { display: flex; gap: var(--s-6); }
}
@media (max-width: 23.4375rem) {
.site-header .btn { padding-inline: 14px; font-size: var(--fs-small); }
}
.device {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "phone phone" "meta cuzco";
align-items: center;
column-gap: var(--s-3);
width: var(--phone-w, clamp(220px, 62vw, 300px));
margin-inline: auto;
}
.phone {
grid-area: phone;
position: relative;
aspect-ratio: 422 / 868;
width: 100%;
}
.phone__screen {
position: absolute;
left: 3.7915%;
top: 1.3825%;
width: 92.417%;
height: 97.235%;
border-radius: 14.1% / 6.517%;
overflow: hidden;
background: var(--c-device);
box-shadow: var(--shadow-phone);
}
.phone__screen .phone__poster,
.phone__screen .phone__video { position: absolute; inset: 0; }
.phone__screen img,
.phone__screen video,
.phone__screen picture {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.phone__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.device--wide { width: var(--phone-w, min(100%, 460px)); }
.device--wide .phone { aspect-ratio: var(--screen-ar, 600 / 514); }
.device--wide .phone__screen {
inset: 0;
width: 100%;
height: 100%;
border-radius: var(--r-card);
border: 1px solid rgba(138, 151, 166, 0.22);
}
.device--wide .phone__screen img,
.device--wide .phone__screen video { object-position: center; }
.device__meta {
grid-area: meta;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-3);
margin-top: var(--s-3);
min-width: 0;
}
.device__meta--center { justify-content: center; }
.caption {
font-size: var(--fs-caption);
font-weight: 600;
line-height: 1.45;
color: var(--c-text-2);
}
.device__cuzco {
grid-area: cuzco;
--cz: 52px;
align-self: start;
translate: 0 var(--s-3);
}
@media (min-width: 48rem) {
.device { grid-template-areas: "phone phone" "meta meta"; }
.device__cuzco {
position: absolute;
--cz: var(--cuzco-w, 96px);
translate: none;
bottom: var(--cuzco-bottom, 18%);
}
.device__cuzco--right { right: calc(-1 * var(--cuzco-w, 96px) + 20px); }
.device__cuzco--left { left: calc(-1 * var(--cuzco-w, 96px) + 20px); }
}
.video-toggle {
position: absolute;
z-index: 2;
right: 8px;
bottom: 8px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
background: rgba(14, 22, 32, 0.72);
color: var(--c-text);
border: 1px solid rgba(138, 151, 166, 0.35);
border-radius: 50%;
transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
-webkit-tap-highlight-color: transparent;
}
.device__meta:has(> .video-toggle) { flex-wrap: nowrap; }
.device__meta > .video-toggle {
position: relative;
right: auto;
bottom: auto;
flex: none;
}
.device__meta > .video-toggle ~ .caption { flex: 0 1 auto; min-width: 0; }
@media (max-width: 47.99rem) {
.device:has(> .device__cuzco) .device__meta:has(> .video-toggle) { flex-wrap: wrap; }
}
.video-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
.video-toggle:hover { border-color: var(--c-text-2); background: rgba(14, 22, 32, 0.9); }
}
.video-toggle > .icon { grid-area: 1 / 1; width: 16px; height: 16px; }
.video-toggle .icon--play { display: none; }
.video-toggle:not([data-state="playing"]) .icon--pause { display: none; }
.video-toggle:not([data-state="playing"]) .icon--play { display: block; }
.video-toggle > .icon--play { translate: -0.65px 0; }
.video-toggle__label { position: absolute; }
.video-toggle__label > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
visibility: hidden;
}
.video-toggle[data-state="playing"] [data-label="pause"],
.video-toggle[data-state="paused"] [data-label="resume"],
.video-toggle[data-state="start"] [data-label="start"] { visibility: visible; }
.device--browser {
width: var(--browser-w, 100%);
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "phone" "meta";
}
.browser {
grid-area: phone;
position: relative;
border: 1px solid var(--c-border);
border-radius: 12px 12px 12px 2px;
background: var(--c-surface);
box-shadow: var(--shadow-phone);
}
.browser__bar {
display: flex;
align-items: center;
gap: var(--s-3);
height: 32px;
padding-inline: var(--s-3);
border-bottom: 1px solid var(--c-border);
}
.browser__dots { display: inline-flex; gap: 6px; }
.browser__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-field-border); opacity: 0.6; }
.browser__title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
padding-right: 44px;
font-size: var(--fs-caption);
font-weight: 600;
color: var(--c-text-2);
}
.browser__screen {
position: relative;
aspect-ratio: 1440 / 900;
overflow: hidden;
border-radius: 0 0 11px 1px;
background: var(--c-bg);
}
.browser__poster,
.browser__video { position: absolute; inset: 0; }
.browser__screen img,
.browser__screen video,
.browser__screen picture { width: 100%; height: 100%; object-fit: cover; }
.carousel { margin-top: var(--s-10); }
.carousel__bar { display: none; }
.carousel__track { display: grid; gap: var(--s-16); }
.carousel__slide {
display: grid;
row-gap: var(--s-8);
align-items: center;
min-width: 0;
}
.carousel__copy { display: grid; gap: var(--s-4); align-content: start; max-width: 52ch; }
.carousel__copy > p { color: var(--c-text-2); font-size: var(--fs-lead); line-height: 1.55; text-wrap: pretty; }
.carousel__title { text-wrap: balance; }
.carousel__media { --phone-w: clamp(200px, 54vw, 270px); }
@media (max-width: 29.99rem) {
.carousel__pick-num { display: none; }
.carousel__pick { padding-inline: var(--s-2); }
.carousel__pick::after { left: var(--s-2); right: var(--s-2); }
}
.carousel__facts { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.carousel__facts li {
display: flex;
gap: var(--s-3);
align-items: flex-start;
color: var(--c-text);
line-height: 1.5;
}
.carousel__facts .icon { color: var(--c-accent); margin-top: 2px; }
html.js .carousel__bar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-4);
border-bottom: 1px solid var(--c-border);
}
html.js .carousel__picker { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
html.js .carousel__picker::-webkit-scrollbar { display: none; }
.carousel__pick {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: 48px;
padding: var(--s-2) var(--s-3);
background: none;
border: 0;
color: var(--c-text-2);
font-weight: 600;
font-size: var(--fs-nav);
white-space: nowrap;
transition: color var(--t-fast) ease;
-webkit-tap-highlight-color: transparent;
}
.carousel__pick-num { font-size: var(--fs-caption); color: var(--c-text-2); }
.carousel__pick::after {
content: "";
position: absolute;
left: var(--s-3);
right: var(--s-3);
bottom: -1px;
height: 2px;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-toggle) var(--ease-out);
}
.carousel__pick[aria-current="true"] { color: var(--c-text); }
.carousel__pick[aria-current="true"] .carousel__pick-num { color: var(--c-accent); }
.carousel__pick[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
.carousel__pick:hover { color: var(--c-text); }
}
.carousel__arrows { display: none; gap: var(--s-2); padding-bottom: var(--s-2); }
.carousel__arrow {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
background: transparent;
color: var(--c-text);
border: 1px solid var(--c-field-border);
border-radius: var(--r-pill);
transition: border-color var(--t-fast) ease, opacity var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
.carousel__arrow--prev .icon { transform: scaleX(-1); }
.carousel__arrow:active { transform: scale(0.94); }
.carousel__arrow:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
.carousel__arrow:not(:disabled):hover { border-color: var(--c-text-2); background: var(--c-raised); }
}
html.js .carousel__track {
display: flex;
gap: var(--s-4);
margin-top: var(--s-8);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
html.js .carousel__track::-webkit-scrollbar { display: none; }
html.js .carousel__slide {
flex: 0 0 calc(100% - var(--s-8));
scroll-snap-align: start;
scroll-snap-stop: always;
}
html.js .carousel__track:focus-visible { outline: 2px solid var(--c-chalk); outline-offset: 6px; }
html.js.motion-ok .carousel__track { scroll-behavior: smooth; }
@media (min-width: 48rem) {
html.js .carousel__arrows { display: flex; }
html.js .carousel__slide { flex-basis: 100%; }
}
@media (min-width: 64rem) {
.carousel__slide {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: var(--s-12);
}
.carousel__media { --phone-w: clamp(230px, calc((100svh - 280px) * 0.486), 310px); justify-self: center; }
html.js .carousel__track { gap: var(--s-12); }
}
.cuzco {
--cz: 88px;
width: calc(var(--cz) * 1.852);
max-width: none;
height: auto;
margin: calc(var(--cz) * -0.335) calc(var(--cz) * -0.426) calc(var(--cz) * -0.138);
pointer-events: none;
}
.faq { border-top: 1px solid var(--c-border); }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: 56px;
padding-block: var(--s-4);
cursor: pointer;
list-style: none;
font-weight: 800;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon {
width: 22px;
height: 22px;
color: var(--c-accent);
transition: transform var(--t-fast) var(--ease-out);
}
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__answer {
padding-bottom: var(--s-6);
max-width: var(--measure);
color: var(--c-text-2);
}
.faq__answer > * + * { margin-top: var(--s-3); }
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field__label { font-size: var(--fs-nav); font-weight: 600; color: var(--c-text); }
.field__label .opt { font-weight: 400; color: var(--c-text-2); }
.field__input {
width: 100%;
min-height: 48px;
padding: 11px 14px;
background: var(--c-bg);
color: var(--c-text);
border: 1px solid var(--c-field-border);
border-radius: var(--r-field);
font-size: 1rem;
line-height: 1.4;
transition: border-color var(--t-fast) ease;
}
.field__input::placeholder { color: var(--c-text-2); opacity: 1; }
.field__input:focus-visible { border-color: var(--c-accent); }
.field__input[aria-invalid="true"] { border-color: var(--c-danger); }
select.field__input {
appearance: none;
padding-right: 40px;
background-image: linear-gradient(45deg, transparent 50%, var(--c-text-2) 50%), linear-gradient(135deg, var(--c-text-2) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
background-size: 6px 6px;
background-repeat: no-repeat;
}
.field__error {
display: flex;
align-items: flex-start;
gap: var(--s-2);
font-size: var(--fs-small);
line-height: 1.45;
color: var(--c-danger);
}
.field__error .icon { width: 18px; height: 18px; margin-top: 1px; }
.field__error:empty { display: none; }
.check {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: var(--s-3);
align-items: start;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--c-text-2);
}
.check input {
width: 24px;
height: 24px;
margin: 0;
accent-color: var(--c-accent-strong);
}
.check input[aria-invalid="true"] { outline: 2px solid var(--c-danger); outline-offset: 1px; }
.form__summary {
font-size: var(--fs-small);
font-weight: 600;
color: var(--c-danger);
}
.form__summary:empty { display: none; }
html:not(.js) form[data-local-form] [type="submit"] { display: none; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-success {
padding: var(--s-6);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-card);
}
.form-success :is(h2, h3) { display: flex; align-items: center; gap: var(--s-2); }
.form-success :is(h2, h3)::before {
content: "";
flex: none;
width: 22px;
height: 22px;
background: var(--c-success);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-success :is(h2, h3):focus { outline: none; }
.form-success :is(h2, h3):focus-visible { outline: 2px solid var(--c-chalk); outline-offset: 4px; }
.form-success p { margin-top: var(--s-2); color: var(--c-text-2); max-width: var(--measure); }
.site-footer {
border-top: 1px solid var(--c-border);
padding-block: var(--s-12) var(--s-10);
background: var(--c-bg);
}
.site-footer__grid { row-gap: var(--s-8); }
.site-footer__brand .wordmark svg { height: 24px; }
.site-footer__brand p { margin-top: var(--s-3); color: var(--c-text-2); max-width: 36ch; }
.site-footer__brand .site-footer__tagline { color: var(--c-text); }
.site-footer__brand .made-in-pl {
display: flex;
align-items: flex-start;
gap: var(--s-3);
margin-top: var(--s-4);
font-size: var(--fs-small);
line-height: 1.5;
}
.made-in-pl strong { color: var(--c-text); font-weight: 600; }
.made-in-pl__flag {
flex: none;
width: 18px;
height: 12px;
margin-top: 0.25em;
border-radius: 2px 2px 2px 1px;
background: linear-gradient(#F4F4F4 50%, #DC143C 50%);
box-shadow: 0 0 0 1px var(--c-border);
}
.site-footer__cuzco { --cz: 64px; margin-top: calc(var(--s-6) + 64px * -0.335); }
.site-footer__note { margin-top: var(--s-2); color: var(--c-text-2); font-size: var(--fs-small); max-width: 34ch; }
.site-footer h2, .site-footer__title {
font-family: var(--font-body);
font-size: var(--fs-caption);
font-weight: 800;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--c-text-2);
line-height: 1.4;
}
.site-footer ul { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.site-footer li a, .site-footer li span {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--c-text);
text-decoration: none;
font-size: var(--fs-nav);
}
.site-footer__social { gap: var(--s-2); }
.site-footer__social .icon { flex: none; }
.site-footer li span { display: inline-block; line-height: 44px; color: var(--c-text); }
@media (hover: hover) and (pointer: fine) {
.site-footer li a:hover { color: var(--c-accent); text-decoration: underline; }
}
.site-footer__bottom {
margin-top: var(--s-10);
padding-top: var(--s-6);
border-top: 1px solid var(--c-border);
display: grid;
gap: var(--s-2);
font-size: var(--fs-small);
color: var(--c-text-2);
}
@media (min-width: 48rem) {
.site-footer__brand { grid-column: span 8; }
.site-footer__col { grid-column: span 4; }
}
@media (min-width: 64rem) {
.site-footer__brand { grid-column: span 3; }
.site-footer__col { grid-column: span 3; }
}
html.js-reveal [data-reveal] {
opacity: 0;
transform: translateY(var(--reveal-y));
}
html.js-reveal [data-reveal].is-in {
opacity: 1;
transform: none;
transition:
opacity var(--t-reveal) var(--ease-out),
transform var(--t-reveal) var(--ease-out);
transition-delay: calc(var(--i, 0) * var(--stagger));
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
html.js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
.btn:active, .video-toggle:active { transform: none; }
}
.form__privacy {
margin-top: var(--s-2);
font-size: var(--fs-small);
line-height: 1.5;
color: var(--c-text-2);
}
.nav-cta__stack { display: inline-grid; overflow: hidden; }
.nav-cta__txt {
grid-area: 1 / 1;
text-align: center;
white-space: nowrap;
transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.nav-cta__txt--alt { opacity: 0; transform: translateY(60%); visibility: hidden; }
.nav-cta.is-rotating .nav-cta__txt--alt { visibility: visible; }
.nav-cta.is-alt .nav-cta__txt--main { opacity: 0; transform: translateY(-60%); }
.nav-cta.is-alt .nav-cta__txt--alt { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.nav-cta__txt { transition: none; }
.nav-cta .nav-cta__txt--main { opacity: 1; transform: none; }
.nav-cta .nav-cta__txt--alt { opacity: 0; visibility: hidden; }
}
:root {
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--t-crossfade: 220ms;
--t-swap: 180ms;
--t-mask: 520ms;
--t-entry: 1100ms;
--tilt-rest: rotateY(-16deg) rotateX(5deg) rotateZ(1deg);
--story-bg: var(--c-bg);
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: url(/assets/fx/grain.png) repeat;
background-size: 128px 128px;
opacity: 0.035;
pointer-events: none;
}
[data-pause-offscreen].is-offscreen,
[data-pause-offscreen].is-offscreen::before,
[data-pause-offscreen].is-offscreen::after { animation-play-state: paused !important; }
html.js-reveal [data-reveal="mask"] {
opacity: 1;
transform: none;
overflow: clip;
padding-block: 0.14em 0.06em;
margin-block: -0.14em -0.06em;
}
html.js-reveal [data-reveal="mask"] > .mask-line {
display: block;
transform: translateY(110%);
}
html.js-reveal [data-reveal="mask"].is-in > .mask-line {
transform: none;
transition: transform var(--t-mask) var(--ease-out-quint);
transition-delay: calc(var(--i, 0) * 60ms);
}
@supports (animation-timeline: view()) {
html.js-reveal.motion-ok [data-reveal]:not([data-reveal="mask"]) {
transition: none;
animation: cz-rise both cubic-bezier(0.2, 0.7, 0.3, 1);
animation-timeline: view();
animation-range: entry 0% entry 35%;
}
}
@keyframes cz-rise {
from { opacity: 0; transform: translateY(var(--reveal-y)); }
to { opacity: 1; transform: none; }
}
.video-toggle__ring {
position: absolute;
inset: -1px;
border-radius: 50%;
opacity: 0;
transition: opacity var(--t-fast) ease;
pointer-events: none;
}
.video-toggle[data-state="playing"] .video-toggle__ring,
.video-toggle[data-state="paused"] .video-toggle__ring { opacity: 1; }
.video-toggle__half { position: absolute; inset: 0; }
.video-toggle__half--r { clip-path: inset(0 0 0 50%); }
.video-toggle__half--l { clip-path: inset(0 50% 0 0); }
.video-toggle__arc {
position: absolute;
inset: 0;
border: 2px solid var(--c-accent);
border-radius: 50%;
}
.video-toggle__half--r .video-toggle__arc { clip-path: inset(0 50% 0 0); }
.video-toggle__half--l .video-toggle__arc { clip-path: inset(0 0 0 50%); opacity: 0; }
html:not(.motion-ok) .video-toggle__ring { display: none; }
.device[data-tilt] { isolation: isolate; }
.device__tilt { grid-area: phone; position: relative; }
.device[data-tilt] .phone { grid-area: auto; }
.device[data-tilt]::before,
.fx-glow::before {
content: "";
position: absolute;
z-index: -1;
left: -25%;
right: -25%;
bottom: 2%;
height: 22%;
background: radial-gradient(closest-side, rgba(74, 144, 217, 0.2), rgba(74, 144, 217, 0));
pointer-events: none;
}
.fx-glow { position: relative; isolation: isolate; }
html.motion-ok .device__tilt {
transform: perspective(1600px) var(--tilt-rest);
transform-style: preserve-3d;
}
html.motion-ok .device[data-tilt] .phone {
transform: rotateY(-16deg) translateY(40px);
transition: transform var(--t-entry) var(--ease-out);
}
html.motion-ok .device[data-tilt].is-entered .phone { transform: none; }
html.motion-ok .device[data-tilt].is-pointer .phone { transition: none; }
html.motion-ok .device[data-tilt] .phone__screen::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(115deg, rgba(242, 239, 232, 0) 42%, rgba(242, 239, 232, 0.1) 50%, rgba(242, 239, 232, 0) 58%);
transform: translateX(-60%);
pointer-events: none;
}
html.motion-ok .device[data-tilt].is-entered .phone__screen::after {
animation: cz-sheen-in var(--t-entry) var(--ease-out) backwards;
}
@keyframes cz-sheen-in {
from { translate: 0 0; }
to { translate: 120% 0; }
}
@supports (animation-timeline: scroll()) {
html.motion-ok .device__tilt {
animation: cz-straighten linear both;
animation-timeline: scroll(root);
animation-range: 0 70vh;
}
html.motion-ok .device[data-tilt].is-entered .phone__screen::after {
animation:
cz-sheen-in var(--t-entry) var(--ease-out) backwards,
cz-sheen-scroll linear both;
animation-timeline: auto, scroll(root);
animation-range: normal, 0 70vh;
}
}
@keyframes cz-straighten {
from { transform: perspective(1600px) var(--tilt-rest); }
to { transform: perspective(1600px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.94); }
}
@keyframes cz-sheen-scroll {
from { transform: translateX(-60%); }
to { transform: translateX(60%); }
}
.fx-ambient {
position: absolute;
z-index: -1;
top: 8%;
right: -10%;
width: min(900px, 120vw);
aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(27, 58, 92, 0.55), rgba(27, 58, 92, 0));
pointer-events: none;
}
.story { display: grid; row-gap: var(--s-16); }
.story__step { display: grid; row-gap: var(--s-8); align-items: center; }
.story__text { display: grid; gap: var(--s-3); max-width: 40ch; }
.story__text p { color: var(--c-text-2); font-size: var(--fs-lead); line-height: 1.55; text-wrap: pretty; }
.story__media { --phone-w: clamp(230px, 64vw, 300px); }
.story__num { font-size: var(--fs-caption); color: var(--c-accent); letter-spacing: var(--tracking-label); }
@media (min-width: 64rem) {
.story__step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-16); }
}
.section--surface .story { --story-bg: var(--c-surface); }
html.motion-ok .story {
grid-template-columns: minmax(0, 1fr);
row-gap: 0;
--band-meta: 56px;
--band-phone-h: calc(54svh - var(--band-meta));
--band-h: calc(var(--band-phone-h) + var(--band-meta) + var(--s-4));
}
html.motion-ok .story__step { display: contents; }
html.motion-ok .story__text {
grid-column: 1;
grid-row: var(--row);
align-content: center;
min-height: calc(100svh - var(--nav-h) - var(--band-h));
padding-block: var(--s-6);
}
html.motion-ok .story__step:first-child .story__text {
min-height: calc(100svh - var(--nav-h));
padding-top: calc(var(--band-h) + var(--s-6));
}
html.motion-ok .story__media {
grid-column: 1;
grid-row: 1 / span var(--steps);
align-self: start;
justify-self: center;
position: sticky;
top: var(--nav-h);
z-index: 1;
--phone-w: min(300px, calc(var(--band-phone-h) * 0.486));
opacity: 0;
visibility: hidden;
transform: scale(1.02);
transition:
opacity var(--t-crossfade) ease,
transform 320ms var(--ease-out-quint),
visibility 0s linear var(--t-crossfade);
}
html.motion-ok .story__step[data-active] .story__media {
opacity: 1;
visibility: visible;
transform: none;
transition:
opacity var(--t-crossfade) ease,
transform 320ms var(--ease-out-quint),
visibility 0s;
}
html.motion-ok .story__media::before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
width: 100vw;
top: calc(-1 * var(--s-2));
height: calc(var(--band-h) + var(--s-2));
translate: -50% 0;
background: linear-gradient(to bottom, var(--story-bg) calc(100% - var(--s-3)), rgba(0, 0, 0, 0));
pointer-events: none;
}
html.motion-ok .story__media { isolation: isolate; }
@media (max-width: 63.99rem) {
html.motion-ok .story__media .device__meta {
grid-column: 1 / -1;
margin-inline: calc((var(--phone-w) - min(340px, 100vw - 2 * var(--gutter))) / 2);
justify-content: center;
text-align: center;
}
}
@media (min-width: 64rem) {
html.motion-ok .story {
grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
column-gap: var(--s-12);
}
html.motion-ok .story__text {
min-height: 80vh;
min-height: 80svh;
align-content: center;
padding-block: var(--s-10);
}
html.motion-ok .story__step:first-child .story__text { min-height: 80svh; padding-top: var(--s-10); }
html.motion-ok .story__media {
grid-column: 2;
justify-self: start;
--phone-w: min(400px, calc((100svh - var(--nav-h) - 120px) * 0.486));
top: max(calc(var(--nav-h) + 24px), calc(var(--nav-h) + (100svh - var(--nav-h) - var(--phone-w) * 2.057 - 36px) / 2));
}
html.motion-ok .story__media::before {
left: -55%;
right: -55%;
width: auto;
top: -5%;
bottom: 5%;
height: auto;
translate: none;
background: radial-gradient(closest-side, rgba(74, 144, 217, 0.12), rgba(74, 144, 217, 0));
}
}
.count { font-variant-numeric: tabular-nums; display: inline-block; text-align: right; }
@media (prefers-reduced-motion: reduce) {
html.js-reveal [data-reveal="mask"] > .mask-line { transform: none !important; }
}
.about-hero { padding-block: var(--s-8) var(--s-16); }
.about-eyebrow { color: var(--c-accent); margin-bottom: var(--s-3); }
.about-hero h1 { max-width: 16ch; }
.about-hero .facts__def { margin-top: var(--s-5); }
.about-hero .tagline { margin-top: var(--s-4); }
@media (min-width: 48rem) {
.about-hero { padding-top: var(--s-16); }
}
.about-why { display: grid; gap: var(--s-10); }
.about-why .lead { margin-top: var(--s-4); max-width: var(--measure); }
.about-founder {
margin-top: var(--s-8);
padding: var(--s-6);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-card);
}
.about-founder__id { display: flex; align-items: center; gap: var(--s-5); }
.about-founder__photo {
flex: none;
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 0 4px var(--c-accent-soft);
}
.about-founder__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.about-founder__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: 0.01em; }
.about-founder__role { margin-top: var(--s-1); color: var(--c-text-2); }
.about-founder__lead { margin-top: var(--s-6); font-size: var(--fs-lead); line-height: 1.55; max-width: 56ch; }
.about-founder__text { margin-top: var(--s-4); color: var(--c-text-2); line-height: 1.55; max-width: 56ch; }
.about-why__shot {
width: 100%;
max-width: 420px;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 15%;
border-radius: var(--r-card);
background: var(--c-raised);
}
@media (min-width: 64rem) {
.about-why { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-12); align-items: center; }
.about-founder { padding: var(--s-8); }
.about-founder__photo { width: 128px; height: 128px; }
.about-why__shot { justify-self: end; }
}
.about-how { list-style: none; padding: 0; margin-top: var(--s-8); display: grid; gap: var(--s-4); }
.about-how li {
padding: var(--s-5) var(--s-6);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-card);
}
.about-how__h { font-size: var(--fs-h3); }
.about-how p { margin-top: var(--s-2); color: var(--c-text-2); line-height: 1.6; text-wrap: pretty; }
.about-more { margin-top: var(--s-8); }
@media (min-width: 48rem) {
.about-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.about-how { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.about-cuzco { display: grid; gap: var(--s-8); align-items: center; }
.about-cuzco .lead { margin-top: var(--s-4); }
.about-moods { display: grid; grid-template-columns: repeat(4, max-content); gap: var(--s-3); justify-content: start; }
.about-moods .cuzco { --cz: 52px; }
.about-moods { padding-inline-start: var(--s-5); }
@media (min-width: 48rem) {
.about-moods .cuzco { --cz: 72px; }
}
@media (min-width: 64rem) {
.about-cuzco { grid-template-columns: minmax(0, 1fr) max-content; gap: var(--s-12); }
}
.about-contact dd a { font-weight: 600; color: var(--c-text); }
.about-contact .tel { display: inline-block; padding-block: 10px; margin-block: -10px; }
.about-next { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.about-next__card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-4);
padding: var(--s-6);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-card);
}
.about-next__card .about-eyebrow { margin-bottom: 0; }
.about-next__text { color: var(--c-text-2); line-height: 1.6; max-width: 44ch; }
@media (min-width: 48rem) {
.about-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}