/* Первый экран: единая центральная ось для меню, текста, кнопок и портрета.
   Этот файл подключается после site.css и содержит только оформление первого экрана. */
/* ЦЕНТРОВКА МЕНЮ: одинаковые боковые колонки держат навигацию по центру независимо от ширины логотипа и телефона. */
.header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:16px; }
.header-inner>.brand { justify-self:start; }.desktop-nav { justify-self:center; }.header-phone { justify-self:end; }
.hero-copy { width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero h1 { width:100%; max-width:1000px; margin-inline:auto; }
.hero-description { width:100%; margin-inline:auto; }
.hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,460px); margin-inline:auto; }
.hero-actions .button { width:100%; }
/* Свет остаётся на фоне и краях одежды; кожу дополнительно не окрашиваем фильтрами. */
.hero-atmosphere { background:radial-gradient(ellipse at 50% 65%,#284c7033,transparent 58%),linear-gradient(135deg,#0a1628,#080f19); }
.hero-atmosphere span { background:#94b9d6; opacity:.07; }
.hero-atmosphere span:nth-child(3) { background:#80b4e2; opacity:.08; }
.showcase { width:100%; max-width:1120px; height:440px; margin:12px auto 0; overflow:hidden; }
.equipment-deck { position:absolute; inset:0; perspective:none; }
.showcase-orbit { width:82%; height:190px; top:245px; left:50%; transform:translate(-50%,-50%); }
.orbit-front { width:87%; height:210px; top:245px; transform:translate(-50%,-50%); opacity:.25; }
.scene-spark { display:none; }
/* ПОРТРЕТ: width/height — размер, top — отступ сверху сцены. Подпись отдельно в .team-signature; после увеличения фото проверьте её положение. */
.team-center { width:330px; height:330px; top:12px; bottom:auto; left:50%; transform:translateX(-50%); z-index:5; }
.team-cutout { width:100%; height:100%; bottom:0; object-fit:contain; object-position:center; filter:drop-shadow(0 8px 18px #0005); mask-image:linear-gradient(#000 0%,#000 86%,transparent 100%); }
.team-halo { width:360px; height:320px; left:50%; top:10px; transform:translateX(-50%); background:radial-gradient(ellipse,#83b9e035,transparent 70%); filter:blur(24px); }
.team-signature { top:387px; bottom:auto; left:50%; transform:translateX(-50%); z-index:6; margin:0; width:max-content; max-width:95%; font-size:14px; padding:10px 18px; }
.team-signature small { font-size:10px; }.signature-dot { background:#a4c8e8; box-shadow:0 0 12px #8bbce750; }
/* Координаты карточек вычисляет showcase.js по одной окружности, не по отдельным слотам. */
/* ПЛАШКИ НА КОМПЬЮТЕРЕ: width/height — базовый размер до перспективного уменьшения в JS. border-radius — скругление. 6s — период лёгкого покачивания. */
.equipment-card { left:50%; top:0; margin:0; width:230px; height:78px; border-radius:18px; border:1px solid #9eb9d641; color:#f6f8fb; background:linear-gradient(145deg,#203247f5,#101c2df5); box-shadow:0 12px 35px #0004; backdrop-filter:none; transition:none; animation:orbit-bob 6s ease-in-out infinite; will-change:transform; }
.equipment-card.is-current { background:linear-gradient(145deg,#263e55f5,#13283df5); border-color:#afd3f280; box-shadow:0 12px 35px #0004,inset 0 1px #d4eaff16; }
.equipment-card-content { padding:12px; display:flex; flex-direction:row; gap:12px; align-items:center; justify-content:center; animation:none; }
.equipment-text { display:flex; flex-direction:column; gap:5px; text-align:left; }
.equipment-name { font-size:15px; font-weight:700; line-height:1.2; padding:0; margin:0; }
.equipment-detail { font-size:11px; line-height:1.3; color:#c5d2df; }
.is-paused .equipment-card { animation-play-state:paused; }
/* ПОКАЧИВАНИЕ НА МЕСТЕ: -3px — амплитуда вверх. Поставьте 0 для неподвижной карточки; движение по орбите задаётся отдельно в JS. */
@keyframes orbit-bob { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
/* Строгие векторные пиктограммы: общий светлый контур и небольшой жёлтый акцент.
   Для замены отдельной иконки редактируйте соответствующий SVG в assets/services. */
.service-icon { display:block; width:36px; height:36px; flex-shrink:0; background-repeat:no-repeat; background-position:center; background-size:contain; }
.icon-electric { background-image:url('assets/services/electric.svg'); }
.icon-smart { background-image:url('assets/services/smart.svg'); }
.icon-video { background-image:url('assets/services/video.svg'); }
.icon-access { background-image:url('assets/services/access.svg'); }
.icon-security { background-image:url('assets/services/security.svg'); }
.icon-fire { background-image:url('assets/services/fire.svg'); }
.service-icon.service-object { width:48px; height:48px; }
@media(min-width:801px) and (max-width:1100px) {
  .header-inner { gap:10px; }.header-inner .brand-name { font-size:20px; }.header-inner .brand img { width:38px; height:38px; }
  .equipment-card { width:210px; height:76px; }.equipment-name { font-size:14px; }.equipment-detail { font-size:10px; }
  .team-center { width:300px; height:300px; top:30px; }
}
/* МОБИЛЬНЫЙ ПЕРВЫЙ ЭКРАН: здесь отдельно меняются фото, подпись, карточки и шрифты. Радиусы мобильной орбиты — в paint() файла showcase.js. */
@media(max-width:800px) {
  .header-inner { display:flex; justify-content:space-between; }
  .hero h1 { max-width:630px; }.hero-actions { gap:8px; }
  .showcase { height:350px; margin-top:12px; }
  .team-center { top:5px; bottom:auto; width:235px; height:224px; }
  .team-halo { width:270px; height:235px; top:0; }
  .team-signature { top:295px; bottom:auto; padding:7px 13px; font-size:12px; border-radius:14px; }
  .team-signature small { font-size:9px; }
  .showcase-orbit { width:90%; top:185px; height:130px; opacity:.4; }.orbit-front { display:none; }
  .equipment-card { width:190px; height:64px; top:0; left:50%; margin:0; border-radius:14px; }
  .equipment-card-content { flex-direction:row; justify-content:flex-start; gap:9px; padding:10px 12px; }
  .equipment-card .service-icon { width:28px; height:28px; }
  .equipment-text { text-align:left; gap:3px; }
  .equipment-name { font-size:13px; }.equipment-detail { font-size:10px; }
  .hero-bottom { padding-top:8px; }
}
@media(max-width:360px) {
  .team-center { width:225px; }
  .equipment-card { width:180px; }
}
@media(prefers-reduced-motion:reduce) { .equipment-card { animation:none; } }