/* ============================================================
   S2 · СРАВНЕНИЕ  +  S4 · ЛИМИТЫ  +  S5 · ПОД ЗАДАЧУ
   ============================================================ */

/* ---------- S2 · Больше за те же деньги ---------- */
.compare { text-align: center; overflow: hidden; }
.compare__badge {
  width: clamp(64px, 7vw, 96px); height: clamp(64px, 7vw, 96px);
  margin: 0 auto 34px;
  border-radius: 22px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 0 44px rgba(255,163,0,.14);
  will-change: transform;
}
/* иконка скрыта: в слот встаёт куб-протагонист */
.compare__badge img { width: 64%; border-radius: 16%; opacity: 0; }

.compare__grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(18px, 3vw, 44px); align-items: stretch;
  max-width: 1180px; margin: 0 auto; text-align: left;
}
.compare__vs {
  align-self: center; font-size: clamp(18px, 2.4vw, 30px);
  color: var(--dim); font-weight: 500; letter-spacing: .2em;
}

.ccard {
  position: relative; border-radius: 24px; padding: clamp(24px, 3vw, 42px);
  background: var(--surface); border: 1px solid var(--line);
  overflow: hidden; will-change: transform;
}
.ccard--them { filter: saturate(.6); }
.ccard--us { border-color: rgba(255,163,0,.45); box-shadow: 0 30px 90px rgba(0,0,0,.5), 0 0 60px rgba(255,163,0,.1); }
.ccard__flare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 80% 0%, rgba(255,163,0,.13), transparent 60%);
}
.ccard header { display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; align-items: center; margin-bottom: 26px; }
.ccard__logo { width: 44px; height: 44px; border-radius: 12px; grid-row: span 2; }
.ccard--them .ccard__logo { filter: grayscale(.4) brightness(1.6); }
.ccard h3 { font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.6vw, 22px); }
.ccard__price { color: var(--muted); font-size: 14px; }
.ccard__price span { color: var(--dim); font-size: 11px; }
.ccard--us .ccard__price { color: var(--amber); }

.ccard__tokens { margin-bottom: 26px; }
.ccard__tnum { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ccard__tnum--amber { color: var(--amber); }
.ccard__tlabel { color: var(--dim); margin: 6px 0 12px; }
.stamp {
  display: inline-block; color: #0B0B0D; background: var(--amber);
  font-style: normal; padding: 2px 10px; border-radius: 6px;
  transform: rotate(-4deg) scale(0); font-weight: 500;
}
.ccard__bar { height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.ccard__bar i { display: block; height: 100%; width: 0; background: var(--dim); border-radius: 4px; }
/* янтарный бар «пробивает» шкалу — метафора +50% */
.ccard__bar--amber { overflow: visible; }
.ccard__bar--amber i {
  background: linear-gradient(90deg, var(--amber), var(--amber-soft));
  box-shadow: 0 0 14px rgba(255,163,0,.6);
  position: relative;
}
.ccard__bar--amber i::after {
  content: ''; position: absolute; right: -3px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 16px 4px rgba(255,163,0,.9);
}

.ccard__list { list-style: none; display: grid; gap: 13px; }
.ccard__list li {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 15px; color: var(--muted);
  opacity: 0; transform: translateX(-14px);
}
.ccard--us .ccard__list li { color: var(--text); transform: translateX(14px); }
.ccard__list li::before {
  font-family: var(--mono); font-size: 13px; flex: 0 0 16px;
}
.ccard__list li[data-mark="minus"]::before { content: '✕'; color: var(--red); }
.ccard__list li[data-mark="plus"]::before { content: '✓'; color: var(--amber); }

@media (max-width: 900px) {
  .compare__grid { grid-template-columns: 1fr; }
  .compare__vs { padding: 6px 0; }
}

/* ---------- S4 · Вас ничто не остановит ---------- */
.limits { overflow: hidden; }
.limits > .sec-kicker, .limits > .sec-title { position: relative; z-index: 2; }

/* стена ЛИМИТ — на весь экран, слово в центре */
.limitwall {
  position: relative; z-index: 2;
  margin: 0 calc(var(--pad) * -1) clamp(40px, 7vh, 90px);
  height: 100vh; height: 100svh;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  will-change: transform;
}
.limitwall__word {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(64px, 16.5vw, 260px); line-height: .95;
  color: var(--red); letter-spacing: .01em;
  display: flex; white-space: pre;
  text-shadow: 0 0 60px rgba(229,72,77,.35);
}
.limitwall__word span { display: inline-block; will-change: transform, opacity; }
.limitwall__sub { color: rgba(229,72,77,.75); font-size: 13px; }
.limitwall__flash {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; pointer-events: none; will-change: opacity;
}

.limits__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px);
  max-width: 1180px; margin: 0 auto;
}
.lcol { border-radius: 24px; padding: clamp(24px, 3vw, 42px); border: 1px solid var(--line); }
.lcol h3 { font-size: 14px; letter-spacing: .3em; margin-bottom: 30px; }
.lcol--them { background: #121012; }
.lcol--them h3 { color: var(--dim); }
.lcol--them.is-frozen { filter: grayscale(.7) contrast(.92); }
.lcol--us { background: linear-gradient(160deg, #16120a, #121214 70%); border-color: rgba(255,163,0,.35); }
.lcol--us h3 { color: var(--amber); }
.lcol__note { margin-top: 26px; color: var(--muted); font-size: 15px; }

.lim { margin-bottom: 24px; }
.lim__head { display: flex; justify-content: space-between; color: var(--dim); margin-bottom: 8px; }
.lim__pct { font-variant-numeric: tabular-nums; }
.lim__bar { height: 8px; border-radius: 6px; background: #1c1a1c; overflow: hidden; position: relative; }
.lim__bar i {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, #6d6a63, #a39f96);
}
.lim__bar.is-maxed i { background: linear-gradient(90deg, #b23e42, var(--red)); box-shadow: 0 0 18px rgba(229,72,77,.5); }
.lim__stamp {
  margin-top: 10px; display: inline-block;
  color: var(--red); border: 1px solid rgba(229,72,77,.5); border-radius: 6px;
  padding: 5px 12px; font-size: 11px;
  opacity: 0; transform: rotate(-3deg) scale(1.6);
}

/* поток токенов: три бегущие строки разной скорости */
.flow-wrap { display: grid; justify-items: center; gap: 20px; padding: 14px 0 0; }
.flow {
  width: 100%; display: grid; gap: 10px; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.flow p {
  white-space: nowrap; font-size: 11.5px; letter-spacing: .14em;
  color: rgba(255,163,0,.55); will-change: transform;
}
.flow p:nth-child(2) { color: rgba(245,181,68,.4); }
.flow p:nth-child(3) { color: rgba(255,163,0,.28); }
.inf__label {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px); color: var(--amber);
  letter-spacing: .06em;
  text-shadow: 0 0 34px rgba(255,163,0,.4);
}

@media (max-width: 900px) { .limits__grid { grid-template-columns: 1fr; } }

/* ---------- S5 · Выбирай модель под задачу ---------- */
.match { padding: 0; }
.match__pin {
  min-height: 100vh; padding: clamp(90px, 12vh, 140px) var(--pad);
  display: flex; flex-direction: column;
}
.match__stage {
  position: relative; flex: 1;
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1080px; margin: 0 auto; width: 100%;
  min-height: 380px;
}
.match__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.match__wires path {
  fill: none; stroke: url(#wireGrad); stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(255,163,0,.35));
}
.match__models, .match__tasks { display: grid; gap: clamp(28px, 6vh, 64px); position: relative; z-index: 2; }

.mnode {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; padding: 12px 22px 12px 12px;
  will-change: transform;
}
.mnode img { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #0B0B0D; border: 1px solid var(--line); }
.mnode[data-node="openai"] img { filter: invert(1); }
.mnode span { color: var(--muted); font-size: 12px; }
.mnode.is-lit { border-color: rgba(255,163,0,.5); box-shadow: 0 0 26px rgba(255,163,0,.15); }

.mtask { text-align: left; will-change: transform, opacity; }
.mtask b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 2.6vw, 34px); letter-spacing: .02em;
  color: var(--dim); transition: color .4s, text-shadow .4s;
}
.mtask span { color: var(--dim); font-size: 13px; opacity: 0; display: inline-block; transform: translateY(8px); }
.mtask.is-lit b { color: var(--text); text-shadow: 0 0 30px rgba(255,163,0,.45); }
.mtask.is-lit span { opacity: 1; transform: none; transition: opacity .5s .1s, transform .5s .1s; }

.match__note { text-align: center; color: var(--dim); margin-top: 30px; opacity: 0; }

@media (max-width: 900px) {
  .match__stage { flex-direction: column; align-items: stretch; gap: 40px; min-height: 0; }
  .match__wires { display: none; }
}
