/* Корень case.softable.tech — список кейсов. Палитра и шрифт — как у страниц кейсов. */

:root {
  --bg: #070b0a; --fg: #e8fff6; --muted: #a7cfc2;
  --acc: #3fbf9a; --acc2: #8fe3c4; --on-acc: #06120e;
  --card: rgba(63,191,154,.07); --brd: rgba(63,191,154,.32);
  --font: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --rad: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); }

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

.page { max-width: 980px; margin: 0 auto; padding: 0 clamp(18px, 4.5vw, 56px) 40px; }

section { margin: 0 0 clamp(34px, 5vw, 56px); }

/* Первый экран — ровно на высоту окна: его же снимает обложка превью (1200×675),
   и в кадр не должны попадать обрезанные карточки следующего блока */
.hero { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
        padding: clamp(28px, 5vw, 56px) 0; }
.facts { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 10px; }
.fact b { display: block; font-size: clamp(26px, 3.6vw, 40px); color: var(--acc); line-height: 1.05; }
.fact span { display: block; font-size: clamp(12.5px, 1.35vw, 14.5px); color: var(--muted); margin-top: 4px; }
.pill { display: inline-block; align-self: flex-start; background: var(--acc); color: var(--on-acc); padding: 6px 15px;
        border-radius: 999px; font-size: clamp(11px, 1.25vw, 13.5px); font-weight: 700; margin-bottom: 18px; }

h1 { font-size: clamp(28px, 5.4vw, 58px); line-height: 1.07; margin: 0 0 20px; font-weight: 700; letter-spacing: -.01em; }
h1 em { font-style: normal; color: var(--acc); }
h2 { font-size: clamp(20px, 3vw, 32px); line-height: 1.15; margin: 0 0 16px; font-weight: 700; letter-spacing: -.01em;
     display: flex; align-items: center; }
p { font-size: clamp(14.5px, 1.7vw, 18px); line-height: 1.6; margin: 0 0 16px; max-width: 46em; }
.lead { color: var(--muted); }
.sm { font-size: clamp(12px, 1.35vw, 14px); opacity: .65; }
.note { color: var(--muted); border-left: 2px solid var(--acc); padding-left: 14px; display: flex; align-items: flex-start; }

.ic { width: 26px; height: 26px; flex: none; margin-right: .5em;
      fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* три числа */
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.num { border: 1px solid var(--brd); background: var(--card); border-radius: var(--rad); padding: 18px 18px 16px; }
.num b { display: block; font-size: clamp(26px, 3.6vw, 40px); color: var(--acc); line-height: 1.05; margin-bottom: 10px; }
.num span { display: block; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; color: var(--muted); }

/* задание → результат */
.case { border: 1px solid var(--brd); border-radius: var(--rad); overflow: hidden; margin-bottom: 18px; }
.case-row { display: grid; grid-template-columns: 230px 1fr; gap: 18px; padding: 16px 18px; align-items: baseline; }
.case-row + .case-row { border-top: 1px solid var(--brd); }
.case-row p { margin: 0; }
.tag { font-size: clamp(11.5px, 1.2vw, 13px); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tag.acc { color: var(--acc); }

.links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.btn { display: inline-flex; align-items: center; background: var(--acc); color: var(--on-acc); text-decoration: none;
       font-weight: 700; font-size: clamp(13.5px, 1.5vw, 16px); padding: 11px 18px; border-radius: var(--rad); }
.btn .ic { stroke: var(--on-acc); width: 22px; height: 22px; }
.btn.ghost { background: transparent; color: var(--acc); border: 1px solid var(--acc); }
.btn:hover { filter: brightness(1.08); }

/* карточки «что можно попросить» */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.card { border: 1px solid var(--brd); background: var(--card); border-radius: var(--rad); padding: 15px 16px; }
.card b { display: flex; align-items: center; font-size: clamp(14px, 1.6vw, 17px); margin-bottom: 6px; }
.card span { display: block; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; color: var(--muted); }

/* шаги */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step { position: relative; border: 1px solid var(--brd); background: var(--card); border-radius: var(--rad); padding: 15px 16px 14px; }
.step .n { position: absolute; top: 10px; right: 14px; font-size: 28px; font-weight: 700; color: var(--acc); opacity: .35; line-height: 1; }
.step b { display: block; font-size: clamp(13.5px, 1.5vw, 16px); margin: 0 26px 6px 0; }
.step span { display: block; font-size: clamp(12.5px, 1.3vw, 14px); line-height: 1.45; color: var(--muted); }

.after-nums { color: var(--muted); margin-top: 16px; }

/* отзыв клиента */
.review blockquote { margin: 0 0 12px; padding: 4px 0 4px 20px; border-left: 3px solid var(--acc);
  font-size: clamp(16px, 2vw, 21px); line-height: 1.6; max-width: 44em; }
.review blockquote::before { content: "«"; color: var(--acc); }
.review blockquote::after { content: "»"; color: var(--acc); }
.review .who { color: var(--muted); font-size: clamp(13px, 1.4vw, 15px); padding-left: 23px; margin: 0; }
.review .who b { color: var(--fg); }

.cta { border: 1px solid var(--acc); border-radius: var(--rad); padding: clamp(20px, 3.5vw, 34px); background: var(--card); }

.foot { font-size: 13px; color: var(--muted); opacity: .7; padding-top: 8px; }

@media (max-width: 760px) {
  .nums, .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .case-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 420px) {
  .steps { grid-template-columns: 1fr; }
}

/* карточки-ссылки на кейсы */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
a.case-card { display: block; text-decoration: none; color: var(--fg); border: 1px solid var(--brd); background: var(--card);
  border-radius: var(--rad); overflow: hidden; }
a.case-card:hover { border-color: var(--acc); }
a.case-card img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--brd); }
a.case-card .body { padding: 14px 16px 16px; }
a.case-card b { display: block; font-size: clamp(15px, 1.8vw, 19px); margin-bottom: 6px; }
a.case-card span { display: block; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; color: var(--muted); }
a.case-card .go { color: var(--acc); margin-top: 10px; }
@media (max-width: 760px) { .cases { grid-template-columns: 1fr; } }