/* ═══════════════════════════════════════════════════════════
   Hermes QR — landing page
   Tokens mirror the Figma variable set (Primary #EA5C24 etc.)
   ═══════════════════════════════════════════════════════════ */

:root {
  --primary:          #ea5c24;
  --primary-dark:     #d24d19;
  --brand-bg:         #ffefea;

  --text-primary:     #111111;
  --text-secondary:   #6e6e78;   /* 5.0:1 on white */
  --text-inverse:     #ffffff;

  --color-bg:         #ffffff;
  --section-bg:       #faf6f1;
  --surface-muted:    #f6f6fa;
  --color-border:     #e4e4e7;
  --card-border:      #eaeaea;

  --side-margin:      120px;
  --section-y:        160px;
  --section-gap:      48px;
  --container:        1200px;

  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-plate: 39px;

  --sh-sm:      0 1px 2px 0 rgba(16,24,40,.05);
  --sh-sm-str:  0 1px 3px 0 rgba(16,24,40,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --sh-md:      0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(16,24,40,.10);
  --sh-lg:      0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(16,24,40,.10);

  --surface-hover:  #fbfbfb;
  --overlay-weak:   rgba(17,17,17,.04);
  --overlay-soft:   rgba(17,17,17,.06);
  --hairline:       rgba(17,17,17,.08);
  --dot-idle:       rgba(17,17,17,.20);
  --scroll-thumb:   rgba(17,17,17,.20);
  --nav-bg:         rgba(255,255,255,.86);
  --scrim:          rgba(17,17,17,.45);

  --ok:      #157347;
  --ok-bg:   #e7f4ec;
  --err:     #c2410c;
  --err-ring: rgba(194,65,12,.12);

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-soft:  cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

/* ── dark mode: follows the system, same warm family ───────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-bg:       #3a1d10;

    --text-primary:   #f4f1ee;
    --text-secondary: #a8a29b;   /* 7.0:1 on the dark ground */

    --color-bg:       #131211;
    --section-bg:     #1a1817;
    --surface-muted:  #201d1b;
    --color-border:   #34302c;
    --card-border:    #2b2724;

    --surface-hover:  #211e1c;
    --overlay-weak:   rgba(255,255,255,.06);
    --overlay-soft:   rgba(255,255,255,.07);
    --hairline:       rgba(255,255,255,.10);
    --dot-idle:       rgba(255,255,255,.26);
    --scroll-thumb:   rgba(255,255,255,.22);
    --nav-bg:         rgba(19,18,17,.82);
    --scrim:          rgba(0,0,0,.62);

    --ok:      #43c98a;
    --ok-bg:   rgba(67,201,138,.14);
    --err:     #ff8a5c;
    --err-ring: rgba(255,138,92,.16);

    /* Shadows read as haze on a dark ground; deepen them. */
    --sh-sm:      0 1px 2px 0 rgba(0,0,0,.40);
    --sh-sm-str:  0 1px 3px 0 rgba(0,0,0,.50), 0 1px 2px -1px rgba(0,0,0,.40);
    --sh-md:      0 4px 6px -1px rgba(0,0,0,.50), 0 2px 4px -2px rgba(0,0,0,.40);
    --sh-lg:      0 10px 15px -3px rgba(0,0,0,.55), 0 4px 6px -4px rgba(0,0,0,.45);

    color-scheme: dark;
  }
  /* On the warm ground the secondary tint would drop below 4.5:1. */
  .section--tinted, .footer { --text-secondary: #a5a09a; }
}

/* ── reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--text-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* The surfaces we didn't draw still belong to the palette. */
::selection { background: rgba(234,92,36,.18); color: var(--text-primary); }
input { caret-color: var(--primary); }
* { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(234,92,36,.55); background-clip: content-box; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anchors land below the sticky bar. */
[id] { scroll-margin-top: 96px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 8px;
  transform: translate(-50%, -200%);
  z-index: 100;
  background: var(--color-bg); color: var(--text-primary);
  padding: 10px 16px; border-radius: var(--r-md);
  box-shadow: var(--sh-lg); font-weight: 600; font-size: 13px;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ── layout primitives ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.container--narrow { max-width: 760px; }

.section {
  padding: var(--section-y) var(--side-margin);
  background: var(--color-bg);
}
/* Secondary text on the warm ground is tinted from it, not grayed. */
.section--tinted, .footer { background: var(--section-bg); --text-secondary: #6f6862; }
.section--hero   { padding-top: 48px; }

/* ── typography ──────────────────────────────────────────── */
.h-hero {
  font-size: clamp(38px, 6.25vw, 90px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.0167em;
}
.h-section {
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.0288em;
}
.eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.lead {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 42em;
  margin-inline: auto;
}

.head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin-bottom: var(--section-gap);
}
.head--wide { margin-bottom: 64px; }
.head__sub {
  max-width: 1100px;
  color: var(--text-secondary);
}

/* ── word-by-word headline rise ──────────────────────────────
   Each word lifts into place, 55ms behind the one before it.
   Hidden only until JS has split it, and .js is set by main.js
   itself, so a dead script still leaves a readable page.      */
.js [data-words]:not(.is-split) { visibility: hidden; }
[data-words] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition:
    opacity   .5s  var(--ease-soft) var(--wd, 0ms),
    transform .65s var(--ease-out)  var(--wd, 0ms);
}
[data-words].is-in .w { opacity: 1; transform: none; }

/* ── scroll reveal ───────────────────────────────────────────
   Transform + opacity only: the page has to stay scrollable
   at 60fps while these run.                                   */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   .6s var(--ease-out) var(--d, 0ms),
    transform .8s var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── hero / CTA staged entrance ──────────────────────────────
   The plate wipes up from the table edge, then the devices
   land on it. One authored moment, reused only twice.        */
.js .stage--seq .stage__plate {
  clip-path: inset(100% 0 0 0 round var(--r-plate));
  transition: clip-path .9s var(--ease-out) var(--seq, 0ms);
}
.js .stage--seq .stage__art {
  opacity: 0;
  transition:
    opacity   .7s var(--ease-out) calc(var(--seq, 0ms) + 200ms),
    transform 1s  var(--ease-out) calc(var(--seq, 0ms) + 200ms);
}
.js .stage--hero .stage__art { transform: translate(-50%, 64px) scale(.98); }
.js .stage--cta  .stage__art { transform: translateY(64px) scale(.98); }

.js .stage--seq.is-in .stage__plate { clip-path: inset(0 0 0 0 round var(--r-plate)); }
.js .stage--seq.is-in .stage__art   { opacity: 1; }
.js .stage--hero.is-in .stage__art  { transform: translate(-50%, 0) scale(1); }
.js .stage--cta.is-in  .stage__art  { transform: translateY(0) scale(1); }

/* Hero copy rides the same timeline. */
.js .hero .lead,
.js .hero .signup-block {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.js .hero .lead         { transition-delay: 260ms; }
.js .hero .signup-block { transition-delay: 400ms; }
.js .hero.is-ready .lead,
.js .hero.is-ready .signup-block { opacity: 1; transform: none; }

/* ═══════════════ NAVBAR ═══════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.navbar.is-stuck {
  border-bottom-color: var(--card-border);
  box-shadow: 0 1px 12px rgba(16,24,40,.04);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 64px;
}
.navbar__logo picture, .footer__logo picture { display: contents; }
.navbar__logo img { width: 117px; height: auto; }

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
  position: relative;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color .2s var(--ease-soft), background-color .2s var(--ease-soft);
}
.nav-link:hover { color: var(--text-primary); background: var(--overlay-weak); }
.nav-link.is-active { color: var(--text-primary); background: rgba(234,92,36,.09); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  background: none; border: 0; cursor: pointer;
  border-radius: 10px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--text-primary);
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-soft);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ═══════════════ HERO ═══════════════ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  width: 100%;
}

/* ── signup form ─────────────────────────────────────────── */
.signup-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.signup {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 320px;
  max-width: 100%;
}
.field__label {
  font-size: 13px;
  color: var(--text-secondary);
}
.input {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(234,92,36,.14);
}
.input input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
}
.input input::placeholder { color: var(--text-secondary); }
.input.is-invalid { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-ring); }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--ease-out), background-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.btn--primary {
  background: var(--primary);
  color: var(--text-inverse);
  box-shadow: var(--sh-sm-str);
}
.btn--primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0) scale(.98); }
.btn[disabled] { cursor: default; }
.btn__spinner {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  display: none;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .btn__label  { opacity: 0; }
.btn.is-loading .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════ CONFIRMATION DIALOG ═══════════════ */
.modal {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  overflow: visible;
}
.modal::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal[open]           { animation: modalIn .34s var(--ease-out); }
.modal[open]::backdrop  { animation: fadeIn .3s var(--ease-soft); }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

.modal__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 28px 24px;
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 48px -12px rgba(16,24,40,.28);
}
.modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
}
.modal__icon svg { width: 28px; height: 28px; }
.modal--ok  .modal__icon { background: var(--ok-bg); color: var(--ok); }
.modal--err .modal__icon { background: var(--brand-bg); color: var(--err); }
.modal__title { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
.modal__body  { color: var(--text-secondary); }
.modal__ok    { margin-top: 8px; min-width: 128px; }

/* ── copy toast ──────────────────────────────────────────── */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-primary);
  background: var(--color-bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  box-shadow: 0 12px 28px -8px rgba(16,24,40,.24);
  animation: toastIn .28s var(--ease-out);
}
.toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
}
.toast--err .toast__icon { background: var(--brand-bg); color: var(--err); }
.toast__icon svg { width: 13px; height: 13px; }
.toast__text { min-width: 0; }
.toast__text b { font-weight: 600; }
.toast.is-out { animation: toastOut .22s var(--ease-soft) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) scale(.98); } }


/* ── orange plate + artwork ──────────────────────────────── */
.stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.stage--hero { aspect-ratio: 1200 / 536; }
.stage--cta  { aspect-ratio: 1200 / 775; justify-content: center; }

.stage__plate {
  width: 100%;
  border-radius: var(--r-plate);
  background: var(--primary);
}
.stage--hero .stage__plate { height: 74.81%; }
.stage--cta  .stage__plate { height: 46.06%; }

.stage__art { position: absolute; height: auto; }
.stage--hero .stage__art { bottom: 0; left: 50%; width: 83.58%; transform: translateX(-50%); }
.stage--cta  .stage__art { top: 2.98%; left: 9.07%; width: 80.77%; }

/* ═══════════════ CARDS ═══════════════ */
.cards { display: grid; gap: 24px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: var(--color-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  background: var(--surface-muted);
  border-radius: var(--r-lg);
}
.card__media--pad  { padding: 24px; }
.card__media--crop { padding: 24px 24px 0; overflow: hidden; }

.card__shot--qr {
  width: 200px; height: 200px;
  object-fit: contain;
  background: #fff;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
}
.card__shot--phone {
  width: 242px;
  height: 296px;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--sh-lg);
  align-self: flex-end;
}
.card__shot--wide {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.card__text { display: flex; flex-direction: column; gap: 12px; }
.card__title { font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.card__desc  { font-size: 15px; color: var(--text-secondary); }
.card__ps {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ═══════════════ FEATURE MATRIX ═══════════════ */
.matrix { display: flex; flex-direction: column; gap: 64px; }
.matrix__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.feat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  transition: transform .4s var(--ease-out);
}
.feat:hover .feat__icon { transform: translateY(-3px) scale(1.06); }
.feat__icon picture { display: contents; }
.feat__icon img { width: 32px; height: 32px; }
.feat__title { font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.feat__desc  { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

/* ── source citations ────────────────────────────────────── */
.cite { margin-left: 2px; font-size: .68em; line-height: 0; }
.cite a {
  padding: 0 1px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: color .2s var(--ease-soft), background-color .2s var(--ease-soft);
}
.cite a:hover { background: var(--brand-bg); }

/* ═══════════════ ČESTA PITANJA ═══════════════ */
.faq {
  border-top: 1px solid var(--card-border);
}
.faq__item {
  border-bottom: 1px solid var(--card-border);
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease-soft);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--primary); }

.faq__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-secondary);
  transition: transform .34s var(--ease-out), background-color .25s var(--ease-soft), color .25s var(--ease-soft);
}
.faq__mark svg { width: 16px; height: 16px; }
.faq__item[open] .faq__mark {
  transform: rotate(180deg);
  background: var(--brand-bg);
  color: var(--primary);
}

.faq__a {
  padding: 0 60px 24px 4px;
  color: var(--text-secondary);
}
.faq__item[open] .faq__a { animation: faqOpen .4s var(--ease-out); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.faq__contact {
  margin-top: 32px;
  text-align: center;
  color: var(--text-secondary);
}
.faq__contact a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ═══════════════ SHOWCASE ═══════════════ */
.showcase {
  display: flex;
  align-items: stretch;
  min-height: 580px;
  background: var(--color-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.showcase__list {
  display: flex;
  flex-direction: column;
  width: 405px;
  flex: none;
  background: var(--color-bg);
  border-right: 1px solid var(--card-border);
}

/* Gallery chrome belongs to the phone layout only. */
.pager__arrow, .showcase__dots { display: none; }
.showcase__frame { display: flex; flex: 1; min-width: 0; }

.ftab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 24px 24px 32px;
  border: 0;
  border-top: 1px solid var(--card-border);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .3s var(--ease-soft);
}
.ftab:first-child { border-top: 0; }
.ftab:hover { background: var(--surface-hover); }
.ftab::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .4s var(--ease-out);
}
.ftab.is-active::before { transform: scaleY(1); }
.ftab.is-active { padding-left: 28px; background: var(--color-bg); }

.ftab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--section-bg);
  color: var(--text-primary);
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft), transform .4s var(--ease-out);
}
.ftab__icon svg { width: 20px; height: 20px; }
.ftab.is-active .ftab__icon {
  background: var(--brand-bg);
  color: var(--primary);
  transform: scale(1.05);
}

.ftab__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ftab__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--text-primary);
}
.ftab__desc { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.ftab__desc-i { display: block; }

.ftab__chev {
  flex: none;
  width: 16px; height: 16px;
  color: var(--text-secondary);
  transition: transform .35s var(--ease-out), color .3s var(--ease-soft);
}
.ftab__chev svg { width: 16px; height: 16px; }
.ftab.is-active .ftab__chev { color: var(--primary); transform: translateX(3px); }

.showcase__canvas {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 48px;
  background: var(--section-bg);
  overflow: hidden;
}

.shot {
  position: absolute;
  inset: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.shot.is-current { opacity: 1; pointer-events: auto; }
.shot[hidden] { display: none; }

.shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 6px;
}
.shot > img:not(.shot__tall) { box-shadow: var(--sh-md); }
.shot img.shot__tall {
  height: 100%;
  width: auto;
  border-radius: 0;
  filter: drop-shadow(0 18px 30px rgba(16,24,40,.14));
}

/* Directional slide: forward through the list moves the art left,
   stepping back brings it in from the left. Exits are quicker
   than entrances so the new panel leads.                        */
.shot.entering {
  transition:
    opacity   .42s var(--ease-soft) .06s,
    transform .58s var(--ease-out)  .06s;
}
.shot.leaving {
  transition:
    opacity   .24s var(--ease-soft),
    transform .32s var(--ease-soft);
}
.shot.from-right { transform: translateX(52px) scale(.985); opacity: 0; }
.shot.from-left  { transform: translateX(-52px) scale(.985); opacity: 0; }
.shot.to-left    { transform: translateX(-44px) scale(.985); opacity: 0; }
.shot.to-right   { transform: translateX(44px) scale(.985); opacity: 0; }

/* ═══════════════ CTA ═══════════════ */
.section--cta { padding-bottom: var(--section-y); }
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.cta__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  max-width: 720px;
}
.cta__sub { max-width: 640px; color: var(--text-secondary); }

/* ═══════════════ FOOTER ═══════════════ */
.footer {
  padding: 0;
}
/* Full-bleed like the navbar: same horizontal padding, edge-to-edge hairline. */
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 40px 64px 56px;
  border-top: 1px solid var(--hairline);
}
.footer__logo img { width: 104px; height: auto; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__nav a {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color .2s var(--ease-soft);
}
.footer__nav a:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(234,92,36,.6);
}
.footer__meta { font-size: 13px; color: var(--text-secondary); }

/* ═══════════════ LIGHTBOX (phone) ═══════════════ */
.showcase__zoom { display: none; }

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0e0d0c;
  color: #fff;
  overflow: hidden;
}
.lightbox::backdrop { background: #0e0d0c; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox[open] { animation: lbIn .28s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 64px 6px 92px;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  animation: lbImg .34s var(--ease-out);
}
@keyframes lbImg { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.lightbox__caption {
  flex: none;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255,255,255,.72);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease-soft), transform .18s var(--ease-out), opacity .2s var(--ease-soft);
}
.lightbox__close:active,
.lightbox__nav:active { transform: scale(.92); }
.lightbox__close { top: 16px; right: 16px; width: 42px; height: 42px; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav { bottom: 22px; width: 46px; height: 46px; }
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav--prev { left: calc(50% - 60px); }
.lightbox__nav--next { left: calc(50% + 14px); }
.lightbox__nav[disabled] { opacity: .28; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── laptop ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  :root { --side-margin: 64px; --section-y: 120px; }
  .navbar__inner { padding: 18px 40px; }
  .footer__inner { padding: 40px 40px 48px; }
}

/* ── tablet: tabs become a scrolling strip above the art ──── */
@media (max-width: 1024px) {
  :root { --side-margin: 40px; --section-y: 104px; --section-gap: 40px; }
  .navbar__inner { padding: 16px 24px; }
  .footer__inner { padding: 36px 24px 44px; }

  .head--wide { margin-bottom: 48px; }

  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 > :last-child { grid-column: 1 / -1; max-width: calc(50% - 12px); justify-self: center; }

  .matrix { gap: 48px; }
  .matrix__row { gap: 40px 32px; }

  .showcase { flex-direction: column; min-height: 0; }
  .showcase__list {
    width: 100%;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--card-border);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .showcase__list::-webkit-scrollbar { display: none; }
  .ftab {
    flex: 0 0 auto;
    width: 260px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border-top: 0;
    border-left: 1px solid var(--card-border);
    scroll-snap-align: center;
  }
  .ftab:first-child { border-left: 0; }
  .ftab.is-active { padding-left: 20px; }
  .ftab::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; transform: scaleX(0); }
  .ftab.is-active::before { transform: scaleX(1); }
  .ftab__chev { display: none; }
  .ftab__title { font-size: 16px; line-height: 1.3; }
  .ftab__desc { font-size: 14px; }

  .showcase__frame { flex: none; width: 100%; }
  .showcase__canvas { padding: 32px; aspect-ratio: 4 / 3; }
  .shot { inset: 32px; }
}

/* ── large phone ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --side-margin: 24px; --section-y: 80px; --section-gap: 32px; }

  .navbar__inner { padding: 14px 20px; position: relative; }
  .footer__inner { padding: 32px 20px 40px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 20px;
    left: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    background: var(--color-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .22s var(--ease-soft), transform .3s var(--ease-out);
  }
  .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-link { padding: 12px 14px; border-radius: 10px; font-size: 15px; }

  .section--hero { padding-top: 32px; }
  .hero { gap: 36px; }

  .signup { flex-direction: column; align-items: stretch; width: 100%; }
  .signup-block { align-self: stretch; width: 100%; }
  .field { width: 100%; gap: 6px; }
  .field__label { font-size: 14px; }
  .input { height: 52px; padding: 12px 16px; border-radius: 14px; }
  /* 16px keeps iOS from zooming the page when the field is focused. */
  .input input { font-size: 16px; }
  .btn { width: 100%; height: 52px; font-size: 15px; border-radius: 14px; }

  /* The device art carries the page; give it real size on a phone. */
  .stage--hero { aspect-ratio: 1200 / 700; }
  .stage--hero .stage__plate { height: 62%; }
  .stage--hero .stage__art { width: 100%; }
  .stage--cta { aspect-ratio: 1200 / 940; }
  .stage--cta .stage__plate { height: 36%; }
  .stage--cta .stage__art { width: 100%; left: 0; }

  .cards--3, .cards--2 { grid-template-columns: 1fr; }
  .cards--3 > :last-child { grid-column: auto; max-width: none; }

  .card__media { height: 260px; }
  .card__shot--qr { width: 169px; height: 169px; }
  .card__shot--phone { width: 200px; height: 236px; }

  .matrix { gap: 40px; }
  .matrix__row { grid-template-columns: 1fr; gap: 40px; }

  .card__ps { font-size: 14px; margin-top: 8px; }

  .faq__q { padding: 18px 2px; font-size: 16px; gap: 14px; }
  .faq__a { padding: 0 42px 20px 2px; font-size: 14px; }

  /* ── the showcase becomes a plain gallery ─────────────────
     No card and no shadow: the caption is plain text above,
     the artwork sits on a tinted rounded panel, and the
     arrows flank it.                                         */
  .showcase {
    display: block;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .showcase__list {
    display: block;
    width: 100%;
    padding: 0 0 20px;
    background: transparent;
    border: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Only the current caption is shown; the arrows drive it. */
  .ftab { display: none; }
  .ftab.is-active {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    cursor: default;
    pointer-events: none;
    scroll-snap-align: none;
    animation: ftabIn .4s var(--ease-out);
  }
  @keyframes ftabIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  .ftab::before,
  .ftab__chev,
  .ftab__icon { display: none; }
  .ftab__text  { display: block; }
  .ftab__title {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.012em;
    text-wrap: balance;
  }
  .ftab__desc {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
  }

  .showcase__frame { position: relative; display: block; width: 100%; }

  .showcase__canvas {
    padding: 18px;
    aspect-ratio: 4 / 3;
    background: var(--section-bg);
    border-radius: var(--r-xl);
    box-shadow: none;
    cursor: zoom-in;
    touch-action: pan-y;          /* horizontal swipes are ours */
  }

  /* Tapping the panel opens the image full screen. */
  .showcase__zoom {
    position: absolute;
    right: 12px; bottom: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--overlay-soft);
    color: var(--text-secondary);
    pointer-events: none;
  }
  .showcase__zoom svg { width: 15px; height: 15px; }
  .shot { inset: 18px; }
  .shot > img { box-shadow: none; }
  .shot img.shot__tall { filter: none; }

  .pager__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin-top: -20px;
    padding: 0;
    background: var(--color-bg);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft),
                transform .18s var(--ease-out), opacity .25s var(--ease-soft);
  }
  .pager__arrow svg { width: 18px; height: 18px; }
  .pager__arrow--prev { left: 10px; }
  .pager__arrow--next { right: 10px; }
  .pager__arrow:active { transform: scale(.92); }
  .pager__arrow[disabled] { opacity: 0; pointer-events: none; }

  .showcase__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 16px 0 0;
    background: transparent;
  }
  .dot {
    position: relative;
    width: 30px; height: 26px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .dot::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 7px;
    transform: translate(-50%, -50%);
    border-radius: 99px;
    background: var(--dot-idle);
    transition: width .32s var(--ease-out), background-color .3s var(--ease-soft);
  }
  .dot.is-active::after { width: 22px; background: var(--primary); }

  .cta { gap: 32px; }
  .footer__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ── small phone ─────────────────────────────────────────── */
@media (max-width: 420px) {
  :root { --side-margin: 18px; }
  .navbar__logo img { width: 104px; }
  .card { padding: 16px; }
  .card__media { height: 230px; padding: 18px; }
  .card__media--crop { padding: 18px 18px 0; }
  .eyebrow { font-size: 13px; letter-spacing: 2.4px; }
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal],
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  [data-words] .w { opacity: 1; transform: none; }
  .js .stage--seq .stage__plate { clip-path: none; }
  .js .stage--seq .stage__art,
  .js .hero .lead,
  .js .hero .signup-block { opacity: 1; }
  .js .stage--hero .stage__art { transform: translateX(-50%); }
  .js .stage--cta .stage__art,
  .js .hero .lead,
  .js .hero .signup-block { transform: none; }
  .shot.from-right, .shot.from-left,
  .shot.to-left, .shot.to-right { transform: none; }
}