/* ======== THEME ======== */
:root {
  --accent:   #fc9928;
  --accent-2: #fc9928;
  --text:     #111;
  --muted:    #666;
  --line:     #e8e8e8;
  --card-bg:  #fff;

  --radius-md: 10px;
  --radius-lg: 12px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:sans-serif;background:#fff;color:#000}
a{text-decoration:none;color:inherit}
ul,ol,menu{list-style:none;margin:0;padding:0}

/* ===== HEADER ===== */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 64px;background:#fff;border-bottom:1px solid #eee;
}
.logo img{height:120px;width:auto;display:block}
.main-nav ul{display:flex;gap:32px}
.main-nav a{font-size:16px;font-weight:500;color:#333;transition:color .3s}
.main-nav a:hover{color:var(--accent-2)}

/* === CTA (язык + кнопка) === */
.cta-header{display:flex;align-items:center;gap:12px}

/* Language switch — как на других страницах */
.lang-switch{display:flex;align-items:center}
.lang-select{
  height:44px;
  padding:0 40px 0 12px;                 /* место под стрелку справа */
  border:1px solid #ddd;border-radius:8px;background:#fff;
  color:#111;font-weight:700;cursor:pointer;outline:0;

  appearance:none;-webkit-appearance:none;-moz-appearance:none;

  background-image:
    url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3l5 5 5-5' stroke='%23222' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 10px;

  /* центрируем метку (UA/EN/PL), как на других страницах */
  text-align:center;
  text-align-last:center;               /* Chrome/Edge */
  -moz-text-align-last:center;          /* Firefox */
}
.lang-select option{ text-align:left; } /* пункты — по левому краю для читабельности */
.lang-select:focus{ border-color:#bbb; box-shadow:0 0 0 3px rgba(0,0,0,.04); }

/* CTA button */
.btn-contact{
  padding:12px 24px;font-size:16px;font-weight:700;
  background:var(--accent-2);border:0;border-radius:8px;color:#fff;
  cursor:pointer;transition:background .3s;
}
.btn-contact:hover{background:#e3811f;color:#fff}

/* ===== FILTERS (как на Products/Technologies) ===== */
.tech-wrap{max-width:1200px;margin:0 auto;padding:24px 16px}
.tech-title{font-size:clamp(24px,2.4vw,34px);margin:8px 0 16px}

.tech-filters{
  display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
  padding:14px 64px 10px;border-bottom:1px solid var(--line);background:#fff;
}
.tf{display:flex;flex-direction:column;gap:6px}
.tf>span{font-size:12px;color:var(--muted)}

.tech-filters input,.tech-filters select{
  height:44px;border:1px solid #ddd;border-radius:var(--radius-md);
  padding:0 12px;font-size:14px;background:#fff;outline:0;
}
.tech-filters input:focus,.tech-filters select:focus{
  border-color:#bbb;box-shadow:0 0 0 3px rgba(0,0,0,.04);
}

/* Кнопки фильтров */
.tf-actions{display:flex;align-items:end;gap:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 14px;border-radius:var(--radius-md);
  border:1px solid #ddd;background:#fff;color:var(--text);font-weight:700;cursor:pointer;
  transition:transform .02s,box-shadow .2s,filter .2s;
}
.btn:hover{box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff}
.btn-primary:hover{filter:brightness(.97)}
.btn-ghost{background:#fff;border:1px solid #ddd;color:#111}
.btn-ghost:hover{box-shadow:var(--shadow-sm)}

/* ===== GRID & CARDS ===== */
.results-meta{margin:12px 0;color:#555}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin:18px 0 12px}
@media (max-width:1200px){.grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:768px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}}

.card{
  grid-column:span 4;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--card-bg);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .06s;
}
@media (max-width:768px){.card{grid-column:span 4}}
@media (max-width:520px){.card{grid-column:span 2}}
.card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.card-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.card-title{font-size:18px;margin:0;line-height:1.25}
.card-meta{font-size:12px;color:var(--muted)}
.card-desc{font-size:14px;color:#333}
.card-actions{margin-top:auto;display:flex;gap:8px}

/* ===== Pagination ===== */
.pagination{display:flex;gap:8px;justify-content:center;margin:24px 0 40px}
.page-link{
  min-width:40px;height:40px;padding:0 10px;border:1px solid #ddd;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#111;text-decoration:none;
}
.page-link:hover{box-shadow:var(--shadow-sm)}
.page-link.active{background:#111;color:#fff;border-color:#111}

/* ===== Modal (Contacts) ===== */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:10000;padding:24px}
.modal.is-open{display:flex}
.modal__dialog{position:relative;width:min(560px,100%);background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);padding:24px 24px 20px;animation:modalIn .18s ease-out;outline:none}
@keyframes modalIn{from{transform:translateY(8px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal__close{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f2f2f2;font-size:22px;line-height:1;cursor:pointer}
.modal__close:hover{background:#e9e9e9}
.modal__title{margin:0 36px 8px 0;font-size:22px;line-height:1.25}
.modal__content{color:#333}
.modal__phones{margin:8px 0 12px;padding-left:18px}
.modal__phones li{margin:6px 0}
.modal__phones a{color:#111;text-decoration:none;font-weight:600}
.modal__phones a:hover{text-decoration:underline}
.modal__extra{color:#666}
.modal__extra a{color:inherit}
.modal__extra a:hover{color:inherit;text-decoration:underline}
body.modal-open{overflow:hidden}

/* ===== FOOTER ===== */
.footer{background:#111;color:#fff;padding:64px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.footer__section{flex:1 1 250px}
.footer__title{font-size:18px;font-weight:700;margin-bottom:8px}
.footer__name,.footer__contacts{font-size:16px;line-height:1.6}
.footer-bottom{background:#f8f8f8;color:#444;font-size:14px;text-align:center;padding:32px 16px;border-top:1px solid #ddd}
.footer-bottom__links{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:20px}
.footer-bottom__links a{color:#444;text-decoration:none;transition:color .3s}
.footer-bottom__links a:hover{color:var(--accent-2)}
.footer-bottom__socials{display:flex;justify-content:center;gap:28px;margin:16px 0 20px}
.footer-bottom__info{margin-bottom:20px}
/* ===== BURGER ===== */
.nav-toggle{
  display:none; position:relative; width:40px; height:32px;
  border:0; background:transparent; padding:0; cursor:pointer; color:#333;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:3px; border-radius:2px;
  background: currentColor; transition: transform .25s, top .25s, opacity .2s;
}
.nav-toggle span:nth-child(1){ top:6px; }
.nav-toggle span:nth-child(2){ top:14px; }
.nav-toggle span:nth-child(3){ top:22px; }
.nav-toggle.is-open span:nth-child(1){ top:14px; transform:rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:14px; transform:rotate(-45deg); }

/* ===== MOBILE HEADER: якоря — слева/центр/справа ===== */
@media (max-width:1024px){
  header, header .topbar, header .header, header .header-inner{
    position: relative !important; display:block !important;
    min-height:56px; padding:8px 0;
  }
  /* слева бургер */
  header .nav-toggle{
    display:block !important; position:absolute; left:12px; top:50%;
    transform:translateY(-50%); z-index:1001;
  }
  /* по центру логотип */
  header .logo{
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
    margin:0 !important; z-index:1000;
  }
  /* справа переключатель языка */
  #langSwitch{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    z-index:1001;
  }
  /* десктоп-меню прячем */
  header .main-nav{ display:none !important; }
  /* большую шапочную кнопку прячем на мобилках — она будет в оверлее */
  #langSwitch .btn-contact{ display:none !important; }
}

/* при открытом меню: прячем бургер и переключатель языка */
body.menu-open .nav-toggle{ visibility:hidden; }
body.menu-open #langSwitch{ display:none !important; }

/* ===== MOBILE MENU OVERLAY ===== */
.mobile-menu[hidden]{ display:none; }
.mobile-menu{ position:fixed; inset:0; z-index:1000; }
.mobile-menu__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s;
}
.mobile-menu.is-open .mobile-menu__backdrop{ opacity:1; }
.mobile-menu__panel{ position:absolute; inset:0; display:flex; flex-direction:column; padding:16px 22px; color:#fff; }
.mobile-menu__top{ position:relative; display:flex; justify-content:center; align-items:center; padding-bottom:10px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.15); }
.mobile-menu__logo{ color:#ffd26a; font-weight:700; text-decoration:none; font-size:20px; }
.mobile-menu__close{ position:absolute; right:8px; top:0; font-size:28px; line-height:1; border:0; background:transparent; color:#fff; cursor:pointer; }
.mobile-menu__nav{ display:flex; flex:1 1 auto; }
.mobile-menu__list{ display:flex; flex-direction:column; gap:18px; margin:0 auto; padding:24px 0; list-style:none; width:100%; max-width:420px; text-align:center; }
.mobile-menu__list a{ color:#fff; text-decoration:none; font-size:22px; font-weight:500; }

/* CTA в мобильном меню */
.mobile-menu__cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:12px 24px; font-size:18px; font-weight:700;
  background:#f39c12; color:#fff; border-radius:10px; margin-top:10px;
}
.mobile-menu__cta:active{ opacity:.9; }

/* блокировка скролла под оверлеем */
.body--lock{ overflow:hidden; }
/* ДЕСКТОП: бургер не показываем ни при каких условиях */
@media (min-width: 1025px){
  .nav-toggle{
    display: none !important;
    visibility: hidden !important;
  }
}
/* ЛОГО на телефонах — чуть крупнее и по центру */
@media (max-width: 1024px){
  /* чтобы логотип комфортно помещался по высоте шапки */
  header, header .topbar, header .header, header .header-inner{
    min-height: 64px; /* было ~56px; можно 60–66px */
  }

  /* размер логотипа: выбери один из вариантов ниже */
  /* ВАРИАНТ 1: фиксированный (рекомендую 40px) */
  header .logo > a > img{
    height: 74px !important;
    width: auto !important;
  }

  /* ВАРИАНТ 2: адаптивный (сам подстраивается под ширину экрана)
  header .logo > a > img{
    height: clamp(34px, 5.2vw, 44px) !important;
    width: auto !important;
  } */
}