/* ========== Design tokens ========== */
:root{
  --bg:#111317;
  --card:#171a20;
  --card-2:#0f1217;
  --text:#eaeef6;
  --muted:#c9d0e3;
  --accent:#ffa322;       /* помаранчевий для лінків/акцентів */
  --brand-red:#e64035;    /* червоний для "Cash" */
  --shadow:rgba(0,0,0,.35);
  --ring:rgba(255,163,34,.35);

  /* єдиний керований відступ у блоці hero:
     однаковий між H1↔підзаголовком та підзаголовком↔кнопкою */
  --hero-gap: clamp(14px, 3.2vw, 22px);
}

/* ========== Resets ========== */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html,body{background:var(--bg);color:var(--text);font:16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
html,body{overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Utilities */
.container{width:min(1120px,92%);margin:0 auto}
.title{font-family:Montserrat, Inter, sans-serif;font-weight:800;font-size:clamp(22px,4.8vw,36px);margin:0 0 18px}
.lead{color:var(--muted)}
.grid{display:grid;gap:18px}
.hl{color:var(--accent);font-weight:800}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:6px 10px;border-radius:999px}

/* Cards */
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px;box-shadow:0 10px 30px var(--shadow)}
.card--soft{background:var(--card-2)}
.card h3{margin:0 0 10px}

/* ========== Brand ========== */
.brand{font-weight:800;letter-spacing:.2px;display:inline-flex;align-items:center;gap:2px}
.brand .cash{color:var(--brand-red)}
.brand .flow{color:#fff}

/* ========== Header & Nav ========== */
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.65));backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}
.header__in{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.main-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.main-nav a{color:var(--text);opacity:.9}
.main-nav a:hover{opacity:1}
.header__actions{display:flex;gap:12px;align-items:center}

/* Burger */
.burger{display:none;position:relative;width:40px;height:40px;border:0;background:transparent;color:var(--text);cursor:pointer}
.burger span, .burger::before, .burger::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--text);transition:.25s}
.burger span{top:50%;transform:translateY(-50%)}
.burger::before{top:14px}
.burger::after{bottom:14px}

/* Mobile panel */
@media (max-width: 940px){
  .burger{display:inline-block}
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(420px,85%); height:100vh;
    background:linear-gradient(180deg,#0e1116,#0b0e12);
    transform:translateX(100%); transition:transform .28s ease; padding:22px;
    display:flex; flex-direction:column; gap:18px; border-left:1px solid rgba(255,255,255,.06);
  }
  body.nav-open .main-nav{transform:translateX(0)}
  .main-nav ul{flex-direction:column; gap:14px}
  .nav-close{position:absolute; top:8px; right:8px; width:40px; height:40px; border:0; background:transparent; color:#fff; font-size:28px; cursor:pointer}
  .nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:.25s}
  body.nav-open .nav-overlay{opacity:1; pointer-events:auto}
  body.nav-open{overflow:hidden}
}

/* ========== Hero ========== */
.hero{
  position:relative; padding:56px 0 52px; background:
  radial-gradient(60% 80% at 50% 0%, rgba(255,163,34,.12) 0%, rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(18,18,18,.25), rgba(12,12,12,0) 35%),
  url("img/flows/invest.jpg") center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero__in{text-align:center}

/* однакові відступи завдяки --hero-gap */
.hero__title{
  font-family:Montserrat, Inter, sans-serif; font-weight:900; line-height:1.1; letter-spacing:.2px;
  font-size:clamp(30px,6vw,72px); margin:0 0 var(--hero-gap);
}
/* підзаголовок без нижнього відступу */
.hero__sub{
  color:var(--muted);
  margin:0;               /* важливо */
}

/* кнопка в hero з таким самим відступом, як у H1→sub */
.hero .btn{
  display:inline-flex;     /* щоб вертикальні відступи працювали */
  margin-top:var(--hero-gap);
}

/* базовий стиль кнопки */
.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  font-weight:700;
  padding:12px 22px;
  border-radius:14px;
  color:#111;
  background:linear-gradient(180deg,#ffbe55,#ffa322);
  box-shadow:0 10px 22px var(--ring);
}
.btn:active{transform:translateY(1px)}

/* ========== KPIs на головній ========== */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0}
.kpi{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:18px; text-align:center}
.kpi .value{font-weight:900; font-size:28px; color:var(--accent)}
.kpi .label{color:var(--muted); font-weight:600}
@media (max-width:940px){ .kpis{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .kpis{grid-template-columns:1fr} }

/* ========== Advantages grid ========== */
.adv{grid-template-columns:repeat(3,1fr)}
@media (max-width:940px){ .adv{grid-template-columns:1fr} }

/* ========== Flows page ========== */
.flow-banner{width:100%; aspect-ratio:16/7; max-height:420px; object-fit:cover; border-radius:16px; border:1px solid rgba(255,255,255,.06)}
@media (max-width:560px){ .flow-banner{aspect-ratio:16/9; max-height:260px} }
.flow-box{margin:16px 0 26px}
.flow-box ul{margin:10px 0 0 16px}
.flow-box li{margin:6px 0}

/* ========== Platforms page ========== */
.pf-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){ .pf-grid{grid-template-columns:1fr} }
.pf-card{overflow:hidden}
.pf-flag{width:100%; height:180px; object-fit:cover; border-radius:12px}
@media (min-width:900px){ .pf-flag{height:200px} }
.pf-title{font-weight:800; margin:10px 0 4px}
.pf-link{display:inline-block; margin-top:6px}

/* ========== Sections & footer ========== */
.section{padding:56px 0}
.footer{border-top:1px solid rgba(255,255,255,.06); padding:24px 0; color:var(--muted)}
.footer .brand .flow{color:#eaeef6}

/* Misc */
.note{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:14px 16px; border-radius:12px}
.sep{height:1px; background:rgba(255,255,255,.06); margin:32px 0}

/* Ensure no element breaks width */
[style*="width: 100vw"]{max-width:100%}
/* --- Logo near brand --- */
.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;                 /* відступ між логотипом і текстом */
  font-weight:800;
  letter-spacing:.2px;
}

.brand__logo{
  width:24px;
  height:24px;
  object-fit:contain;
  display:block;
  border-radius:4px;
}

@media (min-width:940px){
  .brand__logo{ width:28px; height:28px; }
}
/* ==== FIX: прихований хрестик у хедері ==== */
.site-header .main-nav .nav-close{ display:none !important; }

/* показуємо хрестик ТІЛЬКИ коли меню відкрите і тільки на мобайлі */
@media (max-width:940px){
  body.nav-open .site-header .main-nav .nav-close{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    position:absolute; top:8px; right:8px;
    width:40px; height:40px; border:0; background:transparent;
    color:#fff; font-size:28px; cursor:pointer;
  }
}

/* ==== ЛОГО: збільшити значок у 2× та напис у 1.5× ==== */
.site-header .brand{
  font-size:1.5em;                  /* 1.5× більший текст CashFlow */
  display:inline-flex; align-items:center; gap:10px;
}
.site-header .brand::before{
  content:"";
  width:44px; height:44px;          /* 2× від попередніх ~22px */
  background:url("znak.png") center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

/* трохи підняти висоту хедера, щоб великий логотип виглядав охайно */
.header__in{ min-height:72px; }
/* ===== Brand logo (один екземпляр) ===== */
.brand--logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(18px, 2.2rem, 28px); /* напис CashFlow ~1.5x */
  font-weight: 800;
  letter-spacing: .2px;
}
.brand--logo::before{
  content:"";
  display:inline-block;
  width: 42px;    /* іконка ~2x */
  height: 42px;
  background: url("img/znak.png") center/contain no-repeat;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* чисто щоб не було артефактів */
}
/* на випадок якщо десь залишився <img> всередині бренду — ховаємо */
.brand--logo img{ display:none !important; }

/* ===== Off-canvas меню: верхній відступ і хрестик ===== */
@media (max-width: 940px){
  .main-nav{
    z-index: 60;                      /* поверх усього */
    overflow-y: auto;                 /* щоб все прокручувалось */
    padding-top: max(80px, calc(var(--header-h,64px) + env(safe-area-inset-top, 0px) + 16px));
  }
  .nav-close{
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 8px); /* не прилягає до краю екрана/вирізу */
    right: 8px;
    width: 40px; height: 40px;
    line-height: 40px;
    font-size: 28px;
    color: #fff;
    background: transparent;
    border: 0;
    z-index: 61;
  }
  body.nav-open{ overflow: hidden; } /* блокуємо фон */
}
/* ===== Benefits icons ===== */
.benefit-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.benefit-head h3{margin:0}

.benefit-ico{
  width:72px;height:72px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,163,34,.12), rgba(255,163,34,.06));
  border:1px solid rgba(255,163,34,.25);
  box-shadow:0 10px 24px var(--shadow), inset 0 0 0 4px rgba(255,163,34,.05);
}
.benefit-ico svg{
  width:44px;height:44px;
  stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.benefit-ico svg circle{fill:rgba(255,163,34,.08)}
@media (max-width:940px){
  .benefit-ico{width:64px;height:64px}
  .benefit-ico svg{width:40px;height:40px}
}
/* Іконки у картках переваг */
.benefit-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 22px var(--shadow);
  margin-bottom:10px;
}
.benefit-ico svg{
  width:32px;height:32px;
  stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* Ховаємо будь-яке випадково вставлене <img> лише у 1-й картці переваг */
.adv .card.card--soft:nth-child(1) img { display: none !important; }

/* Стиль іконок блоку переваг (щоб SVG виглядав охайно) */
.benefit-ico { display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.25); margin-bottom:10px;
}
.benefit-ico svg { width:28px; height:28px; stroke:var(--accent); fill:none; stroke-width:1.75; }
.benefit-ico svg circle,
.benefit-ico svg path { vector-effect: non-scaling-stroke; }
/* Ховаємо випадкове <img> лише в 1-й картці переваг */
.adv .card.card--soft:nth-child(1) img { display: none !important; }

/* Стиль контейнера іконки в перевагах */
.benefit-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.25); margin-bottom:10px;
}
.benefit-ico svg { width:28px; height:28px; stroke:var(--accent); fill:none; stroke-width:1.75; }
.benefit-ico svg circle,
.benefit-ico svg path { vector-effect: non-scaling-stroke; }
/* Kill any pseudo icons that могли з'явитись поруч із логотипом */
.site-header .brand::before,
.site-header .brand::after { content: none !important; }
.site-header .brand { background: none !important; }
/* === Фікс розміру значка в шапці на всіх сторінках === */
.site-header .brand__ico{
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

/* Якщо десь випадково з'являється величезний розмір — обрізаємо */
.site-header .brand img.brand__ico{
  max-width: 36px !important;
  max-height: 36px !important;
}

/* === Блок "Китайський гаманець" під кнопкою === */
.ms-cn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;              /* відстань між заголовком і кнопкою */
  margin-top: 6px;        /* невеликий відступ від верхньої кнопки */
}

.ms-sub{
  margin: 10px 0 2px;     /* ще трохи повітря зверху */
  font-weight: 800;
  font-size: clamp(16px, 2.8vw, 20px);
  color: var(--text);
  opacity: .95;
}

/* щоб дві кнопки зверху не злипались */
.section .btn + .ms-cn{ margin-top: 10px; }

/* На мобільних додамо ще трішки повітря */
@media (max-width: 520px){
  .ms-cn{ gap: 14px; }
}
/* Значок у шапці — Money Storage (щоб як на головній/flows) */
.page-ms .brand__ico{
  width: 44px;
  height: 44px;
  margin-right: 12px;
}

@media (max-width: 520px){
  .page-ms .brand__ico{
    width: 40px;
    height: 40px;
  }
}
/* ===== Help / Contacts layout ===== */
.contacts-grid{
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  align-items:stretch;
}
.contacts-grid .card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.contacts-grid .card .btn{
  align-self:flex-start;       /* на десктопі під заголовком */
}

/* Мобільна: картки в стовпчик, кнопки на всю ширину */
@media (max-width:760px){
  .contacts-grid{ grid-template-columns:1fr; }
  .contacts-grid .card .btn{
    width:100%;
  }
}
/* Numbers instead of benefit icons */
.benefit-num{
  width: clamp(48px, 6.5vw, 64px);
  height: clamp(48px, 6.5vw, 64px);
  flex: 0 0 clamp(48px, 6.5vw, 64px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1;
  color: #fff; /* читається на темному фоні */
}
.benefit-top{ display:flex; align-items:center; gap:16px; }
/* ===== Videos page polish (scoped) ===== */
.page-videos .subtitle{
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2.8vw, 22px);
  margin: 0 0 10px;
}

.page-videos .videos-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-videos .videos-list li{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.page-videos .videos-list li:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 24px var(--shadow);
}

.page-videos .videos-list .video-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  position: relative;
}

.page-videos .videos-list .video-link::before{
  content: "▶";
  display: inline-block;
  opacity: .75;
  transform: translateX(0);
  transition: transform .18s ease, opacity .18s ease;
  font-size: 14px;
}

.page-videos .videos-list .video-link:hover{
  text-decoration: underline;
}

.page-videos .videos-list .video-link:hover::before{
  transform: translateX(3px);
  opacity: 1;
}

.page-videos .videos-list .video-link:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 10px;
}

@media (max-width: 520px){
  .page-videos .videos-list .video-link{
    padding: 13px 14px;
  }
}
/* Роздільні заголовки на сторінці відео — помаранчеві */
.page-videos .subtitle{
  color: var(--accent);
}
/* Заголовок сторінки "Корисні відео" — помаранчевий */
.page-videos .title{
  color: var(--accent);
}
.brand .flow::before { content: none !important; }
.brand .flow { margin-left: 0 !important; }
/* --- CashFlow в шапці: без розриву --- */
.brand { display: flex; align-items: center; gap: 10px; }            /* відступ тільки між іконкою і текстом */
.brand__text { white-space: nowrap; font-weight: 900; letter-spacing: 0; }
.cf-cash { color: var(--accent, #ff4d3d); }                          /* червоний "Cash" */
.brand__text { color: var(--text, #fff); }                           /* білий "Flow" */

/* На випадок старих стилів, що додавали проміжок між Cash/Flow */
.brand .cash, .brand .flow { margin: 0 !important; padding: 0 !important; letter-spacing: 0 !important; }
/* === CashFlow у хедері: червоний Cash, білий Flow === */
.site-header .brand { color: inherit; }                 /* лінк не фарбує все одразу */
.site-header .brand__text { color: #fff; }              /* Flow (та базовий колір) */
.site-header .brand__text .cf-cash { 
  color: #ff4d3d !important;                            /* Cash — червоний, перекриває старі правила */
}
.cf-cash { color: var(--accent, #ff4d3a); }
/* Червоний "Cash" у заголовках сторінок */
h1.title .cf-cash { color: #ff2e2e !important; }
/* Footer */
.site-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; color: #bfc5cc; }
.footer-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.copy { margin: 0; font-weight: 400; line-height: 1.4; }

/* Бренд завжди в один рядок і без зайвих проміжків */
.brand { white-space: nowrap; }
.brand-cash { color: #e53935; margin-right: 0; }
.brand-flow { color: #ffffff; }

/* На випадок якщо якісь глобальні стилі додають відступи/літери */
.brand-cash, .brand-flow { letter-spacing: 0; }
/* ===== Footer (ізольовані стилі) ===== */
.site-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  color: #bfc5cc;
}
.footer-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.footer-copy {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  font-weight: 400;              /* не жирний */
  white-space: normal;
}
.footer-brand {
  display: inline;               /* не блочний -> не переносить рядок */
  white-space: nowrap;           /* заборона переносу між Cash і Flow */
  letter-spacing: 0;
  word-spacing: 0;
}
.footer-cash { color: #e53935; }
.footer-flow { color: #ffffff; }
.footer-domain { white-space: nowrap; }
.footer-domain-cash { color: #e53935; } /* червоний для "cash" */
/* --- лише розрядка між пунктами меню у хедері --- */
.site-header .main-nav a {
  padding: 0 16px;           /* збільшує «дихання» між лінками і клікабельну зону */
}

/* трохи більше місця на великих екранах */
@media (min-width: 1200px) {
  .site-header .main-nav a { padding: 0 20px; }
}

/* трохи компактніше на планшетах/телефонах */
@media (max-width: 768px) {
  .site-header .main-nav a { padding: 0 10px; }
}
/* Хедер — логотип зліва, меню праворуч в один рядок */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* лого ліворуч, меню праворуч */
}

/* Меню — не переносити рядки */
.site-header .main-nav{
  display:flex;
  flex-wrap:nowrap;                /* забороняємо перенос */
  gap: 16px;                       /* відстань між пунктами */
}

/* Посилання в меню — компактні відступи */
.site-header .main-nav a{
  padding: 0 12px;                 /* невеликі внутрішні відступи */
  white-space: nowrap;             /* не давати переносити окремі слова */
}

/* Трошки стискаємо, якщо ширини мало, щоб усе влізло праворуч */
@media (max-width: 1366px){
  .site-header .main-nav{ gap: 12px; }
  .site-header .main-nav a{ padding: 0 10px; }
}
@media (max-width: 1200px){
  .site-header .main-nav{ gap: 10px; }
  .site-header .main-nav a{ padding: 0 8px; }
}
/* Більший відступ між логотипом і першим пунктом меню */
.site-header .main-nav {
  margin-left: 32px;   /* підкручуй 24/28/32/40px за смаком */
}

/* Трохи більше місця на великих екранах */
@media (min-width: 1366px){
  .site-header .main-nav { margin-left: 40px; }
}

/* На вузьких екранах робимо відступ меншим, щоб усе вміщалося */
@media (max-width: 992px){
  .site-header .main-nav { margin-left: 20px; }
}
.card h2.accent{
  color: var(--accent, #f7a042);
}