/* ============================================================
   ScanChamp — 02 · BASE
   Сброс, типографика, утилиты разметки, кнопки и бейджи.
   ============================================================ */

/* ---------- Сброс / база ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:92px;}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-ui);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
::selection{background:var(--blue-200);color:var(--ink);}

/* Иконка-спрайт: все <svg class="ic"> используют <use href="#id"> из спрайта в index.html */
.ic{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:none;}

/* ---------- Анимированная иконка-бургер (мобильное меню) ---------- */
/* Три полоски, которые при классе .open у кнопки превращаются в крестик. */
.burger-box{position:relative;width:22px;height:16px;display:block;}
.burger-line{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .2s ease;}
.burger-line:nth-child(1){top:0;}
.burger-line:nth-child(2){top:7px;}
.burger-line:nth-child(3){top:14px;}
.burger.open .burger-line:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open .burger-line:nth-child(2){opacity:0;}
.burger.open .burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Утилиты разметки ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.section{padding:104px 0;}
.section--tight{padding:80px 0;}

.eyebrow{
  font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--blue-500);margin:0 0 16px;
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow--orange{color:var(--orange-500);}

.h-display{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1.04;margin:0;}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.02em;line-height:1.08;margin:0;}
.h3{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;line-height:1.3;margin:0;}
.lead{font-size:19px;line-height:1.6;color:var(--slate);margin:0;}
.muted{color:var(--slate);}

.section-head{max-width:760px;margin:0 0 56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- Кнопки (универсальная утилита .btn) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-ui);font-weight:600;font-size:16px;
  padding:14px 22px;border-radius:var(--r-md);
  transition:transform .18s cubic-bezier(.2,0,0,1),box-shadow .25s,background .2s,border-color .2s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue-500);color:#fff;box-shadow:var(--shadow-fab);}
.btn-primary:hover{background:#0a5cff;box-shadow:0 14px 34px rgba(0,102,255,.42);transform:translateY(-2px);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#000;transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--gray-200);}
.btn-ghost:hover{border-color:var(--blue-400);color:var(--blue-600);transform:translateY(-2px);}
.btn .sub{font-weight:500;opacity:.7;font-size:13px;}
.btn svg{width:20px;height:20px;flex:none;}

/* ---------- Кнопка магазина (App Store / Google Play) ---------- */
.store{
  display:inline-flex;align-items:center;gap:11px;padding:10px 18px;border-radius:14px;
  border:1.5px solid var(--gray-200);background:#fff;transition:all .2s;line-height:1.15;
}
.store:hover{border-color:var(--blue-400);transform:translateY(-2px);box-shadow:var(--shadow-card);}
.store.dark{background:var(--ink);border-color:var(--ink);color:#fff;}
.store.dark:hover{background:#000;}
.store svg{width:26px;height:26px;flex:none;}
.store .meta{display:flex;flex-direction:column;}
.store .meta .t,.store .meta .n{white-space:nowrap;}
.store .meta .t{font-size:11px;opacity:.7;letter-spacing:.02em;}
.store .meta .n{font-size:16px;font-weight:700;font-family:var(--font-display);}

/* Вариант кнопки магазина с рейтингом (используется в hero и финальном CTA) */
.store-qr{
  display:inline-flex;align-items:center;gap:13px;padding:11px;border-radius:16px;
  border:1.5px solid var(--gray-200);background:#fff;color:var(--ink);
  transition:transform .2s,box-shadow .25s,border-color .2s;min-height:76px;box-sizing:border-box;
}
.store-qr.dark{background:var(--ink);border-color:var(--ink);color:#fff;}
.store-qr:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);border-color:var(--blue-400);}
.store-qr-main{display:flex;align-items:center;gap:11px;}
.store-qr-main>svg{width:25px;height:25px;flex:none;}
.store-qr .meta{display:flex;flex-direction:column;line-height:1.18;}
.store-qr .meta .t,.store-qr .meta .n{white-space:nowrap;}
.store-qr .meta .t{font-size:11px;opacity:.66;}
.store-qr .meta .n{font-size:17px;font-weight:700;font-family:var(--font-display);}
.store-qr .meta .r{font-size:12px;font-weight:700;color:#E8A400;display:inline-flex;align-items:center;gap:3px;margin-top:3px;}
.store-qr.dark .meta .r{color:#FFD43B;}

/* ---------- Блок «кнопки + один крупный QR» ---------- */
/* QR-панель прячется на мобильных (см. 04-responsive.css). */
.store-block{display:flex;align-items:stretch;gap:16px;flex-wrap:nowrap;width:100%;}
.store-col{display:flex;flex-direction:column;gap:12px;justify-content:center;flex:1 1 auto;min-width:0;}
.store-col .store-qr{flex:0 0 76px;min-height:76px;justify-content:center;}
.store-col .store-qr .store-qr-main{padding-right:0;}
.qr-panel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#fff;border:1.5px solid var(--gray-200);border-radius:18px;padding:12px 16px;
  box-shadow:var(--shadow-xs);flex:none;
}
.qr-large{width:102px;height:102px;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);gap:2px;}
.qr-large i{background:var(--ink);border-radius:2px;}
.qr-cap{font-size:13px;font-weight:600;color:var(--slate);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.qr-cap svg{color:var(--blue-500);}

/* ---------- Чипы / бейджи ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--gray-200);font-size:14px;font-weight:600;color:var(--graphite);
  box-shadow:var(--shadow-xs);
}
.chip svg{width:16px;height:16px;}
.badge-pro{
  font-family:var(--font-ui);font-weight:800;font-size:11px;letter-spacing:.08em;
  color:#fff;padding:3px 8px;border-radius:5px;background:var(--gradient-pro);
}

/* ---------- Появление при скролле (логика — в js/main.js) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,0,0,1),transform .7s cubic-bezier(.2,0,0,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.07s;} .reveal.d2{transition-delay:.14s;} .reveal.d3{transition-delay:.21s;} .reveal.d4{transition-delay:.28s;}