/* Главная (welcome.blade.php), дизайн v2. Отдельный статический файл, а не app.css:
   Tailwind собран Vite, и пересобирать сборку ради одной страницы не хотим.
   Подключается только на главной через @push('head'); все классы с префиксом jc-.
   Карточки магазинов, купонов и акций, кнопки, плашка кешбэка, заголовки секций и «Все …»,
   видимость по ширине (jc-d / jc-m) — общие: public/css/jc-components.css (форма купона — jc-coupon.css).
   Здесь — только своё: первый экран, «Как это работает», фон и отступы секций. */

.jc-wrap{max-width:80rem;margin:0 auto;padding:0 16px}
@media (min-width:640px){.jc-wrap{padding:0 24px}}
@media (min-width:1024px){.jc-wrap{padding:0 32px}}

/* Кнопка регистрации на телефоне — во всю ширину первого экрана */
.jc-hero .jc-m.jc-btn{width:100%;max-width:340px;padding:16px 22px}

/* 1. Первый экран */
.jc-hero{position:relative;overflow:hidden;background:#fff}
.jc-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.jc-hero__in{position:relative;z-index:2;max-width:42rem;margin:0 auto;padding:26px 16px 22px;text-align:center}
@media (min-width:768px){.jc-hero__in{padding:40px 24px 34px}}
.jc-hero__title{font-family:Nunito,Inter,sans-serif;font-weight:800;font-size:clamp(27px,4.2vw,40px);line-height:1.12;letter-spacing:-.01em;color:#17171f;text-wrap:balance;margin:0 auto 12px;max-width:40rem}
/* Цвета сервиса: кешбэк — жёлтый, промокоды — голубой, число магазинов — розовый */
.jc-hl-cb{color:#E9A400}
.jc-hl-pc{color:#00B4D8}
/* Число не рвём по пробелу-разделителю тысяч («30 000+» в ru, fr, pl) */
.jc-hl-n{color:#FF007F;white-space:nowrap}
.jc-hero__sub{font-size:clamp(15px,1.5vw,17px);line-height:1.5;color:#4b5159;font-weight:500;text-wrap:balance;margin:0 auto 22px;max-width:37rem}
.jc-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.jc-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:18px 0 0;padding:0;font-size:13.5px;color:#3f444b;font-weight:600}
.jc-trust li{display:inline-flex;align-items:center;gap:5px}
.jc-trust .jc-i{width:16px;height:16px;color:#16a34a}

/* «Как это работает» — три шага */
.jc-how{background:#f3f3f3;padding:16px 0 0;scroll-margin-top:12px}
.jc-how__list{max-width:80rem;margin:0 auto;list-style:none;padding:0 16px;display:grid;gap:0}
.jc-how__list li{display:flex;gap:12px;align-items:center;background:#fff;padding:11px 14px;border-bottom:1px solid #f0f0f3}
.jc-how__list li:first-child{border-radius:14px 14px 0 0}
.jc-how__list li:last-child{border-radius:0 0 14px 14px;border-bottom:0}
.jc-how__n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;font:800 14px/28px Nunito,Inter,sans-serif;text-align:center}
.jc-how__list li:nth-child(3) .jc-how__n{color:#4a3600}
.jc-how__list b{display:block;font-size:14.5px;color:#17171f;line-height:1.3}
.jc-how__list p{margin:1px 0 0;font-size:13px;color:#6b7280;line-height:1.35}
@media (min-width:640px){.jc-how__list{padding:0 24px}}
/* После «Как это работает»: шаги коротко подсвечиваются, цифры по очереди «подпрыгивают» (класс ставит jc-components.js) */
.jc-how--flash .jc-how__list li{animation:jc-how-bg 1.8s ease}
.jc-how--flash .jc-how__n{animation:jc-how-pop .55s ease both .1s}
.jc-how--flash .jc-how__list li:nth-child(2) .jc-how__n{animation-delay:.35s}
.jc-how--flash .jc-how__list li:nth-child(3) .jc-how__n{animation-delay:.6s}
@keyframes jc-how-bg{0%,100%{background:#fff}20%,55%{background:#FFE8F3}}
@keyframes jc-how-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.38)}}
@media (prefers-reduced-motion:reduce){.jc-how--flash .jc-how__n{animation:none}}
@media (min-width:768px){
  .jc-how{padding-top:24px}
  .jc-how__list{grid-template-columns:repeat(3,1fr)}
  .jc-how__list li{padding:18px 20px;border-bottom:0;border-right:1px solid #f0f0f3;align-items:flex-start}
  .jc-how__list li:first-child{border-radius:16px 0 0 16px}
  .jc-how__list li:last-child{border-radius:0 16px 16px 0;border-right:0}
  .jc-how__list b{font-size:15.5px}
  .jc-how__list p{font-size:13.5px}
}
@media (min-width:1024px){.jc-how__list{padding:0 32px}}

/* Фон и отступы секций (заголовок секции и «Все …» — в jc-components.css) */
.jc-sec{background:#f3f3f3;padding:28px 0 4px}
@media (min-width:768px){.jc-sec{padding-top:40px}}
.jc-sec--last{padding-bottom:48px}