/* «Віт» landing, shared by /landing/ and /landing/ru/: a postcard under the night sky */

:root {
  color-scheme: dark;
  --night: #160f2a;
  --night-mid: #221741;
  --night-low: #3a2460;
  --cream: #f7f0e8;
  --paper: #f7f0e8;
  --ink: #2b2140;
  --ink-soft: #6d5c8f;
  --violet: #6750a4;
  --violet-hover: #5b4599;
  --pink: #ff8fab;
  --rose: #e0559a;
  --script: "Marck Script", "Segoe Script", cursive;
  --serif: Prata, Georgia, "Times New Roman", serif;
  --sans: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */

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

html {
  font-size: clamp(1rem, .9375rem + .28vw, 1.125rem);
  -webkit-text-size-adjust: 100%;
  background: var(--night);
}

@media (min-width: 100em) and (min-height: 50em) { html { font-size: min(1.125vw, 2vh, 28px); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans); font-weight: 600; line-height: 1.5;
  color: var(--cream);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: .25rem; }
h1, p { margin: 0; }

.wrap { width: min(100% - 2rem, 70rem); margin-inline: auto; }
@media (min-width: 40em) { .wrap { width: min(100% - 3rem, 70rem); } }
/* On a short laptop screen the whole composition shrinks with the height, so the postcard doesn't outweigh the phones. */
@media (min-width: 60em) { .wrap { width: min(100% - 3rem, 70rem, (100svh - 13.75rem) * 2.08 + 1.5rem); } }

.skip {
  position: absolute; left: 1rem; top: -6rem; z-index: 10;
  padding: .75rem 1rem; border-radius: .5rem;
  background: var(--cream); color: var(--night); text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------- Night sky ---------- */

/* The page clips what the sky paints, so the glow behind the phones never adds a scrollbar. */
.page {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-mid) 55%, var(--night-low) 100%);
}
.page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Ccircle cx='0' cy='906' r='0.73' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='852' cy='350' r='1.10' fill='%23fff' fill-opacity='0.80'/%3E%3Ccircle cx='1095' cy='638' r='1.15' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='1133' cy='696' r='0.54' fill='%23fff' fill-opacity='0.76'/%3E%3Ccircle cx='1476' cy='799' r='0.60' fill='%23fff' fill-opacity='0.66'/%3E%3Ccircle cx='1102' cy='645' r='0.96' fill='%23fff' fill-opacity='0.90'/%3E%3Ccircle cx='596' cy='355' r='1.17' fill='%23ffd6e6' fill-opacity='0.55'/%3E%3Ccircle cx='476' cy='443' r='0.74' fill='%23fff' fill-opacity='0.91'/%3E%3Ccircle cx='1167' cy='865' r='0.55' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='814' cy='436' r='0.65' fill='%23ffd6e6' fill-opacity='0.90'/%3E%3Ccircle cx='585' cy='363' r='1.03' fill='%23fff' fill-opacity='0.90'/%3E%3Ccircle cx='265' cy='421' r='0.73' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='532' cy='540' r='0.99' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='733' cy='851' r='1.01' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='808' cy='688' r='1.25' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='402' cy='592' r='0.78' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='1272' cy='865' r='0.59' fill='%23ffd6e6' fill-opacity='0.84'/%3E%3Ccircle cx='651' cy='184' r='0.56' fill='%23fff' fill-opacity='0.95'/%3E%3Ccircle cx='1012' cy='176' r='0.87' fill='%23ffd6e6' fill-opacity='0.71'/%3E%3Ccircle cx='1475' cy='871' r='1.21' fill='%23fff' fill-opacity='0.88'/%3E%3Ccircle cx='1218' cy='299' r='0.51' fill='%23ffd6e6' fill-opacity='0.50'/%3E%3Ccircle cx='3' cy='620' r='0.69' fill='%23fff' fill-opacity='0.79'/%3E%3Ccircle cx='1100' cy='264' r='1.21' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='1431' cy='151' r='0.89' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='1019' cy='907' r='0.52' fill='%23ffd6e6' fill-opacity='0.89'/%3E%3Ccircle cx='1550' cy='571' r='1.04' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='334' cy='571' r='0.54' fill='%23fff' fill-opacity='0.81'/%3E%3Ccircle cx='1143' cy='508' r='0.53' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='209' cy='687' r='1.21' fill='%23fff' fill-opacity='0.37'/%3E%3Ccircle cx='1378' cy='973' r='1.26' fill='%23fff' fill-opacity='0.81'/%3E%3Ccircle cx='397' cy='724' r='1.21' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='648' cy='874' r='0.95' fill='%23fff' fill-opacity='0.56'/%3E%3Ccircle cx='1176' cy='355' r='1.08' fill='%23ffd6e6' fill-opacity='0.60'/%3E%3Ccircle cx='499' cy='966' r='1.30' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='1469' cy='228' r='1.02' fill='%23fff' fill-opacity='0.43'/%3E%3Ccircle cx='892' cy='765' r='1.26' fill='%23ffd6e6' fill-opacity='0.64'/%3E%3Ccircle cx='715' cy='196' r='1.03' fill='%23fff' fill-opacity='0.66'/%3E%3Ccircle cx='811' cy='752' r='0.79' fill='%23ffd6e6' fill-opacity='0.80'/%3E%3Ccircle cx='478' cy='549' r='0.66' fill='%23fff' fill-opacity='0.78'/%3E%3Ccircle cx='377' cy='660' r='0.84' fill='%23fff' fill-opacity='0.40'/%3E%3Ccircle cx='1317' cy='901' r='1.23' fill='%23fff' fill-opacity='0.76'/%3E%3Ccircle cx='40' cy='756' r='0.98' fill='%23fff' fill-opacity='0.78'/%3E%3Ccircle cx='59' cy='168' r='0.56' fill='%23ffd6e6' fill-opacity='0.41'/%3E%3Ccircle cx='15' cy='609' r='1.26' fill='%23ffd6e6' fill-opacity='0.47'/%3E%3C/svg%3E") 50% 0 / 1600px 1000px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgb(0 0 0 / .5) 45%, transparent 75%);
          mask-image: linear-gradient(180deg, #000, rgb(0 0 0 / .5) 45%, transparent 75%);
}

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

.site-header { padding-block: clamp(1rem, 3.5vh, 2rem) .5rem; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 40em) and (max-width: 59.99em) { .site-header .wrap { width: min(100% - 3rem, 34rem, 125svh); } }

/* The logo is a night stamp cancelled by the postmark waves. Its sides are whole steps of the 8px perforation, so the teeth come out even. */
.brand { position: relative; display: inline-flex; text-decoration: none; }
.brand-stamp { display: block; transform: rotate(2.5deg); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
.brand-paper {
  display: block; width: 104px; height: 64px; padding: 4px; background: var(--paper);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 2.3px, #000 2.8px) -4px -4px / 8px 8px;
  -webkit-mask-composite: source-over;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 2.3px, #000 2.8px) -4px -4px / 8px 8px;
          mask-composite: add;
}
.brand-face {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: calc(100% - 6px); height: calc(100% - 6px); margin: 3px; padding-right: 12px;
  border: 1px solid rgb(247 240 232 / .4);
  background: radial-gradient(70% 45% at 50% 105%, rgb(255 143 171 / .45), rgb(255 143 171 / 0)), linear-gradient(180deg, #2c1d55, #4a3080);
}
.brand-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background:
    radial-gradient(circle at 14% 22%, #fff 0 .8px, transparent 1.3px),
    radial-gradient(circle at 80% 18%, #ffd6e6 0 .9px, transparent 1.4px),
    radial-gradient(circle at 90% 60%, #fff 0 .7px, transparent 1.2px),
    radial-gradient(circle at 26% 78%, #fff 0 .6px, transparent 1.1px),
    radial-gradient(circle at 58% 24%, #fff 0 .5px, transparent 1px),
    radial-gradient(circle at 44% 88%, #ffd6e6 0 .6px, transparent 1.1px);
}
.brand-word { position: relative; margin-top: -5px; font-family: var(--script); font-weight: 400; font-size: 36px; line-height: 1; color: var(--cream); }
.brand-cancel {
  position: absolute; left: 70px; top: 13px; width: 72px; height: 40px; overflow: visible; opacity: .75; transform: rotate(-7deg); pointer-events: none;
  fill: none; stroke: var(--pink); stroke-width: 1.7; stroke-linecap: round;
}

.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid rgb(247 240 232 / .28); border-radius: 999px; }
.lang a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.25rem; padding: 0 .9rem; border-radius: 999px;
  font-size: .875rem; line-height: 1; text-decoration: none;
}
.lang a::before { content: ""; position: absolute; inset: -4px 0; }
.lang a:hover { background: rgb(247 240 232 / .12); }
.lang a[aria-current] { background: var(--cream); color: var(--night); }

/* ---------- Hero ---------- */

main { flex: 1; display: flex; }
.hero { flex: 1; display: flex; align-items: center; padding-block: clamp(1rem, 3vh, 2rem) clamp(1.5rem, 16vh - 3rem, 7rem); }
/* Room above the phones for the notes that point into them. */
.hero .wrap { display: grid; gap: 3.75rem; justify-items: center; align-items: center; }
@media (min-width: 40em) and (max-width: 59.99em) { .hero .wrap { gap: 5.5rem; } }
@media (min-width: 60em) {
  .hero .wrap { grid-template-columns: 604fr 640fr; gap: 1.5rem; justify-items: stretch; }
}

/* The postcard scales with its column and, on a landscape phone, with the height, so the button stays on the first screen. */
.hero-copy { container-type: inline-size; width: 100%; max-width: min(34rem, 125svh); }
@media (min-width: 60em) { .hero-copy { max-width: none; } }

.card {
  position: relative;
  padding: 3rem 3rem 2.5rem;
  padding: min(8.6cqi, 7.31svh) min(8.6cqi, 7.31svh) min(7.3cqi, 6.21svh);
  border-radius: 6px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 70px -24px rgb(0 0 0 / .75), 0 4px 12px rgb(0 0 0 / .3);
  transform: rotate(-2deg);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .28; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 6px 6px 0 0; opacity: .9;
  background: repeating-linear-gradient(-45deg, var(--violet) 0 12px, transparent 12px 24px, var(--pink) 24px 36px, transparent 36px 48px);
}
.card :focus-visible { outline-color: var(--violet); }

/* The perforation is counted in whole teeth, 7 × 9, so every edge gets them at any size. */
.stamp {
  --s: min(15.2cqi, 12.92svh);
  position: absolute; top: min(5.6cqi, 4.76svh); right: min(6.6cqi, 5.61svh); width: var(--s);
  transform: rotate(4deg); filter: drop-shadow(0 3px 6px rgb(43 33 64 / .25));
}
.stamp img {
  --t: calc(var(--s) / 7);
  display: block; width: var(--s); height: calc(var(--t) * 9); object-fit: cover;
  padding: calc(var(--t) * .54); background: #fff;
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent calc(var(--t) * .28), #000 calc(var(--t) * .315)) calc(var(--t) / -2) calc(var(--t) / -2) / var(--t) var(--t);
  -webkit-mask-composite: source-over;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent calc(var(--t) * .28), #000 calc(var(--t) * .315)) calc(var(--t) / -2) calc(var(--t) / -2) / var(--t) var(--t);
          mask-composite: add;
}
/* postmark.js picks one of eleven postmarks on every visit; each keeps the size and ink of its own design.
   The pictures carry 20% of air on every side for the ragged edges and the waves. */
.postmark { position: absolute; transform: rotate(-12deg); pointer-events: none; }
.postmark img { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; max-width: none; }
.postmark--p { top: min(6.4cqi, 5.44svh); right: min(8.2cqi, 6.97svh); width: min(32cqi, 27.2svh); aspect-ratio: 180 / 116; opacity: .8; mix-blend-mode: multiply; }
.postmark--q, .postmark--r { top: min(9.3cqi, 7.91svh); right: min(14.2cqi, 12.07svh); width: min(24.8cqi, 21.08svh); aspect-ratio: 150 / 96; }
.postmark--q { opacity: .85; mix-blend-mode: multiply; }
.postmark--r { opacity: .72; }

.card h1 {
  position: relative; max-width: 9.6em;
  font-family: var(--serif); font-weight: 400; line-height: 1.22; letter-spacing: -.005em;
  font-size: 2rem; font-size: min(7.3cqi, 6.21svh);
}
.hero-brand {
  display: block; margin: -.06em 0 .08em -.04em;
  font-family: var(--script); font-size: 2.35em; line-height: .9; color: var(--violet);
}
.u { position: relative; white-space: nowrap; }
.u::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.14em; height: .23em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none' fill='none' stroke='%23e0559a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 12 C60 6 140 5 296 9'/%3E%3Cpath d='M30 16 C120 12 200 11 262 14'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.btn {
  display: inline-flex; align-items: center; gap: .74em;
  min-height: 3.16em; padding: .3em .74em .3em 1.47em; margin-top: 2rem; margin-top: min(5.6cqi, 4.76svh);
  border-radius: 999px; background: var(--violet); color: #fff;
  font-size: 1.0625rem; font-size: max(1rem, min(3.15cqi, 2.68svh)); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 26px -10px rgb(103 80 164 / .75);
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--violet-hover); transform: translateY(-2px); }
.btn:active { transform: none; }
.go { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: rgb(255 255 255 / .18); }
.go svg { width: .95em; height: .95em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.apps {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em .8em;
  margin-top: 1.5rem; margin-top: min(4.3cqi, 3.65svh);
  font-size: .875rem; font-size: max(14px, min(2.3cqi, 1.95svh)); line-height: 1;
}
.apps-label { color: var(--ink-soft); }
.apps-links { display: inline-flex; gap: .8em; }
.chip {
  position: relative; display: inline-flex; align-items: center; min-height: 2.6em; padding: 0 1em;
  border: 1.5px solid rgb(43 33 64 / .32); border-radius: 999px;
  color: var(--ink); text-decoration: none;
}
.chip::before { content: ""; position: absolute; inset: -4px -3px; }
.chip:hover { border-color: var(--ink); background: rgb(43 33 64 / .05); }

@media (max-width: 39.99em) {
  .card { padding: min(9cqi, 7.65svh) min(6cqi, 5.1svh) min(7cqi, 5.95svh); transform: rotate(-1.2deg); }
  .card h1 { font-size: min(8.4cqi, 7.14svh); }
  .stamp { --s: min(17cqi, 14.45svh); top: min(7.5cqi, 6.4svh); right: min(5cqi, 4.25svh); }
  .postmark--p { top: min(8.3cqi, 7.06svh); right: min(8.4cqi, 7.14svh); width: min(32.3cqi, 27.4svh); }
  .postmark--q, .postmark--r { top: min(8cqi, 6.8svh); right: min(15cqi, 12.75svh); width: min(25cqi, 21.25svh); }
}

/* ---------- Phones ---------- */

.hero-art { position: relative; width: 100%; }
/* Sunset glow behind the phones, sized from the phones so it follows them on every layout. */
.hero-art::before {
  content: ""; position: absolute; inset: -60% -60% -80% -60%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(11.4% 11.2% at 49.7% 66.4%, rgb(255 214 150 / .9), rgb(255 160 150 / .5) 45%, rgb(255 140 170 / 0)),
    radial-gradient(54% 36.3% at 51.5% 65.2%, rgb(255 120 150 / .42), rgb(255 120 150 / 0) 70%),
    radial-gradient(36.9% 29.3% at 55.6% 74%, rgb(255 181 143 / .45), rgb(255 181 143 / 0) 70%),
    radial-gradient(49.7% 34.9% at 49.5% 35%, rgb(149 73 154 / .35), rgb(149 73 154 / 0) 70%);
}

.shot { position: relative; max-width: 30rem; margin-inline: auto; container-type: inline-size; }
/* On a phone the picture moves left to leave the right edge to the notes. */
@media (max-width: 39.99em) { .shot { max-width: 88%; margin-left: 0; } }
/* The top notes need room under the language switch, and on a short laptop screen the phones shrink with the height instead of running below the fold. */
@media (min-width: 60em) { .hero-art { padding-top: 2.75rem; } .shot { max-width: min(40rem, (100svh - 13.75rem) * 1.0712); } }
.shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1.9rem 2.5rem rgb(0 0 0 / .55)); }

.arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arrows path {
  fill: none; stroke: var(--pink); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.note {
  position: absolute; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--script); font-weight: 400; line-height: 1.02; color: var(--pink);
  font-size: clamp(.95rem, 3vw, 1.4rem); font-size: max(.95rem, 3.4cqw);
  text-shadow: 0 1px 12px rgb(22 15 42 / .85);
  transform: rotate(-3deg); transform-origin: left top;
}