/* Собрано build.py из экспорта Claude Design. Правки — в исходниках или здесь. */
:root {
  --dc-cols2: 1fr 1.3fr;
  --dc-cols3: repeat(3, 1fr);
  --dc-cols4: repeat(4, 1fr);
  --dc-ctaInnerPad: 80px 56px;
  --dc-ctaOuterPad: 40px 56px 130px;
  --dc-heroPad: 96px 56px 0;
  --dc-problemPad: 90px 56px;
  --dc-sectionPad: 120px 56px;
  --dc-statDivider: none;
  --dc-statDividerSide: 1px solid oklch(0.9 0.006 250);
  --dc-statPadTop: 0;
}
@media (max-width: 820px) {
  :root {
    --dc-cols2: 1fr;
    --dc-cols3: 1fr;
    --dc-cols4: repeat(2, 1fr);
    --dc-ctaInnerPad: 48px 28px;
    --dc-ctaOuterPad: 20px 20px 80px;
    --dc-heroPad: 64px 20px 0;
    --dc-problemPad: 60px 20px;
    --dc-sectionPad: 72px 20px;
    --dc-statDivider: 1px solid oklch(0.9 0.006 250);
    --dc-statDividerSide: none;
    --dc-statPadTop: 20px;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:oklch(0.985 0.004 250)}
img{max-width:100%}

/* sc-if из Design: display:contents сохраняет исходную раскладку родителя */
.dc-desktop{display:contents}
.dc-mobile{display:none}
.dc-menu[hidden]{display:none}
.dc-zoom[hidden]{display:none}
body.dc-locked{overflow:hidden}
@media (max-width: 820px) {
  .dc-desktop{display:none}
  .dc-mobile{display:contents}
}

/* style-hover из Design */
a,button{transition:background .18s ease,color .18s ease,border-color .18s ease,
  transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.h1:hover{background: oklch(0.48 0.2 265)}
.h2:hover{background: oklch(0.55 0.19 265)}
.h3:hover{color: oklch(0.55 0.19 265)}
.h4:hover{transform: translateY(-4px) scale(1.03); box-shadow: 0 26px 54px -26px oklch(0.5 0.2 265 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.8)}
.h5:hover{transform: translateY(-4px) scale(1.03); box-shadow: 0 26px 54px -26px oklch(0.6 0.18 350 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.8)}
.h6:hover{transform: translateY(-4px) scale(1.03); box-shadow: 0 26px 54px -26px oklch(0.5 0.22 280 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.8)}
.h7:hover{transform: translateY(-5px) scale(1.04); box-shadow: 0 20px 36px -18px oklch(0.5 0.2 265 / 0.4)}
.h8:hover{border-color: oklch(0.55 0.19 265); box-shadow: 0 0 0 1px oklch(0.55 0.19 265), 0 20px 44px -20px oklch(0.55 0.19 265 / 0.55), inset 0 1px 0 oklch(1 0 0 / 0.15)}
.h9:hover{background: oklch(0.55 0.19 265); border-color: oklch(0.55 0.19 265)}
.h10:hover{box-shadow: 0 0 0 2px oklch(0.65 0.19 265), 0 24px 54px -18px oklch(0.55 0.19 265 / 0.7), inset 0 1px 0 oklch(1 0 0 / 0.3)}
.h11:hover{background: oklch(0.9 0.01 265)}
.h12:hover{background: linear-gradient(135deg, oklch(0.66 0.2 265), oklch(0.56 0.2 275))}
.h13:hover{background: oklch(0.55 0.13 300)}
.h14:hover{background: rgba(255,255,255,0.26)}
.h15:hover{background: #FFFFFF; color: #4A3F63}
.h16:hover{background: #6E6091; color: #FFFFFF}
.h17:hover{background: #4A3F63}
.h18:hover{background: #6E6091; border-color: #6E6091}
.h19:hover{background: #EDE7E0}
.h20:hover{background: #6E3B34}
.h21:hover{color: #4A2629; border-color: #6E3B34}

/* Появление блоков при скролле — на чистом CSS (scroll-driven animations).
   Сознательно без JS: прятать контент и рассчитывать, что скрипт его покажет,
   слишком рискованно — любая осечка оставит страницу пустой. Здесь скрытое
   состояние существует только внутри @supports, поэтому в браузерах без
   поддержки (сейчас это Firefox) блоки просто сразу видимы. */
@keyframes dc-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: dc-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

:focus-visible{outline:2px solid oklch(0.55 0.19 265);outline-offset:3px;border-radius:6px}

/* Мобильная раскладка страниц кейсов и демо-лендингов.
   В макете Claude Design её нет вообще: на этих страницах ноль sc-if и ноль медиазапросов,
   колонки заданы жёстко (repeat(4,1fr), 0.9fr 1.1fr), контейнеры — десктопными ширинами
   (1120/900/760px). На узком экране блоки вылезали за край и обрезались (у body overflow-x
   hidden, поэтому это выглядело как срезанный текст, а не как горизонтальный скролл).
   Ниже — минимальный набор правил, приводящий такие блоки к ширине экрана.
   Десктоп не затрагивается. Сетку «номер + текст» (60px 1fr) не трогаем: она помещается. */
@media (max-width: 820px) {
  body :where(div, section, header, footer, article, figure, p, h1, h2, h3, h4, h5, h6, ul, ol) {
    max-width: 100%;
  }
  [style*="grid-template-columns: repeat("],
  [style*="grid-template-columns: 0.9fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.3fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="display: flex"] {
    flex-wrap: wrap;
  }
}