/* ── OnTrack App case study (ontrack-app.html) ─────────────────────────
   Базується на класах кейсу Silpo OPD (.silpo-*) з custom/local.css.
   Тут лише нові блоки у стилі Pilo: великі заяви, bento, плаваючі картки.
   Оранжевий (--ota-accent) — тільки для інтерактиву.                     */

:root {
  --ota-accent: #ff7a1a;
  --ota-dim: #6f6c68;
  --ota-card: #1f1e1c;
  --ota-card-2: #262523;
  --ota-line: rgba(211, 211, 211, .18);
  --ota-light: #e6e5e1;
  --ota-light-card: #f4f3f0;
}

.ota-case { background-color: var(--black); }

/* ── Секції ── */
.ota-sec { padding-top: 7em; padding-bottom: 7em; background-color: var(--black); }
.ota-sec--light { background-color: var(--ota-light); color: var(--black); }
.ota-sec--light .text-size-large { color: var(--black); }
.ota-sec--tight { padding-top: 3.5em; }
.ota-sec:not(.ota-sec--light) + .ota-sec:not(.ota-sec--light):not(.ota-sec--break) { padding-top: 0; }
.ota-sec--light + .ota-sec--light { padding-top: 0; }

/* Заголовки h5 у кейсі — без стилю Webflow (League Gothic) */
.ota-case h5 { font-family: IBM Plex Sans, sans-serif; text-transform: none; letter-spacing: normal; line-height: 1.25; }
.ota-case .ota-mod-group h5, .ota-case .ota-cs h5 { letter-spacing: .06em; text-transform: uppercase; }

/* ── Чипи-мітки, як у Pilo ── */
.ota-chip {
  display: inline-block;
  padding: .7em 1.5em;
  border: 1px solid currentColor;
  border-radius: 99em;
  font-size: .95em;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}
.ota-chip-row { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }

/* ── Великі заяви ── */
.ota-statement {
  font-size: 3.6em;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0;
}
.ota-statement .dim { color: var(--ota-dim); }
.ota-sec--light .ota-statement .dim { color: #9a9894; }
.ota-statement--center { text-align: center; max-width: 18em; margin-left: auto; margin-right: auto; }

.ota-caption {
  font-size: .95em;
  line-height: 1.45;
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: 24em;
  margin: 0;
}
.ota-caption .dim { opacity: .5; }

/* ── Hero: заява + фото ── */
.ota-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 46em;
}
.ota-hero-split .ota-hero-text {
  display: flex;
  align-items: center;
  padding: 5em 4em 5em 10vw;
}
.ota-hero-split .ota-photo { border-radius: 0; min-height: 46em; }

/* ── Плейсхолдери екранів і фото ──
   data-src: скрипт унизу сторінки підставляє картинку, щойно файл з'явиться. */
.ota-shot {
  position: relative;
  aspect-ratio: 375 / 812;
  width: 100%;
  border-radius: 2.4em;
  background: var(--ota-card-2);
  border: .55em solid #0b0b0a;
  box-shadow: 0 2.5em 5em rgba(0, 0, 0, .35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ota-sec--light .ota-shot { box-shadow: 0 2.5em 5em rgba(0, 0, 0, .18); }
.ota-shot img, .ota-photo img, .ota-sheet img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.ota-ph-label {
  padding: 1.5em;
  text-align: center;
  font-size: .85em;
  line-height: 1.4;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8d8a85;
}
.ota-ph-label b { display: block; color: #cfcdc8; font-weight: 500; margin-bottom: .4em; }
.has-img .ota-ph-label { display: none; }

.ota-photo, .ota-sheet {
  position: relative;
  border-radius: 1.6em;
  overflow: hidden;
  background: linear-gradient(135deg, #2b2a27, #1a1917);
  display: flex; align-items: center; justify-content: center;
}
.ota-sheet { aspect-ratio: 16 / 9; }

/* ── Сцена: телефони + плаваючі картки ── */
.ota-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3em;
  margin-top: 4em;
}
.ota-stage .ota-shot { width: 19em; flex: 0 0 auto; }
.ota-stage--lg .ota-shot { width: 23em; }
.ota-stage--step .ota-shot:nth-child(2) { transform: translateY(-3em); }
.ota-stage-photo { position: relative; margin-top: 4em; }
.ota-stage-photo .ota-photo { aspect-ratio: 16 / 9; }

.ota-float {
  position: absolute;
  z-index: 2;
  min-width: 15em;
  padding: 1.2em 1.4em;
  border-radius: 1.2em;
  background: #0f0f0e;
  color: #f1f0ec;
  box-shadow: 0 1.8em 3.6em rgba(0, 0, 0, .35);
  font-size: 1em;
  line-height: 1.3;
}
.ota-float--light { background: #fff; color: var(--black); }
.ota-float small {
  display: block;
  font-size: .78em;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: .35em;
}
.ota-float strong { display: block; font-size: 1.25em; font-weight: 500; }
.ota-float .big { font-size: 2.6em; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.ota-float .dot {
  display: inline-block; width: .55em; height: .55em; border-radius: 50%;
  background: var(--ota-accent); margin-right: .5em; vertical-align: middle;
}
.ota-demo { font-size: .7em; letter-spacing: .05em; text-transform: uppercase; opacity: .45; margin-top: .6em; display: block; }

.pos-tl { top: 12%; left: 6%; }
.pos-tr { top: 10%; right: 6%; }
.pos-ml { top: 45%; left: 4%; }
.pos-mr { top: 48%; right: 4%; }
.pos-bl { bottom: 12%; left: 8%; }
.pos-br { bottom: 10%; right: 7%; }

/* Пуш-сповіщення */
.ota-push {
  display: flex; gap: 1em; align-items: center;
  min-width: 22em;
  background: rgba(30, 29, 27, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ota-push-icon {
  flex: 0 0 3.2em; height: 3.2em; border-radius: .8em;
  background: var(--ota-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: #111;
}

/* ── Заголовок блоку + текст (як .silpo-head) ── */
.ota-head { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.ota-head h4 { max-width: 6.6em; }
.ota-head p { line-height: 1.4; margin: 0; }
.ota-head p + p { margin-top: 1.4em; }
.ota-lead {
  font-size: 2.2em;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0 0 .7em;
}
.ota-kv { margin-top: 1.4em; }
.ota-kv dt { font-weight: 600; margin-top: 1em; }
.ota-kv dd { margin: .3em 0 0; line-height: 1.4; }

/* ── Модулі (3.1) ── */
.ota-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05em; margin-top: 4em; }
.ota-mod-group { border: 1px solid var(--ota-line); border-radius: 1.4em; padding: 2em; }
.ota-mod-group h5 { margin: 0 0 1.5em; font-size: 1.1em; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.ota-mod-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8em; }
.ota-mod {
  aspect-ratio: 1; border-radius: 1em; background: var(--ota-card-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .8em; color: #8d8a85;
}

/* ── Дослідження (4.1) ── */
.ota-research { display: grid; grid-template-columns: 5fr 7fr; gap: 3em; margin-top: 4em; }
.ota-insights { display: grid; gap: 1.05em; }
.ota-insight {
  position: relative;
  background: var(--ota-card);
  border-radius: 1.4em;
  padding: 1.8em 2em;
}
.ota-insight .num { color: var(--ota-dim); font-size: .95em; }
.ota-insight h5 { font-size: 1.5em; font-weight: 500; margin: .5em 0 .5em; line-height: 1.25; max-width: 16em; }
.ota-insight p { margin: 0; line-height: 1.45; color: #a9a6a1; max-width: 34em; }
.ota-insight .tag {
  position: absolute; top: 1.6em; right: 1.6em;
  padding: .45em .9em; border-radius: 99em; background: #2e2d2a;
  font-size: .8em; letter-spacing: .03em;
}
.ota-methods { margin-top: 2em; display: flex; flex-wrap: wrap; gap: .5em 1.2em; color: var(--ota-dim); font-size: .95em; text-transform: uppercase; letter-spacing: .04em; }

.ota-banner {
  margin-top: 3em;
  padding: 1.4em 2em;
  border-radius: 99em;
  background: #f1f0ec;
  color: var(--black);
  font-size: 1.3em;
  font-weight: 500;
}

/* ── Порівняння (5.1) ── */
.ota-compare { width: 100%; border-collapse: collapse; margin-top: 3em; font-size: 1.25em; }
.ota-compare th, .ota-compare td { text-align: left; padding: 1em 0; border-bottom: 1px solid rgba(21, 20, 19, .2); vertical-align: top; }
.ota-compare th { font-weight: 500; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.ota-compare td:first-child { opacity: .6; width: 22%; }
.ota-compare td:last-child { font-weight: 500; }

/* ── HMW (6.1) ── */
.ota-hmw { text-align: center; }
.ota-hmw .ota-statement { margin-top: .9em; }
.ota-btn {
  display: inline-block;
  margin-top: 2.2em;
  padding: 1.1em 2.2em;
  border-radius: 99em;
  background: var(--ota-accent);
  color: #111;
  font-size: 1.1em;
  font-weight: 500;
  text-decoration: none;
  transition: transform .2s ease;
}
.ota-btn:hover { transform: translateY(-2px); }

/* ── Масштаб (7.1) ── */
.ota-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ota-line); }
.ota-stat { padding: 2.4em 2em 0 0; }
.ota-stat + .ota-stat { padding-left: 2em; border-left: 1px solid var(--ota-line); }
.ota-stat .title-large { font-size: 8em; letter-spacing: -.02em; }
.ota-stat p { margin: 1em 0 0; line-height: 1.4; color: #a9a6a1; max-width: 11em; }

/* ── Bento (8.1) ── */
.ota-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05em; margin-top: 4em; }
.ota-tile {
  background: var(--ota-light-card);
  border-radius: 1.6em;
  padding: 2.4em;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 26em;
}
.ota-tile h5 { font-size: 1.9em; font-weight: 500; margin: 0 0 .5em; letter-spacing: -.01em; }
.ota-tile p { margin: 0; line-height: 1.45; font-size: 1.15em; max-width: 26em; }
.ota-tile .ota-sheet { margin-top: 2em; aspect-ratio: 16 / 7; }
.ota-tile--dark { background: #151413; color: #f1f0ec; }

/* Схема зони великого пальця (8.2) */
.ota-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: center; margin-top: 5em; }
.ota-duo .ota-shot { width: 21em; margin: 0 auto; }
.ota-duo-phones { display: flex; gap: 2em; justify-content: center; }
.ota-duo-phones .ota-shot { width: 17em; margin: 0; }
.ota-thumb { position: relative; width: 21em; margin: 0 auto; border-radius: 2.4em; overflow: hidden; }
.ota-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ── Сезони ── */
.ota-season { display: flex; justify-content: space-between; align-items: flex-start; gap: 3em; }
.ota-season .ota-statement { max-width: 12em; margin-top: .6em; }
.ota-cs { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; margin-top: 3.5em; }
.ota-cs h5 { margin: 0 0 .6em; font-size: .95em; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; opacity: .6; }
.ota-cs p { margin: 0; line-height: 1.45; font-size: 1.25em; }
.ota-cs p + p { margin-top: 1em; }

/* Діаграма навігатор vs OnTrack (9.2) */
.ota-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05em; margin-top: 4em; }
.ota-diagram figure { margin: 0; background: var(--ota-card); border-radius: 1.6em; padding: 2em; }
.ota-diagram svg { width: 100%; height: auto; display: block; }
.ota-diagram figcaption { margin-top: 1.2em; font-size: .95em; letter-spacing: .04em; text-transform: uppercase; color: #a9a6a1; line-height: 1.45; }

/* Шари ґрунту (9.4) */
.ota-soil-wrap { display: grid; grid-template-columns: auto 1fr; gap: 5em; align-items: center; margin-top: 4em; }
.ota-soil-wrap .ota-shot { width: 21em; }
.ota-soil { border-radius: 1.6em; overflow: hidden; }
.ota-soil-row { display: grid; grid-template-columns: 7em 1fr auto; align-items: center; gap: 1.5em; padding: 1.7em 2em; color: #f1f0ec; }
.ota-soil-row .depth { font-size: 1.1em; opacity: .75; }
.ota-soil-row .bar { height: .5em; border-radius: 99em; background: rgba(255, 255, 255, .18); position: relative; }
.ota-soil-row .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99em; background: rgba(255, 255, 255, .85); }
.ota-soil-row .val { font-size: 1.5em; font-weight: 500; min-width: 3.2em; text-align: right; }
.ota-soil-row.l0 { background: #8a7a63; color: #1b1a18; }
.ota-soil-row.l0 .bar { background: rgba(0, 0, 0, .15); } .ota-soil-row.l0 .bar i { background: #1b1a18; }
.ota-soil-row.l1 { background: #6b5b46; }
.ota-soil-row.l2 { background: #4e4133; outline: 2px solid var(--ota-accent); outline-offset: -2px; }
.ota-soil-row.l3 { background: #2f2821; }
.ota-soil-note { margin-top: 1.4em; }

/* Анатомія тривоги (10.2) */
.ota-alert { max-width: 44em; margin: 4em auto 0; background: #fff; border-radius: 1.6em; padding: 2em 2.4em; box-shadow: 0 2em 4em rgba(0,0,0,.12); color: var(--black); }
.ota-alert-top { display: flex; align-items: center; gap: .8em; font-size: 1.4em; font-weight: 500; }
.ota-alert-row { display: grid; grid-template-columns: 11em 1fr; padding: 1em 0; border-top: 1px solid rgba(21, 20, 19, .12); font-size: 1.15em; }
.ota-alert-top { padding-bottom: 1em; }
.ota-alert-row span:first-child { opacity: .55; }

/* ── Стани і варіанти (13) ── */
.ota-states { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4em; margin-top: 4em; }
.ota-states figure { margin: 0; }
.ota-states figcaption { margin-top: 1em; font-size: .9em; letter-spacing: .05em; text-transform: uppercase; opacity: .7; text-align: center; }
.ota-table { width: 100%; border-collapse: collapse; margin-top: 3em; font-size: 1.2em; }
.ota-table th, .ota-table td { text-align: left; padding: 1em 1em 1em 0; border-bottom: 1px solid var(--ota-line); vertical-align: top; line-height: 1.4; }
.ota-table th { font-size: .75em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.ota-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; margin-top: 3em; }
.ota-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; }
.ota-pair figure { margin: 0; }
.ota-pair figcaption { margin-top: 1em; font-size: .9em; letter-spacing: .05em; text-transform: uppercase; }
.ota-pair .was .ota-shot { opacity: .55; }
.ota-pair .was figcaption { text-decoration: line-through; opacity: .6; }
.ota-sub { margin-top: 5em; }
.ota-sub h5 { font-size: 1.6em; font-weight: 500; margin: 0; }

/* ── Фінал ── */
.ota-final { position: relative; }
.ota-final .ota-photo { border-radius: 0; aspect-ratio: 21 / 9; }
.ota-final .ota-ph-label { position: absolute; left: 10vw; bottom: 1.5em; text-align: left; padding: 0; }
.ota-final-text {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ota-final-text .ota-statement { color: #f1f0ec; text-align: center; max-width: 14em; text-shadow: 0 .1em 1em rgba(0,0,0,.35); }

.ota-link { color: var(--ota-accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ── Слоти, які ще треба заповнити (прибрати перед деплоєм) ── */
.ota-slot {
  background: rgba(255, 196, 0, .14);
  outline: 1px dashed #d8a700;
  border-radius: .25em;
  padding: 0 .2em;
}

/* ── Планшет ── */
@media screen and (max-width: 991px) {
  .ota-statement { font-size: 3em; }
  .ota-hero-split { grid-template-columns: 1fr; }
  .ota-hero-split .ota-hero-text { padding: 5em 10vw; }
  .ota-hero-split .ota-photo { min-height: 34em; }
  .ota-head { grid-template-columns: 1fr; row-gap: 1.5em; }
  .ota-head h4 { max-width: none; }
  .ota-research { grid-template-columns: 1fr; }
  .ota-stats { grid-template-columns: repeat(3, 1fr); }
  .ota-stat:nth-child(4) { padding-left: 0; border-left: 0; }
  .ota-states { grid-template-columns: repeat(3, 1fr); }
  .ota-pairs { grid-template-columns: 1fr; }
  .ota-soil-wrap { grid-template-columns: 1fr; }
  .ota-soil-wrap .ota-shot { margin: 0 auto; }
}

/* ── Мобільна ── */
@media screen and (max-width: 767px) {
  .ota-sec { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .ota-statement { font-size: 1.75rem; }
  .ota-lead { font-size: 1.4rem; }
  .ota-caption, .ota-chip { font-size: .75rem; }
  .ota-hero-split .ota-hero-text { padding: 3rem 1.25rem; }
  .ota-hero-split .ota-photo { min-height: 24rem; }

  .ota-shot { border-radius: 1.6rem; border-width: .35rem; }
  .ota-ph-label { font-size: .65rem; padding: .75rem; }

  .ota-stage {
    justify-content: flex-start;
    gap: 1rem;
    margin-left: -1.25rem; margin-right: -1.25rem;
    padding: 1rem 1.25rem 2rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ota-stage::-webkit-scrollbar { display: none; }
  .ota-stage .ota-shot, .ota-stage--lg .ota-shot { width: 13rem; }
  .ota-stage--step .ota-shot:nth-child(2) { transform: none; }
  .ota-stage .ota-float { display: none; }
  .ota-stage-photo .ota-float { font-size: .7rem; min-width: 0; }
  .ota-stage-photo .pos-tr { display: none; }
  .ota-push { min-width: 15rem; }
  .ota-float { font-size: .8rem; }

  .ota-modules { grid-template-columns: 1fr; }
  .ota-mod-grid { grid-template-columns: repeat(6, 1fr); gap: .4rem; }
  .ota-mod-group { padding: 1.25rem; }
  .ota-insight { padding: 1.25rem; }
  .ota-insight h5 { font-size: 1.1rem; padding-right: 0; margin-top: 2.2rem; }
  .ota-insight p { font-size: .95rem; }
  .ota-insight .tag { top: 1.1rem; right: auto; left: 3rem; }
  .ota-banner { border-radius: 1.2rem; font-size: 1rem; padding: 1rem 1.25rem; }
  .ota-compare, .ota-table { font-size: .95rem; }

  .ota-stats { grid-template-columns: 1fr 1fr; }
  .ota-stat, .ota-stat + .ota-stat { padding: 1.5rem 1rem 0 0; border-left: 0; }
  .ota-stat .title-large { font-size: 4rem; }
  .ota-stat p { font-size: .95rem; }

  .ota-bento { grid-template-columns: 1fr; }
  .ota-tile { min-height: 0; padding: 1.5rem; }
  .ota-tile h5 { font-size: 1.3rem; }
  .ota-tile p { font-size: 1rem; }

  .ota-duo { grid-template-columns: 1fr; gap: 2rem; }
  .ota-duo .ota-shot, .ota-thumb { width: 15rem; }
  .ota-duo-phones { gap: .75rem; }
  .ota-duo-phones .ota-shot { width: 10rem; }

  .ota-season { flex-direction: column; gap: 1rem; }
  .ota-cs { grid-template-columns: 1fr; gap: 1.5rem; }
  .ota-cs p { font-size: 1rem; }
  .ota-diagram { grid-template-columns: 1fr; }
  .ota-soil-wrap .ota-shot { width: 15rem; }
  .ota-soil-row { grid-template-columns: 4.5rem 1fr auto; padding: 1rem 1.1rem; gap: .8rem; }
  .ota-soil-row .val { font-size: 1.1rem; }
  .ota-alert { padding: 1.25rem; }
  .ota-alert-row { grid-template-columns: 7.5rem 1fr; font-size: .95rem; }

  .ota-states { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .ota-pair { gap: .75rem; }
  .ota-final .ota-photo { aspect-ratio: 4 / 5; }
}

/* Затемнення фінального фото під текст */
.ota-final .ota-photo.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); z-index: 1; }

/* Типи сповіщень */
.dot--red { background: #e5484d !important; }
.dot--yellow { background: #f5b83d !important; }
.dot--blue { background: #3e8ef7 !important; }
.ota-alert-top .dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; }
.ota-types { display: flex; gap: 1.6em; margin-top: 1.4em; font-size: 1.1em; }
.ota-types span { display: flex; align-items: center; gap: .5em; }
.ota-types .dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin: 0; }
.ota-btn--sm { margin-top: 1.4em; padding: .9em 1.8em; font-size: 1em; }

/* Дизайн-система */
.ota-sheet[data-src*="ds-map"] { aspect-ratio: 1898 / 766; }
.ota-ds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.05em; margin-top: 1.05em; }
.ota-ds-card { position: relative; aspect-ratio: 4 / 5; border-radius: 1.6em; overflow: hidden; background: #f1f0ec; display: flex; align-items: center; justify-content: center; }
.ota-ds-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ota-ds-cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.05em; margin-top: 1em; font-size: .9em; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.ota-tile .ota-sheet { background: transparent; }
.ota-tile .ota-sheet img { object-fit: cover; }
@media screen and (max-width: 767px) {
  .ota-ds, .ota-ds-cap { grid-template-columns: 1fr; }
  .ota-ds-cap { display: none; }
}

.ota-shot img { object-position: top center; }

/* ══ v3 — верстка за макетом Figma (.otf) ══════════════════════════ */
.otf { --otf-blue: #0f61c9; --otf-primary: #3e74b3; }
.otf .ota-btn.otf-btn { background: var(--otf-blue); color: #fff; }
.otf-hero { display: grid; grid-template-columns: 1095fr 825fr; min-height: 47em; background: var(--black); }
.otf-hero-text { display: flex; align-items: center; padding: 5em 4em 5em 10vw; }
.otf-hero-img { position: relative; overflow: hidden; }
.otf-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.otf-media img, .otf-row img, .otf-weather img, .otf-tile img, .otf-phone { display: block; width: 100%; height: auto; }
.otf-kv { border-radius: 1.6em; }
.otf-title {
  font-family: League Gothic, sans-serif; text-transform: uppercase; font-weight: 400;
  font-size: 4.3em; line-height: .95; letter-spacing: -.02em; margin: .5em 0 0; max-width: 8.5em; color: inherit;
}
.otf-title .dim { color: var(--ota-dim); }
.otf-row { margin-top: 3em; }
.otf-cap { margin: 2em auto 0 !important; text-align: center; }
.otf-stats { grid-template-columns: repeat(4, 1fr); }
.otf-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05em; margin-top: 4em; align-items: start; }
.otf-col { display: grid; gap: 1.05em; }
.otf-tile { min-height: 0; gap: 2em; }
.otf-tile img { margin-top: 2em; border-radius: 1em; }
.otf-duo { grid-template-columns: 1fr 1fr; }
.otf-phone { width: 21em !important; margin: 0 auto; }
.otf-weather { display: grid; grid-template-columns: 399fr 1040fr; gap: 6em; align-items: center; margin-top: 4em; }
.otf-weather-phone img { max-width: 21em; }
.otf-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: center; margin-top: 6em; }
.otf-row--half { margin-top: 0; }
.otf-call { display: block; margin-top: 1.6em; padding: 1.05em; border-radius: .6em; background: var(--otf-primary); color: #fff; text-align: center; font-weight: 500; font-size: 1.1em; }
.otf-float-blue { background: var(--otf-primary); color: #fff; }
.otf-ai-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; margin-top: .6em; align-items: start; }
.otf-ai-head .otf-title { margin-top: .3em; }
.otf-ai-head p { line-height: 1.4; margin: 0; }
.otf-ai-head p + p { margin-top: 1em; }
.otf .ota-pairs { margin-top: 3em; }
.otf-ds { margin-top: 3.1em; }

@media screen and (max-width: 991px) {
  .otf-hero { grid-template-columns: 1fr; }
  .otf-hero-text { padding: 4em 10vw; }
  .otf-hero-img { aspect-ratio: 1644 / 1792; }
  .otf-bento, .otf-duo, .otf-detail, .otf-ai-head { grid-template-columns: 1fr; }
  .otf-weather { grid-template-columns: 1fr 1.6fr; gap: 3em; }
  .otf-stats { grid-template-columns: 1fr 1fr; }
  .otf-stats .ota-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media screen and (max-width: 767px) {
  .otf-hero-text { padding: 3rem 1.25rem; }
  .otf-title { font-size: 3rem; max-width: none; }
  .otf-kv { border-radius: 1rem; }
  /* широкі ряди телефонів — свайп убік, під край екрана */
  .otf-row {
    margin-left: -1.25rem; margin-right: -1.25rem; margin-top: 2rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .otf-row::-webkit-scrollbar { display: none; }
  .otf-row img { width: auto; max-width: none; height: 30rem; }
  .otf-row--half img { height: 28rem; }
  .otf-weather { grid-template-columns: 1fr; gap: 2rem; }
  .otf-weather-phone img { max-width: 15rem; margin: 0 auto; }
  .otf-phone { width: 15rem !important; }
  .otf-detail { margin-top: 3rem; gap: 1.5rem; }
  .otf-tile img { margin-top: 1.25rem; }
  .otf-call { font-size: 1rem; }
  .otf-stats .ota-stat .title-large { font-size: 3.4rem; }
}

/* v4 — AI, rejected, design system */
.otf .ota-shot img { object-fit: cover; object-position: top center; }
.otf-scout { position: relative; flex: 0 0 auto; }
.otf-scout .ota-shot { width: 19em; }
.otf-robot { position: absolute; left: 50%; top: -5.2em; width: 7em !important; height: 7em !important; max-width: none; object-fit: contain; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 1em 1.5em rgba(0,0,0,.35)); }
.otf .otf-ai-stage { padding-top: 4em; }
.otf .ota-pair .was .ota-shot { opacity: 1; border-color: #8f8e8b; box-shadow: none; }
.otf .ota-pair .ota-shot { box-shadow: 0 1.5em 3em rgba(0,0,0,.12); }
.otf-ds { margin-top: 3.1em; border-radius: 1.6em; overflow: hidden; }
.otf-ds img { display: block; width: 100%; height: auto; }
@media screen and (max-width: 767px) {
  .otf-scout .ota-shot { width: 13rem; }
  .otf-robot { width: 4.5rem !important; height: 4.5rem !important; top: -3.2rem; }
  .otf .otf-ai-stage { padding-top: 3rem; }
  .otf-ds { border-radius: 1rem; margin-left: -1.25rem; margin-right: -1.25rem; overflow-x: auto; scrollbar-width: none; border-radius: 0; }
  .otf-ds img { width: auto; max-width: none; height: 26rem; }
}

/* v5 — iPhone-рамка як бордер ззовні зображення */
.otf .ota-shot {
  aspect-ratio: auto; display: block; border: 0;
  padding: .6em; background: #0b0b0a; border-radius: 3em;
}
.otf .ota-shot img {
  position: static; display: block; width: 100%; height: auto;
  border-radius: 2.45em; object-fit: initial;
}
.otf .ota-pair .was .ota-shot { background: #8f8e8b; }
.otf-duo-st { font-size: 2.6em; }
@media screen and (max-width: 767px) {
  .otf .ota-shot { padding: .4rem; border-radius: 1.9rem; }
  .otf .ota-shot img { border-radius: 1.5rem; }
  .otf-duo-st { font-size: 1.75rem; }
  .otf-row { padding-left: 1.25rem; padding-right: 1.25rem; }
  .otf-row img { height: 26rem; }
  .otf-cap { margin-top: 1rem !important; }
  .otf .ota-stage { margin-top: 1.5rem; padding-top: .5rem; }
  .otf .otf-ai-stage { padding-top: 3rem; margin-top: 1.5rem; }
  .otf .ota-cs { margin-top: 1.5rem; }
}

/* v6 — рамка iPhone прямо на зображенні (симетрична в усіх браузерах) */
.otf .ota-shot { padding: 0; background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.otf .ota-shot img {
  box-sizing: border-box; border: .6em solid #0b0b0a; border-radius: 3em;
  background: #0b0b0a; box-shadow: 0 2.5em 5em rgba(0,0,0,.35);
}
.otf .ota-sec--light .ota-shot img, .otf .ota-pair .ota-shot img { box-shadow: 0 2em 4em rgba(0,0,0,.14); }
.otf .ota-pair .was .ota-shot { background: none; }
.otf .ota-pair .was .ota-shot img { border-color: #8f8e8b; background: #8f8e8b; box-shadow: none; }

/* маскот: більший, нижче, погойдування */
.otf-robot { width: 8.5em !important; height: 8.5em !important; top: -4.6em; animation: otf-bob 3.2s ease-in-out infinite; }
@keyframes otf-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -.6em); } }
@media (prefers-reduced-motion: reduce) { .otf-robot { animation: none; } }

/* цифри без ліній */
.otf .ota-stats { border-top: 0; }
.otf .ota-stat + .ota-stat { border-left: 0; }

/* user research: менший відступ від чипа до заголовка */
.otf .ota-research { margin-top: 1.4em; }

@media screen and (max-width: 767px) {
  .otf .ota-shot img { border-width: .4rem; border-radius: 1.9rem; box-shadow: 0 1.2rem 2.4rem rgba(0,0,0,.3); }
  .otf-robot { width: 5.5rem !important; height: 5.5rem !important; top: -3rem; }
  @keyframes otf-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -.35rem); } }
  .otf .ota-research { margin-top: 1.25rem; }
  .otf .ota-stat, .otf .ota-stat + .ota-stat { padding-top: 1.5rem; }
}

/* v7 — рамка iPhone: чорна підкладка-обгортка, зображення всередині без бордера */
.otf .ota-shot,
.otf .ota-pair .ota-shot,
.otf .ota-stage .ota-shot {
  display: block; box-sizing: border-box; aspect-ratio: auto; height: auto;
  padding: .6em; border: 0; border-radius: 3em; overflow: hidden; line-height: 0;
  background: #0b0b0a; box-shadow: 0 2.5em 5em rgba(0,0,0,.35);
}
.otf .ota-sec--light .ota-shot, .otf .ota-pair .ota-shot { box-shadow: 0 2em 4em rgba(0,0,0,.14); }
.otf .ota-shot img,
.otf .ota-pair .ota-shot img {
  position: static; display: block; box-sizing: content-box;
  width: 100%; height: auto; max-width: 100%; aspect-ratio: auto;
  border: 0; border-radius: 2.45em; background: none; box-shadow: none; object-fit: fill;
  padding: 0 !important; margin: 0;
}
.otf .ota-pair .was .ota-shot { background: #8f8e8b; box-shadow: none; }
.otf .ota-pair .was .ota-shot img { border: 0; background: none; }
.otf-scout .ota-shot { overflow: hidden; }
@media screen and (max-width: 767px) {
  .otf .ota-shot, .otf .ota-pair .ota-shot, .otf .ota-stage .ota-shot { padding: 6px; border-radius: 30px; box-shadow: 0 1.2rem 2.4rem rgba(0,0,0,.3); }
  .otf .ota-pair .ota-shot { box-shadow: 0 1rem 2rem rgba(0,0,0,.12); }
  .otf .ota-pair .was .ota-shot { box-shadow: none; }
  .otf .ota-shot img, .otf .ota-pair .ota-shot img { border: 0; border-radius: 24px; }
}

/* v8 — весна: більший відступ скрінів від тексту на десктопі */
@media screen and (min-width: 768px) { .otf .otf-spring-stage { margin-top: 8em; } }

/* v9 — осінь: плашка «5 May» на першому телефоні */
.otf-anchor { position: relative; flex: 0 0 auto; }
.otf-anchor .ota-shot { width: 19em; }
.otf .otf-sow { top: 43%; left: -4.5em; bottom: auto; right: auto; min-width: 16em; padding: 1.4em 1.8em; }
.otf .otf-sow strong { font-size: 1.7em; margin-top: .15em; }
@media screen and (max-width: 767px) {
  .otf-anchor .ota-shot { width: 13rem; }
  .otf .ota-stage .otf-sow { display: none; }
}

/* ══ v10 — єдина система відступів (8-pt сітка) ═══════════════════════
   Зовнішні  — між секціями:          section
   Між групами — текст → медіа:        text-media, media-media
   Внутрішні — чип→заголовок, заголовок→текст, медіа→підпис
   Десктоп у vw (сайт масштабується від 1vw), мобільна — у px.       */
.otf {
  --sp-section: 7vw;          /* ≈100px @1440 */
  --sp-text-media: 5.6vw;     /* ≈80px */
  --sp-media-media: 5.6vw;
  --sp-title-body: 2.4vw;     /* ≈35px */
  --sp-chip-title: 1.6vw;     /* ≈23px */
  --sp-caption: 2vw;          /* ≈29px */
  --sp-gap: 1.1vw;            /* сітки карток ≈16px */
}
@media screen and (max-width: 767px) {
  .otf {
    --sp-section: 64px; --sp-text-media: 40px; --sp-media-media: 48px;
    --sp-title-body: 20px; --sp-chip-title: 16px; --sp-caption: 16px; --sp-gap: 12px;
  }
}

/* зовнішні: секції */
.otf .ota-sec, .otf .ota-sec--tight { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
.otf .ota-sec:not(.ota-sec--light) + .ota-sec:not(.ota-sec--light):not(.ota-sec--break),
.otf .ota-sec--light + .ota-sec--light { padding-top: 0; }
.otf .silpo-results { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }

/* внутрішні: чип → заголовок */
.otf .ota-chip + .otf-title,
.otf .ota-chip + .ota-statement,
.otf .ota-hmw .ota-statement { margin-top: var(--sp-chip-title); }
.otf .ota-research, .otf .otf-ai-head { margin-top: var(--sp-chip-title); }

/* внутрішні: заголовок → текст */
.otf .ota-cs { margin-top: var(--sp-title-body); }
.otf .ota-hmw .ota-btn { margin-top: var(--sp-title-body); }

/* між групами: текст → медіа */
.otf .otf-bento, .otf .ota-stage, .otf .otf-spring-stage, .otf .otf-row,
.otf .otf-weather, .otf .ota-alert, .otf .otf-ds, .otf .ota-pairs, .otf .ota-banner { margin-top: var(--sp-text-media); }
.otf .ota-research + .ota-banner { margin-top: var(--sp-media-media); }

/* між групами: медіа → медіа */
.otf .otf-duo, .otf .otf-detail { margin-top: var(--sp-media-media); }

/* внутрішні: медіа → підпис */
.otf .otf-cap, .otf .otf-media + .ota-caption, .otf .ota-pairs + p { margin-top: var(--sp-caption) !important; }

/* сітки карток: однаковий крок */
.otf .otf-bento, .otf .otf-col, .otf .ota-insights, .otf .ota-ds { gap: var(--sp-gap); }

@media screen and (max-width: 767px) {
  .otf .ota-head { row-gap: var(--sp-title-body); }
  .otf .ota-research { gap: 32px; }
  .otf .ota-cs { gap: 24px; }
  .otf .ota-tile, .otf .ota-insight { padding: 20px; }
  .otf .otf-tile img { margin-top: 20px; }
  .otf .otf-weather { gap: var(--sp-media-media); }
  .otf .otf-detail { gap: 20px; }
  .otf .ota-pairs { gap: var(--sp-media-media); }

  /* ряди телефонів: місце під тінь, щоб її не обрізав скрол */
  .otf .ota-stage, .otf .otf-spring-stage {
    padding: 8px 20px 44px; margin-bottom: -44px;
    margin-top: calc(var(--sp-text-media) - 8px);
  }
  .otf .otf-ai-stage { padding-top: 56px; }
  .otf .ota-shot, .otf .ota-pair .ota-shot, .otf .ota-stage .ota-shot { box-shadow: 0 10px 22px rgba(0,0,0,.28); }
  .otf .ota-sec--light .ota-shot, .otf .ota-pair .ota-shot { box-shadow: 0 10px 22px rgba(0,0,0,.12); }
  .otf .ota-pair .was .ota-shot { box-shadow: none; }
  .otf .otf-row { margin-top: var(--sp-text-media); }
}