/* ==================================================
   base.css — глобальные базовые стили
   PROD 27-04-2025
   ================================================== */

/* ---------- system tokens ------------------------ */
:root{
  /* цветовая схема */
  --bg-dark:#0b0b0f;      --bg-light:#ffffff;
  --txt-dark:#ffffff;     --txt-light:#111111;

  /* action-gradient */
  --grad-1:#3b82f6;       --grad-2:#60a5fa;
  --grad-hov-1:#2563eb;   --grad-hov-2:#3b82f6;

  --radius:12px;          /* базовый border-radius */
}

/* ---------- reset / base ------------------------- */
*,::before,::after{box-sizing:border-box;}
html{
  /* fluid scale — 15→17 px между 320-1440 px */
  font-size:clamp(15px,1vw + .5rem,17px);
  line-height:1.5;
  scroll-behavior:smooth;
}
body{
  margin:0;font-family:'Inter',sans-serif;
  background:var(--bg-dark);color:var(--txt-dark);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent; /* clean tap-flash */
}
body.light-theme{background:var(--bg-light);color:var(--txt-light);}

img,svg{max-width:100%;display:block;}

/* ---------- layout container --------------------- */
.container{
  width:100%;max-width:1280px;margin-inline:auto;
  padding-inline:clamp(16px,4vw,24px);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;row-gap:32px;
}

/* ---------- lists -------------------------------- */
ul{margin:0;padding:0;list-style:none;display:flex;gap:32px;}

/* ---------- primary button ----------------------- */
.btn-main{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--grad-1),var(--grad-2));
  color:#fff;padding:14px 24px;border-radius:var(--radius);
  font:600 1rem/1 'Inter',sans-serif;
  text-decoration:none;white-space:nowrap;
  transition:background .3s,box-shadow .3s;
}
.btn-main:hover{
  background:linear-gradient(135deg,var(--grad-hov-1),var(--grad-hov-2));
  box-shadow:0 0 12px rgba(59,130,246,.6);
}
.btn-icon{width:20px;height:20px;filter:invert(1);}

/* ---------- custom scrollbar (WebKit) ------------ */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);border-radius:4px;
}
body.light-theme ::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.25);
}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- motion-safe -------------------------- */
@media (prefers-reduced-motion:reduce){
  *,::before,::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- breakpoints -------------------------- */
/* ≤1024 px — планшеты */
@media (max-width:1024px){
  .container{justify-content:center;column-gap:32px;}
  ul{flex-wrap:wrap;justify-content:center;gap:24px;}
  .btn-main{padding:12px 20px;font-size:.95rem;}
}

/* ≤640 px — мобильные */
@media (max-width:640px){
  .container{flex-direction:column;align-items:center;padding-inline:16px;}
  ul{flex-direction:column;align-items:center;gap:16px;}
  .btn-main{width:100%;padding:12px 18px;font-size:.95rem;}
}