:root {
  --red: #C8161D;
  --red-deep: #84090F;
  --red-light: #E32A2A;
  --ink: #170B0A;
  --muted: #6B5A56;
  --white: #FCFAE6;
  --paper: #FBFAF9;
  --on-red-muted: #F1D6D4;
  --gold: #F2B124;
  --ink-rgb: 23, 11, 10;
  --deep-rgb: 132, 9, 15;
  --hair: rgba(var(--ink-rgb), 0.08);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(6rem, 14vw, 12rem);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --logo: "Satoshi", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

/* Blue palette trial. Switch with data-palette on <html>: "blu", "lila", "verdhe", or remove it for red. */
html[data-palette="blu"] {
  --red: #1F4FD8;
  --red-deep: #0E2A80;
  --red-light: #3D72FF;
  --ink: #0B1026;
  --muted: #56607A;
  --on-red-muted: #D6E1FF;
  --ink-rgb: 11, 16, 38;
  --deep-rgb: 14, 42, 128;
}
html[data-palette="blu"] .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 40% 36%, #1c2c5c 0%, #101a3a 38%, #090f24 72%, #060a18 100%);
  box-shadow:
    inset -18px -26px 60px rgba(61, 114, 255, 0.35),
    inset 10px 14px 30px rgba(255, 255, 255, 0.05),
    0 40px 80px -30px rgba(11, 16, 38, 0.85);
}

/* Lilac palette trial. Remove data-palette="lila" from <html> to go back to red. */
html[data-palette="lila"] {
  --red: #6D3FD1;
  --red-deep: #3E1E8C;
  --red-light: #8A5CF0;
  --ink: #160F26;
  --muted: #635A73;
  --on-red-muted: #E4DAFA;
  --ink-rgb: 22, 15, 38;
  --deep-rgb: 62, 30, 140;
}
html[data-palette="lila"] .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 40% 36%, #33215c 0%, #1c1236 38%, #0f0a1f 72%, #090614 100%);
  box-shadow:
    inset -18px -26px 60px rgba(138, 92, 240, 0.35),
    inset 10px 14px 30px rgba(255, 255, 255, 0.05),
    0 40px 80px -30px rgba(22, 15, 38, 0.85);
}

/* Yellow palette trial. The field is light, so text on it flips to ink. */
html[data-palette="verdhe"] {
  --red: #F8FF2C;
  --red-deep: #C4CB00;
  --red-light: #F8FB8A;
  --ink: #15160A;
  --muted: #5C5D48;
  --on-red-muted: #45471C;
  --gold: #FF8A1F;
  --ink-rgb: 21, 22, 10;
  --deep-rgb: 110, 114, 0;
}
html[data-palette="verdhe"] .red-field,
html[data-palette="verdhe"] .link--light { color: var(--ink); }html[data-palette="verdhe"] .nav,
html[data-palette="verdhe"] .menu { --on-red-muted: #E6E8B8; }
html[data-palette="verdhe"] .footer { border-top-color: rgba(var(--ink-rgb), 0.16); }
/* Safari on iPhone tints the bars around the clock and the address field from
   the page background, so the page itself is yellow (it opens and ends on the
   yellow hero and closing) and only the white middle carries its own white,
   bled out to both edges past the centred column. Homepage only: login and
   the dashboard load this file too. */
html[data-palette="verdhe"]:has(body.home), html[data-palette="verdhe"] body.home { background: var(--red); }
html[data-palette="verdhe"] .intro { background: var(--white); box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax); }
html[data-palette="verdhe"] .footer__brand img { filter: invert(1); }
html[data-palette="verdhe"] .callcard__line:last-child b { color: var(--ink); }
html[data-palette="verdhe"] .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 40% 36%, #3a3b14 0%, #22230b 38%, #121306 72%, #0a0a03 100%);
  box-shadow:
    inset -18px -26px 60px rgba(248, 255, 44, 0.32),
    inset 10px 14px 30px rgba(255, 255, 255, 0.05),
    0 40px 80px -30px rgba(21, 22, 10, 0.85);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: 100%;
  max-width: calc(1360px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section) calc(var(--section) * 1.15); }
.muted { color: var(--muted); max-width: 62ch; }
.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.title--sm { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 1.25rem; }

/* ---------- Red field ---------- */
.red-field {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(60% 55% at 56% 52%, var(--red-light) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 50%, var(--red) 40%, var(--red-deep) 100%);
  isolation: isolate;
}
.grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 50;
  top: 16px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 32px), 1000px);
  height: 56px;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  color: var(--white);
  background: rgba(var(--ink-rgb), 0.55);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px -12px rgba(var(--ink-rgb), 0.5);
}
.nav__brand { display: flex; align-items: center; gap: 0.45em; font-family: var(--logo); font-weight: 400; font-size: 1.15rem; letter-spacing: -0.01em; }
/* Mark scales with the "Linja" text, a little taller than the letters. */
.nav__mark { display: block; width: 1.2em; height: 1.2em; }
.nav__links { display: flex; gap: 1.5rem; margin-left: auto; font-size: 0.9375rem; color: #fff; }
.nav__links a { transition: color 300ms var(--ease); }
.nav__links a:hover { color: #fff; }
.nav__login { margin-left: -0.5rem; padding: 0 6px; font-size: 0.9375rem; font-weight: 500; color: #fff; }
.nav__login:hover { opacity: 0.8; }
.nav__cta {
  height: 40px; padding: 0 18px; display: inline-flex; align-items: center;
  border-radius: 999px; background: var(--white); color: var(--ink);
  font-weight: 500; font-size: 0.9375rem;
  transition: transform 500ms var(--ease);
}
.nav__cta:active { transform: scale(0.98); }
.nav__burger { display: none; }

.lang {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.lang button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; min-width: 38px; padding: 0 10px 0 7px;
  border: 0; border-radius: 999px;
  background: transparent; color: #fff;
  font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}
.lang button:hover { color: #fff; }
.lang button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); color: #fff; }
.lang__flag {
  display: block; flex: none;
  width: 18px; height: 18px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  opacity: 0.7; transition: opacity 400ms var(--ease);
}
.lang__flag svg { width: 100%; height: 100%; }
.lang button:hover .lang__flag, .lang button[aria-pressed="true"] .lang__flag { opacity: 1; }

.menu { display: none; }

@media (max-width: 767px) {
  .nav { padding: 0 6px 0 18px; }
  .nav__links, .nav__cta, .nav__login { display: none; }
  .lang { margin-left: auto; }
  .lang button { min-width: 34px; padding: 0 8px 0 6px; gap: 5px; }
  .nav__burger {
    display: grid; place-content: center; gap: 6px;
    margin-left: 6px; width: 44px; height: 44px;
    border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); cursor: pointer;
  }
  .nav__burger span {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--white);
    transition: transform 500ms var(--ease);
  }
  .nav--open .nav__burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav--open .nav__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .menu {
    display: flex; align-items: center;
    position: fixed; inset: 0; z-index: 40;
    padding: 96px 24px 40px;
    background: rgba(var(--ink-rgb), 0.86);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    opacity: 0; visibility: hidden;
    transition: opacity 400ms var(--ease), visibility 0s linear 400ms;
  }
  .menu nav { display: flex; flex-direction: column; gap: 0.5rem; }
  .menu a {
    display: block; overflow: hidden;
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(2rem, 10vw, 3.25rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--white);
  }
  .menu a span { display: block; transform: translateY(105%); transition: transform 600ms var(--ease); }
  .menu--open { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease); }
  .menu--open a span { transform: none; }
  .menu--open a:nth-child(2) span { transition-delay: 60ms; }
  .menu--open a:nth-child(3) span { transition-delay: 120ms; }
  .menu--open a:nth-child(4) span { transition-delay: 180ms; }
  .menu--open a:nth-child(5) span { transition-delay: 240ms; }
}

@media (max-width: 399px) {
  .lang button { padding: 0 7px; }
  .lang__code {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---------- Buttons and links ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 8px 0 26px;
  border-radius: 999px;
  font-weight: 500; font-size: 1rem; white-space: nowrap;
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.pill__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  transition: transform 500ms var(--ease);
}
.pill__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill:hover .pill__icon { transform: translate(2px, -2px) scale(1.06); }
.pill:active { transform: scale(0.98); }
.pill--light { background: var(--white); color: var(--ink); box-shadow: 0 14px 30px -14px rgba(var(--deep-rgb), 0.9); }
.pill--light .pill__icon { background: var(--ink); color: var(--white); }
.pill--ink { background: var(--ink); color: var(--white); }
.pill--ink .pill__icon { background: var(--white); color: var(--ink); }

.link { position: relative; font-weight: 500; padding-block: 2px; }
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.link--light { color: var(--white); }

/* ---------- Orb (the product shot) ---------- */
.orb {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 40% 36%, #4a201b 0%, #26100d 38%, #120706 72%, #0b0403 100%);
  box-shadow:
    inset -18px -26px 60px rgba(227, 42, 42, 0.32),
    inset 10px 14px 30px rgba(255, 255, 255, 0.05),
    0 40px 80px -30px rgba(var(--ink-rgb), 0.85);
}
.orb__rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 70% 82%, rgba(242, 177, 36, 0.28) 0%, transparent 34%);
  mix-blend-mode: screen;
}
.wave {
  position: absolute; left: 22%; right: 22%; top: 50%; height: 34%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: space-between;
}
.wave i {
  display: block; width: 4.5%; height: 100%;
  border-radius: 999px; background: var(--white);
  transform: scaleY(0.2); transform-origin: center;
  animation: talk 2.4s var(--ease) infinite;
}
.wave i:nth-child(odd) { background: var(--on-red-muted); }
.wave i:nth-child(1)  { animation-delay: -0.1s; }
.wave i:nth-child(2)  { animation-delay: -1.3s; }
.wave i:nth-child(3)  { animation-delay: -0.6s; }
.wave i:nth-child(4)  { animation-delay: -1.9s; }
.wave i:nth-child(5)  { animation-delay: -0.3s; }
.wave i:nth-child(6)  { animation-delay: -1.1s; }
.wave i:nth-child(7)  { animation-delay: -2.1s; }
.wave i:nth-child(8)  { animation-delay: -0.8s; }
.wave i:nth-child(9)  { animation-delay: -1.6s; }
.wave i:nth-child(10) { animation-delay: -0.4s; }
.wave i:nth-child(11) { animation-delay: -1.4s; }
.wave i:nth-child(12) { animation-delay: -0.9s; }
.wave i:nth-child(13) { animation-delay: -2.2s; }
@keyframes talk {
  0%, 100% { transform: scaleY(0.18); }
  30% { transform: scaleY(0.9); }
  55% { transform: scaleY(0.4); }
  75% { transform: scaleY(0.7); }
}

/* ---------- Hero ---------- */
/* Rows: the hand and the copy share the bottom row. svh keeps the height
   stable while a phone's address bar shows and hides. */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hand holding a phone, rising from the bottom edge, with a live call on screen. */
.hero__hand {
  grid-area: 2 / 1; z-index: 2; align-self: end; justify-self: end;
  position: relative;
  width: min(46vw, 72vh, calc(100vw - 600px));
  margin: 0 5vw -14vh 0;
  pointer-events: none;
}
.hero__hand > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(var(--deep-rgb), 0.45)); }
.phone {
  position: absolute; left: 41.4%; top: 7.6%; width: 26.8%; height: 53.4%;
  container-type: inline-size;
}
/* Sized in cqw = % of the phone screen, so the UI scales with the image. */
.phone__in {
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 16cqw 8cqw 10cqw;
  color: var(--ink); text-align: center;
}
.phone__brand { display: inline-flex; align-items: center; gap: 3cqw; font-family: var(--logo); font-size: 7.5cqw; font-weight: 400; color: var(--red); }
.phone__brand i { width: 4.5cqw; height: 4.5cqw; border-radius: 50%; background: var(--gold); }
.phone__avatar {
  display: grid; place-items: center;
  width: 38cqw; height: 38cqw; margin-top: 9cqw; border-radius: 50%;
  background: var(--red);
}
.phone__avatar img { width: 46%; height: auto; }
.phone__label { margin-top: 7cqw; font-size: 6.5cqw; color: var(--muted); line-height: 1.2; }
.phone__num { margin-top: 1.5cqw; font-size: 8.5cqw; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.phone__wave { display: flex; align-items: center; justify-content: center; gap: 2.4cqw; height: 16cqw; margin-top: 9cqw; }
.phone__wave i {
  display: block; width: 3.2cqw; height: 100%; border-radius: 99px; background: var(--red);
  transform: scaleY(0.25); animation: talk 2.2s var(--ease) infinite;
}
.phone__wave i:nth-child(2) { animation-delay: -0.9s; }
.phone__wave i:nth-child(3) { animation-delay: -1.6s; }
.phone__wave i:nth-child(4) { animation-delay: -0.4s; }
.phone__wave i:nth-child(5) { animation-delay: -1.2s; }
.phone__wave i:nth-child(6) { animation-delay: -1.9s; }
.phone__wave i:nth-child(7) { animation-delay: -0.6s; }
.phone__wave i:nth-child(8) { animation-delay: -1.4s; }
.phone__wave i:nth-child(9) { animation-delay: -0.2s; }
.phone__status { margin-top: 5cqw; font-size: 6.5cqw; font-weight: 500; color: var(--red); }
.phone__time { margin-top: 1.5cqw; font-family: var(--mono); font-size: 7cqw; color: var(--muted); font-variant-numeric: tabular-nums; }
.phone__btn {
  display: grid; place-items: center;
  width: 24cqw; height: 24cqw; margin-top: auto; border-radius: 50%;
  background: var(--red);
}
.phone__btn svg { width: 46%; height: 46%; fill: #fff; }

/* Hand holding the logo's first cup, in from the left edge. Its string is the
   .cupline drawn by main.js, which reads the cup's position from this box. */
.hero__cup {
  position: absolute; z-index: 2; top: clamp(76px, 11vh, 110px); left: calc(-1 * clamp(4px, 1vw, 16px));
  /* Capped by height too, so on short screens the sleeve stays clear of the lead. */
  width: clamp(170px, min(23vw, 32vh), 360px); height: auto;
  pointer-events: none;
}
main { position: relative; }
.cupline { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.cupline__thread { filter: drop-shadow(0 2px 1.5px rgba(46, 52, 0, 0.35)); }
.cupline__cord, .cupline__twist { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.cupline__cord { stroke: #2E3400; }
.cupline__twist { stroke: rgba(255, 255, 255, 0.22); }
@media (max-width: 767px) {
  /* Further off the edge so the string drops clear of the big line. */
  .hero__cup { width: 150px; left: -30px; }
}

/* Big centred line in the empty middle of the hero, nudged up so it clears the copy. */
.hero__tag {
  grid-area: 2 / 1; z-index: 3; align-self: center; justify-self: center;
  margin: 0; transform: translateY(-14%);
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: min(8vw, 13vh); line-height: 0.92; letter-spacing: -0.035em;
  text-align: center; color: inherit;
}
.hero__line { display: block; }
.hero__line + .hero__line [data-i18n] { opacity: 0.6; }
/* Emoji closes each line; only the words of the second line are dimmed, not the picture. */

.hero__copy {
  grid-area: 2 / 1; z-index: 3; align-self: end;
  padding-bottom: clamp(32px, 6vh, 64px);
}
.hero__lead {
  max-width: 15ch;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.025em; font-weight: 500;
  text-wrap: balance;
}
.hero__lead .ai {
  text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.14em;
  text-decoration-skip-ink: none; /* run straight through the g and j */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[lang="sq"] .hero__lead, html[lang="it"] .hero__lead, html[lang="en"] .hero__lead { max-width: 21ch; font-size: clamp(1.75rem, 3vw, 2.9rem); }
.hero__login { margin-top: 1.25rem; font-size: 0.9375rem; }
.hero__login .link::after { transform: scaleX(1); } /* always underlined so it reads as a link */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 1.75rem; }

@media (max-width: 767px) {
  .hero { grid-template-rows: auto 1fr auto; }
  .hero__hand { display: none; }
  .hero__copy { grid-area: 3 / 1; padding-bottom: 32px; }
  .hero__lead { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  /* Sits just above the lead, clear of the hand at the top; the gap below it is
     where the thread turns, and the left padding keeps it clear of the thread's
     drop from the cup. */
  .hero__tag { font-size: clamp(2.25rem, 10.5vw, 4rem); transform: none; align-self: end; margin-bottom: 56px; padding-left: 60px; }
}

/* ---------- Intro ---------- */
.intro__statement {
  font-size: clamp(1.75rem, 4.2vw, 4rem);
  line-height: 1.08; letter-spacing: -0.03em; font-weight: 500;
  max-width: 24ch;
}
.inline-logo {
  display: inline-block; width: 0.95em; height: 0.95em; margin-inline: 0.1em;
  vertical-align: -0.12em;
}
.inline-logo svg { display: block; width: 100%; height: 100%; }

.numbers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(5rem, 10vw, 9rem);
}
.num { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid var(--hair); padding-top: 1.25rem; }
.num:nth-child(2) { margin-top: clamp(3rem, 7vw, 7rem); }
.num:nth-child(3) { margin-top: clamp(1.5rem, 3.5vw, 3.5rem); }
.num__big {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(5rem, 10vw, 9rem); line-height: 0.9; letter-spacing: -0.03em;
  padding-bottom: 0.1em;
}
.num__cap { color: var(--muted); max-width: 30ch; }
@media (max-width: 767px) {
  .numbers { grid-template-columns: 1fr; }
  .num:nth-child(n) { margin-top: 0; }
}
/* The three numbers set on the art gradient (assets/art.webp). */
.numbers--art {
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 6vw, 5rem);
  border-radius: clamp(20px, 3vw, 36px);
  background: #F8FF2C url("assets/art.webp") center / cover no-repeat;
  color: var(--ink);
}
.numbers--art .num { border-top: 0; padding-top: 0; }
.numbers--art .num { gap: 0.6rem; }
.num__icon { display: block; width: clamp(68px, 7.5vw, 100px); height: clamp(68px, 7.5vw, 100px); margin-bottom: 0.4rem; color: var(--ink); }
.num__icon svg { display: block; width: 100%; height: 100%; }
.numbers--art .num__big { font-size: clamp(3.25rem, 5.5vw, 5rem); }
.num__label { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; }
/* A phrase in place of a number: big, but sized to wrap within its column. */
.numbers--art .num__big--text { font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 0.95; text-transform: uppercase; }
.numbers--art .num__cap { margin-top: 0.35rem; color: var(--ink); opacity: 0.8; font-size: 1rem; line-height: 1.45; max-width: 30ch; }

/* ---------- Bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(260px, auto);
  grid-auto-flow: dense;
}
.b-answer { grid-column: span 2; grid-row: span 2; }
.b-book { grid-column: span 2; }
.b-wa, .b-transfer { grid-column: span 1; }
.b-summary { grid-column: span 4; }

.bezel {
  padding: 6px;
  border-radius: 28px;
  background: rgba(var(--ink-rgb), 0.03);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.bezel__core {
  height: 100%;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(var(--ink-rgb), 0.04);
}
.bezel__core--ink { background: var(--ink); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.bezel__core--ink p { color: #CDBDB9; }
.bezel h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.bezel p { color: var(--muted); max-width: 52ch; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.25rem; }
.chip {
  height: 32px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair);
  font-weight: 500; font-size: 0.8125rem;
}

.callcard {
  margin-top: auto;
  padding: 18px 20px; border-radius: 18px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--hair);
  display: flex; flex-direction: column; gap: 10px;
  font-size: 0.9375rem;
}
.callcard__row { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--muted); }
.callcard__t { margin-left: auto; }
.callcard__line { color: var(--ink) !important; }
.callcard__line b { font-weight: 600; margin-right: 6px; color: var(--muted); }
.callcard__line:last-child b { color: var(--red); }

.bezel__core--wide { flex-direction: row; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.bezel__core--wide > div { flex: 1 1 0; }
.summary { flex: 1 1 0; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.9375rem; }
.summary li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 16px; border-radius: 14px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.summary .mono { color: var(--muted); font-size: 0.8125rem; }

.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.2); position: relative; }
.dot--amber { background: var(--gold); box-shadow: none; }
.dot--ink { background: var(--ink); box-shadow: none; }
.dot--ping::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--gold); animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-summary { grid-column: span 2; }
  .bezel__core--wide { flex-direction: column; align-items: stretch; }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .b-answer, .b-book, .b-wa, .b-transfer, .b-summary { grid-column: span 1; grid-row: auto; }
  .summary li { flex-direction: column; gap: 2px; }
}

/* ---------- How (pinned split) ---------- */
.how { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.how__pin { position: sticky; top: 120px; }
.how__orb { width: min(70%, 320px); margin-top: clamp(2rem, 4vw, 3.5rem); }
.orb--small .wave { left: 24%; right: 24%; }
.how__steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: clamp(4rem, 12vh, 9rem); padding-top: clamp(0rem, 10vh, 8rem); padding-bottom: 10vh; }
.step { border-top: 1px solid var(--hair); padding-top: 1.5rem; max-width: 46ch; }
.step__n { font-family: var(--mono); font-weight: 500; font-size: 0.875rem; color: var(--muted); }
.step h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; margin: 0.75rem 0 1rem; }
.step p { color: var(--muted); font-size: 1.125rem; }
@media (max-width: 767px) {
  .how { grid-template-columns: 1fr; }
  .how__pin { position: static; }
  .how__orb { width: 180px; }
  .how__steps { padding-top: 2rem; gap: 3.5rem; }
}

/* ---------- Hours ---------- */
.hours__top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.hours__clock { display: flex; flex-direction: column; gap: 0.85rem; }
.kicker { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.clock { font-size: clamp(3.5rem, 8vw, 7rem); line-height: 1; letter-spacing: -0.04em; }
.status { display: flex; align-items: center; gap: 12px; color: var(--ink); }

.week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, 1.2vw, 16px);
  margin-top: clamp(4rem, 8vw, 7rem);
}
.day { display: flex; flex-direction: column; gap: 12px; }
.day__bar {
  position: relative; display: block;
  height: clamp(140px, 22vw, 280px);
  border-radius: 16px;
  background:
    radial-gradient(90% 60% at 50% 20%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(180deg, var(--red-light), var(--red) 55%, var(--red-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 18px 30px -18px rgba(var(--deep-rgb), 0.7);
  overflow: hidden;
}
/* 9:00 to 18:00 of a 24h column, top = midnight */
.day__team {
  position: absolute; left: 0; right: 0;
  top: 37.5%; height: 37.5%;
  background: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.day__l { font-family: var(--mono); font-weight: 500; font-size: 0.875rem; color: var(--muted); text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1.75rem; font-size: 0.9375rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 10px; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw--red { background: var(--red); }
.sw--amber { background: var(--gold); }
@media (max-width: 767px) {
  .hours__top { grid-template-columns: 1fr; }
  .day__bar { border-radius: 10px; }
  .day__l { font-size: 0.75rem; }
}

/* ---------- Closing ---------- */
.closing { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; min-height: 100svh; }
.closing__type, .closing__copy { grid-area: 1 / 1; }
.closing__char { display: inline-block; } /* one per letter, moved by main.js */
.closing__type {
  z-index: 1; align-self: center; justify-self: center;
  font-family: var(--display); font-weight: 800;
  font-size: 12vw;
  line-height: 0.92; letter-spacing: -0.025em; text-align: center;
  white-space: nowrap; margin-top: 6vh; /* room above for the hanging cup */
}
.closing__copy {
  z-index: 3; align-self: end;
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem;
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.closing__copy p { max-width: 34ch; font-size: clamp(1.125rem, 1.6vw, 1.375rem); color: var(--on-red-muted); }
.footer__brand { display: inline-flex; align-items: center; gap: 0.5em; }
.footer__end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.footer__brand img { display: block; flex: none; width: 1.2em; height: 1.2em; }
.footer {
  z-index: 3; grid-row: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.875rem; color: var(--on-red-muted);
}
html[lang="sq"] .closing__type { font-size: 10vw; }
@media (max-width: 767px) {
  html[lang="it"] .closing__type { font-size: 15vw; }
}
@media (max-width: 767px) {
  /* Centred, leaving room over it for the hanging cup and its thread below the nav. */
  .closing__type, html[lang="sq"] .closing__type { font-size: 16vw; white-space: normal; margin-top: 0; }
}

/* ---------- Demo booking dialog ---------- */
.demo {
  width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: 28px;
  background: #fff; color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(var(--ink-rgb), 0.6);
  overflow: auto; overscroll-behavior: contain;
}
.demo[open] { animation: demo-in 450ms var(--ease); }
.demo::backdrop { background: rgba(var(--ink-rgb), 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes demo-in { from { opacity: 0; transform: translateY(18px); } }
.demo__panel { position: relative; padding: clamp(24px, 5vw, 40px); }
.demo__close {
  position: absolute; top: 16px; right: 16px;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 999px; background: rgba(var(--ink-rgb), 0.06); color: var(--ink); cursor: pointer;
}
.demo__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.demo__close:hover { background: rgba(var(--ink-rgb), 0.12); }
.demo__title {
  padding-right: 52px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 2.75rem); line-height: 0.95; letter-spacing: -0.03em;
}
.demo__sub { margin-top: 0.75rem; color: var(--muted); }
.demo__form { display: grid; gap: 1rem; }
.demo__form[hidden], .demo__step[hidden], .demo__error[hidden] { display: none; }
.demo__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.demo textarea {
  width: 100%; padding: 12px 16px; resize: vertical;
  border: 1px solid rgba(var(--ink-rgb), 0.14); border-radius: 14px;
  background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
.demo textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(var(--ink-rgb), 0.08); }
/* A field that is empty or not right, e.g. an email without @. */
.demo .field input.is-invalid { border-color: #EF4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* Hidden from people; bots fill it in and the server ignores the booking. */
.demo__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.demo__error { padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #8A1C1C; font-size: 0.875rem; }
.demo__submit { justify-self: start; margin-top: 0.5rem; border: 0; font: inherit; font-weight: 500; cursor: pointer; }
.demo__submit:disabled { opacity: 0.6; cursor: progress; }
/* The confirm button in the site's yellow, its arrow in ink. */
.demo__confirm { background: var(--red); color: var(--ink); box-shadow: 0 14px 30px -14px rgba(var(--deep-rgb), 0.9); }
.demo__confirm .pill__icon { background: var(--ink); color: var(--white); }
[data-step="done"] .demo__submit { padding: 0 26px; margin-top: 1.75rem; }
@media (max-width: 479px) {
  .demo__row { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wave i { transform: scaleY(0.5); }
}

/* ---------- Login page ---------- */
.auth { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 16px; background: #fff; }
.auth__panel { width: min(100%, 380px); color: var(--ink); }
.auth__brand {
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  font-family: var(--logo); font-size: 1.75rem; letter-spacing: -0.01em;
}
.auth__mark { display: block; width: 1.15em; height: 1.15em; }
.auth__mark svg { width: 100%; height: 100%; }
.auth__title {
  margin-top: 2rem; text-align: center;
  font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
}
.auth__form { display: grid; gap: 1rem; margin-top: 1.75rem; }
.field { display: grid; gap: 0.4rem; }
.field__label { font-size: 0.875rem; font-weight: 500; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.field__row a { font-size: 0.8125rem; color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; }
.field input {
  width: 100%; height: 48px; padding: 0 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.14); border-radius: 14px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 1rem;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(var(--ink-rgb), 0.08); }
.check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.875rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.auth__submit {
  height: 50px; margin-top: 0.25rem;
  border: 0; border-radius: 999px;
  background: var(--red); color: var(--ink);
  font: 500 1rem/1 var(--sans); cursor: pointer;
  transition: transform 500ms var(--ease), opacity 300ms var(--ease);
}
.auth__submit:hover { opacity: 0.9; }
.auth__submit:active { transform: scale(0.98); }
.auth__error { padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #8A1C1C; font-size: 0.875rem; }
.auth__error[hidden], .auth__orgs[hidden] { display: none; }
.auth__submit:disabled { opacity: 0.6; cursor: progress; }
.auth__orgs { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.auth__orglist { display: grid; gap: 8px; }
.auth__orglist button {
  height: 48px; padding: 0 16px; text-align: left;
  border: 1px solid rgba(var(--ink-rgb), 0.14); border-radius: 14px; background: #fff;
  font: 500 0.9375rem/1 var(--sans); color: var(--ink); cursor: pointer;
}
.auth__orglist button:hover { border-color: var(--ink); }
.auth__alt { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); font-size: 0.9375rem; color: var(--muted); text-align: center; }
.auth__alt a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }