/* Real Roll — франшиза суші-закладів (Україна).
   Шрифт макета: Inter (вільний, повна кирилиця: і ї є ґ). */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --red: #ff2a00;
  --red-soft: #ff694c;      /* смужки таблиці на червоному */
  --red-line: #ff947f;      /* сітка на червоному */
  --blue: #7bdeef;
  --ink: #000;
  --dark: #0c0301;          /* колір країв фото обкладинки */
  --container: 1240px;
  --font: 'Inter', Arial, sans-serif;
  --r: 20px;
  --r-sm: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body { font-family: var(--font); font-size: 18px; line-height: 1.35; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--red); color: #fff; }

.container { max-width: calc(var(--container) + 40px); margin: 0 auto; padding: 0 20px; width: 100%; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.h2 {
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.h2 span { color: var(--red); }
.h2--center { text-align: center; }
.h2--light { color: #fff; }
.h2--light span { color: #fff; }

.lead-text {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.04em;
}

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 26px;
  border-radius: var(--r-sm);
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em; text-transform: uppercase;
  transition: background-color .18s, color .18s, box-shadow .18s;
  text-align: center;
}
.btn--red { background: var(--red); color: #fff; min-width: 266px; }
.btn--red:hover { background: #e02400; }
.btn--white { background: #fff; color: var(--red); min-width: 239px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.btn--white:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

/* ---------- шапка ---------- */
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; padding: 20px 0; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; }
.header__logo img { width: 228px; height: auto; }

.burger {
  width: 44px; height: 32px; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end; gap: 7px; flex: none;
}
.burger span { display: block; width: 31px; height: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.burger.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
.header--onlight .burger span { background: var(--ink); }

/* випадне меню: на десктопі — компактна панель під самою кнопкою */
.menu {
  position: absolute; top: calc(100% + 14px);
  /* правий край панелі збігається з правим краєм бургера (контейнер має padding 20px) */
  right: 20px;
  min-width: 240px;
  background: #fff; border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  padding: 12px 0; z-index: 40;
}
.menu[hidden] { display: none; }
.menu a { display: block; padding: 11px 26px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.menu a:hover { color: var(--red); }

/* ---------- обкладинка ---------- */
.hero { position: relative; min-height: 750px; min-height: max(750px, 100svh); display: flex; flex-direction: column; background: var(--dark); overflow: hidden; }
.hero__bg {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 1728px);
  background: var(--dark) url('../assets/hero.webp') center center / cover no-repeat;
}
/* краї фото розчиняються у фоні секції на широких екранах */
.hero__bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--dark) 0, rgba(12, 3, 1, 0) 90px),
    linear-gradient(to left, var(--dark) 0, rgba(12, 3, 1, 0) 90px);
}
.hero__bg::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(to bottom,
    rgba(12, 3, 1, 0) 0,
    rgba(12, 3, 1, .45) 50%,
    rgba(12, 3, 1, .82) 100%);
}
.hero .container { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; padding-top: 229px; padding-bottom: 80px; }

.hero__eyebrow {
  color: #fff; font-size: clamp(20px, 2.3vw, 33px); line-height: .9; letter-spacing: -0.04em;
  text-transform: uppercase; margin-bottom: 20px;
}
.hero__title {
  color: #fff; font-weight: 700; font-size: clamp(34px, 4.2vw, 60px); line-height: .93;
  letter-spacing: -0.04em; max-width: 470px;
}
.hero__btn { margin-top: 40px; align-self: flex-start; }
.hero__stats { margin-top: auto; display: flex; gap: 40px; flex-wrap: wrap; padding-top: 60px; }
.hero__stat { display: flex; align-items: center; gap: 14px; }
.hero__stat img { width: 40px; height: 39px; object-fit: contain; flex: none; }
.hero__stat p { color: #fff; font-size: 17.3px; line-height: 1.05; letter-spacing: -0.04em; font-weight: 400; }
.hero__stat b { display: block; color: var(--red); font-weight: 600; }

/* ---------- плавна поява елементів обкладинки ---------- */
@keyframes rr-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rr-photo {
  from { opacity: 0; transform: translateX(-50%) scale(1.06); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

.rr-anim .hero__bg,
.rr-anim .header__logo,
.rr-anim .burger,
.rr-anim .hero__eyebrow,
.rr-anim .hero__title,
.rr-anim .hero__btn,
.rr-anim .hero__stat { opacity: 0; }

.rr-anim .hero__bg     { animation: rr-photo 1.7s cubic-bezier(.22, .61, .36, 1) .05s forwards; }
.rr-anim .header__logo { animation: rr-rise .85s cubic-bezier(.22, .61, .36, 1) .15s forwards; }
.rr-anim .burger       { animation: rr-rise .85s cubic-bezier(.22, .61, .36, 1) .25s forwards; }
.rr-anim .hero__eyebrow { animation: rr-rise .85s cubic-bezier(.22, .61, .36, 1) .38s forwards; }
.rr-anim .hero__title   { animation: rr-rise .95s cubic-bezier(.22, .61, .36, 1) .52s forwards; }
.rr-anim .hero__btn     { animation: rr-rise .85s cubic-bezier(.22, .61, .36, 1) .74s forwards; }
.rr-anim .hero__stat:nth-child(1) { animation: rr-rise .85s cubic-bezier(.22, .61, .36, 1) .92s forwards; }
.rr-anim .hero__stat:nth-child(2) { animation: rr-rise .85s cubic-bezier(.22, .61, .36, 1) 1.04s forwards; }
.rr-anim .hero__stat:nth-child(3) { animation: rr-rise .85s cubic-bezier(.22, .61, .36, 1) 1.16s forwards; }

/* ---------- поява блоків при прокрутці ---------- */
/* рухаємо окремою властивістю translate, щоб не заважати наведенню (transform) */
.rr-anim [data-reveal] {
  opacity: 0; translate: 0 28px;
  transition: opacity .75s ease, translate .75s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0s);
}
.rr-anim [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- фото «під'їжджають» із збільшення до нормального розміру ---------- */
.rr-zoom { overflow: hidden; }
.rr-anim .rr-zoom img {
  transform: scale(1.16); transform-origin: center;
  transition: transform 1.5s cubic-bezier(.22, .61, .36, 1);
}
.rr-anim .rr-zoom.is-in img { transform: scale(1); }

/* якщо в системі вимкнена анімація — показуємо все одразу */
@media (prefers-reduced-motion: reduce) {
  .rr-anim .hero__bg,
  .rr-anim .header__logo,
  .rr-anim .burger,
  .rr-anim .hero__eyebrow,
  .rr-anim .hero__title,
  .rr-anim .hero__btn,
  .rr-anim .hero__stat { opacity: 1; animation: none; }
  .rr-anim [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .rr-anim .rr-zoom img { transform: none; transition: none; }
  .it__card { transition: none; }
}

/* ---------- сила і системність бренду ---------- */
.section { padding-top: 100px; }
.about__grid { display: grid; grid-template-columns: 545px 615px; gap: 80px; align-items: start; justify-content: space-between; }
.about__text { max-width: 545px; }
.about__h2 { line-height: .9; }
.about__lead { margin-top: 20px; max-width: 525px; }
.about__lead b { font-weight: 600; }
.about__stats { display: flex; gap: 12px; margin-top: 30px; max-width: 525px; }
.about__stat {
  width: 167px; height: 178px; flex: none;
  border: 1px solid var(--red); border-radius: var(--r);
  display: flex; flex-direction: column; align-items: center; padding-top: 20px; text-align: center;
}
.about__stat img { width: 44px; height: 44px; object-fit: contain; }
.about__stat strong { display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; margin-top: 5px; }
.about__stat p { font-size: 18px; line-height: 1.05; letter-spacing: -0.04em; margin-top: 3px; }
.about__stat p b { font-weight: 600; display: block; }

.callout {
  margin-top: 15px; max-width: 525px; background: var(--blue); border-radius: var(--r);
  padding: 25px 20px; display: flex; align-items: center; gap: 15px;
}
.callout img { width: 41px; height: 41px; flex: none; }
.callout h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.callout p { font-size: 16px; letter-spacing: -0.03em; line-height: 1.2; margin-top: 4px; }

.about__photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 615 / 624; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }

/* на десктопі фото тягнеться рівно до низу текстової колонки */
@media (min-width: 1241px) {
  .about__grid { align-items: stretch; }
  .about__photo { aspect-ratio: auto; }
  .about__photo img { position: absolute; inset: 0; }
}

/* ---------- власні IT-рішення ---------- */
.it { position: relative; margin-top: 100px; background: var(--red); overflow: hidden; padding: 100px 0; }
.it__grid {
  position: absolute; left: 0; right: 0; top: 283px; bottom: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--red-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--red-line) 1px, transparent 1px);
  background-size: 70px 70px; background-position: 69px 68px;
  opacity: .75;
  /* смужки сітки плавно розчиняються у червоному до низу блоку */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 58%, rgba(0, 0, 0, 0) 100%);
}
.it__decor { position: absolute; pointer-events: none; }
.it__decor--wok { left: max(0px, calc(50% - 633px)); top: 29px; width: 221px; }
.it__decor--sticks { right: -13px; top: 73px; width: 296px; }
.it .container { position: relative; z-index: 2; }
.it__sub { color: #fff; text-align: center; max-width: 690px; margin: 22px auto 0; }
.it__cards { position: relative; height: 366px; margin-top: 60px; }
.it__card {
  position: absolute; width: 32.3%; min-width: 300px; min-height: 280px; background: #fff; border-radius: var(--r);
  box-shadow: 0 7px 29px rgba(100, 100, 111, .2);
  /* нахил окремою властивістю rotate — його плавно змінює прокрутка */
  rotate: var(--rot, 9deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px 30px;
}
.it__card h3 { font-size: 30px; font-weight: 600; color: var(--red); letter-spacing: -0.04em; line-height: .95; }
/* у середній та правій картці заголовок вужчий — переноситься на більше рядків, як у макеті.
   Тільки на ПК: на телефоні картки на всю ширину і обмеження не потрібне */
@media (min-width: 1025px) {
  .it__card--2 h3, .it__card--3 h3 { max-width: 260px; margin-inline: auto; }
}
.it__card p { font-size: 20px; line-height: 1.1; letter-spacing: -0.04em; margin-top: 14px; }
/* середня картка — рівно по центру, бічні трохи заходять на неї, усі майже на одному рівні */
.it__card--1 { left: 2.4%; top: 0; --rot: 9deg; }
.it__card--2 { left: 33.85%; top: 58px; z-index: 2; --rot: -9deg; }
.it__card--3 { left: 65.3%; top: 32px; z-index: 3; --rot: 9deg; }

/* ---------- чому партнери обирають ---------- */
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 56px; }
.why__cell { position: relative; border-radius: var(--r); min-height: 274px; }
.why__cell--text { background: #fff; border: 1px solid var(--blue); padding: 20px; }
.why__ico { width: 70px; height: 70px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; }
.why__ico img { max-width: 41px; max-height: 37px; object-fit: contain; }
.why__cell--text p { margin-top: 20px; font-size: 18px; line-height: 1.33; letter-spacing: -0.03em; }
.why__cell--text p b { font-weight: 700; }
.why__cell--photo img { width: 100%; height: 100%; object-fit: cover; }
.why__cell--photo { display: block; overflow: hidden; }
.why__cell--accent {
  background: var(--blue); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 25px;
}
.why__cell--accent img { width: 70px; height: 70px; }
.why__cell--accent p { margin-top: 20px; font-size: 18px; line-height: 1.33; letter-spacing: -0.03em; font-weight: 600; }

/* при наведенні картка плавно піднімається і отримує червоний ободок */
.why__cell { transition: border-color .4s ease; }
/* у карток із фото та кольорової плитки ободок малюємо окремим шаром — поверх картинки */
.why__cell--photo, .why__cell--accent { position: relative; }
.why__cell--photo::after, .why__cell--accent::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(255, 42, 0, 0); transition: border-color .4s ease;
}
@media (hover: hover) {
  .why__cell--text:hover { border-color: var(--red); }
  .why__cell--photo:hover::after,
  .why__cell--accent:hover::after { border-color: var(--red); }
}

/* ---------- гнучкі формати ---------- */
.tabs { display: flex; justify-content: center; gap: 50px; margin-top: 35px; flex-wrap: wrap; }
.tab {
  font-size: clamp(20px, 2.1vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  padding-bottom: 30px; border-bottom: 2px solid transparent; color: var(--ink);
}
.tab.is-active { border-bottom-color: var(--red); }
.tabs-line { height: 1px; background: #d7d7d7; margin-top: -1px; }

.fmt { display: grid; grid-template-columns: minmax(0, 1fr) 593px; gap: 30px; margin-top: 64px; align-items: start; }
.fmt__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 260px; height: 56px; padding: 0 20px;
  border: 1px solid var(--red); border-radius: var(--r-sm);
  color: var(--red); font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
}
.fmt__kind { color: var(--red); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-top: 15px; }
.fmt__rows { margin-top: 44px; display: flex; flex-direction: column; gap: 15px; }
.fmt__row { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.fmt__row i { width: 60px; height: 60px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; flex: none; }
.fmt__row i img { max-width: 31px; max-height: 35px; object-fit: contain; }
.fmt__row p { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.fmt__row p b { font-weight: 700; }

.fmt__media { position: relative; width: 593px; height: 594px; margin: -35px 0 0 auto; }
.fmt__shape { position: absolute; left: 113px; top: 0; width: 494px; height: 494px; background: var(--red); border-radius: var(--r); transform-origin: top left; transform: rotate(13.28deg); }
.fmt__photo { position: absolute; left: 66px; top: 35px; width: 494px; height: 494px; border-radius: var(--r); }
.fmt__media img { width: 100%; height: 100%; object-fit: cover; }

.fmt__lead { margin-top: 32px; }
.fmt__lead-title { text-align: center; font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; max-width: 560px; margin: 0 auto; }

/* ---------- форми ---------- */
.lead-form { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.lead-form input {
  width: 260px; height: 60px; border-radius: var(--r-sm); border: 1px solid var(--red);
  background: #fff; padding: 0 20px; font: inherit; font-size: 16px; color: var(--ink);
}
.lead-form input::placeholder { color: #9a9a9a; }
.lead-form input:focus { outline: 2px solid var(--red); outline-offset: -2px; }
.lead-form button { width: 260px; height: 60px; }
.lead-form__ok { text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; width: 100%; }

.lead-form--onred input { border-color: rgba(255, 255, 255, .8); background: transparent; color: #fff; }
.lead-form--onred input::placeholder { color: rgba(255, 255, 255, .85); }
.lead-form--onred input:focus { outline-color: #fff; }
.lead-form--onred .lead-form__ok { color: #fff; }

/* ---------- ідеальні роли ---------- */
.menu-sec__sub { text-align: center; max-width: 690px; margin: 30px auto 0; }
.menu-sec__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; max-width: 1720px; margin: 50px auto 0; }
.menu-sec__grid img { width: 100%; height: 100%; aspect-ratio: 353 / 444; object-fit: cover; }

/* ---------- фінансові умови ---------- */
.fin { position: relative; margin-top: 100px; background: var(--red); padding: 100px 0 0; overflow: hidden; color: #fff; }
.fin .container { position: relative; z-index: 2; }
.fin__scroll { margin-top: 39px; overflow-x: auto; padding-bottom: 32px; }
.fintable { width: 100%; min-width: 1140px; position: relative; }
.fintable table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fintable th, .fintable td { padding: 8px 10px; vertical-align: middle; }
.fintable thead th { height: 74px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; text-align: center; }
.fintable thead th:first-child { width: 20.8%; }
.fintable tbody th {
  text-align: left; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; padding-left: 30px;
}
.fintable tbody td { text-align: center; font-size: 17px; letter-spacing: -0.03em; line-height: 1.15; }
.fintable tbody tr { height: 70px; }
.fintable tbody tr:last-child { height: 90px; }
.fintable tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .3); }
.fintable tbody tr:nth-child(odd) th:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.fintable tbody tr:nth-child(odd) td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.fintable__cols { position: absolute; inset: 0; display: flex; pointer-events: none; }
.fintable__cols span { border: 1px solid #fff; border-radius: var(--r); position: absolute; top: 0; bottom: -22px; width: calc(19.8% - 10px); }

.fin__note { text-align: center; font-size: 12px; margin-top: 16px; letter-spacing: -0.01em; }
.fin__cta { text-align: center; max-width: 690px; text-wrap: balance; margin: 38px auto 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; }
.fin__btn-wrap { text-align: center; margin-top: 26px; padding-bottom: 100px; }
.fin__decor { position: absolute; bottom: 0; pointer-events: none; z-index: 1; }
.fin__decor--pizza { left: -10px; width: 303px; }
.fin__decor--squid { right: max(0px, calc(50% - 720px)); width: 255px; bottom: 15px; }

/* ---------- продумана система підтримки ---------- */
.support__grid { display: grid; grid-template-columns: 584px 1fr; gap: 72px; margin-top: 45px; align-items: start; }
.support__photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 584 / 520; }
.support__photo img { width: 100%; height: 100%; object-fit: cover; }

/* на десктопі фото тягнеться рівно до низу правої колонки */
@media (min-width: 1025px) {
  .support__grid { align-items: stretch; }
  .support__photo { aspect-ratio: auto; max-height: 760px; }
  .support__photo img { position: absolute; inset: 0; }
}
.acc { display: flex; flex-direction: column; gap: 20px; }
.acc__item { background: #fff; border: 2px solid var(--blue); border-radius: var(--r); overflow: hidden; }
.acc__head {
  width: 100%; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 26px; text-align: left; font-size: 22px; font-weight: 700; letter-spacing: -0.03em;
}
.acc__plus { width: 37px; height: 37px; border-radius: 50%; border: 1px solid var(--red); position: relative; flex: none; }
.acc__plus::before, .acc__plus::after { content: ''; position: absolute; background: var(--red); left: 50%; top: 50%; }
.acc__plus::before { width: 23px; height: 1.6px; transform: translate(-50%, -50%); }
.acc__plus::after { width: 1.6px; height: 23px; transform: translate(-50%, -50%); transition: transform .2s; }
.acc__item.is-open .acc__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__body { padding: 0 26px 24px; }
.acc__body[hidden] { display: none; }
.acc__body li { position: relative; padding-left: 20px; font-size: 18px; line-height: 1.37; letter-spacing: -0.03em; margin-bottom: 6px; }
.acc__body li::before { content: '•'; position: absolute; left: 2px; top: 0; }
.acc__body a { text-decoration: underline; }

.support__card { background: var(--blue); border-radius: var(--r); padding: 24px 20px; margin-top: 40px; min-height: 170px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.support__card p { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; max-width: 460px; margin: 0 auto; }
.support__card .btn { margin-top: 20px; min-width: 260px; font-size: 16px; font-weight: 700; }

/* ---------- кроки до відкриття ---------- */
.steps__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-top: 50px; }
.steps__card {
  background: #fff; border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(149, 157, 165, .2), inset 0 0 0 2px rgba(255, 42, 0, 0);
  min-height: 185px; padding: 20px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.steps__card i {
  width: 60px; height: 60px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; font-style: normal;
  letter-spacing: -0.03em; flex: none;
}
.steps__card p { margin-top: 22px; font-size: 16px; line-height: 1.15; letter-spacing: -0.02em; }
.steps__card p b { font-weight: 700; }
/* при наведенні картка плавно піднімається, і проявляється контур */
.steps__card { transition: box-shadow .4s ease; }
@media (hover: hover) {
  .steps__card:hover { box-shadow: 0 8px 24px rgba(149, 157, 165, .2), inset 0 0 0 2px rgba(255, 42, 0, 1); }
  .steps__card--accent:hover { box-shadow: 0 8px 24px rgba(149, 157, 165, .2), inset 0 0 0 2px rgba(255, 255, 255, 1); }
}
.steps__card--accent { background: var(--red); color: #fff; box-shadow: 0 8px 24px rgba(149, 157, 165, .2), inset 0 0 0 2px rgba(255, 255, 255, 0); }
.steps__card--accent i { background: #fff; color: var(--red); }

/* ---------- фінальний заклик ---------- */
.final { padding-top: 100px; }
.final__box {
  /* фото у нижньому блоці поки береться зі сторінки передачі файлів /files/ —
     замінити на власну легку копію в assets, щойно файл потрапить у репозиторій */
  border-radius: var(--r); background: #fb1f02 url('../assets/footer-bg.webp') center bottom / cover no-repeat;
  padding: 100px 20px 0; min-height: 623px; position: relative; overflow: hidden;
}
.final__box::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background: linear-gradient(to bottom, rgba(251, 31, 2, .94) 0, rgba(251, 31, 2, .85) 62%, rgba(251, 31, 2, 0) 100%);
}
.final__box > * { position: relative; z-index: 2; }
.final__box .h2 { max-width: 840px; margin: 0 auto; }
.final__sub { text-align: center; color: #fff; font-size: 16px; margin-top: 20px; letter-spacing: -0.02em; }
.final .lead-form { margin-top: 34px; }

/* ---------- підвал ---------- */
.footer { padding: 60px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: start; }
.footer__dept { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; max-width: 260px; }
.footer__contacts { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 20px; letter-spacing: -0.02em; }
.footer__contacts a:hover { color: var(--red); }
.footer__policy { display: inline-block; margin-top: 56px; font-size: 20px; letter-spacing: -0.02em; }
.footer__policy:hover { color: var(--red); }
.footer__mid { text-align: center; }
.footer__logo-link { display: block; width: max-content; margin: 0 auto; }
.footer__mid img.footer__logo { width: 305px; height: auto; margin: 0 auto; }
.footer__soc { display: flex; gap: 15px; justify-content: center; margin-top: 54px; }
.footer__soc a {
  width: 53px; height: 53px; border-radius: 50%; border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.footer__soc a:hover { background: var(--ink); }
.footer__soc a:hover img { filter: invert(1); }
.footer__soc img { width: 21px; height: 21px; object-fit: contain; }
.footer__nav { display: flex; flex-direction: column; gap: 7px; font-size: 18px; letter-spacing: -0.02em; width: max-content; margin-left: auto; }
.footer__nav a:hover { color: var(--red); }
.footer__by { margin-top: 40px; display: block; width: max-content; margin-left: auto; }
.footer__by img { width: 79px; }

/* ================= адаптив ================= */
@media (max-width: 1240px) {
  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__text, .about__lead, .about__stats, .callout { max-width: none; }
  .about__photo { max-width: 615px; }
  .about__stats { margin-top: 40px; flex-wrap: wrap; }
  .it__cards { height: 366px; }
  .fmt { grid-template-columns: 1fr; }
  .fmt__media { margin: 0 auto; transform: scale(.86); transform-origin: top center; height: 510px; }
  .support__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 1024px) {
  .hero .container { padding-top: 170px; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .steps__grid { grid-template-columns: repeat(3, 1fr); }
  .it__cards { height: auto; display: flex; flex-direction: column; gap: 26px; align-items: center; }
  .it__card { position: static; rotate: 0deg; width: min(100%, 420px); min-height: 0; }
  .it__decor--wok { width: 150px; left: 10px; top: 12px; }
  .it__decor--sticks { width: 170px; top: 30px; }
  .support__grid { grid-template-columns: 1fr; }
  .support__photo { max-width: 584px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__mid { grid-column: 1 / -1; order: 3; margin-top: 20px; }
}

/* обкладинка «фото знизу» — на планшетах і телефонах */
@media (max-width: 900px) {
  /* вертикальне фото від замовника закриває весь перший екран телефона.
     У assets поки зменшена копія — оригінал замінить її під тим самим ім'ям. */
  .hero__bg {
    background-image: url('../assets/sushi-vertical.webp');
    background-color: transparent;
    background-size: cover;
    background-position: center bottom;
  }
  /* жодних затемнень поверх фото */
  .hero__bg::before { background: none; }
  .hero__bg::after { display: none; }
  .hero .container { padding-top: 150px; padding-bottom: 20px; }
  /* показники з іконками стоять одразу під кнопкою, а не внизу екрана */
  .hero__stats { margin-top: 30px; padding-top: 0; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding-top: 60px; }
  .header { padding: 14px 0; }
  .header__logo img { width: 150px; }
  .menu { right: 20px; left: 20px; min-width: 0; }

  .hero .container { padding-top: 108px; padding-bottom: 20px; }
  .hero__eyebrow { font-size: 17px; margin-bottom: 14px; }
  .hero__title { max-width: 380px; font-size: clamp(40px, 12.5vw, 50px); }
  .hero__btn { margin-top: 30px; min-width: 250px; align-self: flex-start; }
  /* показники стовпчиком, усе по лівому краю */
  .hero__stats { flex-direction: column; gap: 18px; align-items: flex-start; padding-top: 0; margin-top: 30px; }
  .hero__stat { text-align: left; }
  .hero__media { display: block; }

  .about__stats { gap: 10px; }
  .about__stat { width: calc(33.333% - 7px); height: auto; padding: 16px 8px 18px; }
  .about__stat strong { font-size: 30px; }
  .about__stat p { font-size: 14px; }
  .callout { flex-direction: row; padding: 18px 16px; }
  .callout h3 { font-size: 19px; }
  .callout p { font-size: 14px; }

  .it { margin-top: 60px; padding: 60px 0; }
  .it__grid { top: 200px; }
  .it__decor--wok { width: 92px; top: 6px; left: -14px; opacity: .8; }
  .it__decor--sticks { width: 100px; top: 6px; right: -18px; opacity: .8; }
  .it__card { padding: 22px 20px; }
  .it__card h3 { font-size: 24px; }
  .it__card p { font-size: 17px; }

  .why__grid { grid-template-columns: 1fr; gap: 12px; }
  .why__cell { min-height: 0; }
  .why__cell--photo img { aspect-ratio: 299 / 200; }

  .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 26px; }
  .tabs .tab { justify-self: center; }
  .tab { font-size: 20px; padding-bottom: 10px; }
  .fmt { margin-top: 34px; gap: 34px; }
  .fmt__badge { min-width: 0; width: 100%; max-width: 260px; height: 50px; font-size: 24px; }
  .fmt__kind { font-size: 19px; }
  .fmt__rows { margin-top: 26px; gap: 12px; }
  .fmt__row { gap: 14px; min-height: 50px; }
  .fmt__row i { width: 50px; height: 50px; }
  .fmt__row i img { max-width: 26px; max-height: 28px; }
  .fmt__row p { font-size: 16px; }
  .fmt__media { transform: none; width: 100%; height: auto; aspect-ratio: 593 / 594; margin: 0; }
  .fmt__shape { left: 19%; top: 0; width: 83.3%; height: 83.2%; }
  .fmt__photo { left: 11.1%; top: 5.9%; width: 83.3%; height: 83.2%; }

  .lead-form { gap: 12px; }
  .lead-form input, .lead-form button { width: 100%; max-width: 340px; height: 54px; min-height: 54px; }

  .menu-sec__grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  .fin { margin-top: 60px; padding-top: 60px; }
  .fin__scroll { margin: 30px -20px 0; padding: 0 20px; }
  .fintable { min-width: 900px; }
  .fintable thead th { font-size: 18px; height: 60px; }
  .fintable tbody th, .fintable tbody td { font-size: 15px; }
  .fintable tbody th { padding-left: 14px; }
  .fintable__cols span { width: 176px; }
  .fin__btn-wrap { padding-bottom: 190px; }
  .fin__decor--pizza { width: 150px; left: -14px; }
  .fin__decor--squid { width: 180px; right: -6px; }

  .support__grid { gap: 24px; margin-top: 26px; }
  .acc__head { font-size: 18px; min-height: 70px; padding: 14px 18px; }
  .acc__body { padding: 0 18px 20px; }
  .acc__body li { font-size: 16px; }
  .support__card p { font-size: 17px; }
  .support__card .btn { width: 100%; max-width: 320px; min-width: 0; }

  .steps__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .steps__card { min-height: 0; padding: 16px 12px 20px; }
  .steps__card i { width: 50px; height: 50px; font-size: 26px; }
  .steps__card p { margin-top: 14px; font-size: 14px; }

  .final { padding-top: 60px; }
  .final__box { padding: 50px 16px 0; min-height: 0; background-size: 200% auto; background-position: center bottom; }
  .final__box::before { height: 78%; }
  .final .lead-form { margin-top: 28px; padding-bottom: 190px; }
  .final__sub { margin-top: 16px; }

  .footer { padding: 40px 0 30px; }
  .footer__grid { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .footer__dept { max-width: none; margin: 0 auto; }
  .footer__contacts { align-items: center; }
  .footer__policy { margin-top: 20px; }
  .footer__mid { order: 0; margin-top: 0; }
  .footer__mid img.footer__logo { width: 230px; }
  .footer__soc { margin-top: 24px; }
  .footer__nav, .footer__by { align-items: center; margin: 0 auto; }
  .footer__by { margin-top: 24px; }
  .footer__by { margin-top: 24px; }
}

@media (max-width: 420px) {
  .about__stat strong { font-size: 26px; }
  .about__stat p { font-size: 12.5px; }
}

/* Телефони: текст тримаємо у верхній, темній частині фото, щоб показники
   з іконками не лягали на роли внизу. */
@media (max-width: 760px) {
  /* Усі розміри й відступи на обкладинці — фіксовані, без прив'язки до
     висоти екрана: інакше вони змінюються в момент, коли в телефоні
     ховається адресний рядок, і сторінка «стрибає» під час прокрутки. */
  .hero__title { font-size: 46px; }
  .hero .container { padding-top: 100px; }   /* 40px від шапки з логотипом */
  .hero__btn { margin-top: 25px; }
  .hero__stats { gap: 12px; margin-top: 60px; }
}
/* найвужчі телефони — заголовок трохи менший, інакше не вміщається в рядок */
@media (max-width: 360px) {
  .hero__title { font-size: 40px; }
}