html{
        overflow-x:hidden;
    }
body {
    background:
        radial-gradient(circle at 18% 10%, rgba(55,120,255,.12), transparent 24%),
        radial-gradient(circle at 82% 12%, rgba(140,90,255,.12), transparent 22%),
        linear-gradient(180deg, #02101f 0%, #04172b 100%);
    color:#eef4ff;
    overflow-x:hidden;
}

.navbar {
    background: rgba(0,0,0,0.4);
}

.hero {
    padding:80px 0;
}

.hero-title {
    font-size: clamp(3rem, 5vw, 5.4rem);
    font-weight:800;
    line-height:1.05;
}

.highlight {
    background: linear-gradient(90deg, #4f8fff, #8f5fff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

p,
li,
.text-muted {
    color:#dbe6ff !important;
}

.card {
    background: rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:#eef4ff;
}

.btn-main {
    background: linear-gradient(45deg,#5db6ff,#7c8cff);
    border:none;
    color:white;
    padding:12px 22px;
    border-radius:10px;
}

.hero-visual {
    border-radius:20px;
    min-height:360px;
    background:
        radial-gradient(circle at center, rgba(93,182,255,.25), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(93,182,255,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 35px rgba(93,182,255,.18);
}

.product-orb {
    width:220px;
    height:220px;
    border-radius:28px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.45), transparent 20%),
        linear-gradient(135deg, #4f8fff, #8f5fff);
    box-shadow:0 0 45px rgba(93,182,255,.45);
    animation: floaty 3s ease-in-out infinite;
}

@keyframes floaty {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

.section {
    padding:55px 0;
}

.step-number {
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(45deg,#5db6ff,#7c8cff);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin-bottom:15px;
}

.form-control,
.form-select,
textarea {
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;
}

.form-control:focus,
textarea:focus {
    background:rgba(255,255,255,0.08);
    color:#fff;
    border-color:#5db6ff;
    box-shadow:0 0 0 .2rem rgba(93,182,255,.15);
}

.form-control::placeholder,
textarea::placeholder {
    color:#aebbd1;
}

.topbar {
    min-height: 60px;
    padding: 0 18px;
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(2, 16, 31, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
}

.brand {
    font-size: 20px;
    font-weight: 800;
    color: white;
}

.brand .blue {
    color: #5da8ff;
}

.nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-btn {
    padding: 10px 18px;
    border-radius: 9px;
    background: linear-gradient(135deg, #5aa8ff, #7d8cff);
    color: white;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .nav-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
        width: 100%;
    }

    .nav-actions .nav-btn {
        width: 100%;
        text-align: center;
    }
}

.navbar-toggler {
    border-color: rgba(255,255,255,0.4);
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(100,150,255,0.5);
}
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white /* The arrow color */
}

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); color: #0056b3; } /* Slightly bigger and darker */
    100% { transform: scale(1); }
  }
  .pulse-text {
    animation: pulse 2s infinite; /* Repeats every 2 seconds */
  }
  /* Force the modal to the front of the line */
.modal {
    z-index: 9999 !important;
}

/* Ensure the dark background also sits behind the modal but over the nav */
.modal-backdrop {
    z-index: 9998 !important;
}