:root {
  --accent: #FFD966;           /* основной золотой */
  --accent-dark: #FFF2CC;      /* мягкий бежевый для hover */
  --white: #FFFFFF;
  --black: #000000;
  --text-color: #232322;       /* основной текст светлый */
  --text-muted: #FFF2CC;       /* чуть темнее для secondary текста */
  --bg-color: #121212;
  --section-bg: #1e1e1e;
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-dark);
  --btn-text: var(--white);
  --neon-glow-light: 0 0 6px rgba(255, 217, 102, 0.5);
  --neon-glow-strong: 0 0 12px rgba(255, 217, 102, 0.8);
}
/* тест */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* элементы могут переноситься на новую строку */
}

@media (max-width: 375px) {
  .logo img {
    max-width: 130%; /* уменьшаем логотип */
  }
  .languages {
    display: none; /* скрываем языки */
  }
  .burger {
    margin-left: auto; /* сдвигаем бургер вправо */
  }
}


/* Общие стили */
* { box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: var(--accent-dark); }

.container {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 15px;
}

/* Хедер и меню */
.site-header {
  background: var(--section-bg);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.7);
  padding: 15px 0;
  height: 70px;
  display: flex;
  align-items: center;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.logo {
  font-weight: 700;
  font-size: 26px;
  color: var(--accent);
  line-height: 1;
}
.nav-list {
  display: flex;
  gap: 25px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list a {
  font-weight: 500;
  font-size: 16px;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: background-color 0.3s, color 0.3s;
}
.nav-list a:hover,
.nav-list a.active {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: var(--neon-glow-light);
}

/* Бургер - по умолчанию скрыт */
/* Бургер - по умолчанию скрыт */
/* Убираем белую рамку и эффект при тапе */
.burger {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;              
  height: 25px;              
  cursor: pointer;
  z-index: 2000;
  position: relative;
  background: transparent;
}

.burger span {
  display: block;
  position: absolute;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #ffd966;
  border-radius: 2px;
  transition: 0.3s;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger span:nth-child(3) { bottom: 0; }

.burger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* Мобильное меню */
.mobile-nav {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: var(--section-bg);
  box-shadow: 0 14px 40px rgba(255, 217, 102, 0.3);
  padding: 18px;
  border-top: 1px solid rgba(255, 217, 102, 0.15);
  z-index: 1000;
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}

.mobile-nav.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav-list a {
  padding: 10px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: background 0.3s, color 0.3s;
  display: block;
}

.mobile-nav-list a:hover,
.mobile-nav-list a.active {
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: var(--neon-glow-light);
}

/* Телефон */
.mobile-phone {
  font-size: 16px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.mobile-phone i { font-size: 18px; }

.btn-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.btn-phone .phone-text { display: inline; }

/* === Медиа-запросы === */

/* Планшеты и ниже */
@media (max-width: 991px) {
  .burger { display: flex; }
  .header-controls { display: none; }
}

/* Смартфоны */
@media (max-width: 768px) {
  .burger { display: flex; }
  .nav-list { display: none; }
  .btn-phone .phone-text { display: none; }
  .hero { height: 550px; }
  .hero-content h1 { font-size: 2.4rem; }
  .hero-content p { font-size: 1rem; }
  .hero-content .btn { padding: 12px 30px; font-size: 1rem; }
}

/* Смартфоны маленькие экраны (iPhone SE, 375px) */
@media (max-width: 375px) {
  .burger { display: flex; }
  .nav-list { display: none; }
  .mobile-nav { top: 60px; }
  .hero { height: 500px; }
  .hero-content h1 { font-size: 2rem; }
  .hero-content p { font-size: 0.9rem; }
  .hero-content .btn { padding: 10px 25px; font-size: 0.9rem; }
}



<!-- ================== код языка ================== -->
/* === Выпадающий язык === */
.lang-dropdown {
  position: relative;
  display: inline-flex; /* подстраивается под кнопку */
}

/* Кнопка с активным языком */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 2px solid #be9833;
  color: #be9833;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1;
}

.lang-toggle .flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 3px;
}

.lang-toggle .arrow {
  font-size: 17px; /* увеличил размер */
  margin-left: 0px;
  color: #FFD966; /* сделал золотистый как рамка */
  transition: transform 0.3s ease, color 0.3s ease;
}

/* при открытом меню стрелка поворачивается */
.lang-dropdown.open .lang-toggle .arrow {
  transform: rotate(180deg);
  color: #fff; /* подсвечивается белым при открытии */
}

/* === Выпадающее меню === */
.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  /*left: 0;
  width: 100%; /* теперь = ширине кнопки */
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(8px);
  border: 2px solid #bd9834;
  border-radius: 12px;
  padding: 8px;
  z-index: 999;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  animation: fadeIn 0.25s ease;
  flex-direction: column;
}

/* показать меню */
.lang-dropdown.open .lang-menu { display: flex; }

/* пункт меню */
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  text-decoration: none;
  font-size: 0.9rem;
  color: #FFD966;
  border: 2px solid transparent;
  border-radius: 6px;
  margin: 4px 0;
  transition: all 0.18s ease;
}

.lang-option .flag { 
  width: 18px; 
  height: 12px; 
  object-fit: cover; 
  border-radius: 3px;
}

.lang-option:hover,
.lang-option:focus {
  color: #fff;
  border-color: #FFD966;
  background: rgba(255, 217, 102, 0.15);
  transform: translateX(4px);
}

/* активная кнопка */
.lang-toggle[aria-expanded="true"] { 
  box-shadow: 0 6px 14px rgba(0,0,0,0.18); 
}

/* анимация появления */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Мобилка: меню совпадает по ширине с кнопкой */
@media (max-width: 520px) {
  .lang-menu {
           width: 25%;
  }
}

  /* язык конец */

/* Слайдер Hero */
/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Фон-картинка */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  text-align: center;
}

.hero-content h1 {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.1;
  text-shadow: 0 0 8px var(--btn-bg);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 0.8s forwards 0.4s;
}

.hero-content p {
  font-size: 1.3rem;
  margin-bottom: 30px;
  color: rgba(255,255,255,0.85);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 0.8s forwards 0.6s;
}

.hero-cta {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-content .btn {
  margin: 0;
  padding: 14px 40px;
  font-size: 1.1rem;
  border-radius: 50px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 0.8s forwards 0.8s;
  box-shadow: var(--neon-glow-light);
  text-decoration: none;
}

.hero-content .btn-primary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 230px;
}

.hero-content .btn-primary:hover {
  background-color: var(--btn-bg-hover);
  box-shadow: var(--neon-glow-strong);
}

.hero-content .btn-outline {
  background-color: transparent;
  border: 2px solid var(--btn-bg);
  color: var(--btn-bg);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-content .btn-outline:hover {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: var(--neon-glow-light);
}

@keyframes fadeSlideUp {
  to { opacity: 1; transform: translateY(0); }
}



/* Секция заголовков */
.section-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--accent);
  text-align: center;
  text-shadow: var(--neon-glow-light);
}

/* Про нас */
#about p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
}

/* Послуги */
#services { background: var(--section-bg); }
#services ul {
  list-style: none;
  padding: 0;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
}
#services li {
  background:#292929;
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 250px;
  box-shadow: 0 0 8px rgba(255,217,102,0.5);
  text-align: center;
  transition: box-shadow 0.3s;
  color: var(--text-muted);
}
#services li:hover {
  box-shadow: 0 0 15px var(--btn-bg);
  color: var(--btn-text);
}
#services i {
  font-size: 40px;
  margin-bottom: 15px;
  color: var(--accent);
}


/* Команда */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.team-member {
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(255,217,102,0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  text-align: center;
}

.team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(255,217,102,0.45);
}

.team-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 200px;
  height: 200px;
  margin: 20px auto 15px;

  /* Подложка */
  background: #e2e1e1;

  /* Круг */
  border-radius: 50%;
  overflow: hidden;

  /* Золотая рамка */
  border: 5px solid var(--accent);
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Ч/Б эффект по умолчанию */
  filter: grayscale(100%);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.team-member:hover .team-image img {
  transform: scale(1.08);
  filter: grayscale(0%); /* проявление цвета */
}

.team-info {
  padding: 0 20px 24px;
}

.team-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.team-position {
  font-size: 1rem;
  font-weight: 600;
  color: var(--btn-bg);
  margin-bottom: 10px;
}

.team-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
}





/* Контакти */
#contact form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#contact input,
#contact textarea {
  background: #222;
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 12px 15px;
  color: var(--text-muted);
  font-size: 1rem;
  resize: vertical;
  transition: border-color 0.3s;
}

#contact input:focus,
#contact textarea:focus {
  outline: none;
  border-color: var(--btn-bg-hover);
  box-shadow: var(--neon-glow-light);
  color: var(--white);
}

/* Кнопка отправки формы (в стиле project-btn) */
#contact button[type="submit"] {
  display: inline-block;
  align-self: center;
  margin-top: 10px;
  padding: 12px 24px;
  background: transparent;
  border: 2px solid #FFD966;
  color: #FFD966;
  border-radius: 10px;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

#contact button[type="submit"]:hover {
  background: #FFD966;
  color: #111;
  box-shadow: 0 0 10px rgba(255, 217, 102, 0.4);
}


/* Футер */
footer {
  text-align: center;
  padding: 20px 15px;
  color: var(--text-muted);
  font-size: 14px;
  background: var(--section-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  margin-top: 40px;
}

/* Кнопки мессенджеров фиксированные справа снизу */
.fixed-messengers {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
}
.fixed-messengers a {
  font-size: 28px;
  color: var(--accent);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  box-shadow: 0 0 4px rgba(255,217,102,0.6);
  background-color: #1a1a1a;
  text-shadow: none !important;
}

/* NEW: Phone кнопка (добавлена перед WhatsApp) */
.fixed-messengers a.ig { color: #E4405F; }
.fixed-messengers a.ig:hover {
  color: #c73652;
  text-shadow: 0 0 8px #c73652;
  background-color: #5a2230;
}
.fixed-messengers a.wa { color: #25d366; }
.fixed-messengers a.wa:hover {
  color: #1ebe57;
  text-shadow: 0 0 8px #1ebe57;
  background-color: #0d5c2e;
}
.fixed-messengers a.vb { color: #7360f2; }
.fixed-messengers a.vb:hover {
  color: #5b43d3;
  text-shadow: 0 0 8px #5b43d3;
  background-color: #4a3bb0;
}
.fixed-messengers a.tg { color: #2ca5e0; }
.fixed-messengers a.tg:hover {
  color: #1f7cb5;
  text-shadow: 0 0 8px #1f7cb5;
  background-color: #196799;
}

/* Адаптив */
@media (max-width: 1024px) {
  .container { padding: 10px 20px; }
  .hero-content h1 { font-size: 2.8rem; }
  .hero-content p { font-size: 1.1rem; }
}
@media (max-width: 768px) {
  .burger { display: flex; }
  .nav-list { display: none; }
  .btn-phone .phone-text { display: none; }
  .hero { height: 550px; }
  .hero-content h1 { font-size: 2.4rem; }
  .hero-content p { font-size: 1rem; }
  .hero-content .btn { padding: 12px 30px; font-size: 1rem; }
}
@media (max-width: 480px) {
  .hero { height: 450px; }
  .hero-content h1 { font-size: 1.7rem; }
  .hero-content p { font-size: 0.95rem; }
  .hero-content .btn { padding: 12px 27px; font-size: 1rem; margin: 0 5px; }
  .lang-switch button { font-size: 17px; padding: 4px 7px; }
  .fixed-messengers { right: 10px; bottom: 10px; }
}

.background-blobs {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(100px);
  animation: moveBlob 25s infinite alternate;
}

.blob1 { background: #0088CC; width: 220px; height: 220px; top: 15%; left: 25%; }
.blob2 { background: #AA77FF; width: 180px; height: 180px; top: 55%; left: 65%; }
.blob3 { background: rgba(255,255,255,0.6); width: 200px; height: 200px; top: 75%; left: 35%; }
.blob4 { background: #FFE4AA; width: 160px; height: 160px; top: 30%; left: 75%; }

@keyframes moveBlob {
  0%   { transform: translate(0,0) scale(1); opacity: 0.4; }
  25%  { transform: translate(40px, 25px) scale(1.05); opacity: 0.6; }
  50%  { transform: translate(-25px, 40px) scale(0.95); opacity: 0.5; }
  75%  { transform: translate(20px, -30px) scale(1.02); opacity: 0.55; }
  100% { transform: translate(0,0) scale(1); opacity: 0.4; }
}



#contact .contact-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
  padding: 60px 0;
}

/* Контакты слева */
.contact-info {
  flex: 1;
  min-width: 250px;
  background: #1e1e1e;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 217, 102, 0.3);
  color: var(--accent);
  line-height: 1.8;
}

.contact-info h2 {
  margin-bottom: 25px;
}

.contact-info p {
  font-size: 1.1rem;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s, color 0.3s;
}

.contact-info p i {
  font-size: 1.2rem;
  color: var(--btn-bg);
}

.contact-info p:hover {
  color: var(--btn-bg-hover);
  transform: translateX(4px);
}

/* Форма справа */
.contact-form-wrapper {
  flex: 1;
  min-width: 300px;
  background: #222;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 217, 102, 0.3);
}

.contact-form-wrapper h2 {
  margin-bottom: 25px;
}

#contact input,
#contact textarea {
  background: #1a1a1a;
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 12px 15px;
  color: var(--text-muted);
  font-size: 1rem;
  width: 100%;
  margin-bottom: 15px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#contact input:focus,
#contact textarea:focus {
  outline: none;
  border-color: var(--btn-bg-hover);
  box-shadow: 0 0 10px var(--btn-bg);
  color: var(--white);
}


/* Адаптив */
@media (max-width: 768px) {
  #contact .contact-container {
    flex-direction: column;
    gap: 30px;
  }

  .contact-info,
  .contact-form-wrapper {
    width: 100%;
    max-width: 100%;
  }
}


.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.contact-info, .contact-form-wrapper {
  flex: 1 1 45%;
  min-width: 300px;
}


.neon-input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 2px solid #0af;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  outline: none;
}


.btn-submit {
  padding: 12px 25px;
  background: #0af;
  color: #000;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-submit:hover {
  background: #05c;
}

/* Pop-up */
.popup {
  display: none;
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: #111;
  padding: 25px 40px;
  border-radius: 12px;
  text-align: center;
  color: #0af;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 22px;
  cursor: pointer;
  color: #0af;
}


/* кейс начало */
/* Сетка */
/* Сетка */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  margin-top: 30px;
  justify-items: center;
}

/* Карточка */
.case-item {
  position: relative;
  background: #1c1c1c;
  padding: 20px;
  overflow: hidden;
  text-align: center;
  width: 100%;
  max-width: 360px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  transition: 0.3s;
}
.case-item:hover {
  box-shadow: 0 0 25px rgba(255, 217, 102, 0.35);
}

/* Угловые рамки */
.case-item::before,
.case-item::after {
  content: "";
  position: absolute;
  border: 3px solid #FFD966;
  width: 30%;
  height: 30%;
  pointer-events: none;
}
.case-item::before {
  top: 8px;
  left: 8px;
  border-right: none;
  border-bottom: none;
}
.case-item::after {
  bottom: 8px;
  right: 8px;
  border-left: none;
  border-top: none;
}

/* Мокап */
.mockup {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 20px;
}
.device {
  width: 100%;
  display: block;
}
.screen {
  position: absolute;
  top: 8.5%;
  left: 12%;
  width: 76%;
  height: 70%;
  overflow: hidden;
  border-radius: 4px;
}
.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Контент */
.case-content {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}
.case-content h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #FFD966;
  text-align: center;
}
.case-problem {
  font-size: 0.95rem;
  background: rgba(200, 50, 50, 0.12);
  border-left: 3px solid #e57373;
  padding: 10px 12px;
  border-radius: 8px;
  color: #ffb3b3;
  margin-bottom: 10px;
}
.case-solution {
  font-size: 0.95rem;
  font-weight: 500;
  background: rgba(255, 217, 102, 0.1);
  border-left: 3px solid #FFD966;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  margin-bottom: 20px;
}

/* Кнопка */
.case-btn {
  display: inline-block;
  margin-top: auto;
  padding: 10px 22px;
  background: transparent;
  border: 2px solid #FFD966;
  color: #FFD966;
  border-radius: 10px;
  text-align: center;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  text-decoration: none;
  width: 100%;
}
.case-btn:hover {
  background: #FFD966;
  color: #1c1c1c;
  box-shadow: 0 0 10px rgba(255, 217, 102, 0.4);
}

/* кейсы конец */



/* Reviews Carousel */
.reviews-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.reviews-carousel::-webkit-scrollbar { display: none; }
.review-item {
  flex: 0 0 300px;
  text-align: center;
}

.review-item img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;

}

/* faq */
#faq {
  padding: 60px 0;
  background-color: #111;
  color: #ddd;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background-color: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
}

.faq-question span:first-child {
  font-size: 18px;
  font-weight: 500;
}

.arrow {
  font-size: 20px;
  color: #777;
  transition: transform 0.3s ease, color 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.3s ease;
  padding: 0 20px;
}

.faq-answer p {
  margin: 15px 0;
  line-height: 1.5;
}

.faq-item.open .faq-answer {
  max-height: 200px;
  padding: 10px 20px 15px;
}

.faq-item.open .arrow {
  transform: rotate(90deg);
  color: #ffd700;
}

/* Адаптив */
@media (max-width: 768px) {
  .faq-question span:first-child {
    font-size: 16px;
  }
}



/* Pricing */
/* Сетка */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

/* Карточка */
.pricing-card {
  background: linear-gradient(145deg, #fffbe6, #fff); /* светлый премиум фон */
  border: 2px solid #d4af37; /* золотая обводка */
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* кнопка внизу */
  height: 100%;
  min-height: 350px; /* одинаковая высота карточек */
}

/* Заголовки и цена */
.pricing-card h3 {
  font-size: 22px;
  margin-bottom: 8px;
  color: #b38b2a; /* золотой акцент */
}
.pricing-card p {
  font-size: 18px;
  font-weight: bold;
  color: #d4af37; /* золотая цена */
  margin-bottom: 15px;
}

/* Список */
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: auto;
}
.pricing-card ul li {
  margin-bottom: 8px;
  color: #444;
  position: relative;
  padding-left: 20px;
}
.pricing-card ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #d4af37; /* золотая галочка */
  font-size: 14px;
}

/* Кнопка */
.pricing-card a.btn-order {
  display: inline-block;
  padding: 12px 25px;
  border: 2px solid #d4af37; /* золотая обводка */
  background: white; /* белая кнопка */
  color: #b38b2a; /* текст в цвет сайта */
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 15px;
}

.pricing-card a.btn-order:hover {
  background: #d4af37; /* золотой фон при наведении */
  color: white; /* текст белый */
  transform: scale(1.05);
}


/* Адаптивные заголовки */
.section-title {
  text-align: center;
  margin-bottom: 30px;
}

/* Hover эффект для кейсов и карточек */
.case-item img, .pricing-card img { border-radius: 8px; width: 100%; object-fit: cover; }


/* три новые блока */


.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: #111;
  color: #fff;
  flex-wrap: wrap;
}

.footer-left {
  display: flex;
  flex-direction: column;
}

.partners-title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.partners-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.partner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: #000;
}

.partner-icon img {
  width: 24px;
  height: 24px;
}

.partner-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* фирменные цвета обводки */
.partner-icon.google { border-color: #4285F4; }
.partner-icon.facebook { border-color: #1877F2; }
.partner-icon.instagram { border-color: #C13584; }

.footer-right {
  font-size: 14px;
}

/* 📱 Мобильная версия */
@media (max-width: 768px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .partners-list {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-right {
    margin-top: 15px;
  }
}


/* Логотип по умолчанию (десктоп) */
.site-header .logo img {
    height: 150px; /* размер на больших экранах */
    display: block;
}

/* Для мобильных экранов */
@media (max-width: 768px) {
    .site-header .logo img {
        height: 100px; /* увеличиваем логотип на мобильных */
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .site-header .logo img {
        height: 100px; /* немного уменьшаем, если экран очень маленький */
    }
}



/*pop up */

.popup {
  display: none;
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
}

.popup-content {
  background: #1e1e1e;
  border: 2px solid #bfa14f;
  border-radius: 15px;
  padding: 30px 40px;
  text-align: center;
  color: #fff;
  max-width: 400px;
  width: 90%;
  position: relative;
  font-family: 'Arial', sans-serif;
}

.popup-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #bfa14f;
}

.popup p {
  font-size: 18px;
  line-height: 1.5;
}

/* pop up */

/* Подсветка активного пункта меню */
.nav-list a.active {
  color: #bfa14f; /* золотой цвет */
  text-shadow: 0 0 5px #bfa14f, 0 0 10px #bfa14f, 0 0 20px #bfa14f;
  transition: 0.3s;
}

.nav-list a {
  position: relative !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  color: #fff !important;
  background: none !important; /* отключаем заливку */
}

.nav-list a.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important; /* линия снизу */
  width: 100% !important;
  height: 3px !important; /* толщина линии */
  background-color: #bfa14f !important; /* золотой цвет */
  border-radius: 2px !important;
  transition: width 0.3s ease !important;
}

.nav-list a:hover::after {
  width: 100% !important; /* при hover линия расширяется полностью */
}


/* о нас */

/* Блок О нас */


/* Основной стиль блока */
#about-novadigital {
  background: var(--section-bg);
  padding: 60px 20px;
  text-align: center;
  font-family: 'Arial', sans-serif;
  color: var(--text-muted);
}

#about-novadigital .nd-container {
  max-width: 1200px;
  margin: 0 auto;
}

#about-novadigital .nd-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--btn-text);
}

/* Выделенный блок */
#about-novadigital .nd-highlight-block {
  margin: 30px 0;
  padding: 15px 20px;
  background: rgba(255, 215, 0, 0.1);
  border-left: 5px solid #FFD700;
  border-radius: 8px;
}

#about-novadigital .nd-highlight-block .nd-highlight {
  font-size: 28px;
  font-weight: 700;
  color: #FFD700;
  margin: 0;
}

/* Основной текст */
#about-novadigital .nd-intro {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Преимущества */
#about-novadigital .nd-advantages {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

#about-novadigital .nd-advantages li {
  background: #292929;
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 250px;
  box-shadow: 0 0 8px rgba(255,217,102,0.5);
  text-align: center;
  transition: box-shadow 0.3s;
  color: var(--text-muted);
}

#about-novadigital .nd-advantages li:hover {
  box-shadow: 0 0 15px var(--btn-bg);
  color: var(--btn-text);
}

#about-novadigital .nd-advantages i {
  font-size: 50px;
  margin-bottom: 15px;
  color: var(--accent);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

#about-novadigital .nd-advantages h4 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--btn-text);
}

#about-novadigital .nd-advantages p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
  #about-novadigital .nd-advantages li {
    flex: 1 1 45%;
  }
  #about-novadigital .nd-advantages i {
    font-size: 45px;
  }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  #about-novadigital .nd-advantages {
    flex-direction: column;
    align-items: center;
  }

  #about-novadigital .nd-advantages li {
    width: 90%;
  }

  #about-novadigital .nd-intro {
    font-size: 17px;
    line-height: 1.8;      /* растянутый текст */
    letter-spacing: 0.5px; /* лёгкое растяжение */
    text-align: center;
    padding: 10px 0;
  }

  #about-novadigital .nd-highlight-block .nd-highlight {
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.5px;
  }
}


//* CSS для всплывающего окна *//

.lang-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: none; /* по умолчанию скрыто */
  align-items: center;
  justify-content: center;
  z-index: 3000;
}
.lang-popup-content {
  background: #ffffff;
  padding: 25px 30px;
  border-radius: 12px;
  text-align: center;
  max-width: 90%;
  width: 400px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  position: relative;
}
.lang-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}
.lang-popup-text {
  font-size: 1.1rem;
  color: #333333;
  margin-bottom: 20px;
}
.lang-buttons a {
  display: inline-block;
  margin: 5px 10px;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  color: #ffffff;
  background-color: #ffd966;
  transition: 0.3s;
}
.lang-buttons a:hover {
  background-color: #e6c94d;
}
@media (max-width: 500px) {
  .lang-popup-content { width: 90%; padding: 20px; }
  .lang-popup-text { font-size: 1rem; }
  .lang-buttons a { padding: 8px 14px; margin: 4px 6px; }
}


//* o nas **/


.about-premium-text {
  position: relative;
  width: 100%;
  min-height: 700px;
  font-family: 'Inter', sans-serif;
  color: #fff;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index: 1;
}

.bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.text-block p {
  font-size: 1.25rem;
  line-height: 2;
  background: rgba(255,215,0,0.08);
  padding: 20px;
  border-radius: 12px;
}

/* Иконки с золотой подсветкой */
.icons-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px;
}

.icon-item {
  background: rgba(255,215,0,0.05);
  padding: 25px;
  border-radius: 15px;
  border: 2px solid #ffd700;
  width: 23%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.icon-wrapper {
  width: 70px;
  height: 70px;
  background: rgba(255,215,0,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper i {
  font-size: 2.2rem;
  color: #ffd700;
}

.icon-item h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #ffd700;
}

.icon-item p {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .content {
    padding: 60px 20px;
    text-align: center;
  }

  .icons-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .icon-item {
    width: 90%;
  }
}

/* принцип работы */

#process {
  background: var(--section-bg);
  padding: 60px 20px;
  text-align: center;
}
#process .process-header {
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
#process .process-header h2 {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 10px;
}
#process .process-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.5;
}
#process .process-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  max-width: 1000px;
}
#process .process-steps li {
  background: rgba(41,41,41,0.9);
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 250px;
  box-shadow: 0 0 8px rgba(255,217,102,0.4);
  text-align: center;
  transition: box-shadow 0.3s, transform 0.3s;
  color: var(--text-muted);
}
#process .process-steps li:hover {
  box-shadow: 0 0 15px var(--btn-bg);
  transform: translateY(-5px);
}
#process .process-steps i {
  font-size: 40px;
  margin-bottom: 15px;
  color: var(--accent);
}
#process .process-steps h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #fff;
}
#process .process-steps p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  #process .process-steps {
    flex-direction: column;
    gap: 20px;
  }
}
/* принцип работы */

/* o nas */


.about-premium-text {
  position: relative;
  width: 100%;
  min-height: 700px;
  font-family: 'Inter', sans-serif;
  color: #fff;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index: 1;
}

.bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.text-block p {
  font-size: 1.25rem;
  line-height: 2;
  background: rgba(255,215,0,0.08);
  padding: 20px;
  border-radius: 12px;
}

/* Иконки с золотой подсветкой */
.icons-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px;
}

.icon-item {
  background: rgba(255,215,0,0.05);
  padding: 25px;
  border-radius: 15px;
  border: 2px solid #ffd700;
  width: 23%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.icon-wrapper {
  width: 70px;
  height: 70px;
  background: rgba(255,215,0,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper i {
  font-size: 2.2rem;
  color: #ffd700;
}

.icon-item h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #ffd700;
}

.icon-item p {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .content {
    padding: 60px 20px;
    text-align: center;
  }

  .icons-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .icon-item {
    width: 90%;
  }
}

/* o nas end*/

/* portfolio */

/* Секция */
.portfolio-section {
  padding: 60px 0;
  background: #111;
  color: #FFD966;
  font-family: Arial, sans-serif;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: bold;
}

/* Фильтры */
.filter-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 10px 20px;
  border: 2px solid #FFD966;
  background: none;
  color: #FFD966;
  cursor: pointer;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.filter-btn.active,
.filter-btn:hover {
  background: #FFD966;
  color: #111;
}

/* Сетка */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  justify-items: center;
}

/* Карточка */
.portfolio-card {
  position: relative;
  background: #1c1c1c;
  padding: 20px;
  overflow: hidden;
  text-align: center;
  transition: 0.3s;
  width: 100%;
  max-width: 360px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
}
.portfolio-card:hover {
  box-shadow: 0 0 25px rgba(255, 217, 102, 0.35);
}

/* Угловая рамка толще */
.portfolio-card::before,
.portfolio-card::after {
  content: "";
  position: absolute;
  border: 3px solid #FFD966; /* толще */
  width: 30%;
  height: 30%;
  pointer-events: none;
}
.portfolio-card::before {
  top: 8px;
  left: 8px;
  border-right: none;
  border-bottom: none;
}
.portfolio-card::after {
  bottom: 8px;
  right: 8px;
  border-left: none;
  border-top: none;
}

/* Мокап устройства */
.mockup {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 20px;
}
.device {
  width: 100%;
  display: block;
}
.screen {
  position: absolute;
  top: 8.5%;
  left: 12%;
  width: 76%;
  height: 70%;
  overflow: hidden;
  border-radius: 4px;
}
.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Инфо */
.portfolio-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 10px;
}
.portfolio-info h3 {
  margin: 0 0 10px;
  color: #FFD966;
  font-size: 1.25rem;
}
.portfolio-info p {
  color: #ddd;
  margin-bottom: auto;
  font-size: 1rem;
  line-height: 1.4;
}

/* Кнопка проекта */
.project-btn {
    display: inline-block;
    align-self: center;
    margin-top: 20px;
    padding: 10px 22px;
    background: transparent;
    border: 2px solid #FFD966;
    color: #FFD966;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    width: 100%;
}
.project-btn:hover {
  background: #FFD966;
  color: #111;
  box-shadow: 0 0 10px rgba(255, 217, 102, 0.4);
}

/* Кнопка "Показати всі проекти" */
.show-all-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.show-all-btn {
  padding: 12px 24px;
  background: #FFD966;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
  color: #111;
  transition: all 0.3s ease;
}
.show-all-btn:hover {
  background: #e6c85c;
  box-shadow: 0 0 15px rgba(255, 217, 102, 0.5);
}

/* Скрытие через класс */
.portfolio-item.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

/* portfolio end */

/* process */

#process {
  background: var(--section-bg);
  padding: 60px 20px;
  text-align: center;
}
#process .process-header {
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
#process .process-header h2 {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 10px;
}
#process .process-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.5;
}
#process .process-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  max-width: 1000px;
}
#process .process-steps li {
  background: rgba(41,41,41,0.9); /* напівпрозорі картки */
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 250px;
  box-shadow: 0 0 8px rgba(255,217,102,0.4);
  text-align: center;
  transition: box-shadow 0.3s, transform 0.3s;
  color: var(--text-muted);
}
#process .process-steps li:hover {
  box-shadow: 0 0 15px var(--btn-bg);
  transform: translateY(-5px);
}
#process .process-steps i {
  font-size: 40px;
  margin-bottom: 15px;
  color: var(--accent);
}
#process .process-steps h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #fff;
}
#process .process-steps p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  #process .process-steps {
    flex-direction: column;
    gap: 20px;
  }
}

/*process end */

/* contact form */ 

/* Общие поля */
.contact-form-wrapper {
  text-align: left;
}

.contact-form-wrapper form input,
.contact-form-wrapper form textarea {
  display: block;
  width: 100%;
  margin: 10px 0;
  box-sizing: border-box;
  text-align: left !important; /* всё кроме телефона */
}

/* Автозаполнение */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #212121 inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #0f0;
  transition: background-color 5000s ease-in-out 0s;
}

/* Телефон — убираем налезание на флаг */
.iti {
  width: 100%;
}

.iti input {
  text-align: left !important;   /* обычное выравнивание */
  padding-left: 15% !important; /* увеличиваем отступ, чтобы точно не лезло под флаг */
}

/*contact form end */


/* 🔧 Технології */
#technologies {
  padding: 60px 16px;
  text-align: center;
  overflow: hidden;
  background: #111;
}

#technologies .section-title {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #facc15;
}

.marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-bottom: 25px;
  cursor: grab;
  touch-action: pan-y;
}

.marquee-row {
  display: flex;
  gap: 40px;
  flex-shrink: 0;
  will-change: transform;
  user-select: none;
  align-items: center;
  padding: 10px 0;
}

.icon {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: auto;
  text-align: center;
  cursor: pointer;
}

.icon img {
  height: 72px;
  width: auto;
  display: block;
  transition: transform 0.22s ease;
}

.icon:hover img,
.icon:focus img {
  transform: scale(1.08);
}

/* Tooltip */
.icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(255,255,255,0.95);
  color: #111;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform-origin: center top;
}

.icon:hover::after,
.icon:focus::after,
.icon.show-tooltip::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.icon:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.12);
  border-radius: 6px;
}

/* Адаптив */
@media (max-width: 600px) {
  .icon img { height: 58px; }
  .marquee-row { gap: 28px; }
}

/* Вспомогательный тултип, рендерится в body (не режется overflow) */
.tech-tooltip {
  position: fixed;
  z-index: 99999;
  background: rgba(255,255,255,0.98);
  color: #111;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  pointer-events: auto;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Показать тултип (js ставит стиль сразу после позиционирования) */
.tech-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}