/* =====================================================================
   base.css — шрифты, цвета, сетка, общие элементы (кнопки, вкладки).

   Макет рассчитан на 4 ширины колонки (как в оригинальном дизайне):
     ≥1440px — 1440   ·   1250–1439 — 1250   ·   740–1249 — 740   ·   <740 — 320
   Внутри колонки блоки стоят на тех же местах, что в дизайне (px).
   ===================================================================== */

@font-face { font-family: "NewBlack"; src: url(../fonts/NewBlackTypeface-Medium.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "NewBlack"; src: url(../fonts/NewBlackTypeface-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "NewBlack"; src: url(../fonts/NewBlackTypeface-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/Inter-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url(../fonts/Inter-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --navy: #1f3f5b;
  --cyan: #32ced8;
  --bg: #f2f5f8;
  --line: #7d97ac;
  --media: #dfe6ea;
  --head: "NewBlack", Inter, sans-serif;
  --text: "Inter", system-ui, sans-serif;
  --col: 1440px;
}
@media (max-width: 1439px) { :root { --col: 1250px; } }
@media (max-width: 1249px) { :root { --col: 740px; } }
@media (max-width: 739px)  { :root { --col: 320px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: #000;
  font: 400 16px/1.2 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 700; }

/* ---------- layout ---------- */
.section { position: relative; background: var(--bg); overflow-x: clip; }   /* ничего не вылезает вбок (иначе мобильный браузер уменьшает масштаб) */
.wrap { position: relative; width: var(--col); height: 100%; margin-inline: auto; }
.abs { position: absolute; }                 /* блок, поставленный по координатам макета */
.cover { object-fit: cover; width: 100%; height: 100%; }
.head { font-family: var(--head); font-weight: 500; }

/* ---------- кнопка «Текст →» ---------- */
.btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 179px; height: 38px; padding: 0 14px 0 15px;
  border-radius: 5px; background: var(--cyan); color: #fff;
  font: 500 16px/1 var(--head); white-space: nowrap;
}
.btn--navy { background: var(--navy); }
.btn::after {
  content: ""; width: 10px; height: 10px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M218.1 38.1l-19.8 19.8c-4.7 4.7-4.7 12.3 0 17L353.4 230H12c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h341.4L198.3 437.1c-4.7 4.7-4.7 12.3 0 17l19.8 19.8c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17L235.1 38.1c-4.7-4.7-12.3-4.7-17 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M218.1 38.1l-19.8 19.8c-4.7 4.7-4.7 12.3 0 17L353.4 230H12c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h341.4L198.3 437.1c-4.7 4.7-4.7 12.3 0 17l19.8 19.8c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17L235.1 38.1c-4.7-4.7-12.3-4.7-17 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 739px) {
  .btn { width: 144px; height: 31px; padding: 0 14px 0 11px; font-size: 13px; }
}

/* ---------- вкладки-«пилюля» «For Consumers | For Businesses» ---------- */
.pill {
  display: flex; gap: 0; width: 432px; height: 50px; padding: 0;
  border: 1px solid var(--line); border-radius: 30px; background: var(--bg);
}
.pill button {
  width: 215px; height: 48px; border-radius: 30px;
  font: 500 18px/1 var(--head); color: #000; background: var(--bg);
  transition: background-color 1s, color 1s;
}
.pill button.is-active { background: var(--navy); color: var(--bg); }
@media (max-width: 739px) {
  .pill { width: 314px; height: 28px; }
  .pill button { width: 156px; height: 26px; font-size: 12px; }
}

/* ---------- панели вкладок: плавная смена (1 с, как в оригинале) ---------- */
.panels { display: grid; }
.panels > [data-panel] { grid-area: 1 / 1; transition: opacity 1s; }
.panels > [data-panel]:not(.is-active) { opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s; }

/* ---------- появление при прокрутке (js/main.js ставит .is-in) ---------- */
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { opacity: 0; translate: 0 var(--dist, 20%); } to { opacity: 1; translate: 0 0; } }
.js [data-anim] { opacity: 0; }
.js [data-anim].is-in { opacity: 1; }
.js [data-anim="fade"].is-in  { animation: fade-in 1s cubic-bezier(.85, 0, .15, 1) var(--delay, 0s) backwards; }
.js [data-anim="slide"].is-in { animation: slide-in var(--dur, .5s) var(--ease, cubic-bezier(0, 0, .58, .58)) var(--delay, 0s) backwards; }
/* проявление, привязанное к прокрутке (Chrome/Edge; в остальных браузерах блок просто виден) */
@supports (animation-timeline: view()) {
  .js [data-anim="scroll"] { opacity: 1; animation: fade-in cubic-bezier(0, 0, .58, .58) both; animation-timeline: view(); animation-range: cover 0% cover var(--range, 30%); }
}
.js [data-anim="scroll"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js [data-anim] { opacity: 1 !important; animation: none !important; } }