:root{ --bg:#0a0f18; --fg:#F2F2F7; --muted:#A0A0B2; --brand:#7aa2ff; --brand2:#6cc4ff; --card:#121824; --stroke:rgba(255,255,255,0.08); }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans', sans-serif;background:
  radial-gradient(1000px 700px at 12% -8%, rgba(40,70,130,0.28) 0%, rgba(10,15,24,0) 58%),
  radial-gradient(900px 650px at 108% 12%, rgba(30,80,150,0.24) 0%, rgba(10,15,24,0) 56%),
  radial-gradient(800px 600px at 50% 110%, rgba(20,60,120,0.22) 0%, rgba(10,15,24,0) 60%),
  var(--bg);
color:var(--fg); line-height:1.65; letter-spacing:0.1px}
h1,h2,h3,h4,h5,h6,.title,.kicker,.service-card h3,.card h3{font-family:'Cinzel', serif; letter-spacing:0.6px}
a{color:inherit;text-decoration:none}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(8px);background:rgba(10,15,24,0.75);border-bottom:1px solid var(--stroke)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800}.logo img{height:32px}
.nav-links{display:flex;gap:36px;font-size:15px;color:var(--muted)} /* increased spacing */
.nav-links a{padding:6px 4px} /* click target */
.lang{display:flex;gap:10px;align-items:center}
.lang button{background:transparent;border:1px solid var(--stroke);border-radius:10px;color:#cfe0ff;padding:6px 12px;cursor:pointer;font-family:Inter, system-ui}
.lang button.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#06101a;border-color:transparent}

.cta,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.cta{gap:10px;background:linear-gradient(135deg, var(--brand), var(--brand2));color:#06101a;padding:12px 20px;border-radius:14px;font-weight:700;box-shadow:0 8px 24px rgba(90,140,220,0.35);min-width:200px}
.btn-secondary{gap:8px;padding:12px 18px;border-radius:12px;border:1px solid var(--stroke);color:#e8f0ff;background:transparent;min-width:180px}

.hero{padding:56px 0 36px}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px}
.title{font-size:clamp(28px,5vw,52px);line-height:1.18;margin:6px 0 10px}
.subtitle{font-size:clamp(16px,2.4vw,19px);color:var(--muted);max-width:640px}
.kicker{letter-spacing:0.14em;text-transform:uppercase;font-weight:700;font-size:12px;color:#b0c6ff;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 24px}
.chip{border:1px solid var(--stroke);border-radius:999px;padding:10px 14px;font-size:14px;color:#cfe0ff;background:rgba(110,160,255,0.08)}

.services-wrap{background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));border:1px solid var(--stroke);border-radius:22px;padding:18px}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.service-card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:18px;display:flex;flex-direction:column;min-height:150px}
.service-card h3{margin:4px 0 8px;font-size:18px}
.service-card p{margin:0;color:var(--muted)}

.section{padding:48px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:18px;display:flex;flex-direction:column}
.card h3{margin:4px 0 8px;font-size:18px}
.price{display:flex;align-items:baseline;gap:8px;margin:10px 0}.price strong{font-size:26px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));border:1px solid var(--stroke);border-radius:16px;padding:18px}

.faq-item{border-bottom:1px solid var(--stroke);padding:14px 0}
footer{padding:28px 0 52px;color:var(--muted);border-top:1px solid var(--stroke)}
.disclaimer{font-size:12px;line-height:1.6}

@media (max-width:960px){.hero-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .nav-links a{display:none}
  .lang{display:none}
  .cta{width:100%}
  .services-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .section{padding:40px 0}
  .card,.service-card{padding:16px}
}

/* v12.1: single logo text */
.logo-title{ font-family:'Cinzel', serif; font-weight:600; letter-spacing:.5px; }
.logo img{ height:28px; width:auto; }

/* v13_fixed */
h1,h2,h3,h4,h5,h6,.title,.kicker,.service-card h3,.card h3,.logo-title{font-family:'Cinzel',serif;letter-spacing:.6px}
body, p, li, span, a, button, input{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,'Noto Sans',sans-serif}
.logo img{height:28px;width:auto}
.logo-title{font-size:1.9rem;font-weight:700}
.nav-links{gap:36px}
.cta,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.telegram-note{margin-top:.5rem;color:#cfe0ff;font-weight:600}

/* r2: emoji fallback so icons show instead of □ */
h1,h2,h3,h4,h5,h6,.title,.kicker,.service-card h3,.card h3,.logo-title{
  font-family:'Cinzel', 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji', serif;
}
/* allow footer disclaimer to wrap fully */
footer .disclaimer{white-space:normal; max-width:100%;}

/* Footer contact buttons */
.footer-buttons { margin-top: 15px; display: flex; gap: 12px; flex-wrap: wrap; }
.footer-buttons .btn { background: #2d2f6c; color: #fff; padding: 8px 16px; border-radius: 6px; text-decoration: none; transition: background 0.3s; font-size: 14px; }
.footer-buttons .btn:hover { background: #444899; }

/* footer action buttons */
.footer-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem .9rem;border:1px solid rgba(255,255,255,.12);
  border-radius:.8rem;background:transparent;color:#cfd6ff;
  transition:.2s ease;text-decoration:none;font-weight:600
}
.btn-ghost:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.btn-ghost.tg{color:#bcd4ff}
.tg-ico{width:1.1rem;height:1.1rem;display:inline-block}

/* footer action buttons */
.footer-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem .9rem;border:1px solid rgba(255,255,255,.12);
  border-radius:.8rem;background:transparent;color:#cfd6ff;
  transition:.2s ease;text-decoration:none;font-weight:600
}
.btn-ghost:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.btn-ghost.tg{color:#bcd4ff}
.tg-ico{width:1.1rem;height:1.1rem;display:inline-block}

/* Modal styles */
.modal{display:none;position:fixed;inset:0;z-index:1000}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.modal-dialog{position:relative;z-index:1;margin:auto;max-width:820px;width:min(92vw,820px);max-height:86vh;border-radius:16px;background:rgba(18,22,40,.96);box-shadow:0 10px 40px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);}
.modal-scroll{padding:20px 24px 28px;overflow:auto;max-height:86vh}
.modal-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#cfd6ff;font-size:20px;line-height:1;cursor:pointer}
.modal .doc{display:none}
html[lang="ru"] .modal .doc.lang-ru{display:block}
html[lang="uk"] .modal .doc.lang-uk{display:block}
html[lang="en"] .modal .doc.lang-en{display:block}
.modal .content{display:none}
.modal.show-policy .content.policy{display:block}
.modal.show-offer .content.offer{display:block}
body.modal-open{overflow:hidden}

/* ---- Правильная раскладка шапки ---- */
.nav{ display:flex; align-items:center; gap:16px; }

/* зона между логотипом и языками: растягивается */
.nav-mid{
  flex:1;
  display:grid;
  grid-template-columns: auto 1fr;   /* меню слева (auto), центр для кнопки (1fr) */
  align-items:center;
  gap:24px;
}

/* меню у левого края этой зоны */
.nav-links{ justify-self:start; }

/* КНОПКА РОВНО ПО ЦЕНТРУ этой зоны */
.nav-mid .cta{ justify-self:center; }

/* языки прижаты вправо */
.lang{ margin-left:8px; }

/* мобильный вид: кнопку подвигаем вниз и по центру */
@media (max-width: 960px){
  .nav-mid{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .nav-links{ justify-self:start; }
  .nav-mid .cta{ justify-self:start; } /* если нужно по центру — поставь center */
}

/* Больше расстояние между логотипом и меню */
.nav .logo{ margin-right: 28px; }

/* Чуть шире расстояние между пунктами меню (если нужно) */
.nav-links{ gap: 30px; }

/* На мобильных убираем большой отступ от логотипа */
@media (max-width: 960px){
  .nav .logo{ margin-right: 12px; }
}

/* spacing fix */
.nav{ gap: 60px; }
.nav-mid{ column-gap: 28px; }

/* тонкая подстройка кнопки (можно 0..16px) */
.cta{ position:relative; left:10px; }

/* =========================
   ДОБАВЛЕНО: мобильная центровка
   и видимый переключатель языков
   ========================= */
@media (max-width: 560px){
  /* Центруем типографику и блоки */
  body, .container{ text-align:center; }

  .hero .kicker,
  .hero .title,
  .hero .subtitle{ margin-left:auto; margin-right:auto; }

  .chips{ justify-content:center; }
  .services-grid, .steps{ justify-content:center; }
  .service-card, .card, .step{ text-align:center; }

  .footer-actions{ justify-content:center; }

  /* Возвращаем языки в шапке (ранее скрывались) */
  .lang{
    display:flex !important;
    gap:8px;
    align-items:center;
    margin-left:auto;
  }
  .lang button{
    padding:6px 10px;
    font-size:12px;
    border-radius:9px;
  }

  /* Чтобы шапка не ломалась: кнопку опускаем строкой ниже и растягиваем */
  .nav{ flex-wrap:wrap; }
  .nav .cta{
    width:100%;
    margin-top:10px;
    left:0;            /* на моб. центрируем без сдвига */
  }
}

/* --- Mobile header with centered button --- */
@media (max-width: 560px){
  header .nav{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:8px 12px;
  }
  .logo{grid-column:1; grid-row:1;}
  .lang{grid-column:2; grid-row:1; justify-self:end;}
  .nav .cta{
    grid-column:1/3;
    grid-row:2;
    justify-self:center; /* центрируем */
    width:auto;          /* оставляем исходный размер */
    min-width:200px;     /* чтобы не схлопывалась */
  }
}

/* --- Mobile fixes: center header CTA + card buttons --- */
@media (max-width: 560px){

  /* шапка: два ряда, кнопка по центру второго ряда */
  header .nav{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:8px 12px;
  }
  .logo{grid-column:1; grid-row:1;}
  .lang{grid-column:2; grid-row:1; justify-self:end;}
  .nav .cta{
    grid-column:1 / 3;
    grid-row:2;
    justify-self:center !important;
    margin:0 auto !important;
    width:auto;                 /* сохраняем «родной» размер */
    min-width:200px;
    transform:none !important;  /* на всякий случай, если был translate */
  }

  /* карточки/сервисы: центрируем любые action‑кнопки */
  .card,
  .service-card{ align-items: center; } /* содержимое по центру */

  .card .cta,
  .service-card .cta,
  .card .btn-secondary,
  .service-card .btn-secondary{
    align-self: center !important;
    margin: 12px auto 0 !important;
    width: auto;                /* не растягиваем на всю ширину */
    max-width: 420px;           /* ограничение, чтобы красиво смотрелось */
  }

  /* если где-то кнопка всё ещё тянется на 100% ширины */
  .card a.cta, .service-card a.cta{ max-width: 420px; }
}