:root {
  --bg-deep: #060b14;
  --bg-mid: #0a111e;
  --beam-left: rgba(11, 78, 173, 0.34);
  --beam-right: rgba(13, 96, 199, 0.34);
  --beam-soft: rgba(255, 255, 255, 0.03);
}

.hero-bg {
  background: radial-gradient(circle at 50% -5%, #14233d 0%, #0a121f 20%, #070c14 56%, #060b14 100%);
}

/* Background beam texture to mimic the vertical light stripes */
.bg-beams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, var(--beam-left) 9%, transparent 20%, transparent 80%, var(--beam-right) 92%, transparent 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0) 34px,
      var(--beam-soft) 38px,
      rgba(255, 255, 255, 0) 70px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 26%);
  opacity: 0.86;
}

.bg-beams::before,
.bg-beams::after {
  content: "";
  position: absolute;
  top: -8%;
  width: 40%;
  height: 116%;
  filter: blur(52px);
  opacity: 0.42;
  background: linear-gradient(180deg, rgba(53, 118, 214, 0.34), rgba(53, 118, 214, 0.03) 60%, rgba(53, 118, 214, 0));
}

.bg-beams::before {
  left: -9%;
}

.bg-beams::after {
  right: -9%;
}



.dash-orbit {
  width: 160px; 
  height: 160px;
  position: absolute;
  left: -5px;
  top: -45px;
  z-index: -1;
   transform: rotate(0deg); 
}

/* Plane image block from local assets */
.hero-plane-wrap {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: -88px;
  z-index: 0;
  height: 38vh;
  min-height: 230px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hero-plane {
  width: min(78vw, 860px);
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(74px);
  filter: drop-shadow(0 20px 44px rgba(16, 70, 155, 0.26));
}

@media (min-width: 1280px) {
  .hero-plane-wrap {
    bottom: -34px;
    height: 36vh;
  }

  .hero-plane {
    width: min(74vw, 820px);
    transform: translateY(92px);
  }
}

/* Feature cards removed (section deleted) */

@media (max-width: 1024px) {
  .hero-plane-wrap {
    bottom: -10px;
    height: 36vh;
    min-height: 205px;
  }

  .hero-plane {
    width: min(90vw, 820px);
    transform: translateY(48px);
  }
}


/* Container image rules removed (section deleted) */
@media (max-width: 768px) {
  .dash-orbit {
    width: 80px;
    height: 80px;
    left: -16px;
    top: -10px;
    display: none;
  }

  .hero-plane-wrap {
    bottom: -8px;
    height: 31vh;
    min-height: 165px;
  }

  .hero-plane {
    width: 108vw;
    max-width: 680px;
    transform: translateY(34px);
  }
}

@media (max-width: 640px) {
  .hero-plane-wrap {
    bottom: 70px;
    height: 26vh;
    min-height: 140px;
  }

  .hero-plane {
    width: 118vw;
    max-width: none;
    transform: translate(3%, 24px);
  }
}

/* How We Manage section */
.manage-section {
  position: relative;
}

.manage-panel {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8, 14, 38, 0.25) 0%, rgba(8, 14, 38, 0.5) 100%),
    linear-gradient(180deg, #0d1440 0%, #07102c 100%);
  box-shadow: 0 22px 60px rgba(7, 12, 25, 0.32);
}

.manage-panel__bg,
.manage-panel__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.manage-panel__bg {
  object-fit: cover;
  object-position: center;
  opacity: 0.92;
}

.manage-panel__overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(41, 77, 180, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(7, 12, 30, 0.12) 0%, rgba(7, 12, 30, 0.42) 100%);
}

.manage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 999px;
  flex: none;
}

.manage-badge--gold {
  background: linear-gradient(180deg, #d9b64e 0%, #c49b2f 100%);
  color: #fffef8;
  box-shadow: 0 8px 18px rgba(196, 155, 47, 0.32);
}

.manage-badge--white {
  background: linear-gradient(180deg, #fdfdfd 0%, #edf0f6 100%);
  color: #10172b;
  box-shadow: 0 8px 18px rgba(7, 12, 25, 0.18);
}

.manage-step {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(123, 131, 177, 0.28) 0%, rgba(68, 76, 128, 0.34) 100%);
  box-shadow: 0 18px 34px rgba(4, 7, 20, 0.18);
  backdrop-filter: blur(4px);
}

.manage-step:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, #C5A048 0%, #5F4D23 100%);
  box-shadow: 0 18px 34px rgba(123, 90, 17, 0.22);
}

.manage-step:hover .manage-step__number {
  color: rgba(79, 58, 9, 0.28);
}

.manage-step__number {
  position: absolute;
  right: -5px;
  bottom: -10px;
  z-index: 0;
font-size: clamp(6.4rem, 24vw, 27.8rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.18);
  user-select: none;
  transform: rotate(5deg);     /* Negative = counter-clockwise tilt */
  transform-origin: center;
}

@media (min-width: 1280px) {
  .manage-panel {
    min-height: 556px;
  }

  .manage-step {
    min-height: 240px;
  }
}

@media (max-width: 1279px) {
  .manage-panel {
    border-radius: 24px;
  }

  .manage-step {
    min-height: 228px;
  }
}

@media (max-width: 768px) {
  .manage-step {
    min-height: 220px;
  }

  .manage-step__number {
    right: -10px;
    bottom: -36px;
    font-size: clamp(5.4rem, 28vw, 7.5rem);
  }
}

@media (max-width: 640px) {
  .manage-panel {
    padding-inline: 1rem;
    padding-block: 1rem;
  }

  .manage-step {
    min-height: 208px;
  }

  .manage-step__number {
    bottom: 10px;
     right: 30px;
  }
}

/* Styles for the new 'Why Choose Us' section */
#why-choose h2 { color: #071223; }
#why-choose p { color: #6b7280; }
#why-choose .icon { color: #0b2740; }

@media (min-width: 1024px) {
  #why-choose .max-w-4xl { max-width: 900px; }
}



    .container-bg {
      background: linear-gradient(180deg, #f8fafc 0%, #e0f2fe 100%);
    }
    .shipping-container {
      filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
    }

    .line-accent {
            position: absolute;
            width: 1px;
            background-color: transparent;
            pointer-events: none;
        }

        /* Top Line Accent (Gold) */
        .line-top-gold {
            top: 15%;
            left: 55%; /* Adjust based on image position */
            height: 100px; /* Short vertical segment */
            border-left: 1px solid rgba(197, 160, 72, 0.5); /* Gold line, slight fade */
        }
        .line-top-gold::after {
            content: '';
            position: absolute;
            top: 0;
            left: -4px;
            width: 8px;
            height: 8px;
            border: 1px solid rgba(197, 160, 72, 1);
            border-radius: 50%;
        }

        /* Bottom Line Accent (Dark) */
        .line-bottom-dark {
            bottom: 10%;
            left: 20%; /* Adjust based on image position */
            height: 150px;
            border-left: 1px solid rgba(30, 41, 59, 0.3); /* Dark slate line, slight fade */
        }
        .line-bottom-dark::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -4px;
            width: 8px;
            height: 8px;
            border: 1px solid rgba(30, 41, 59, 0.8);
            border-radius: 50%;
        }