/* ═══════════════════════════════════════════════════
   Hero Section — Immersive 3D Experience
   ═══════════════════════════════════════════════════ */

/* ─── Hero Container ─── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-height);
  background: var(--clr-royal-dark);
}

/* Homepage revamp real hero photography */
.hero__photo-card {
  position: absolute;
  top: 4%;
  left: 0;
  width: min(470px, 78%);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  z-index: 1;
}

.hero__photo-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hero__photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 26, 51, 0.16), transparent 45%, rgba(212, 175, 55, 0.12));
  pointer-events: none;
}

@media (max-width: 1024px) {
  .hero__photo-card {
    position: relative;
    top: auto;
    left: auto;
    width: min(560px, 100%);
    margin: 0 auto 18px;
  }
}

/* ─── Animated Background ─── */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__gradient {
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
}

/* Gold ambient glow spots */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.hero__glow--gold {
  width: 400px;
  height: 400px;
  background: rgba(212, 175, 55, 0.08);
  top: 10%;
  right: 20%;
  animation: glowPulse 6s ease-in-out infinite;
}

.hero__glow--green {
  width: 300px;
  height: 300px;
  background: rgba(22, 163, 74, 0.06);
  bottom: 10%;
  left: 10%;
  animation: glowPulse 8s ease-in-out infinite;
  animation-delay: 3s;
}

.hero__glow--blue {
  width: 350px;
  height: 350px;
  background: rgba(14, 45, 82, 0.5);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Sparkle particles */
.hero__sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--clr-gold);
  border-radius: 50%;
  animation: sparkle 3s ease-in-out infinite;
  pointer-events: none;
}

.hero__sparkle:nth-child(1) { top: 15%; right: 25%; animation-delay: 0s; }
.hero__sparkle:nth-child(2) { top: 30%; right: 60%; animation-delay: 1s; width: 3px; height: 3px; }
.hero__sparkle:nth-child(3) { top: 65%; right: 35%; animation-delay: 2s; width: 5px; height: 5px; }
.hero__sparkle:nth-child(4) { top: 80%; right: 70%; animation-delay: 0.5s; }
.hero__sparkle:nth-child(5) { top: 45%; right: 15%; animation-delay: 1.5s; width: 3px; height: 3px; }

/* ─── Hero Layout ─── */
.hero__container {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
  padding-block: var(--sp-12);
}

/* ─── Hero Content (Text Side) ─── */
.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-full);
  color: var(--clr-gold);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  width: fit-content;
  opacity: 0;
  animation: fadeInDown 0.6s var(--ease-out) 0.2s forwards;
}

.hero__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--clr-gold);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero__title {
  font-family: var(--ff-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  color: var(--clr-white);
  line-height: 1.2;
  opacity: 0;
  animation: fadeInUp 0.7s var(--ease-out) 0.4s forwards;
}

.hero__title-gold {
  color: var(--clr-gold);
  position: relative;
}

.hero__subtitle {
  font-size: var(--fs-lg);
  color: var(--clr-text-on-dark);
  line-height: var(--lh-relaxed);
  max-width: 550px;
  opacity: 0;
  animation: fadeInUp 0.7s var(--ease-out) 0.6s forwards;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--clr-green-light);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-out) 0.75s forwards;
}

.hero__trust svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hero__cta {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeInUp 0.7s var(--ease-out) 0.9s forwards;
}

.hero__micro {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: fadeInUp 0.5s var(--ease-out) 1.1s forwards;
}

/* ─── Hero Visual (3D Side) ─── */
.hero__visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central shield */
.hero__shield {
  position: relative;
  width: 220px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeInScale 0.8s var(--ease-spring) 0.5s forwards;
}

.hero__shield-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 40px rgba(212, 175, 55, 0.2));
}

/* Rotating ring around shield */
.hero__orbit {
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px dashed rgba(212, 175, 55, 0.15);
  border-radius: 50%;
  animation: rotateSlow 30s linear infinite;
}

.hero__orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--clr-gold);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.hero__orbit-dot:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
.hero__orbit-dot:nth-child(2) { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.hero__orbit-dot:nth-child(3) { top: 50%; right: 0; transform: translate(50%, -50%); }

/* Bubbles */
.hero__bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
}

.hero__bubble:nth-child(1) {
  width: 60px; height: 60px;
  top: 8%; right: 15%;
  animation: float 5s ease-in-out infinite;
}

.hero__bubble:nth-child(2) {
  width: 40px; height: 40px;
  bottom: 20%; right: 10%;
  animation: floatReverse 6s ease-in-out infinite;
}

.hero__bubble:nth-child(3) {
  width: 30px; height: 30px;
  top: 60%; left: 5%;
  animation: float 7s ease-in-out infinite;
  animation-delay: 1s;
}

/* ─── Floating Service Cards ─── */
.hero__float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  color: var(--clr-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  opacity: 0;
}

.hero__float-card:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  border-color: rgba(212, 175, 55, 0.3);
}

.hero__float-card-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__float-card-icon svg {
  width: 18px;
  height: 18px;
}

.hero__float-card-icon--gold {
  background: rgba(212, 175, 55, 0.2);
  color: var(--clr-gold);
}

.hero__float-card-icon--green {
  background: rgba(22, 163, 74, 0.2);
  color: var(--clr-green-light);
}

.hero__float-card-icon--blue {
  background: rgba(14, 45, 82, 0.4);
  color: #60A5FA;
}

/* Card Positions & Animations */
.hero__float-card--1 {
  top: 5%; right: 5%;
  animation: fadeInUp 0.5s var(--ease-out) 0.8s forwards, floatSlow 6s ease-in-out 1.3s infinite;
}

.hero__float-card--2 {
  top: 25%; left: -5%;
  animation: fadeInRight 0.5s var(--ease-out) 0.95s forwards, float 7s ease-in-out 1.45s infinite;
}

.hero__float-card--3 {
  bottom: 30%; right: 0%;
  animation: fadeInLeft 0.5s var(--ease-out) 1.1s forwards, floatReverse 5s ease-in-out 1.6s infinite;
}

.hero__float-card--4 {
  bottom: 10%; left: 5%;
  animation: fadeInUp 0.5s var(--ease-out) 1.25s forwards, floatSlow 8s ease-in-out 1.75s infinite;
}

.hero__float-card--5 {
  top: 50%; right: -8%;
  animation: fadeInLeft 0.5s var(--ease-out) 1.4s forwards, float 6s ease-in-out 1.9s infinite;
}

/* ─── Scroll indicator ─── */
.hero__scroll {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--fs-xs);
  opacity: 0;
  animation: fadeInUp 0.5s var(--ease-out) 1.5s forwards;
}

.hero__scroll-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, rgba(212, 175, 55, 0.5), transparent);
  animation: slideDrawLine 2s ease-in-out infinite;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .hero__container {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: var(--sp-8);
  }

  .hero__content {
    align-items: center;
  }

  .hero__subtitle {
    margin-inline: auto;
  }

  .hero__trust {
    justify-content: center;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__visual {
    height: 350px;
    margin-top: var(--sp-4);
  }

  .hero__shield {
    width: 160px;
    height: 190px;
  }

  .hero__orbit {
    width: 240px;
    height: 240px;
  }

  .hero__float-card {
    font-size: var(--fs-xs);
    padding: var(--sp-2) var(--sp-3);
  }

  .hero__float-card--5 {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--header-height) + var(--sp-8)) var(--sp-8);
  }

  .hero__title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .hero__cta {
    flex-direction: column;
    width: 100%;
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__visual {
    height: 280px;
  }

  .hero__shield {
    width: 130px;
    height: 155px;
  }

  .hero__orbit {
    width: 200px;
    height: 200px;
  }

  .hero__float-card--3,
  .hero__float-card--4 {
    display: none;
  }

  .hero__glow {
    display: none;
  }

  .hero__scroll {
    display: none;
  }
}