/* Custom dark tweaks */
      :root{
        --bg: #0f1720;            /* page background */
        --surface: #111827;       /* container surface */
        --muted: #9ca3af;         /* muted text */
        --primary: #4f9cff;       /* accent */
        --link-hover: #8ec1ff;
      }

      html,body{
        height:100%;
        background: var(--bg);
        color: #e6eef8; /* primary light text */
      }

      /* content card (slightly raised surface for readability) */
      .content-card{
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border: 1px solid rgba(255,255,255,0.04);
        box-shadow: 0 6px 18px rgba(0,0,0,0.6);
        padding: 1rem;
        border-radius: 8px;
      }

      p, li {
        color: #d7e6fb;
      }

      h1, h2 {
        color: #ffffff;
      }

      .muted {
        color: var(--muted);
      }

      a {
        color: var(--primary);
        text-decoration: none;
      }
      a:hover, a:focus {
        color: var(--link-hover);
        text-decoration: underline;
      }

      .navbar-dark .navbar-brand {
        color: #ffffff;
        font-weight:600;
      }

      footer {
        border-top: 1px solid rgba(255,255,255,0.04);
        color: var(--muted);
      }

      /* responsive spacing tweak */
      @media (min-width: 992px){
        .container {
          max-width: 960px;
        }
      }

      /* ===== CTA - Hero Section ===== */
.hero-cta {
  padding: 3rem 2rem;
  border-radius: 12px;
  position: relative;
  isolation: isolate;
}

.hero-cta h1 { letter-spacing: .2px; }

.hero-cta .hero-bg{
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(79,156,255,.25), transparent 60%),
    radial-gradient(40% 40% at 80% 30%, rgba(142,193,255,.2), transparent 60%),
    radial-gradient(30% 30% at 20% 80%, rgba(255,255,255,.06), transparent 60%);
  animation: heroFloat 12s ease-in-out infinite alternate;
  filter: blur(18px);
  z-index: -1;
}
@keyframes heroFloat {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-12px,0) scale(1.03); }
}

/* ===== Download Buttons (badges) ===== */
.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* badge full-bleed */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  color: #e6eef8;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.download-btn .badge-svg{
  display: block;
  width: 280px;   /* mărime badge */
  height: 84px;
}

/* responsive tweak */
@media (max-width: 420px){
  .download-btn .badge-svg{ width: 100%; height: auto; }
}

.download-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.2);
}

/* Glow discret pe hover și puls lent (atrage atenția către CTA) */
.pulse-shadow {
  position: relative;
}
.pulse-shadow::after{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(120px 60px at 50% 50%, rgba(79,156,255,.25), transparent 70%);
  opacity: .0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.pulse-shadow:hover::after { opacity: .6; }
.pulse-shadow { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 rgba(79,156,255,.0); }
  50%     { box-shadow: 0 0 28px rgba(79,156,255,.25); }
}

/* Accente ușor diferite pentru fiecare store (poți schimba nuanțele) */
.download-btn.google:hover { box-shadow: 0 8px 28px rgba(94,186,125,.22); }
.download-btn.apple:hover  { box-shadow: 0 8px 28px rgba(142,193,255,.24); }

/* Text rotator */
#rotator{
  display: inline-block;
  min-height: 1.4em;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  padding-bottom: 2px;
}

/* Carusel: indicatorii sub imagine, nu peste */
#screensCarousel {
  margin-bottom: 34px; /* spațiu pentru indicatori mutați dedesubt */
}

#screensCarousel .carousel-indicators {
  position: absolute;
  bottom: -28px !important; /* împinge bulinele sub slide-uri */
  left: 0;
  right: 0;
  margin: 0 auto;
  justify-content: center;
}

/* Buline mai vizibile pe dark */
#screensCarousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background-color: rgba(255,255,255,0.55);
  margin: 0 5px;
  transition: transform .2s ease, background-color .2s ease;
}

#screensCarousel .carousel-indicators .active {
  background-color: #4f9cff;
  transform: scale(1.2);
}

/* Butoane next/prev puțin mai discrete pe dark */
#screensCarousel .carousel-control-prev-icon,
#screensCarousel .carousel-control-next-icon {
  filter: drop-shadow(0 0 4px rgba(0,0,0,.6));
}

#screensCarousel .carousel-control-prev,
#screensCarousel .carousel-control-next {
  opacity: .85;
  transition: opacity .2s ease;
}
#screensCarousel .carousel-control-prev:hover,
#screensCarousel .carousel-control-next:hover {
  opacity: 1;
}

/* Imagini: elimină bandingul la crop și asigură responsive bun */
#screensCarousel .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* poți elimina dacă vrei să nu taie nimic */
  background: #0f1720; /* fallback */
}

/* Ajustare pe ecrane mici (mai puțin spațiu sub) */
@media (max-width: 480px) {
  #screensCarousel { margin-bottom: 28px; }
  #screensCarousel .carousel-indicators { bottom: -24px !important; }
}