:root {
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Colors */
  --text: #0b0b14;
  --muted: #6b6b78;
  --border: #e9e9f2;

  --primary: #5751e1;   /* основной */
  --shadow: #050071;    /* тень */
  --white: #ffffff;

  /* Layout */
  --container: 1275px; /* если тебе реально нужно 275px — смени тут */
}

html, body{
  overflow-x: hidden;
  
}

a, button, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}
body.gm-lock{
  overflow: hidden;
  position: fixed;   /* фикс: iOS/Chrome перестают “тянуть” ширину */
  width: 100%;
}
/* BASE */

.gm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 16px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--primary);
  background: rgba(87, 81, 225, 0.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
}

.central-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;  /* слева */
  gap: 12px;
}








/* ===== NAVBAR ===== */
.gm-header {
  width: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.gm-header__container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 15px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* Brand */
.gm-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  min-width: 220px;
}

.gm-brand__logo {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: none;
  flex: 0 0 35px;
}


/* ===== Mobile menu: section buttons (current page) ===== */
.gm-mobmenu__btns{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 12px;
  
  margin: 8px 0 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.gm-mobmenu__btns-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11,11,20,0.45);
}

.gm-mobmenu__btns-grid{
  display: flex;
  flex-direction: column; /* столбик */
  gap: 8px;
}

.gm-mobmenu__secbtn{
  width: 100%;
  text-align: left;

  border: 1px solid rgba(0,0,0,0.18); /* серая окантовка */
  background: transparent;            /* без фона */
  color: rgba(11,11,20,0.86);

  border-radius: 14px;                /* не pill, а аккуратная карточка */
  padding: 12px 12px;

  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gm-mobmenu__secbtn:active{
  transform: translateY(1px);
  border-color: rgba(0,0,0,0.28);
}

.gm-brand__name {
  font-weight: 800; /* extra bold */
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Nav links */
.gm-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
/* ===== AGENCY MENU MODAL (отдельные стили, НЕ как language) ===== */
.gm-agency-modal {
  position: fixed;
  z-index: 1100;

  width: 260px;
  padding: 12px;
  border-radius: 14px;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 22px 50px rgba(11, 11, 20, 0.18);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: 140ms ease;
}

.gm-agency-modal.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gm-agency-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: rgba(11, 11, 20, 0.55);
}

.gm-agency-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.gm-agency-item {
  width: 100%;
  text-align: left;

  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  border-radius: 12px;

  padding: 10px 12px;
  cursor: pointer;

  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: rgba(11, 11, 20, 0.88);

  transition: 120ms ease;
}

.gm-agency-item:hover {
  border-color: rgba(87, 81, 225, 0.35);
  background: rgba(87, 81, 225, 0.06);
}

.gm-agency-item small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(11, 11, 20, 0.55);
}

.gm-nav__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  gap: 8px;
  border: none;
  text-decoration: none;
  background: none;
  color: var(--text);
  font-weight: 400; /* medium */
  font-size: 16px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 50px;
}

.gm-nav__link:hover {
  background: rgba(87, 81, 225, 0.08);
  color: var(--primary);
}

.gm-nav__chev {
  font-size: 12px;
  color: var(--muted);
}

/* Right actions */
.gm-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.gm-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gm-icon-btn img {
    width: 24px;
}

.gm-icon-btn:hover {
  border-color: rgba(87, 81, 225, 0.35);
}






/* FOOTER */
.gm-footer {
  width: 100%;
  background: #07062a; /* глубокий темно-синий */
  color: rgba(255, 255, 255, 0.78);
}

.gm-footer__container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 20px 22px;
}

.gm-footer__top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: start;
}

/* LEFT */
.gm-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
}

.gm-footer__brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: none;
  display: inline-block;
}

.gm-footer__company {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.gm-footer__phone {
  display: inline-block;
  margin-top: 18px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}

.gm-footer__email {
  display: inline-block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  font-size: 12px;
}

.gm-footer__email:hover,
.gm-footer__phone:hover {
  text-decoration: underline;
}

.gm-footer__social-title {
  margin-top: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.gm-footer__social {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gm-footer__social-link {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: transform 120ms ease, opacity 120ms ease;
}

.gm-footer__social-link img {
  width: 18px;
  height: 18px;
  display: block;
}

.gm-footer__social-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* RIGHT COLS */
.gm-footer__right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  justify-content: end;
}

.gm-footer__col-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.gm-footer__col-line {
  margin-top: 10px;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: rgba(87, 81, 225, 0.95);
}

.gm-footer__link {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}

.gm-footer__link:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Divider + bottom */
.gm-footer__divider {
  margin-top: 38px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.gm-footer__bottom {
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.gm-footer__policy {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.gm-footer__policy:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Responsive */
@media (max-width: 900px) {
  .gm-footer__top {
    grid-template-columns: 1fr;
  }
  .gm-footer__right {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 520px) {
  .gm-footer__right {
    grid-template-columns: 1fr;
  }
  .gm-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}























/* BTNS */



/* Button */
.gm-about__btn {
  width: fit-content;
}

/* Star absolute (ты потом выставишь координаты) */
.gm-about__star {
  position: absolute;
  right: 40px; /* поменяешь */
  top: 40px;   /* поменяешь */
  width: 64px;
  height: 64px;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* ===== LANG BUTTON ===== */
.gm-lang-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border:3px solid rgba(87, 81, 225, 0.45);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gm-lang-btn img {
  width: 26px;
  height: 19px;
  border-radius: 3px;
  display: block;
  border: 2px solid rgba(109, 109, 109, 0.2);
}

/* ===== LANG MODAL ===== */
.gm-lang-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 20, 0.25);
  backdrop-filter: blur(2px);
  z-index: 999;
}

.gm-lang-modal {
  position: fixed;
  right: 250px;
  top: 80px;
  width: 220px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 60px rgba(11, 11, 20, 0.18);
  z-index: 1000;

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: 140ms ease;
}

.gm-lang-modal.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gm-lang-modal__close {
  position: absolute;
  right: 3px;
  top: 3px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: rgba(11, 11, 20, 0.55);
}

.gm-lang-modal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.gm-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
}

.gm-lang-item:hover {
  border-color: rgba(87, 81, 225, 0.35);
  background: rgba(87, 81, 225, 0.06);
}

.gm-lang-item img {
  width: 20px;
  height: 20px;
  display: block;
}










/* ===== REUSABLE PRIMARY BUTTON ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 44px;
  padding: 0 18px;
  border: #5751e1 3px solid;
  border-radius: 999px;

  background: var(--primary);
  color: var(--white);
  text-decoration: none;

  font-weight: 600; /* semibold */
  font-size: 14px;

  box-shadow: 3px 5px 0 rgba(3, 0, 113, 0.85);
  transition: all .1s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover { filter: brightness(1.03); background:var(--white); color:var(--primary)}

.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 rgba(3, 0, 113, 0.85);
}

.btn-primary__arrow {
  font-size: 16px;
  line-height: 1;
}

/* Basic responsiveness */
@media (max-width: 860px) {
  .gm-nav { display: none; } /* позже сделаем мобильное меню */
  .gm-brand { min-width: unset; }
}










/* ===== UNIVERSAL MODAL (shared for all popovers) ===== */
.gm-modal-overlay,
.gm-lang-overlay,
.gm-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 20, 0.08);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

.gm-modal,
.gm-lang-modal,
.gm-menu-modal {
  position: fixed; /* важно: будем ставить top/left из JS */
  z-index: 9999;

  width: 260px;
  max-width: calc(100vw - 24px);

  background: #fff;
  border: 1px solid rgba(11, 11, 20, 0.10);
  border-radius: 16px;

  padding: 14px;
  box-shadow: 0 18px 50px rgba(11, 11, 20, 0.18);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}

.gm-modal.is-open,
.gm-lang-modal.is-open,
.gm-menu-modal.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gm-modal__close,
.gm-lang-modal__close,
.gm-menu-modal__close {
  position: absolute;
  top:4px;
  right: 10px;

  width: 32px;
  height: 32px;
  border-radius: 10px;

  border: none;
  background: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gm-modal__list,
.gm-lang-modal__list,
.gm-menu-modal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

.gm-modal-item,
.gm-lang-item,
.gm-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 12px;

  border: 1px solid rgba(11, 11, 20, 0.10);
  background: #fff;
  cursor: pointer;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(11, 11, 20, 0.92);
}

.gm-modal-item:hover,
.gm-lang-item:hover,
.gm-menu-item:hover {
  background: rgba(87, 81, 225, 0.06);
  border-color: rgba(87, 81, 225, 0.22);
}

.gm-lang-item img {
  width: 26px;
  height: 18px;
  border-radius: 4px;
  display: block;
}










/* ===== Orbit system (JS-generated) ===== */
#orbit-system.gm-orbit {
  --orbit-size: clamp(240px, 70vw, 484px); /* min / fluid / max */
  --inner-inset: clamp(48px, 12vw, 84px);

  position: relative;
  width: var(--orbit-size);
  height: var(--orbit-size);
  margin: 0 auto;
}
.gm-orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(87, 81, 225, 0.35);
  box-sizing: border-box;
}

.gm-orbit__ring--inner {
  inset: var(--inner-inset);
}

.gm-orbit__center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #5751E1;
  box-shadow: 0 14px 28px rgba(11, 11, 20, 0.12);
  border: 4px solid #5751E1;
  transition: all .2s;
}

.gm-orbit__center:hover {
  background: #ffffff;
}

.gm-orbit__planet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.gm-orbit__planet-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-color: var(--planet-color);
  box-shadow: 0 14px 28px rgba(11, 11, 20, 0.12);
  transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* hover: делаем белым */


.gm-orbit__planet:hover .gm-orbit__planet-inner:hover {
  background: #fff !important;
}

/* адаптация под мобилу */
@media (max-width: 640px) {
  #orbit-system.gm-orbit {
    /* Настраиваемые переменные */
    --orbit-size: clamp(240px, 70vw, 484px); /* min / fluid / max */
    --inner-inset: clamp(48px, 12vw, 84px);

    position: relative;
    width: var(--orbit-size);
    height: var(--orbit-size);
    margin: 0 auto;
  }
  .gm-orbit__ring--inner {inset: var(--inner-inset);}
  .gm-orbit__center { width: 52px; height: 52px; }
  .gm-orbit__planet { width: 38px; height: 38px; }
}
/* ===== MOBILE HEADER + DRAWER MENU ===== */

.gm-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #fff;
}

/* burger */
.gm-burger{
  width: 44px;
  height: 44px;
  /* border-radius: 12px; */
  /* border: 1px solid rgba(0,0,0,0.10); */
  /* background: rgba(87,81,225,0.06); */
  border: none;
  background: none;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gm-burger img {
  width: 44px;
}

/* Drawer */
.gm-mobmenu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(11,11,20,0.35);
  z-index: 2100;
}

.gm-mobmenu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(92vw, 380px);
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.10);
  box-shadow: -18px 0 40px rgba(11,11,20,0.10);
  z-index: 2200;
  transform: translateX(100%);
  transition: transform 220ms ease;
  display: flex;
  flex-direction: column;
  padding: 7px 16px 16px 16px;
}
.gm-mobmenu{
  position: fixed;
  top: 0;
  right: 0;                 /* важно: прижать к правому краю */
  left: auto;
  height: 100dvh;           /* лучше, чем 100vh на iOS */
  width: clamp(280px, 86vw, 340px); /* уменьшаем и делаем резиновым */
  max-width: calc(100vw - 61px);    /* гарантированно не вылезет */
  box-sizing: border-box;
  transform: translateX(100%);      /* скрыта за экраном */
}
.gm-mobmenu.is-open{
  transform: translateX(0);
}

.gm-mobmenu__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.gm-mobmenu__title{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.gm-mobmenu__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gm-mobmenu__nav{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
}

.gm-mobmenu__link{
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(11,11,20,0.92);
  font-weight: 700;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}

.gm-mobmenu__actions{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.gm-lang-btn--mobile{
  width: 44px;
  height: 44px;
  border-radius: 60px;
  -webkit-tap-highlight-color: transparent;
}

.gm-mobmenu__cta{
  width: 100%;
  justify-content: center;
}

.gm-mobmenu__socials{
  margin-top: auto;
  padding-top: 14px;
}

.gm-mobmenu__socials-title{
  font-size: 13px;
  font-weight: 700;
  color: rgba(11,11,20,0.55);
  margin-bottom: 10px;
}

.gm-mobmenu__socials-icons{
  display: flex;
  gap: 12px;
  align-items: center;
}

/* lock scroll */
.gm-lock{
  overflow: hidden;
}

/* Mobile switch */
@media (max-width: 860px){

  .gm-header__container {
    padding: 7px 20px;
  }
  /* прячем desktop nav, показываем burger */
  .gm-nav{ display: none; }
  .gm-burger{ display: inline-flex; }

  /* на мобиле лучше спрятать верхнюю кнопку языка (она будет в меню) */
  #langBtn{ display: none; }

  .gm-actions > .btn-primary {display: none;}
  .gm-brand__name {font-size: 16px;}

  /* Star absolute (ты потом выставишь координаты) */
.gm-about__star {
  position: absolute;
  right: 40px; /* поменяешь */
  top: 0;   /* поменяешь */
  width: 64px;
  height: 64px;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
}