/* ===================== HERO ===================== */
.hero{
  padding: calc(var(--nav-h) + 78px) 0 60px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items:center;
}
.hero-copy .chip{ margin-bottom: 22px; }
.hero-copy h1{ margin-bottom: 22px; }
.hero-copy h1 em{
  font-style:normal;
  color: var(--gold-deep);
  position:relative;
}
.hero-copy .lead{ margin-bottom: 34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 46px; }

.hero-trust{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-trust .avatars{ display:flex; }
.hero-trust .avatars span{
  width:36px; height:36px;
  border-radius:50%;
  background: var(--gold-pale);
  border: 2px solid var(--ivory);
  margin-left:-10px;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color: var(--gold-deep);
}
.hero-trust .avatars span:first-child{ margin-left:0; }
.hero-trust small{ color: var(--ink-soft); font-size:.86rem; }

/* --- Signature: Perimeter Scan shield --- */
.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 460px;
}
.scan-field{
  position:relative;
  width: 420px;
  height: 420px;
  max-width:90vw;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.scan-field .ring{
  position:absolute;
  border-radius:50%;
  border: 1px dashed rgba(169,120,31,0.35);
}
.scan-field .ring.r1{ inset: 0; }
.scan-field .ring.r2{ inset: 46px; border-style: solid; border-color: rgba(169,120,31,0.16); }
.scan-field .sweep{
  position:absolute;
  inset:0;
  border-radius:50%;
  background: conic-gradient(from 0deg, rgba(169,120,31,0) 0deg, rgba(169,120,31,0.32) 26deg, rgba(169,120,31,0) 60deg);
  animation: sweepRotate 4.5s linear infinite;
}
@keyframes sweepRotate{ to{ transform: rotate(360deg); } }

.scan-field .shield-mark{
  position:relative;
  width: 176px; height:176px;
  z-index:2;
  filter: drop-shadow(0 18px 30px rgba(124,89,26,0.35));
  animation: shieldFloat 5.5s ease-in-out infinite;
}
@keyframes shieldFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

.scan-field .node{
  position:absolute;
  width: 12px; height:12px;
  border-radius:50%;
  background: var(--paper);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 10px rgba(169,120,31,0.3);
}
.scan-field .node::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid rgba(169,120,31,0.4);
  animation: nodePing 2.8s ease-out infinite;
}
.node.n1{ top: 6%; left: 50%; }
.node.n2{ top: 50%; right: 2%; }
.node.n3{ bottom: 6%; left: 50%; }
.node.n4{ top: 50%; left: 2%; }
.node.n2::after{ animation-delay:.5s; }
.node.n3::after{ animation-delay:1s; }
.node.n4::after{ animation-delay:1.5s; }
@keyframes nodePing{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.1); opacity:0; } }

.float-card{
  position:absolute;
  padding: 14px 18px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  gap:12px;
  animation: cardFloat 6s ease-in-out infinite;
}
.float-card .ic{
  width:36px; height:36px;
  border-radius:10px;
  background: var(--gold-mist);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-deep);
  flex-shrink:0;
}
.float-card b{ display:block; font-family:var(--font-display); font-size:1.02rem; color:var(--ink); }
.float-card small{ color: var(--ink-soft); font-size:.76rem; }
.float-card.card-a{ top: 4%; left: -6%; animation-delay:.2s; }
.float-card.card-b{ bottom: 8%; right: -8%; animation-delay:1s; }
@keyframes cardFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }

@media (max-width: 1080px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy .lead{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-trust{ justify-content:center; }
  .hero-visual{ order:-1; }
  .float-card.card-a{ left:0; }
  .float-card.card-b{ right:0; }
}
@media (max-width: 480px){
  .float-card{ display:none; }
  .scan-field{ width: 300px; height:300px; }
  .scan-field .shield-mark{ width:130px; height:130px; }
}