/* ================== базовые мелочи (как было) ================== */
.hexagon {
  width: 40px;
  height: 40px;
  background: #3b82f6;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.dropdown-trigger:hover .dropdown,
.dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===============================================================
   DPI Animation
   =============================================================== */
.dpi-container {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  min-height: 360px;              /* запас высоты */
  padding-bottom: 4.5rem;         /* место под счётчики и кнопку */
}

/* пакеты */
.packet {
  width: 60px;
  height: 40px;
  background: linear-gradient(45deg, #3b82f6, #1d4ed8);
  border-radius: 8px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(59,130,246,.3);
  z-index: 1;
}
.packet.malicious {
  background: linear-gradient(45deg, #ef4444, #dc2626);
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
}
.packet.safe {
  background: linear-gradient(45deg, #10b981, #059669);
  box-shadow: 0 4px 12px rgba(16,185,129,.3);
}

/* зона сканера */
.inspection-zone {
  width: 120px;
  height: 80px;
  border: 2px dashed #64748b;
  border-radius: 8px;
  position: absolute;
  top: 45%;                        /* чуть выше центра, чтобы низу было больше места */
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(100,116,139,.1);
}
.scanner-beam {
  width: 2px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #22d3ee, transparent);
  position: absolute;
  animation: scan 2s ease-in-out infinite;
}

/* панели и индикатор — поверх */
#analysisPanel { z-index: 5; }
.threat-indicator {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: bold;
  opacity: 0;
  transition: all .3s ease;
  z-index: 6;
}
.threat-indicator.show { opacity: 1; }
.threat-indicator.safe {
  background: rgba(16,185,129,.2);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.3);
}
.threat-indicator.threat {
  background: rgba(239,68,68,.2);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.3);
}

/* счётчики и кнопка внизу: переносятся и не давят панель */
.dpi-container .flex.space-x-4,
.dpi-container .flex.space-x-2 {
  gap: .5rem !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 80%;
}
.stats-counter {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  text-align: center;
  min-width: 90px;
}
#dpiToggle { z-index: 7; }

/* анимации движения пакетов */
@keyframes scan {
  0%,100% { transform: translateX(-50px); opacity: 0; }
  50%     { transform: translateX(50px);  opacity: 1; }
}
.packet-flow{ animation: flowRight 4s linear infinite; }
.packet-flow.inspected{ animation: flowInspect 4s linear infinite; }
.packet-flow.blocked{ animation: flowBlock 4s linear infinite; }
@keyframes flowRight{
  0%{ left:-80px } 100%{ left:calc(100% + 20px) }
}
@keyframes flowInspect{
  0%{ left:-80px } 25%,75%{ left:calc(50% - 30px) } 100%{ left:calc(100% + 20px) }
}
@keyframes flowBlock{
  0%{ left:-80px } 25%{ left:calc(50% - 30px) }
  50%{ transform:scale(1); opacity:1 }
  75%{ transform:scale(.8); opacity:.5 }
  100%{ transform:scale(0); opacity:0 }
}

/* ===============================================================
   Neural Network
   =============================================================== */
.neural-container{
  position: relative;
  height: 560px;
  background: #111827;
  border-radius: 12px;
  padding: 2rem;
  overflow: hidden;
  padding-bottom: 4.5rem;       /* запас под нижние карточки/кнопку */
}

/* узлы */
.guard-node, #localGuard{
  width: 64px; height: 64px;
  background: linear-gradient(135deg,#3b82f6,#1d4ed8);
  border-radius: 50%;
  position: absolute;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:bold;
  box-shadow:0 0 12px rgba(59,130,246,.5);
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* позиции */
#localGuard{ top:50%; left:50%; }
#guard1{ top:10%; left:50%; }
#guard2{ top:22%; left:78%; }
#guard3{ top:50%; left:90%; }
#guard4{ top:78%; left:78%; }
#guard5{ top:90%; left:50%; }
#guard6{ top:78%; left:22%; }
#guard7{ top:50%; left:10%; }
#guard8{ top:22%; left:22%; }

.central-core{
  position:absolute; top:8%; right:8%;
  width:96px; height:96px;
  background: linear-gradient(135deg,#ff6701,#e55100);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:bold;
  box-shadow:0 0 12px rgba(255,103,1,.5);
  z-index:2;
}

/* линии — под узлами */
svg.network-lines{ z-index:1; }
svg.network-lines line{
  stroke:#64748b; stroke-width:2; opacity:.3; transition:all .3s ease;
}

/* слои интерфейса, чтобы не перекрывались */
.neural-container #neuralAnalysis,
.neural-container #neuralStatus{ z-index:3; }
.neural-container #threatPacket,
.neural-container .stats-counter,
.neural-container #neuralToggle{ z-index:4; }

/* ===============================================================
   Mobile Tweaks
   =============================================================== */

/* без горизонтального скролла из-за absolute-элементов */
body, .our-tech { overflow-x: hidden; }

/* ≤ 480px — компактные размеры, переносы */
@media (max-width: 480px){
  /* DPI */
  .dpi-container{ padding: 1rem 1rem 4.75rem; min-height: 420px; }
  .packet{ width: 44px; height: 30px; font-size: 10px; }
  .inspection-zone{ width: 92px; height: 64px; top: 42%; }
  #analysisPanel{ width: 236px !important; font-size: 11px; }
  .threat-indicator{ top: 6px; padding: 6px 10px; font-size: 10.5px; }
  .stats-counter{ min-width: 72px; padding: 10px; font-size: 11px; }
  #dpiToggle{ padding: .5rem .7rem; font-size: 11px; }

  /* Neural */
  .neural-container{ height: 560px; padding: 1rem 1rem 4.75rem; }
  .guard-node, #localGuard{ width: 54px; height: 54px; font-size: 11px; }
  .central-core{ width: 80px; height: 80px; font-size: 11px; }
  #neuralAnalysis{ width: 236px !important; }

  /* сетки на 1 колонку, чтоб карточки не давили друг друга */
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .md\:grid-cols-5{
    grid-template-columns: 1fr !important;
  }
}

/* 481–640px — немного воздуха */
@media (min-width: 481px) and (max-width: 640px){
  .neural-container{ height: 580px; }
}

/* ≤ 420px — ещё компактнее */
@media (max-width: 420px){
  .dpi-container{ min-height: 440px; }
  .inspection-zone{ width: 88px; height: 60px; }
  #analysisPanel{ width: 220px !important; }
  .neural-container{ height: 610px !important; }
}

/* ≤ 360px — самый узкий случай */
@media (max-width: 360px){
  .dpi-container{ min-height: 460px; }
  .inspection-zone{ width: 80px; height: 56px; }
}

/* --- iPhone SE / очень узкие (≤ 380px) --- */
@media (max-width: 380px) {
  /* больше высоты и «подвала» под HUD/кнопку */
  .neural-container{
    min-height: 640px;
    padding-bottom: 5.75rem;
  }

  /* узлы поменьше, шрифт поменьше */
  .guard-node, #localGuard{
    width: 50px;
    height: 50px;
    font-size: 10px;
  }
  .central-core{
    width: 72px;
    height: 72px;
    font-size: 10px;
    top: 10%;
    right: 6%;
  }

  /* чуть «внутрь» диаграммы, чтобы не липли к краям */
  #guard1{ top: 14%; left: 50%; }
  #guard2{ top: 24%; left: 76%; }
  #guard3{ top: 50%; left: 88%; }
  #guard4{ top: 76%; left: 76%; }
  #guard5{ top: 88%; left: 50%; }
  #guard6{ top: 76%; left: 24%; }
  #guard7{ top: 50%; left: 12%; }
  #guard8{ top: 24%; left: 24%; }

  /* линии потоньше — визуально чище */
  .neural-container svg.network-lines line{
    stroke-width: 1.5;
  }

  /* счётчики снизу — компактнее и переносами */
  .neural-container .stats-counter{
    min-width: 68px;
    padding: 8px 10px;
    font-size: 11px;
  }
  /* уже включали wrap для .flex.space-x-*; продублируем для уверенности */
  .neural-container .flex.space-x-2,
  .neural-container .flex.space-x-4{
    gap: .4rem !important;
    flex-wrap: wrap;
    max-width: 84%;
  }

  /* кнопка — не наезжает, остаётся сверху по слою */
  #neuralToggle{
    padding: .45rem .7rem;
    font-size: 12px;
    z-index: 4;
  }
}

/* --- узкие экраны: разводим элементы нейросети, чтоб не наезжали --- */
@media (max-width: 480px) {
  /* G1 чуть ниже, чтобы не сталкивался со статус-баром по центру */
  #guard1 { top: 16% !important; }

  /* центральное ядро на чуть более «внутренней» позиции */
  .central-core { right: 10% !important; }

  /* счётчики снизу — компактнее и допускают перенос */
  .neural-container .stats-counter {
    min-width: 68px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  .neural-container .flex.space-x-2,
  .neural-container .flex.space-x-4 {
    gap: .45rem !important;
    flex-wrap: wrap !important;
    max-width: 84% !important;
  }

  /* небольшой дополнительный запас снизу под кнопку */
  .neural-container { padding-bottom: 5rem !important; }
}

/* --- очень узкие (≤ 380px): ещё чуть больше «воздуха» --- */
@media (max-width: 380px) {
  #guard1 { top: 18% !important; }     /* ещё ниже, если совсем тесно */
  .central-core { right: 12% !important; top: 10% !important; }

  /* линии чуть тоньше — визуально чище в тесном пространстве */
  .neural-container svg.network-lines line { stroke-width: 1.5 !important; }
}