/**
 * A.R.C Technology — Hero v7.0
 * "Resilient Orbit" light-first — off-white wash, gradient text, floating shield
 */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-hero-light);
  color: var(--color-text);
  overflow: hidden;
  padding: calc(var(--header-height) + 3rem) var(--container-px) 4rem;
}

/* Data flow radial glow that follows cursor */
.hero__data-flow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(0,212,255,0.09) 0%,
    rgba(255,214,10,0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
}

/* Badge pill */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-yellow-subtle);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(10, 37, 64, 0.12);
  margin-bottom: 2rem;
  font-size: var(--fs-sm);
  font-weight: var(--font-semibold);
  color: var(--color-on-light-yellow);
}

.hero__badge svg {
  width: 16px; height: 16px;
  color: var(--color-on-light-yellow);
}

/* Title */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--font-bold);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

.hero__title .text-gradient {
  display: block;
}

/* Subtitle */
.hero__subtitle {
  font-size: var(--fs-xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 640px;
  margin: 0 auto 3rem;
}

/* Actions */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 4rem;
}

/* Floating shield */
.hero__shield {
  position: relative;
  width: 288px;
  height: 288px;
  margin: 0 auto;
  border: 8px solid rgba(0,168,204,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__shield picture {
  display: block;
  line-height: 0;
}

.hero__shield-logo {
  width: 240px;
  height: 240px;
  filter: drop-shadow(0 12px 30px rgba(10,37,64,0.25));
}

.hero__shield-ring {
  position: absolute;
  inset: 0;
  border: 4px solid rgba(10,37,64,0.15);
  border-radius: 50%;
  animation: orbit-spin 35s linear infinite;
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Inner-page hero (shorter) */
.hero--inner {
  min-height: auto;
  padding: calc(var(--header-height) + 4rem) var(--container-px) 4rem;
}

.hero--inner .hero__title {
  font-size: var(--fs-4xl);
}

/* Responsive */
@media (max-width: 767px) {
  .hero { padding-top: calc(var(--header-height) + 1.25rem); padding-bottom: 2.5rem; }
  .page-home .hero__badge { font-size: var(--fs-sm); padding: 0.5rem 1.25rem; }
  .page-home .hero__subtitle { font-size: var(--fs-body); }
  .hero__shield { width: 200px; height: 200px; border-width: 6px; }
  .hero__shield-logo { width: 160px; height: 160px; }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero--inner { padding-top: calc(var(--header-height) + 2rem); padding-bottom: 3rem; }
}

/* Homepage — larger display type, tighter measure (mock alignment).
   Scale sized so the 3-line service-led headline holds 3 lines on desktop
   and leaves the primary CTA above the fold on phones. */
.page-home .hero__inner {
  max-width: min(1000px, 88ch);
}

.page-home .hero__title {
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);
}

.page-home .hero__subtitle {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
}

.page-home .hero__badge {
  padding: 0.625rem 1.75rem;
  font-size: var(--fs-body);
}