/* Бюро Знахідок — landing page.
   Display type is interpolated between the 390px and 1240px artboards with
   clamp(), the same linear ramp the design handoff specifies. */

:root {
  --cream: #faf0ea;
  --surface: #fff;
  --ink: #2a2128;
  --ink-2: #6f6258;
  --muted: #a89383;
  --line: #e6d7cb;

  --berry: #9b2d5e;
  --berry-light: #c04d7e;
  --berry-dark: #7a2049;
  --berry-50: #f6e0ea;
  --berry-25: #fbe7ef;
  --berry-10: #fcf1f5;
  --berry-line: #ebd8df;

  --mint: #2e9e76;
  --mint-light: #3fb58b;
  --mint-dark: #136b47;
  --mint-50: #ddf2ea;
  --mint-25: #e2f3ea;
  --mint-10: #eaf6f0;
  --mint-line: #d5e8dd;

  --teal: #0b6e77;
  --teal-50: #d6eef1;
  --teal-25: #e0f0f3;
  --teal-line: #d2e4e7;
  --safety-line: #d6e7df;

  --amber: #b0700f;
  --amber-light: #d79a2b;

  --phone: #1f1f1f;
  --screen: #161016;

  --grad-cta: linear-gradient(115deg, #9b2d5e 0%, #c04d7e 55%, #3fb58b 190%);
  --shadow-card: 0 18px 36px rgba(90, 26, 56, 0.1);
  --shadow-pill: 0 2px 8px rgba(90, 26, 56, 0.06);
  --shadow-pill-hover: 0 10px 20px rgba(90, 26, 56, 0.12);
  --shadow-phone: 0 30px 60px rgba(90, 26, 56, 0.22);
  --shadow-button: 0 6px 16px rgba(155, 45, 94, 0.24);
  --shadow-chip: 0 8px 18px rgba(155, 45, 94, 0.22);

  --container: 1200px;
  --gutter: 20px;
  --header-h: 69px;

  /* fluid type: small at 390px, big at 1240px */
  --fs-hero-word: clamp(52px, calc(52px + 118 * (100vw - 390px) / 850), 170px);
  --fs-h1: clamp(19px, calc(19px + 5 * (100vw - 390px) / 850), 24px);
  --lh-h1: clamp(27px, calc(27px + 5 * (100vw - 390px) / 850), 32px);
  --fs-h2: clamp(30px, calc(30px + 26 * (100vw - 390px) / 850), 56px);
  --lh-h2: clamp(36px, calc(36px + 22 * (100vw - 390px) / 850), 58px);
  --fs-about: clamp(38px, calc(38px + 34 * (100vw - 390px) / 850), 72px);
  --lh-about: clamp(42px, calc(42px + 32 * (100vw - 390px) / 850), 74px);
  --fs-cta: clamp(32px, calc(32px + 32 * (100vw - 390px) / 850), 64px);
  --lh-cta: clamp(38px, calc(38px + 28 * (100vw - 390px) / 850), 66px);
  --fs-lead: clamp(18px, calc(18px + 4 * (100vw - 390px) / 850), 22px);
  --lh-lead: clamp(26px, calc(26px + 6 * (100vw - 390px) / 850), 32px);
  --fs-lead-xl: clamp(20px, calc(20px + 6 * (100vw - 390px) / 850), 26px);
  --lh-lead-xl: clamp(29px, calc(29px + 7 * (100vw - 390px) / 850), 36px);
  --fs-step-num: clamp(48px, calc(48px + 24 * (100vw - 390px) / 850), 72px);
  --fs-step: clamp(22px, calc(22px + 8 * (100vw - 390px) / 850), 30px);
  --lh-step: clamp(28px, calc(28px + 8 * (100vw - 390px) / 850), 36px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Every in-page target sits under the sticky header, so it has to clear it.
   --header-h starts at the design's 69px and is replaced with the measured
   height at runtime — on a narrow screen the wordmark wraps and the header
   grows past 69px. */
section[id] {
  scroll-margin-top: var(--header-h);
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--berry);
  text-decoration: none;
}

a:hover {
  color: var(--berry-dark);
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  display: block;
  flex: none;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 88px var(--gutter) 0;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.h2 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 800;
  letter-spacing: -2px;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--surface);
  border-radius: 0 0 12px 0;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 240, 234, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  min-height: 44px;
}

.brand:hover {
  color: var(--ink);
}

.brand-name {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.brand-name em {
  font-style: normal;
  color: var(--berry);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  display: none;
  padding: 10px 4px;
  margin: 0 10px;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  background-image: linear-gradient(var(--berry), var(--berry));
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 9px);
  background-size: 0% 2px;
  transition: color 150ms ease, background-size 150ms ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--ink);
  background-size: 100% 2px;
}

.btn-install {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--grad-cta);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--shadow-button);
  transition: filter 150ms ease, transform 150ms ease;
}

.btn-install:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
}

.hero-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px var(--gutter) 24px;
}

.hero-kicker {
  font-size: 13px;
  color: var(--berry);
}

.hero-word {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-hero-word);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.042em;
  color: var(--ink);
}

/* Both taglines are stacked in one grid cell so the two hero layers keep the
   same height no matter how the copy wraps — that is what keeps the light and
   dark twins aligned pixel for pixel without a resize script. */
.hero-tail {
  display: grid;
}

.hero-tail > * {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  margin: 22px 0 0;
  max-width: 660px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.hero-sub {
  margin: 10px 0 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 26px;
  color: var(--ink-2);
}

.hero-layer--light .hero-tail-dark,
.hero-layer--dark .hero-tail-light {
  visibility: hidden;
}

.hero-layer--dark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #120d13 0%, #161016 55%, #1a1219 100%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 190px at 50% 38%, #000 0 97%, transparent 100%);
  mask-image: radial-gradient(circle 190px at 50% 38%, #000 0 97%, transparent 100%);
}

/* The city SVG is absolutely positioned, so the copy needs its own stacking
   context — otherwise the illustration paints over "Знайдено". */
.hero-layer--dark .hero-center {
  position: relative;
  z-index: 1;
}

.hero-layer--dark .hero-kicker {
  color: #4fc79b;
}

.hero-layer--dark .hero-word {
  color: #4fc79b;
}

.hero-layer--dark .hero-title {
  color: #f6eef2;
}

.hero-layer--dark .hero-sub {
  margin-top: 8px;
  color: #b5a4ad;
}

.hero-ring {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 999px;
  border: 1.5px solid rgba(155, 45, 94, 0.55);
  pointer-events: none;
}

.hero-ring span {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 999px;
  opacity: 0.9;
}

.hero-ring span:first-child {
  top: -12px;
  background: var(--berry-light);
}

.hero-ring span:last-child {
  bottom: -12px;
  background: var(--mint-light);
}

.hero-bar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 var(--gutter) 40px;
}

/* Spacer twin: same box, no ink — keeps the dark layer's centred block at the
   exact height of the light one. */
.hero-bar--ghost {
  visibility: hidden;
  flex: none;
}

/* Two equal columns sized by the wider label, so both store buttons match. The
   grid is fit-content, so it never stretches past its content. */
.store-row,
.cta-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: fit-content;
}

.store-row {
  margin: 0 auto;
  animation: fadeUp 300ms 150ms both;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--phone);
  color: #fff;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.store-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(90, 26, 56, 0.24);
}

.store-btn .icon {
  font-size: 28px;
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.store-btn-text span:first-child {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.78;
}

.store-btn-text span:last-child {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.hero-note {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink-2);
}

.hero-hint {
  font-size: 12px;
  color: var(--muted);
}

/* --------------------------------------------------------------- про нас */

.about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-title {
  margin: 0;
  font-size: var(--fs-about);
  line-height: var(--lh-about);
  font-weight: 800;
  letter-spacing: -2.6px;
  text-transform: uppercase;
}

.about-title span:first-child {
  color: var(--berry);
}

.about-title span:last-child {
  color: var(--mint);
}

.rule {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rule i {
  width: 46px;
  height: 3px;
  border-radius: 999px;
}

.rule i:first-child {
  background: linear-gradient(90deg, rgba(155, 45, 94, 0), #9b2d5e);
}

.rule i:last-child {
  background: linear-gradient(90deg, #2e9e76, rgba(46, 158, 118, 0));
}

.rule b {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--berry-light);
}

.about-lead {
  margin: 26px 0 0;
  max-width: 760px;
  font-size: var(--fs-lead-xl);
  line-height: var(--lh-lead-xl);
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.about-text {
  margin: 16px 0 0;
  max-width: 720px;
}

.about-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  border-radius: 24px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.about-item--berry {
  background: linear-gradient(150deg, #fff 45%, #fcf1f5 100%);
  border: 1px solid var(--berry-line);
}

.about-item--mint {
  background: linear-gradient(150deg, #fff 45%, #eaf6f0 100%);
  border: 1px solid var(--mint-line);
}

.about-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.about-badge {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 34px;
}

.about-badge--berry {
  background: linear-gradient(150deg, #fbe7ef, #fff);
  border: 1px solid var(--berry-line);
  color: var(--berry);
}

.about-badge--mint {
  background: linear-gradient(150deg, #e2f3ea, #fff);
  border: 1px solid var(--mint-line);
  color: var(--mint);
}

.about-item h3 {
  margin: 20px 0 8px;
  font-size: 14px;
  letter-spacing: 0.8px;
}

.about-item--berry h3 {
  color: var(--berry);
}

.about-item--mint h3 {
  color: var(--mint);
}

.about-item p {
  margin: 0;
  color: var(--ink-2);
}

/* --------------------------------------------------- як це працює (sticky) */

/* The section pins itself and plays three slides before the page moves on.
   The track is the scroll distance that drives it: one screen per step. */
.steps-track {
  height: 300svh;
  padding-bottom: 0;
}

.steps-pin {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
}

.showcase {
  margin-top: 32px;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 72px;
  align-items: center;
}

.showcase-col {
  height: 100%;
  display: flex;
}

.showcase-sticky {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.phone {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: var(--phone);
}

.phone-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 760 / 1645;
  background: var(--screen);
}

.phone-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Its own size, not the stage's. The second term only bites on a short
   viewport, where it shrinks the phone — keeping the ratio — instead of
   letting it overflow the pinned area. */
.phone--lg {
  width: 100%;
  max-width: min(350px, calc((100svh - var(--header-h) - 180px) * 0.462));
  border-radius: 48px;
  padding: 10px;
  box-shadow: var(--shadow-phone);
}

.phone--lg .phone-screen {
  border-radius: 38px;
}

.phone--lg .phone-screen img {
  opacity: 0;
  transition: opacity 250ms ease;
}

.phone--lg .phone-screen img.is-on {
  opacity: 1;
}

.dots {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dots i {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background 250ms ease;
}

.dots i.is-on {
  background: var(--berry);
}

/* The three cards are stacked in one grid cell, so the box keeps the height of
   the tallest and only the active card is painted. All three stay in the
   accessibility tree — opacity hides them from the eye, not from a reader. */
.steps {
  display: grid;
  align-items: center;
}

.step {
  grid-area: 1 / 1;
  padding: 36px;
  border-radius: 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.step.is-on {
  opacity: 1;
  transform: none;
}

.step:nth-child(1) {
  background: linear-gradient(135deg, #fff 50%, #fbe7ef 100%);
  border: 1px solid var(--berry-line);
}

.step:nth-child(2) {
  background: linear-gradient(135deg, #fff 50%, #e2f3ea 100%);
  border: 1px solid var(--mint-line);
}

.step:nth-child(3) {
  background: linear-gradient(135deg, #fff 50%, #e0f0f3 100%);
  border: 1px solid var(--teal-line);
}

.step-num {
  display: block;
  font-size: var(--fs-step-num);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.step:nth-child(1) .step-num {
  color: var(--berry-50);
}

.step:nth-child(2) .step-num {
  color: var(--mint-50);
}

.step:nth-child(3) .step-num {
  color: var(--teal-50);
}

.step h3 {
  margin: 12px 0 10px;
  font-size: var(--fs-step);
  line-height: var(--lh-step);
  font-weight: 800;
  letter-spacing: -0.8px;
}

.step p {
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 27px;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ можливості */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.features {
  margin-top: 40px;
}

.feature {
  padding: 28px;
  background: linear-gradient(150deg, #fff 45%, #fcf1f5 100%);
  border: 1px solid var(--berry-line);
  border-radius: 24px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.chip {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #fff;
  font-size: 24px;
}

.chip--berry {
  background: linear-gradient(135deg, #9b2d5e, #c04d7e);
  box-shadow: var(--shadow-chip);
}

.chip--mint {
  background: linear-gradient(135deg, #2e9e76, #3fb58b);
  box-shadow: 0 8px 18px rgba(46, 158, 118, 0.24);
}

.chip--teal {
  background: linear-gradient(135deg, #0b6e77, #2e9e76);
  box-shadow: 0 8px 18px rgba(11, 110, 119, 0.22);
}

.chip--amber {
  background: linear-gradient(135deg, #b0700f, #d79a2b);
  box-shadow: 0 8px 18px rgba(176, 112, 15, 0.22);
}

.feature h3 {
  margin: 14px 0 8px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.feature p {
  margin: 0;
  color: var(--ink-2);
}

/* ------------------------------------------------------ стрічка/плитка/карта */

.views {
  margin-top: 44px;
  gap: 24px;
}

.view {
  padding: 30px 30px 0;
  border-radius: 28px;
  overflow: hidden;
}

.view:nth-child(1) {
  background: linear-gradient(175deg, #fbe7ef 0%, #fff 62%);
  border: 1px solid var(--berry-line);
}

.view:nth-child(2) {
  background: linear-gradient(175deg, #e2f3ea 0%, #fff 62%);
  border: 1px solid var(--mint-line);
}

.view:nth-child(3) {
  background: linear-gradient(175deg, #e0f0f3 0%, #fff 62%);
  border: 1px solid var(--teal-line);
}

.view h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.view p {
  margin: 0;
  color: var(--ink-2);
}

.phone--sm {
  margin: 26px auto -70px;
  max-width: 250px;
  border-radius: 34px;
  padding: 8px;
}

.phone--sm .phone-screen {
  border-radius: 27px;
}

.view:nth-child(1) .phone--sm {
  box-shadow: 0 24px 44px rgba(90, 26, 56, 0.2);
}

.view:nth-child(2) .phone--sm {
  box-shadow: 0 24px 44px rgba(19, 107, 71, 0.18);
}

.view:nth-child(3) .phone--sm {
  box-shadow: 0 24px 44px rgba(11, 110, 119, 0.18);
}

/* --------------------------------------------------------------- безпека */

.safety {
  margin-top: 158px;
  background: linear-gradient(168deg, #ddf2ea 0%, #eaf6f0 46%, #faf0ea 100%);
}

.safety-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 88px var(--gutter);
}

.safety-head {
  max-width: 900px;
}

.safety-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--teal);
}

.safety-kicker .icon {
  font-size: 16px;
}

.safety .h2 {
  margin-top: 14px;
}

.safety-lead {
  margin: 16px 0 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
}

.safety-grid {
  margin-top: 48px;
}

.safety-card {
  padding: 26px;
  background: linear-gradient(155deg, #fff 50%, #eaf6f0 100%);
  border: 1px solid var(--safety-line);
  border-radius: 20px;
}

.safety-card .badge {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #0b6e77, #3fb58b);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 8px 18px rgba(11, 110, 119, 0.2);
}

.safety-card h3 {
  margin: 16px 0 8px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.safety-card p {
  margin: 0;
  color: var(--ink-2);
}

.safety-shots {
  margin-top: 40px;
  gap: 24px;
}

.safety-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.phone--md {
  width: 100%;
  max-width: 260px;
  border-radius: 36px;
  padding: 9px;
  box-shadow: 0 26px 50px rgba(11, 110, 119, 0.22);
}

.phone--md .phone-screen {
  border-radius: 28px;
}

.safety-shot span {
  font-size: 13px;
  color: var(--teal);
}

/* --------------------------------------------------------------- marquee */

.marquee-section {
  position: relative;
  padding: 88px 0 0;
  overflow: hidden;
}

.marquee-rows {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.marquee {
  display: flex;
  width: max-content;
  gap: 14px;
}

.marquee--left {
  animation: marqueeLeft 52s linear infinite;
}

.marquee--right {
  animation: marqueeRight 58s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  gap: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 8px;
  min-height: 56px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pill);
  white-space: nowrap;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pill-hover);
}

.pill i {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 20px;
}

.pill--berry i {
  background: var(--berry-50);
  color: var(--berry);
}

.pill--mint i {
  background: var(--mint-50);
  color: var(--mint-dark);
}

.pill span {
  font-size: 13px;
  color: var(--ink);
}

/* ------------------------------------------------------------------- FAQ */

/* align-items: start so an open answer stretches its own card, not the one
   next to it. */
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 21px;
  line-height: 29px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
  transition: background 150ms ease;
}

.faq-q:hover {
  background: var(--cream);
}

.faq-q i {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--berry-50);
  color: var(--berry);
  font-size: 18px;
  transition: transform 300ms ease;
}

.faq-q[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.faq-a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 300ms ease, opacity 300ms ease;
}

.faq-a.is-open {
  max-height: 320px;
  opacity: 1;
}

.faq-a p {
  margin: 0;
  padding: 0 26px 24px;
  font-size: 18px;
  line-height: 27px;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------- CTA */

.cta-section {
  padding: 88px var(--gutter) 0;
}

.cta {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 88px 56px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(118deg, #7a2049 0%, #9b2d5e 34%, #c04d7e 68%, #2e9e76 132%);
}

.cta-blobs {
  position: absolute;
  right: -120px;
  top: -140px;
  width: 720px;
  height: 520px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.cta-blobs i {
  position: absolute;
  top: 0;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.26;
}

.cta-blobs i:first-child {
  left: 0;
}

.cta-blobs i:last-child {
  left: 220px;
}

.cta-body {
  position: relative;
  max-width: 900px;
}

.cta h2 {
  margin: 0;
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
  font-weight: 800;
  letter-spacing: -2.6px;
  color: #fff;
}

.cta-lead {
  margin: 12px 0 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--berry-50);
}

.cta-row {
  margin-top: 32px;
}

.cta .store-btn {
  background: #fff;
  color: var(--phone);
}

.cta .store-btn:hover {
  color: var(--phone);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.cta .store-btn-text span:first-child {
  color: var(--ink-2);
  opacity: 1;
}

.cta-note {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--berry-50);
}

/* ---------------------------------------------------------------- footer */

.footer {
  margin-top: 88px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter) 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-about p {
  margin: 14px 0 20px;
  max-width: 340px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.footer .brand-name {
  font-size: 20px;
}

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 22px;
  transition: background 150ms ease, border-color 150ms ease;
}

.socials a:hover {
  color: var(--ink);
  background: var(--berry-50);
  border-color: var(--berry);
}

.footer-col h3 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-2);
}

.footer-col div {
  display: flex;
  flex-direction: column;
}

.footer-col a {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 15px;
}

.footer-legal {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
}

.footer-legal span {
  font-size: 12px;
  text-transform: none;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ animations */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes marqueeLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes revealIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------- the night city, hero ---
   Everything below drives the illustration under the lens: sky, chimneys and
   signs, then the figures walking the street and the detective the lens
   follows. All of it animates transform/opacity only. */

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 1;
  }
}

@keyframes shoot {
  0% {
    opacity: 0;
    transform: translate(1350px, 60px);
  }
  4% {
    opacity: 1;
  }
  16% {
    opacity: 0;
    transform: translate(900px, 240px);
  }
  100% {
    opacity: 0;
    transform: translate(900px, 240px);
  }
}

@keyframes cloudDrift {
  from {
    transform: translateX(-120px);
  }
  to {
    transform: translateX(120px);
  }
}

@keyframes smoke {
  0% {
    transform: translateY(0);
    opacity: 0.25;
  }
  100% {
    transform: translateY(-40px);
    opacity: 0;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

@keyframes neon {
  0%,
  100% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  94% {
    opacity: 0.35;
  }
  96% {
    opacity: 1;
  }
  98% {
    opacity: 0.6;
  }
}

@keyframes strollX {
  from {
    transform: translateX(-60px);
  }
  to {
    transform: translateX(1520px);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

@keyframes wag {
  0%,
  100% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(14deg);
  }
}

@keyframes carDrive {
  from {
    transform: translateX(1560px);
  }
  to {
    transform: translateX(-160px);
  }
}

@keyframes detectiveWalk {
  from {
    transform: translateX(-80px);
  }
  to {
    transform: translateX(calc(100vw + 40px));
  }
}

@keyframes detectiveBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes detectiveLegA {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(14deg);
  }
}

@keyframes detectiveLegB {
  0%,
  100% {
    transform: rotate(14deg);
  }
  50% {
    transform: rotate(-14deg);
  }
}

/* Scroll-driven and CSS-only: nothing starts at opacity 0, so a browser
   without the feature simply shows the content. */
@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: revealIn 250ms linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 20%;
  }

  [data-rdelay="60"] {
    animation-range: entry 8% cover 24%;
  }

  [data-rdelay="120"] {
    animation-range: entry 12% cover 28%;
  }

  [data-rdelay="180"] {
    animation-range: entry 16% cover 32%;
  }
}

/* ------------------------------------------------------- guide teasers */

/* Links into /dovidnyk/. A list rather than a row of divs: it is a navigation
   block, and the whole card is the link so the tap target is the card. */
.guide-links {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.guide-links a {
  height: 100%;
  display: block;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.guide-links a:hover {
  transform: translateY(-3px);
  border-color: var(--berry-line);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

.guide-links h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--berry);
}

.guide-links p {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  color: var(--ink-2);
}

.guide-all {
  margin: 24px 0 0;
}

.guide-all a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--berry);
}

/* ----------------------------------------------------------- breakpoints */

/* Six links plus the wordmark and the install button need ~1120px; below that
   they wrap onto two lines and the header grows. */
@media (min-width: 1120px) {
  .nav-link {
    display: inline-flex;
  }
}

/* A tablet keeps the pinned two-column stage, just tighter. */
@media (max-width: 1179px) {
  .showcase {
    grid-template-columns: minmax(0, 300px) 1fr;
    gap: 40px;
  }

  .step {
    padding: 28px;
  }
}

@media (max-width: 1100px) {
  .cta {
    padding: 64px 36px;
  }
}

@media (max-width: 979px) {
  .grid-3,
  .grid-4,
  .about-grid,
  .guide-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 899px) {
  .hero-hint {
    display: none;
  }
}

@media (max-width: 759px) {
  .grid-3,
  .grid-4,
  .about-grid,
  .footer-grid,
  .guide-links,
  .faq-list {
    grid-template-columns: 1fr;
  }

  /* Side by side is too narrow for both on a phone, and stacking them wastes
     the height the pin already reserves. So they share one cell: the phone
     hangs from the top left, the step sits at the bottom right, and each is
     wider than half the row because they overlap only where the other is not. */
  .showcase {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .showcase-col {
    grid-area: 1 / 1;
    height: auto;
    width: 64%;
    align-self: start;
    justify-self: start;
  }

  .showcase-sticky {
    gap: 12px;
  }

  /* A 200px phone needs a tighter corner than the 350px one. */
  .phone--lg {
    max-width: min(280px, calc((100svh - var(--header-h) - 165px) * 0.462));
    border-radius: 30px;
    padding: 7px;
  }

  .phone--lg .phone-screen {
    border-radius: 23px;
  }

  /* The card itself carries the step number, so the dots are redundant here. */
  .dots {
    display: none;
  }

  .steps {
    grid-area: 1 / 1;
    width: 66%;
    align-self: end;
    justify-self: end;
    z-index: 1;
  }

  .step {
    padding: 18px;
    box-shadow: 0 16px 32px rgba(90, 26, 56, 0.14);
  }

  .step-num {
    font-size: 34px;
    line-height: 0.9;
  }

  .step h3 {
    margin: 8px 0 6px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .step p {
    font-size: 15px;
    line-height: 22px;
  }

  .safety {
    margin-top: 88px;
  }

  .cta {
    padding: 48px 24px;
  }
}

/* Small phones: shrink the header so the wordmark stays on one line. */
@media (max-width: 419px) {
  .brand svg {
    width: 46px;
    height: 29px;
  }

  .brand-name {
    font-size: 16px;
  }

  .header-inner {
    gap: 12px;
  }

  .btn-install {
    margin-left: 0;
    padding: 0 16px;
    font-size: 14px;
  }

  .store-row,
  .cta-row {
    grid-template-columns: 1fr;
  }
}

/* Only a really short viewport — a phone on its side — gives up on the pinned
   stage; the phone scales with the viewport, so an ordinary short browser
   window still fits it. */
@media (max-height: 500px) {
  .steps-track {
    height: auto;
  }

  .steps-pin {
    position: static;
    height: auto;
    display: block;
    padding: 0;
  }

  .showcase {
    margin-top: 48px;
    display: block;
  }

  .showcase-col {
    height: auto;
    display: block;
  }

  .showcase-sticky {
    display: block;
  }

  .phone--lg {
    max-width: 300px;
    margin: 0 auto;
  }

  .dots {
    margin-top: 20px;
  }

  .steps {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .step {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}