/* Veeza's own type and blue. Everything else is ink on white; the paintings bring the colour. */
:root {
  --paper: #ffffff;
  --tint: #f5f7fb;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #64748b;
  --line: #e5e9f0;
  --line-2: #cbd5e1;
  --blue: #2663eb;
  --blue-dk: #1d4fc4;
  --whatsapp: #25d366;

  --sans: "DM Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 48px);
  --section: clamp(88px, 11vw, 160px);
  --r-panel: 16px;
  --r-card: 12px;
  --r-ctl: 9px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Reading direction: 1 left to right, -1 right to left. Arrows, nudges and directional washes follow it. */
  --dir: 1;
  --flow: to right;
  --float: 0 1px 2px rgb(15 23 42 / 0.08), 0 18px 40px -18px rgb(15 23 42 / 0.45);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: #fff; }

h1, h2 { color: var(--ink); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { color: var(--ink); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
p { text-wrap: pretty; }

.i { flex: none; width: 1.15em; height: 1.15em; }
.i:has([href="#i-arrow"]) { scale: var(--dir) 1; }
.sprite { position: absolute; width: 0; height: 0; }
.w { max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

.kicker { color: var(--blue); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(32px, 4.4vw, 56px); }
.head.center { justify-items: center; margin-inline: auto; text-align: center; }
.sub { max-width: 52ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.fine { font-size: 0.875rem; color: var(--ink-3); }

/* Buttons are pills. A trailing arrow rides in its own disc. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.button:hover { background: var(--ink); }
.button > .i { width: 30px; height: 30px; margin-inline-end: -14px; padding: 7px; border-radius: 50%; background: #fff; color: var(--ink); transition: rotate 0.3s var(--ease); }
.button:hover > .i { rotate: calc(-45deg * var(--dir)); }
.button.small { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.button.quiet { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.button.quiet > .i { background: var(--ink); color: #fff; }
.button.quiet:hover { background: var(--ink); box-shadow: none; color: #fff; }
.button.quiet:hover > .i { background: #fff; color: var(--ink); }
.button.wa { background: var(--whatsapp); color: #052e16; }
.button.wa > .i { margin: 0; margin-inline-start: -10px; padding: 0; background: none; color: inherit; width: 1.25em; height: 1.25em; }
.button.wa:hover { background: var(--ink); color: #fff; }
.button.wa:hover > .i { rotate: none; }

.text-button { padding: 0; border: 0; background: none; color: var(--blue); font-weight: 500; }
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }

/* A painting panel. Product UI sits on top of it as white cards. */
.art { position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--tint); }
.art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art > .px { image-rendering: pixelated; }

.skip { position: fixed; z-index: 50; top: 10px; inset-inline-start: 10px; padding: 10px 16px; border-radius: var(--r-ctl); background: var(--ink); color: #fff; translate: 0 -300%; }
.skip:focus { translate: 0; }

/* Scrolling is the only clock: sections ease up as they enter, and the first scene drifts back as the page leaves it. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .proof-facts, .proof-trust, .head, .tile, .finder, .dest, .group-row, .human-copy, .shot, .wa-copy, .versus, .extra, .faq-list, .final-panel {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    .hero-scene img { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    .hero-copy, .hero .places { animation: leave linear both; animation-timeline: scroll(root); animation-range: 8svh 72svh; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 30px; } }
@keyframes drift { to { scale: 1.1; translate: 0 5%; } }
@keyframes leave { to { opacity: 0; translate: 0 -36px; } }
@keyframes arrive { from { opacity: 0; translate: 0 12px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee { overflow-x: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}