/* К-247 — сайт. Палитра: графит #2E2D2B + бумага #F2F1EE + жёлтый акцент #FFF200.
   Шрифты: Wix Madefor Display 500 / Wix Madefor Text 400. Easing: cubic-bezier(.22,1,.36,1) */

:root {
  --ink: #2E2D2B;
  --graphite: #404040;
  --paper: #F2F1EE;
  --brand: #FFF200;
  --e: cubic-bezier(.22, 1, .36, 1);
  --s2: 8px; --s3: 12px; --s4: 20px; --s5: 32px; --s6: 56px; --s7: 96px;
  --pad: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Wix Madefor Text", system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .mark__k, .figures dt, .steps__idx, .role__idx, .cat__i, .numbers b, .extra__t {
  font-family: "Wix Madefor Display", system-ui, sans-serif;
  font-weight: 500;
}

h1 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: 0.88; letter-spacing: -0.038em; text-wrap: balance; hyphens: none; }
h2 { font-size: clamp(1.9rem, 4vw, 3.8rem); line-height: 0.92; letter-spacing: -0.032em; text-wrap: balance; hyphens: none; }
h3 { font-size: clamp(19px, 1.6vw, 26px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; max-width: 58ch; }

.lead { font-size: clamp(15px, 1.2vw, 18px); max-width: 46ch; opacity: 0.78; text-wrap: balance; }
.label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.8; opacity: 0.55; }
.assure { font-size: 12.5px; opacity: 0.55; }
.dim { opacity: 0.6; font-size: 13px; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- шапка ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--pad);
  background: var(--brand);
}
.mark { display: inline-flex; flex-direction: column; line-height: 1; }
.mark__k { font-size: 26px; font-style: italic; letter-spacing: -0.045em; }
.mark__s { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.6; margin-top: 3px; }

.nav { display: flex; gap: clamp(12px, 2vw, 30px); justify-content: center; font-size: 13.5px; }
.nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; opacity: 0.75; transition: opacity 320ms var(--e); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 520ms var(--e);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__enter { opacity: 1; }
.phone { font-size: 14px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- hero: схема C, 58/42 ---------- */
.hero { min-height: 100svh; display: grid; grid-template-columns: 58fr 42fr; }
.hero__text {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s4);
  padding: calc(var(--pad) + 40px) clamp(24px, 3vw, 56px) clamp(48px, 8vh, 96px) var(--pad);
  min-height: 100svh;
}
.hero__text h1 { max-width: 15ch; }
.hero__media { position: relative; overflow: hidden; background: var(--graphite); }
.hero__media img { filter: grayscale(0.4) contrast(1.06) brightness(0.86); transform: scale(1.04); }
/* полоса цифр под первым экраном */
.numbers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--brand); color: var(--ink);
}
.numbers div { padding: var(--s4) var(--pad) var(--s5); }
.numbers div + div { box-shadow: inset 1px 0 0 rgba(46, 45, 43, 0.18); }
.numbers b { display: block; font-family: "Wix Madefor Display", system-ui, sans-serif; font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1; letter-spacing: -0.035em; }
.numbers span { font-size: 12.5px; opacity: 0.72; display: block; margin-top: 6px; max-width: 22ch; }

.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  font: inherit; font-size: 14.5px; cursor: pointer; letter-spacing: -0.01em;
}
.btn__label { position: relative; z-index: 2; transition: color 320ms var(--e); }
.btn__fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--e); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid .btn__fill { background: var(--brand); }
.btn--solid:hover .btn__fill { transform: scaleX(1); }
.btn--solid:hover .btn__label { color: var(--ink); }
.btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(46, 45, 43, 0.3); }
.btn--line .btn__fill { background: var(--ink); }
.btn--line:hover .btn__fill { transform: scaleX(1); }
.btn--line:hover .btn__label { color: var(--paper); }
.btn--onDark { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(242, 241, 238, 0.4); }
.btn--onDark .btn__fill { background: var(--brand); }
.btn--onDark:hover .btn__label { color: var(--ink); }

/* ---------- разделы ---------- */
.sections { padding: clamp(64px, 10vh, 130px) var(--pad); }
.sections h2 { margin-bottom: var(--s6); }
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.cat {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--graphite); color: var(--paper); border: 0; border-radius: 0;
  padding: var(--s4) var(--s4) clamp(90px, 12vw, 150px);
  min-height: clamp(220px, 26vw, 340px);
  transition: background 420ms var(--e), transform 620ms var(--e);
}
.cat__i { font-size: 11.5px; letter-spacing: 0.2em; opacity: 0.6; display: block; margin-bottom: var(--s4); }
.cat__t { display: block; font-family: "Wix Madefor Display", system-ui, sans-serif; font-size: clamp(19px, 1.8vw, 30px); line-height: 1.05; letter-spacing: -0.025em; }
.cat__art {
  position: absolute; right: -6%; bottom: 6%; width: 84%;
  fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.35;
  transition: transform 700ms var(--e), opacity 420ms var(--e), stroke 420ms var(--e);
}
.cat:hover, .cat.is-active { background: var(--brand); color: var(--ink); transform: translateY(-4px); }
.cat:hover .cat__art, .cat.is-active .cat__art { stroke: var(--ink); opacity: 0.9; transform: translateX(-6%) scale(1.06); }

.extra { display: grid; grid-template-columns: 62fr 38fr; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(12px, 1.6vw, 22px); }
.extra__big {
  display: grid; align-content: end; gap: var(--s2);
  background: var(--brand); padding: var(--s5) var(--s4);
  transition: transform 620ms var(--e);
}
.extra__big:hover { transform: translateY(-4px); }
.extra__t { font-size: clamp(20px, 2.4vw, 34px); line-height: 1.02; letter-spacing: -0.03em; }
.extra__list { list-style: none; display: grid; gap: 1px; background: rgba(46, 45, 43, 0.16); }
.extra__list li { background: var(--paper); }
.extra__list a {
  display: flex; align-items: center; min-height: 62px; padding: 0 var(--s4);
  font-size: 15px; transition: background 320ms var(--e), transform 520ms var(--e);
}
.extra__list a:hover { background: var(--brand); transform: translateX(8px); }

/* ---------- как устроено ---------- */
.work { padding: clamp(64px, 10vh, 130px) var(--pad); }
.work h2 { max-width: 14ch; margin-bottom: var(--s6); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 72px); }
.steps li { padding-top: var(--s4); border-top: 1px solid rgba(46, 45, 43, 0.22); }
.steps__idx { display: block; font-size: 12px; letter-spacing: 0.2em; margin-bottom: var(--s5); }
.steps h3 { margin-bottom: var(--s3); }
.steps p { opacity: 0.72; font-size: 15px; }

/* ---------- роли ---------- */
.roles { display: grid; grid-template-columns: 58fr 42fr; background: var(--graphite); color: var(--paper); }
.roles__list { padding: clamp(64px, 10vh, 130px) clamp(24px, 3vw, 56px) clamp(64px, 10vh, 130px) var(--pad); }
.roles__list h2 { margin-bottom: var(--s6); }
.roles ul { list-style: none; }
.role {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; gap: var(--s4);
  padding: var(--s4) 0; border-top: 1px solid rgba(242, 241, 238, 0.18);
  cursor: pointer; opacity: 0.55;
  transition: transform 620ms var(--e), opacity 320ms var(--e);
}
.role:last-child { border-bottom: 1px solid rgba(242, 241, 238, 0.18); }
.role__idx { font-size: 12px; letter-spacing: 0.2em; opacity: 0.65; }
.role__name { font-family: "Wix Madefor Display", system-ui, sans-serif; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.05; letter-spacing: -0.025em; }
.role__note { grid-column: 2; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 620ms var(--e), opacity 420ms var(--e); }
.role__note > span { overflow: hidden; min-height: 0; font-size: 14px; }
.role.is-active { opacity: 1; transform: translateX(14px); }
.role.is-active .role__note { grid-template-rows: 1fr; opacity: 0.72; margin-top: var(--s2); }
.roles__media { position: relative; overflow: hidden; }
.roles__media img {
  position: absolute; inset: 0;
  filter: grayscale(0.45) contrast(1.05) brightness(0.85);
  transition: transform 900ms var(--e), filter 900ms var(--e), opacity 420ms var(--e);
}
.roles__media.is-swapping img { opacity: 0.2; transform: scale(1.06); filter: grayscale(0.45) blur(14px); }

/* ---------- рублиКи ---------- */
.coins { padding: clamp(64px, 10vh, 130px) var(--pad); }
.coins__head { display: grid; grid-template-columns: 58fr 42fr; gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: var(--s7); }
.coins__head h2 { max-width: 26ch; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 48px); }
.figures div { border-top: 1px solid rgba(46, 45, 43, 0.22); padding-top: var(--s4); }
.figures dt { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 0.9; letter-spacing: -0.038em; }
.figures dd { margin-top: var(--s3); font-size: 14.5px; opacity: 0.7; max-width: 24ch; }

/* ---------- два предложения ---------- */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); }
.offer { background: var(--brand); padding: clamp(48px, 7vw, 96px) var(--pad); display: grid; align-content: center; gap: var(--s3); }
.offer h3 { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.02; letter-spacing: -0.03em; }
.offer p { max-width: 44ch; font-size: 15px; opacity: 0.78; }
.offer--dark { background: var(--graphite); color: var(--paper); }
.offer--dark .btn--solid { background: var(--brand); color: var(--ink); }
.offer--dark .btn--solid .btn__fill { background: var(--paper); }

/* ---------- вход ---------- */
.enter { display: grid; grid-template-columns: 60fr 40fr; gap: clamp(24px, 4vw, 64px); padding: clamp(64px, 10vh, 130px) var(--pad); align-items: start; }
.enter__flow { background: #fff; padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 40px); min-height: 520px; }
.step { display: none; }
.step.is-on { display: grid; gap: var(--s4); align-content: start; }
.step h2 { font-size: clamp(1.7rem, 3vw, 3rem); }
.step .cta { margin-top: var(--s2); }
.step .lead { max-width: 44ch; }
.chosen { font-size: 13px; opacity: 0.62; }
.back {
  justify-self: start; border: 0; background: none; font: inherit; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.5; cursor: pointer;
  padding: 6px 0; min-height: 44px; text-align: left;
  transition: opacity 320ms var(--e);
}
.back:hover { opacity: 1; }
.back--low { text-decoration: underline; text-underline-offset: 4px; }
.mini {
  justify-self: start; margin-top: 4px; border: 0; background: var(--brand); color: var(--ink);
  font: inherit; font-size: 12px; min-height: 30px; padding: 0 12px; cursor: pointer; border-radius: 999px;
  transition: transform 320ms var(--e);
}
.mini:hover { transform: translateX(3px); }
.types { list-style: none; display: grid; gap: 2px; }
.types button {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px var(--s3);
  align-items: baseline; text-align: left; border: 0; background: transparent; font: inherit;
  padding: var(--s3) var(--s3) var(--s3) 0; min-height: 44px; cursor: pointer;
  border-top: 1px solid rgba(46, 45, 43, 0.2);
  transition: background 500ms var(--e), transform 620ms var(--e);
}
.types li:last-child button { border-bottom: 1px solid rgba(46, 45, 43, 0.2); }
.types button:hover { background: var(--brand); transform: translateX(10px); }
.types b { font-family: "Wix Madefor Display", system-ui, sans-serif; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -0.02em; }
.types span:not(.types__i) { grid-column: 2; font-size: 13px; opacity: 0.62; }
.types__i { grid-row: span 2; font-size: 12px; letter-spacing: 0.16em; opacity: 0.4; }
.agree { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); align-items: start; font-size: 13.5px; cursor: pointer; min-height: 44px; align-content: center; }
.agree input { width: 18px; height: 18px; accent-color: var(--brand); margin-top: 2px; }
.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: 5px; }
.field span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.55; }
.field input {
  min-height: 46px; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(46, 45, 43, 0.25);
  background: transparent; font: inherit; font-size: 15px; border-radius: 0;
  transition: border-color 320ms var(--e);
}
.field input:focus { outline: none; border-bottom-color: var(--ink); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

.enter__demo h2 { font-size: clamp(1.4rem, 2vw, 2rem); margin-bottom: var(--s3); }
.accounts { list-style: none; margin-top: var(--s4); }
.account {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  padding: var(--s3) 0; border-top: 1px solid rgba(46, 45, 43, 0.22);
}
.accounts li:last-child .account { border-bottom: 1px solid rgba(46, 45, 43, 0.22); }
.account__role { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.5; }
.account__name { font-family: "Wix Madefor Display", system-ui, sans-serif; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -0.02em; line-height: 1.1; }
.account__meta { font-size: 13px; opacity: 0.6; }

/* ---------- подвал ---------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--pad); background: var(--graphite); color: var(--paper); font-size: 13.5px;
}
.mark--foot .mark__k { font-size: 20px; }

/* ---------- уведомление ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translate(-50%, 18px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: 12px 22px; border-radius: 999px; font-size: 14px;
  transition: opacity 300ms var(--e), transform 560ms var(--e);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--err { background: #C0392B; }

/* ---------- появление ---------- */
.rise { opacity: 0; transform: translateY(28px); filter: blur(14px); }
.is-in .rise, .rise.is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 900ms var(--e) var(--d, 0ms),
              transform 900ms var(--e) var(--d, 0ms),
              filter 900ms var(--e) var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .rise { opacity: 1; transform: none; filter: none; }
  html { scroll-behavior: auto; }
}

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .hero, .roles, .coins__head, .enter { grid-template-columns: 1fr; }
  .hero__text { min-height: auto; padding-top: 110px; }
  .hero__media { height: 52svh; }
  .roles__media { height: 44svh; }
  .cats, .steps, .figures { grid-template-columns: 1fr 1fr; }
  .extra { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; }
  .topbar { grid-template-columns: auto 1fr; }
  .phone { display: none; }
}

@media (max-width: 700px) {
  .cats, .steps, .figures, .enter__forms, .pair { grid-template-columns: 1fr; }
  .nav a:not(.nav__enter) { display: none; }
  .cta { flex-direction: column; align-items: stretch; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers div + div { box-shadow: inset 0 1px 0 rgba(46, 45, 43, 0.18); }
}

/* ---------- витрина лояльности ---------- */
.coins__grid {
  display: grid; grid-template-columns: 44fr 28fr 28fr;
  gap: clamp(20px, 3vw, 56px); margin-top: clamp(40px, 6vh, 88px); align-items: start;
}
.scale__t { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
.scale__t th, .scale__t td { text-align: left; padding: var(--s3) 0; border-top: 1px solid rgba(46, 45, 43, 0.22); vertical-align: baseline; }
.scale__t th {
  font-family: "Wix Madefor Display", system-ui, sans-serif; font-weight: 500;
  font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -0.02em; white-space: nowrap; padding-right: var(--s4);
}
.scale__t td { font-size: 14px; opacity: 0.68; }
.scale .assure { margin-top: var(--s3); }

.fuel__t { font-family: "Wix Madefor Display", system-ui, sans-serif; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -0.02em; margin-bottom: var(--s3); }
.fuel__card {
  display: grid; gap: 4px; align-content: space-between;
  aspect-ratio: 1.586; padding: var(--s4);
  background: #FEE600; color: var(--ink);
}
.fuel__brand { font-family: "Wix Madefor Display", system-ui, sans-serif; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.03em; line-height: 0.9; }
.fuel__sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.62; }
.fuel__no { font-variant-numeric: tabular-nums; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0.06em; }
.fuel__disc { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; }
.fuel__nets { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s3) 0; }
.fuel__nets li { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; padding: 5px 9px; box-shadow: inset 0 0 0 1px rgba(46, 45, 43, 0.25); }

.perk { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px var(--s3); padding: var(--s3) 0; border-top: 1px solid rgba(46, 45, 43, 0.22); }
.perk:last-child { border-bottom: 1px solid rgba(46, 45, 43, 0.22); }
.perk__i { grid-row: span 2; font-size: 12px; letter-spacing: 0.16em; opacity: 0.4; }
.perk b { font-family: "Wix Madefor Display", system-ui, sans-serif; font-weight: 500; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: -0.02em; }
.perk span:not(.perk__i) { font-size: 13px; opacity: 0.65; }

@media (max-width: 1100px) {
  .coins__grid { grid-template-columns: 1fr 1fr; }
  .perks { grid-column: span 2; }
}
@media (max-width: 720px) {
  .coins__grid { grid-template-columns: 1fr; }
  .perks { grid-column: auto; }
  .enter__flow { padding: var(--s4) var(--s3); min-height: 0; }
}