/* Brand bits moved from inline style */
.brand { display: flex; align-items: center; }
.logo { width: 150px; height: auto; border-radius: 1rem; }

.slip-gradient {
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(54,140,255,.18), transparent),
    radial-gradient(1000px 500px at -10% 10%, rgba(29,111,245,.18), transparent);
}

.device-frame {
  border-radius: 28px;
  box-shadow: 0 4px 16px rgba(16,24,40,.10), inset 0 0 0 1px rgba(100,116,139,.16);
}

.cta-button { transition: transform 0.2s ease; }
.cta-button:hover { transform: scale(1.05); }

.modal-hidden { display: none; }

/* Dropdown basic animation/position */
.dropdown { animation: dd-fade .12s ease-out; }
@keyframes dd-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* How-it-works overlay image (used in step 5) */
.how-overlay {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%) rotate(-2deg);
  width: 85%;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(16,24,40,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  outline: 1px solid rgba(0,0,0,.06);
}
.how-overlay.visible { opacity: 1; }

/* Active nav hint */
.nav-link.active { color: #1d6ff5; font-weight: 600; }