/* ====================================
   THEME GLOBAL STYLES — DESKTOP FIX
   ==================================== */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

/* ---- CSS Variables ---- */
:root{
  --bg: #0a0b10;
  --text: #eef1ff;
  --text-dim: #aab3d0;

  --btn: #3B82F6;         /* updated */
  --btn-hover:#2b54d9;
  --glass: rgba(10,12,20,0.75);
  --radius: 14px;

  --hero-bg-desktop: url('../img/hero-bg.png');
  --hero-bg-mobile:  url('../img/hero-mobile.png');
  --hero-bg: var(--hero-bg-desktop);
}

/* ---- Base ---- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* затемнённая картинка + цвет */
  background:
    linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)),
    var(--hero-bg) center/cover no-repeat, /* ← убрали fixed */
    var(--bg);
  overflow:hidden; /* полностью убрали скролл */
}

/* Общий контейнер 1440 */
.container{
  max-width:1440px;
  margin-inline:auto;
  padding:clamp(16px,3vw,32px);
}

/* --------------------------
   Header поверх фона (не влияет на высоту страницы)
   -------------------------- */
.site-header{
  position:absolute; inset-block-start:0; inset-inline:0;
  z-index:5; padding-top:clamp(12px,2vw,20px);
}
.topbar{ display:flex; justify-content:flex-end; align-items:center }
.wpml-ls{ display:flex; gap:10px }
.wpml-ls a{
  color:var(--text-dim); text-decoration:none;
  padding:6px 10px; border-radius:8px;
  backdrop-filter:blur(6px); background:rgba(255,255,255,.06)
}
.wpml-ls .wpml-ls-current-language a{ color:var(--text); background:rgba(255,255,255,.15) }

/* --------------------------
   HERO: без вертикального скролла, контент справа
   -------------------------- */
.hero{
  position:relative;
  min-height:100svh;              /* занимает весь экран */
  display:flex; align-items:center;
  z-index:1;
}
.hero > .container{
  /* не задаём min-height, чтобы паддинги контейнера не создавали скролл */
  display:flex; width:100%;
}
.hero__content{
  /* правый столбец внутри контейнера */
  margin-left:auto;                       /* уводим вправо */
  display:flex; flex-direction:column; gap:clamp(14px,2.5vw,22px);
  max-width:clamp(420px, 36vw, 640px);    /* адекватная ширина блока */
  text-align:right; align-items:flex-end; /* выравнивание по правому краю */
}

/* Метрики */
.metrics{ display:block }
.metric{
  font-weight:800; line-height:1.08;
  font-size:clamp(32px,6vw,64px);
  text-shadow:0 2px 16px rgba(0,0,0,.45);
  letter-spacing:.2px;
}

/* CTA */
.cta-row{ display:flex; justify-content:flex-end; width:100% }
.btn-cta{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 28px; border:0; border-radius:var(--radius);
  background:var(--btn); color:#fff;
  font-size:clamp(15px,1.2vw,18px); font-weight:700;
  cursor:pointer; transition:.2s ease;
  box-shadow:0 10px 34px rgba(59,130,246,.36);
}
.btn-cta:hover{ background:var(--btn-hover); transform:translateY(-1px) }

/* ---- L10N visibility ---- */
.l10n{ display:none }
html[lang^="uk"] .l10n--ua,
html[lang^="uk"] .form-l10n--ua{ display:block }
html[lang^="en"] .l10n--en,
html[lang^="en"] .form-l10n--en{ display:block }

/* --------------------------
   MODAL
   -------------------------- */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:.25s ease; z-index:9999;
}
.modal.is-open{ opacity:1; visibility:visible }
.modal__dialog{
  position:relative; width:min(92vw,680px); max-height:86vh; overflow:auto;
  background:var(--glass); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); box-shadow:0 30px 120px rgba(0,0,0,.55);
  padding:clamp(16px,3vw,28px); backdrop-filter:blur(10px)
}
.modal__title{ margin:0 0 12px; font-size:22px }
.modal__close{
  position:absolute; top:14px; right:18px;
  background:transparent; border:0; color:#fff;
  font-size:32px; line-height:1; cursor:pointer;
}

/* CF7 базово */
.wpcf7 form p{ margin:0 0 12px }
.wpcf7 input,.wpcf7 textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#fff; outline:none
}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{ color:#c5cbe3 }
.wpcf7-submit{
  background:var(--btn); border:0; color:#fff; font-weight:600;
  padding:12px 18px; border-radius:10px; cursor:pointer
}
.wpcf7-submit:hover{ background:var(--btn-hover) }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px){
  .hero__content{ max-width:min(640px, 52vw) }
  .metric{ font-size:clamp(30px,7vw,56px) }
}

/* ===== MOBILE ONLY (≤767px): text up, button lower, centered ===== */
@media (max-width: 767px){
  /* фон для мобилы, без fixed */
  :root{
    --hero-bg: var(--hero-bg-mobile);
    --header-h-mobile: 46px; /* подстрой при необходимости под высоту WPML */
  }
  body{
    background:
      linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)),
      var(--hero-bg) center/cover no-repeat,
      var(--bg);
    /*overflow:hidden; /* без вертикального скролла */
  }

  .topbar{ justify-content:center }

  /* контент привязываем к верху, а не к центру */
  .hero{
    height:100dvh;
    display:flex;
    align-items:flex-start;
  }
  .hero > .container{
    display:flex;
    flex-direction:column;
    gap:0;
    padding-inline:clamp(16px,6vw,28px);
  }

  /* ТЕКСТ: по центру и на 50px ниже языков */
  .hero__content{
    margin: calc(var(--header-h-mobile) + 50px) auto 0; /* ↑ отступ от языков */
    align-items:center;
    text-align:center;
    max-width:min(92%, 640px);
    gap:16px;
  }

  /* КНОПКА: ниже текущей позиции и по центру */
  .cta-row{
    order:2;
    width:100%;
    justify-content:center;
    margin-top: clamp(32px, 8vh, 96px); /* опускаем ниже */
  }
  .btn-cta{
    width:100%;
    border-radius:0; 
    background:#3B82F6;
    margin: 250px auto;
  }
}