/* ==========================================================================
   styles.css — общий стиль для всех страниц (HTML + CSS, без JS)

   В проекте 4 страницы:
   - index.html      (главная с фото и кликабельными областями)
   - device-a.html   (описание левого устройства, фон — фото)
   - device-b.html   (описание правого устройства, фон — фото)
   - about.html      (контакты, фон — фото)

   ВАЖНО: пути к картинкам в CSS:
   - images/device-a.jpg
   - images/device-b.jpg
   - images/about.jpg
   На главной картинка подключается в HTML как <img src="images/main.jpg">.
   ========================================================================== */


/* ==========================================================================
   1) CSS-переменные (цвета/тени/скругления)
   Это “настройки темы” в одном месте. Если хотите изменить стиль сайта —
   чаще всего достаточно поменять значения здесь.
   ========================================================================== */
   
 @charset "UTF-8";
   
:root{
  --bg: #0b1220;                    /* базовый цвет фона, если нет фото */
  --panel: rgba(255,255,255,0.06);  /* полупрозрачная панель (редко используется) */
  --text: #eaf0ff;                  /* основной цвет текста */
  --muted: rgba(234,240,255,0.75);  /* “приглушённый” текст для описаний */
  --border: rgba(255,255,0,0.5); /* цвет тонких рамок */
  --shadow: 0 20px 60px rgba(0,0,0,0.45); /* общая тень для карточек/панелей */
  --radius: 10px;                   /* базовое скругление углов */
}


/* ==========================================================================
   2) Сброс и базовые правила
   ========================================================================== */
* { box-sizing: border-box; } /* чтобы padding/рамки не ломали размеры блоков */
html, body { height: 100%; }  /* полезно для фоновых изображений/растяжения */

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);

  /* ФОН ПО УМОЛЧАНИЮ (когда НЕ задан фон-изображение на конкретной странице)
     Это “космический” градиент. На страницах device-a/device-b/about
     он будет перекрыт правилами body.device-a / body.device-b / body.about */
  
  background:
    radial-gradient(1200px 700px at 15% 20%, rgba(110,231,255,0.15), transparent 55%),
    radial-gradient(900px 600px at 85% 30%, rgba(167,139,250,0.18), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(255,255,255,0.07), transparent 60%),
    var(--bg);

	
	}

/* Ссылки по умолчанию наследуют цвет текста */
a { color: inherit; }


/* ==========================================================================
   3) Контейнер и шапка (одинаковы на всех страницах)
   ========================================================================== */
.container{
  width: 92vw;        /* fallback */
  max-width: 1100px;  /* fallback */
  margin: 0 auto;
  padding: 28px 0 54px;
}
   
  
/*    .container{
  width: min(1100px, 92vw);  /* максимум 1100px, иначе 92% ширины окна */
/*   margin: 0 auto;            /* выравнивание по центру */
/*   padding: 28px 0 54px;      /* отступы сверху/снизу */
/* }*/

.logoPDSYS{
  background-color: none;
  position: absolute;
  /*left: -9999px;
  top: auto;
  background-image: url(images/logoYS.png) transparent;
  */
  width: 130px;
  height: 130px;
  padding: 100px;
	
}

.header{
  display: flex;
  align-items: baseline;
  justify-content: space-between; /* заголовок слева, навигация справа */
  gap: 14px;
  padding: 10px 0 22px;
}

/* Блок “бренд”: заголовок + подзаголовок */
.brand{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand h1{
  font-size: 28px;              /* fallback */
  font-size: clamp(22px, 3vw, 34px);
  margin: 0;
  letter-spacing: 0.2px;
}


/*.brand h1{
  /* clamp() — адаптивный размер шрифта:
     минимум 22px, максимум 34px, между ними зависит от ширины экрана
  font-size: clamp(22px, 3vw, 34px);
  margin: 0;
  letter-spacing: 0.2px;
}
*/
.brand p{
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}


/* ==========================================================================
   4) Навигация (кнопки-ссылки в шапке)
   ========================================================================== */
.nav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;           /* чтобы на маленьких экранах переносилось */
  justify-content: flex-end; /* прижато вправо */
}

.nav a{
  display: inline-block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;      /* “пилюля” (очень круглые края) */
  text-decoration: none;
  background: rgba(255,255,255,0.03);
}

.nav a:hover{
  background: rgba(255,255,255,0.06);
}


/* ==========================================================================
   5) Подвал (footer)
   Тут вы просили ссылку на контакты “внизу”.
   ========================================================================== */
.footer{
  margin-top: 18px;
  color: rgba(234,240,255,0.55);
  font-size: 12px;
}

.footer a{
  color: rgba(234,240,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   6) Главная: фото + кликабельные области (hotspots)
   На index.html картинка в HTML: <img src="images/main.jpg">
   Поверх неё лежат прозрачные ссылки <a class="hotspot ...">
   ========================================================================== */
.home-hero{


  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;       /* чтобы скругление применилось и к картинке */
  box-shadow: var(--shadow);
  background: rgba(0,0,0,0.83);

}

/* figure-обёртка: делаем relative, чтобы абсолютные зоны считались от неё */
.photo-hotspots{
  position: relative;
  margin: 0; /* убираем стандартные отступы figure */
}

.photo-hotspots img{
  display: block; /* убираем “щель” снизу у картинок (inline-поведение) */
  width: 100%;    /* картинка растягивается на ширину контейнера */
  height: auto;   /* пропорции сохраняются */
}

/* Кликабельные зоны — это ССЫЛКИ, расположенные абсолютным позиционированием */
.hotspot{
  position: absolute;

  /* “растягиваем” область по высоте: от 8% сверху до 8% снизу */
  top: 8%;
  bottom: 8%;

  /* ширина каждой области (левое и правое устройство) */
  width: 44%;

  border-radius: 18px;
  text-decoration: none;
  outline: none;

  /* прозрачный фон — чтобы не было видимой плашки без наведения */
  background: rgba(255,255,255,0.00);

  /* плавные эффекты при наведении */
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* Левая и правая зоны: отступ 4% от краёв.
   Если “не попадает”, можно поменять проценты:
   - left/right (сдвиг)
   - width (ширина зоны)
   - top/bottom (высота зоны) */
.hotspot--left{ left: 6%; }
.hotspot--right{ right: 4%; }

/* Подсветка при наведении */
.hotspot:hover{
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22);
  transform: translateY(-2px);
}

/* Подсветка при фокусе с клавиатуры (доступность) */
.hotspot:focus-visible{
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.65);
}

/* Подпись внутри зоны (не обязательна). Позиционируется внизу слева зоны. */
.hotspot__label{
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: rgba(234,240,255,0.92);
  font-size: 13px;

  /* размытие заднего фона (работает не во всех браузерах одинаково) */
  backdrop-filter: blur(6px);
}

/* Адаптация под телефоны: зоны становятся чуть шире и чуть выше */
@media (max-width: 860px){
  .hotspot{
    top: 6%;
    bottom: 6%;
    width: 46%;
  }
}


/* ==========================================================================
   7) “Стеклянная” панель (glass) для страниц с фоном-фото
   На device-a, device-b, about текст лежит поверх фото.
   Чтобы он читался, используется полупрозрачная панель + blur.
   ========================================================================== */
.glass{
  border: 1px solid var(--border);
  background: rgba(10,18,32,0.62); /* затемнённая прозрачная подложка */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);     /* “стекло”: размывает фон под панелью */
}

/* Внутренний layout: 2 колонки (текст + сайдбар) */
.glass-inner{
  padding: 18px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* левая чуть шире правой */
  gap: 18px;
}

/* На узких экранах колонки превращаются в одну */
@media (max-width: 860px){
  .glass-inner{
    grid-template-columns: 1fr;
  }
}

.glass h2{
  margin: 0 0 10px;
  font-size: 22px;              /* fallback */
  font-size: clamp(18px, 2.2vw, 26px);
}


/* Заголовки внутри “glass” 
.glass h2{
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 26px);
}
*/


/* “Ведущий абзац” — чуть более читабельный, приглушенный */
.lead{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

/* Список характеристик */
.specs{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.specs li{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex;
  justify-content: space-between; /* слева название, справа значение */
  gap: 10px;
}

.specs span{
  color: var(--muted);
  white-space: nowrap;
}

.specs b{
  font-weight: 600;
  text-align: right;
}

body.home{
  background:
    linear-gradient(180deg, rgba(6,10,18,0.55), rgba(6,10,18,0.85)),
    url("images/F2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Notices (show via #sent / #error) ===== */
.notice{
  display: none; /* скрыто, пока не попадём на якорь */
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(234,240,255,0.92);
}

.notice:target{
  display: block; /* показываем, когда URL содержит #sent или #error */
}

.notice--success{
  border-color: rgba(120,255,200,0.30);
  background: rgba(120,255,200,0.08);
}

.notice--error{
  border-color: rgba(255,140,140,0.32);
  background: rgba(255,140,140,0.08);
}

/* Honeypot: скрываем поле от пользователя */
.hp{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



/* ==========================================================================
   8) Фоны страниц устройств и контактов
   Тут задаются фотографии-фоны + затемняющие слои (градиенты),
   чтобы текст был читаем даже на светлом/пёстром фоне.

   Технически:
   - у body несколько background-слоёв
   - последний слой — url(...) с фото
   - слои выше — прозрачные градиенты для “затемнения”
   ========================================================================== */

/* Левое устройство: фон */
body.device-a{
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(0,0,0,0.35), transparent 60%),
    linear-gradient(180deg, rgba(6,10,18,0.65), rgba(6,10,18,0.80)),
    url("images/F2.png");
  background-size: cover;        /* фото заполняет экран */
  background-position: center;   /* центрируем кадр */
  background-repeat: no-repeat;  /* без повторов */
}

/* Правое устройство: фон */
body.device-b{
  background:
    radial-gradient(900px 600px at 80% 10%, rgba(0,0,0,0.35), transparent 60%),
    linear-gradient(180deg, rgba(6,10,18,0.60), rgba(6,10,18,0.82)),
    url("images/F2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Контакты: фон */
body.about{
  background:
    radial-gradient(900px 600px at 50% 15%, rgba(0,0,0,0.30), transparent 60%),
    linear-gradient(180deg, rgba(6,10,18,0.55), rgba(6,10,18,0.86)),
    url("images/F1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ==========================================================================
   9) Контакты (список карточек)
   Используется на about.html
   ========================================================================== */
.contact-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

/* Ссылки внутри контактов без подчёркивания, чтобы выглядели как часть карточки */
.contact-list a{
  text-decoration: none;
}

/* “Карточка” одного контакта */
.contact-item{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: grid;
  gap: 4px;
}

/* Подпись-мелким (например “Email”) */
.contact-item small{
  color: rgba(234,240,255,0.70);
}