/* Swoopy landing (concept A, "Night Courier"): the brand's night palette, one lime accent, violet only as light.
index.html inlines this file at build time; privacy/index.html and 404.html link it. */
@font-face {
font-family: "Unbounded";
src: url("../fonts/unbounded-latin.woff2") format("woff2");
font-weight: 300 900;
font-display: swap;
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: "Onest";
src: url("../fonts/onest-latin.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
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;
}
/* the other scripts of the site's languages: a browser downloads a file only for a page that has its letters */
@font-face {
font-family: "Unbounded";
src: url("../fonts/unbounded-cyrillic.woff2") format("woff2");
font-weight: 300 900;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Onest";
src: url("../fonts/onest-cyrillic.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Unbounded";
src: url("../fonts/unbounded-vietnamese.woff2") format("woff2");
font-weight: 300 900;
font-display: swap;
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: "Onest";
src: url("../fonts/onest-vietnamese.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
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;
}
/* Arabic and Devanagari have fonts of their own, named only on those pages (html:lang below) */
@font-face {
font-family: "Cairo";
src: url("../fonts/cairo-arabic.woff2") format("woff2");
font-weight: 200 1000;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
font-family: "Baloo 2";
src: url("../fonts/baloo2-devanagari.woff2") format("woff2");
font-weight: 400 800;
font-display: swap;
unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
:root {
--ink: #07070b; --ink-2: #0c0c13; --ink-3: #13131c;
--text: #f5f5f7; --muted: rgba(245, 245, 247, 0.66); --faint: rgba(245, 245, 247, 0.58);
--line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14);
--lime: #d4ff3a; --violet: #7a5cff;
--ease: cubic-bezier(0.32, 0.72, 0, 1);
--display: "Unbounded", system-ui, sans-serif; --body: "Onest", system-ui, sans-serif;
--pad: clamp(16px, 4.4vw, 64px);
--max: 1320px;
}
/* Latin words and digits stay in Unbounded/Onest, the script's letters fall through to its own font */
html:lang(ar) { --display: "Unbounded", "Cairo", system-ui, sans-serif; --body: "Onest", "Cairo", system-ui, sans-serif; }
html:lang(hi) { --display: "Unbounded", "Baloo 2", system-ui, sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
font-family: var(--body); color: var(--text); background: var(--ink);
-webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--lime); color: #0b0c10; font-weight: 700; }
.skip:focus { top: 12px; }
.i { width: 1em; height: 1em; fill: currentColor; flex: none; }
/* film grain on a fixed layer, never on scrolling content */
body::after {
content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(34px, 4.6vw, 64px); }
.lime { color: var(--lime); }
/* ---------- buttons: a pill with the icon in its own circle ---------- */
.btn {
--bg: var(--lime); --fg: #0b0c10; --ic-bg: #0b0c10; --ic-fg: var(--lime);
display: inline-flex; align-items: center; gap: 14px; height: 58px; padding-block: 0; padding-inline: 26px 7px;
border-radius: 999px; background: var(--bg); color: var(--fg);
font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; border: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 18px 40px -18px rgba(212, 255, 58, 0.55);
transition: transform 0.6s var(--ease);
}
.btn .ic {
width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
background: var(--ic-bg); color: var(--ic-fg); font-size: 19px; transition: transform 0.6s var(--ease);
}
.btn:hover .ic { transform: translate(2px, -1px) scale(1.06); }
[dir="rtl"] .btn:hover .ic { transform: translate(-2px, -1px) scale(1.06); }
/* arrows point the other way on a right-to-left page */
[dir="rtl"] .i.dir { transform: scaleX(-1); }
.btn:active { transform: scale(0.98); }
.btn.ghost {
--bg: rgba(255, 255, 255, 0.06); --fg: var(--text); --ic-bg: rgba(255, 255, 255, 0.1); --ic-fg: var(--text);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn.sm { height: 44px; gap: 10px; padding-inline: 18px 5px; font-size: 14px; }
.btn.sm .ic { width: 34px; height: 34px; font-size: 16px; }
.btn.ink { --bg: #0b0c10; --fg: var(--text); --ic-bg: var(--lime); --ic-fg: #0b0c10; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); }
/* ---------- the floating nav ---------- */
.nav {
position: fixed; top: 14px; left: 50%; z-index: 80; transform: translateX(-50%);
display: flex; align-items: center; gap: 4px; width: max-content; max-width: calc(100% - 24px);
padding-block: 6px; padding-inline: 8px 6px; border-radius: 999px;
background: rgba(14, 14, 20, 0.6); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--line), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.brand { display: flex; align-items: center; gap: 10px; padding-inline-end: 14px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; border-radius: 50%; }
.nav .link { padding: 10px 14px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color 0.4s var(--ease), background 0.4s var(--ease); }
.nav .link:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav .btn { margin-inline-start: 8px; }
/* the language menu: the same page in the other languages */
.langs { position: relative; }
.langs summary {
list-style: none; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer;
color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; transition: color 0.4s var(--ease), background 0.4s var(--ease);
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover, .langs[open] summary { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.langs summary .i { font-size: 18px; }
.langs ul {
position: absolute; top: calc(100% + 12px); inset-inline-end: 0; min-width: 196px; list-style: none; display: grid; gap: 2px; padding: 6px;
border-radius: 22px; background: rgba(19, 19, 28, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--line-2), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
/* the languages' own names in the system font: otherwise every page would download the Cyrillic and Vietnamese
files of Onest just for "Українська" and "Tiếng Việt" */
.langs ul, .foot-langs { font-family: system-ui, sans-serif; }
.langs a { display: block; padding: 10px 14px; border-radius: 14px; color: var(--muted); font-size: 15px; font-weight: 600; }
.langs a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.langs a[aria-current] { color: var(--lime); }
/* ---------- hero ---------- */
.hero { position: relative; min-height: 100dvh; display: grid; align-items: center; overflow: hidden; padding: 112px 0 72px; }
.aurora { position: absolute; inset: -10% -10% 0; pointer-events: none;
background:
radial-gradient(42% 52% at 72% 38%, rgba(122, 92, 255, 0.5), transparent 70%),
radial-gradient(30% 34% at 92% 92%, rgba(255, 106, 61, 0.16), transparent 70%),
radial-gradient(34% 30% at 66% 78%, rgba(212, 255, 58, 0.1), transparent 70%),
radial-gradient(40% 40% at 4% 0%, rgba(212, 255, 58, 0.06), transparent 70%);
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 24px; }
.handle {
display: inline-flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 5px 16px; border-radius: 999px;
background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600;
}
.handle img { width: 28px; height: 28px; border-radius: 50%; }
.handle span { color: var(--faint); font-weight: 500; }
.h1 { margin-top: 26px; font-family: var(--display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; font-size: clamp(40px, 5.6vw, 82px); }
.h1 .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.h1 .ln > span { display: inline-block; }
.lead { margin-top: 24px; max-width: 30em; font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.stage { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; justify-self: end; }
.stage .ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stage .ring ellipse, .stage .ring path { fill: none; stroke: var(--lime); stroke-width: 1.6; }
.stage .ring.back ellipse { stroke-opacity: 0.22; }
.stage .ring.front { z-index: 3; }
.stage .ring.front path { stroke-opacity: 0.9; filter: drop-shadow(0 0 8px rgba(212, 255, 58, 0.55)); }
.mascot { position: absolute; left: 11%; top: 4%; width: 78%; aspect-ratio: 1; z-index: 2; }
.mascot img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55)); transition: opacity 0.25s; }
.mascot .alt { opacity: 0; }
.mascot.happy .alt { opacity: 1; }
.mascot.happy .main { opacity: 0; }
.badge {
position: absolute; left: 0; top: 0; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
display: grid; place-items: center; will-change: transform;
background: color-mix(in srgb, var(--c) 16%, #0c0c13);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 12px 30px -10px rgba(0, 0, 0, 0.7);
}
.badge svg { width: 26px; height: 26px; fill: var(--fill); }
.sfx {
position: absolute; z-index: 4; right: 2%; top: 9%; font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.6vw, 38px);
letter-spacing: -0.02em; color: var(--lime); transform: rotate(-8deg); paint-order: stroke; -webkit-text-stroke: 7px #0b0c10;
text-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); pointer-events: none;
}
#sfx { direction: ltr; } /* "SWOOSH!" stays English on every page, its "!" on the right */
/* ---------- the sites marquee ---------- */
.works { position: relative; padding: 40px 0 56px; border-top: 1px solid var(--line); background: var(--ink-2); border-radius: 40px 40px 0 0; margin-top: -40px; z-index: 2; }
.works-t { text-align: center; color: var(--faint); font-size: 14px; margin-bottom: 22px; }
.marquee { overflow: hidden; direction: ltr; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 10px; width: max-content; list-style: none; animation: slide 46s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.site {
display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 7px; border-radius: 999px;
background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.site i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); }
.site svg { width: 17px; height: 17px; fill: var(--fill); }
.site.more { background: var(--lime); color: #0b0c10; padding: 0 20px; box-shadow: none; }
/* ---------- how it works: the demo in a phone, the three verbs light up with it ---------- */
.how { padding: clamp(72px, 8vw, 120px) 0 clamp(96px, 12vw, 160px); background: var(--ink-2); }
.how-grid { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: clamp(40px, 7vw, 120px); align-content: center; }
.how-grid .shell { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.how-title { grid-column: 2; grid-row: 1; align-self: end; max-width: 13em; }
.how-steps { grid-column: 2; grid-row: 2; }
.shell { padding: 8px; border-radius: 52px; background: rgba(255, 255, 255, 0.045);
box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 120px -40px rgba(122, 92, 255, 0.35); }
.phone { position: relative; width: 340px; aspect-ratio: 680 / 1380; border-radius: 44px; overflow: hidden; background: #0d0d13; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12); }
.demo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d0d13; }
.steps { list-style: none; margin-top: 48px; display: grid; gap: 10px; }
.step { display: grid; gap: 6px; padding: 26px 30px; border-radius: 28px; opacity: 0.38; transition: background 0.7s var(--ease), opacity 0.7s var(--ease); }
.step b { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.04em; line-height: 1.05; }
.step span { color: var(--muted); max-width: 34em; }
.step.on { opacity: 1; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--line); }
.step.on b { color: var(--lime); }
.note { margin-top: 26px; padding-inline-start: 30px; color: var(--faint); font-size: 14px; }
/* ---------- features: a horizontal pan on desktop, swipe on phones ---------- */
.feats { position: relative; background: var(--ink); overflow: hidden; }
.feats-pin { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 40px; }
/* the title is the first panel of the row, so the cards get the whole height */
.feats-row { display: flex; align-items: center; gap: clamp(40px, 5vw, 88px); width: max-content; padding: 0 var(--pad); }
.feats-head { display: grid; gap: 18px; width: 460px; flex: none; }
.feats-head .h2 { font-size: clamp(34px, 3.6vw, 54px); }
.feats-head p { color: var(--muted); font-size: 18px; }
.feats-track { display: flex; gap: 22px; list-style: none; }
.feat { --fw: clamp(300px, calc((100dvh - 330px) * 0.8), 400px); width: var(--fw); flex: none; padding: 7px; border-radius: 36px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px var(--line); }
.feat-in { height: 100%; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #15151e, #0f0f16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.feat-media { position: relative; aspect-ratio: 4 / 5; background: #0d0d13; }
.feat-copy { padding: 22px 26px 26px; display: grid; gap: 8px; align-content: start; }
.feat-copy h3 { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.03em; line-height: 1.15; }
.feat-copy p { color: var(--muted); font-size: 15px; }
.logos { display: flex; gap: 6px; margin-top: 8px; }
.logos i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); }
.logos svg { width: 15px; height: 15px; fill: var(--fill); }
/* ---------- numbers on a violet "silk" band ---------- */
.band { padding: 0 var(--pad); background: var(--ink); }
.band-in {
position: relative; max-width: var(--max); margin: 0 auto; border-radius: 40px; overflow: hidden; padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 72px);
display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 32px;
background:
radial-gradient(60% 120% at 12% 0%, rgba(150, 120, 255, 0.55), transparent 60%),
radial-gradient(50% 90% at 88% 100%, rgba(212, 255, 58, 0.18), transparent 60%),
conic-gradient(from 210deg at 60% 40%, #2a1d6b, #160f3d, #3d2a9a, #1b1247, #2a1d6b);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.band-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 46px); mix-blend-mode: soft-light; }
.stat { position: relative; display: grid; gap: 10px; align-content: start; }
.stat b { font-family: var(--display); font-weight: 300; font-size: clamp(48px, 6vw, 96px); letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.stat span { color: rgba(245, 245, 247, 0.74); font-size: 15px; max-width: 14em; }
/* ---------- films: posters in a loose stack ---------- */
.films { padding: clamp(110px, 13vw, 180px) 0; background: var(--ink); overflow: hidden; }
.films-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.films-copy p { margin-top: 20px; color: var(--muted); font-size: 18px; max-width: 28em; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.social {
display: inline-flex; align-items: center; gap: 10px; height: 52px; padding-inline: 8px 20px; border-radius: 999px;
background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600;
transition: background 0.5s var(--ease), transform 0.5s var(--ease);
}
.social:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }
.social i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c); }
.social svg { width: 18px; height: 18px; fill: #fff; }
.social small { color: var(--faint); font-weight: 500; }
/* each is the positioned slot (centered by margin, so the fan-in tween can own its transform);
the poster inside carries its own tilt */
.stack { --pw: 214px; position: relative; height: 560px; list-style: none; }
.stack li { position: absolute; top: 50%; width: var(--pw); margin-top: calc(var(--pw) * -8 / 9); }
.stack li:hover { z-index: 5; }
.poster {
position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
padding: 5px; background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 1px var(--line-2), 0 40px 70px -30px rgba(0, 0, 0, 0.9);
transition: transform 0.8s var(--ease);
}
.poster img { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; }
.poster .pl { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
background: rgba(7, 7, 11, 0.55); backdrop-filter: blur(6px); font-size: 22px; opacity: 0; transition: opacity 0.4s var(--ease); }
.poster:hover .pl, .poster:focus-visible .pl { opacity: 1; }
.stack li:nth-child(1) { left: 2%; }
.stack li:nth-child(2) { left: 22%; }
.stack li:nth-child(3) { left: 42%; }
.stack li:nth-child(4) { left: 62%; }
.stack li:nth-child(1) .poster { transform: rotate(-9deg); }
.stack li:nth-child(2) .poster { transform: translateY(-4%) rotate(-3deg); }
.stack li:nth-child(3) .poster { transform: translateY(3%) rotate(4deg); }
.stack li:nth-child(4) .poster { transform: translateY(-2%) rotate(10deg); }
.stack .poster:hover { transform: translateY(-6%) rotate(0deg) scale(1.04); }
/* ---------- FAQ ---------- */
.faq { padding: 40px 0 clamp(110px, 12vw, 160px); background: var(--ink); }
.faq-list { margin-top: 44px; display: grid; gap: 10px; max-width: 900px; }
.qa { border-radius: 26px; background: var(--ink-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--line); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; padding-inline: 30px 26px; cursor: pointer;
font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.01em; border-radius: 26px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); transition: transform 0.6s var(--ease), background 0.4s; }
.qa[open] summary .pm { transform: rotate(45deg); background: var(--lime); color: #0b0c10; }
.qa p { padding: 0 30px 26px; color: var(--muted); max-width: 46em; }
/* ---------- the last call ---------- */
.final { padding: 0 var(--pad) 28px; background: var(--ink); }
.final-card {
position: relative; max-width: var(--max); margin: 0 auto; border-radius: 44px; overflow: hidden; color: #0b0c10;
background: radial-gradient(70% 90% at 80% 20%, #ecff8a, #d4ff3a 55%, #b9ef1f); display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: end; min-height: 560px;
}
.final-copy { padding: clamp(40px, 6vw, 84px); align-self: center; }
.final-copy .h2 { font-size: clamp(38px, 5.4vw, 76px); }
.final-copy p { margin-top: 18px; font-size: 18px; color: rgba(11, 12, 16, 0.72); max-width: 26em; }
.final-row { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.qr { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; color: rgba(11, 12, 16, 0.7); }
.qr span { width: 84px; height: 84px; padding: 7px; border-radius: 18px; background: #fff; display: block; }
.qr svg { width: 100%; height: 100%; }
.final-art { position: relative; height: 100%; min-height: 420px; }
.final-art .mascot { left: 4%; top: auto; bottom: -8%; width: 92%; }
.final-art .sfx { top: 14%; right: 8%; color: #0b0c10; -webkit-text-stroke: 7px #d4ff3a; text-shadow: none; transform: rotate(-6deg); font-size: clamp(26px, 3.4vw, 50px); }
footer { padding: 30px var(--pad) 40px; color: var(--faint); font-size: 13px; background: var(--ink); }
.foot { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a:hover { color: var(--text); }
.foot.more { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 14px; justify-content: stretch; }
.foot .foot-uses { gap: 8px 20px; }
.foot-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-langs a[aria-current] { color: var(--lime); }
/* ---------- the guides: one card per task, linking to its page ---------- */
.uses { padding: clamp(100px, 11vw, 150px) 0 0; background: var(--ink); }
.uses-lead { margin-top: 18px; max-width: 34em; color: var(--muted); font-size: 18px; }
.uses-grid { list-style: none; margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.use a {
position: relative; display: grid; gap: 10px; align-content: start; height: 100%; padding: 26px 26px 72px; border-radius: 28px;
background: var(--ink-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--line);
transition: background 0.5s var(--ease), transform 0.5s var(--ease);
}
.use a:hover { background: #181822; transform: translateY(-3px); }
.use i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); }
.use i svg { width: 22px; height: 22px; fill: var(--fill); }
.use h3 { margin-top: 8px; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.03em; line-height: 1.15; }
.use p { color: var(--muted); font-size: 15px; }
.use .go {
position: absolute; inset-inline-end: 22px; bottom: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
background: rgba(255, 255, 255, 0.06); font-size: 17px; transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.use a:hover .go { background: var(--lime); color: #0b0c10; }
/* ---------- a guide's own page ---------- */
.use-hero { min-height: auto; padding: 128px 0 80px; }
.use-in { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: clamp(32px, 5vw, 80px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--faint); font-size: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.use-h1 { margin-top: 22px; font-size: clamp(34px, 4.3vw, 60px); line-height: 1.03; }
.handle-note { margin-top: 20px; color: var(--faint); font-size: 14px; }
.use-art { justify-self: center; }
.use-art .feat { --fw: min(400px, 84vw); }
.use-steps { padding: clamp(72px, 8vw, 120px) 0; background: var(--ink-2); }
.use-list { margin-top: 40px; grid-template-columns: repeat(3, 1fr); }
.use-facts { padding: clamp(90px, 10vw, 140px) 0 0; background: var(--ink); }
.facts-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.facts { list-style: none; margin-top: 34px; display: grid; gap: 16px; }
.facts li { display: flex; align-items: flex-start; gap: 14px; font-size: 17px; }
.facts .i { margin-top: 1px; font-size: 24px; color: var(--lime); }
.why { padding: 32px; border-radius: 28px; background: var(--ink-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--line); }
.why h3 { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.03em; line-height: 1.2; }
.why p { margin-top: 12px; color: var(--muted); }
.use-page .faq { padding-top: clamp(90px, 10vw, 140px); }
.use-page .uses { padding: 0 0 clamp(110px, 12vw, 160px); }
/* scripts without capitals and with marks above and below the letters: no tight tracking, more room between the lines */
html:lang(ar) *, html:lang(hi) * { letter-spacing: 0 !important; }
html:is(:lang(ar), :lang(hi)) :is(.h1, .h2, .step b, .feat-copy h3, .use h3, .why h3, .doc h1) { line-height: 1.36; }
html:is(:lang(ar), :lang(hi)) .h1 .ln { padding-bottom: 0.12em; }
html:lang(vi) :is(.h1, .h2, .step b) { line-height: 1.16; }
html:lang(vi) .h1 .ln { padding-top: 0.06em; }
/* ---------- the analytics question (shown only where consent is needed) ---------- */
.consent {
position: fixed; z-index: 85; inset-inline-end: 14px; bottom: 14px; width: min(380px, calc(100% - 28px)); padding: 18px;
border-radius: 24px; background: rgba(19, 19, 28, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--line-2), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
font-size: 14px; color: var(--muted);
}
.consent[hidden] { display: none; }
.consent a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.consent .row { display: flex; gap: 8px; margin-top: 14px; }
.consent button { flex: 1; height: 42px; border: 0; border-radius: 999px; font: 700 14px var(--body); cursor: pointer; background: rgba(255, 255, 255, 0.08); color: var(--text); }
.consent button.yes { background: var(--lime); color: #0b0c10; }
/* the hero's entrance: CSS, so it starts with the first paint instead of waiting for the scripts.
Swoopy drops in without fading (he is the largest thing on the first screen, so he must be painted at once). */
@property --in { syntax: ""; inherits: false; initial-value: 1; }
@media (prefers-reduced-motion: no-preference) {
.js .h1 .ln > span { animation: rise 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.js .h1 .ln + .ln > span { animation-delay: 0.27s; }
.js .hero .hx { animation: up 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.js .hero .lead.hx { animation-delay: 0.43s; }
.js .hero .ctas.hx { animation-delay: 0.51s; }
.js #hero-mascot { animation: drop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both, float 2.6s ease-in-out 1.6s infinite alternate; }
.js .stage .ring { transform-origin: 50% 66%; animation: ring 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.js .badge { animation: badge-in 0.8s ease-out calc(0.7s + var(--i) * 0.06s) both; }
.js #sfx { animation: pop 0.7s cubic-bezier(0.34, 1.8, 0.64, 1) 1.15s both; }
}
@keyframes rise { from { transform: translateY(110%); } }
@keyframes up { from { opacity: 0; transform: translateY(24px); } }
@keyframes drop { from { transform: translateY(-70px) scale(0.92); } }
@keyframes float { to { transform: translateY(-10px); } }
@keyframes ring { from { opacity: 0; transform: scale(0.85); } }
@keyframes badge-in { from { --in: 0; } }
@keyframes pop { from { transform: rotate(-30deg) scale(0); } }
/* reveal on scroll (only when the script runs) */
.js .rv { opacity: 0; transform: translateY(48px); filter: blur(10px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; filter: none; }
/* ---------- the plain pages: privacy, 404 ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 130px var(--pad) 80px; }
.doc h1 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.04em; line-height: 1.04; }
.doc h2 { margin-top: 40px; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.doc p, .doc li { margin-top: 12px; color: var(--muted); }
.doc ul { padding-inline-start: 20px; }
.doc a { color: var(--lime); }
.doc .upd { margin-top: 14px; color: var(--faint); font-size: 14px; }
.lost { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 100px var(--pad) 60px; }
.lost img { width: min(300px, 70vw); margin: 0 auto; }
.lost h1 { margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.04em; }
.lost p { margin: 12px auto 28px; color: var(--muted); max-width: 28em; }
.lost .ctas { justify-content: center; }
/* ---------- phones and tablets ---------- */
@media (max-width: 1023px) {
body::after { display: none; } /* the grain's full-screen blend costs phones more than it gives */
.nav .link { display: none; }
.hero { padding: 92px 0 64px; align-items: start; }
.hero-in { grid-template-columns: 1fr; }
.stage { max-width: 440px; justify-self: center; margin-top: -8px; }
.badge { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.badge svg { width: 20px; height: 20px; }
.how-grid { grid-template-columns: 1fr; }
.how-grid .shell, .how-title, .how-steps { grid-column: auto; grid-row: auto; }
.how-grid .shell { justify-self: center; margin-top: 36px; }
.phone { width: min(330px, 80vw); }
.steps { margin-top: 28px; }
.feats-pin { min-height: 0; padding: 96px 0 64px; }
.feats-row { display: block; width: auto; padding: 0; }
.feats-head { width: auto; padding: 0 var(--pad); }
.feats-track { margin-top: 36px; padding: 0 var(--pad) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.feats-track::-webkit-scrollbar { display: none; }
.feat { --fw: min(330px, 82vw); scroll-snap-align: center; }
.band-in { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
.band-in .stat:first-child { grid-column: 1 / -1; }
.films-grid { grid-template-columns: 1fr; }
.stack { height: 470px; }
.final-card { grid-template-columns: 1fr; }
.final-art { min-height: 330px; }
.final-art .mascot { width: 70%; left: 15%; }
.use-hero { padding: 100px 0 56px; }
.use-in, .facts-grid { grid-template-columns: 1fr; }
.use-list { grid-template-columns: 1fr; }
/* the nav is narrow here: the language menu hangs centered under the whole nav, not under its button */
.langs { position: static; }
.langs ul { inset-inline-end: auto; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 560px) {
.brand span { display: none; }
.brand { padding-inline-end: 4px; }
.langs summary { padding: 0 10px; }
.ctas .btn { width: 100%; justify-content: space-between; }
.step { padding: 20px 22px; }
.stack { --pw: 168px; height: 400px; }
/* the fan stays inside the screen: 168 px posters across ~350 px */
.stack li:nth-child(1) { left: 0; }
.stack li:nth-child(2) { left: 17%; }
.stack li:nth-child(3) { left: 34%; }
.stack li:nth-child(4) { left: 48%; }
.qr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.track { animation: none; }
.js .rv { opacity: 1; transform: none; filter: none; transition: none; }
}