/* Єдині токени сайту: одна палітра, одна ширина контейнера, один шрифт.
   Підключається на кожній сторінці збіркою (build.mjs) першим, до решти стилів. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');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}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');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}

:root{
  /* Палітра */
  --c-ink:#142a46;
  --c-muted:#536478;
  --c-blue:#245dce;
  --c-blue-soft:#a6c7ff;
  --c-lime:#c5f16b;
  --c-lime-soft:#edf8d6;   /* світла плашка */
  --c-lime-ink:#31480f;    /* текст на світлій плашці */
  --c-lime-line:rgba(197,241,107,.45); /* контур лаймом на темному */
  --c-paper:#f5f7fa;
  --c-line:#dce3eb;
  --c-white:#ffffff;
  /* Темні секції */
  --c-navy:#0f1c2e;
  --c-navy-soft:#16263c;
  --c-line-dark:#2c3f57;
  --c-muted-dark:#a9b7c9;
  /* Розкладка і типографіка */
  --c-shell:1240px;
  --c-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

html{font-family:var(--c-font)}
body{font-family:var(--c-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-family:inherit}
h1,h2,h3{letter-spacing:-.02em}

/* Широка смуга-зображення між секціями. Кадри знімалися різними, тому
   зводимо їх до одного тону: приглушуємо насиченість і накриваємо
   градієнтом фірмового темно-синього. */
.site-band { position:relative; overflow:hidden; background:var(--c-ink); height:clamp(200px,24vw,340px); }
.site-band img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.88) brightness(.95); }
.site-band::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,42,70,.40),rgba(20,42,70,.60)); }

/* Кадр зі світлим сюжетом (папери на столі) сам по собі вдвічі світліший за
   решту смуг — притемнюємо сильніше, щоб він лишався в тому самому тоні. */
.site-band--bright img { filter:saturate(.80) brightness(.60); }
.site-band--bright::after { background:linear-gradient(180deg,rgba(20,42,70,.46),rgba(20,42,70,.66)); }

/* Пара екранів застосунку: два телефони з нахилом і перекриттям, щоб показати
   два стани й не тягнути висоту блоку. Світла і темна підкладки — модифікатори. */
.phone-pair{display:flex;align-items:center;justify-content:center;padding:26px 10px}
.phone-pair figure{margin:0;flex:0 0 auto;width:158px;overflow:hidden;border-radius:26px;border:6px solid var(--c-line);background:var(--c-line);box-shadow:0 20px 40px rgba(34,55,80,.20)}
.phone-pair img{display:block;width:100%;height:268px;object-fit:cover;object-position:top}
.phone-pair figure:first-child{transform:rotate(-7deg) translateY(10px);z-index:1}
.phone-pair figure:last-child{margin-left:-30px;transform:rotate(7deg) translateY(-10px);z-index:2}
.phone-pair--dark figure{border-color:#273f5d;background:#273f5d;box-shadow:0 24px 46px rgba(0,0,0,.48)}
@media(max-width:700px){
  .phone-pair figure{width:132px}
  .phone-pair img{height:224px}
  .phone-pair figure:first-child{transform:rotate(-5deg) translateY(6px)}
  .phone-pair figure:last-child{margin-left:-24px;transform:rotate(5deg) translateY(-6px)}
}