:root{
  --brand: #ffcc00;
}

/* Brand dot */
.brand-dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
  background: var(--brand);
  vertical-align: middle;
}

/* HERO */
.hero{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(255,204,0,.22), transparent 60%),
    radial-gradient(1000px 420px at 80% 18%, rgba(13,110,253,.18), transparent 60%),
    #0b1220;
  color: #fff;
}
.hero .lead{
  color: rgba(255,255,255,.82);
}
.hero-hints{
  color: rgba(255,255,255,.70);
}

/* Tagolt sávok */
.band{
  padding: 4rem 0;
}
@media (min-width: 992px){
  .band{
    padding: 5rem 0;
  }
}

.band-alt{
  background: rgba(0,0,0,.03);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* CTA band finoman kiemelve */
.band-cta{
  background: linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.00));
}

/* Badge a sötét hero háttérre (jobb kontraszt) */
.badge-soft{
  background: rgba(255, 204, 0, 0.22);   /* erősebb háttér */
  color: rgba(255, 255, 255, 0.92);      /* világos szöveg */
  border: 1px solid rgba(255, 204, 0, 0.55);
  padding: 0.5rem 1rem;
  font-weight: 600;
}
/* Szöveg finomítás */
.section-title{ letter-spacing: -0.02em; }
.muted-strong{ color: rgba(0,0,0,.62); }

/* Subtle háttér dobozokhoz */
.bg-light-subtle{
  background: rgba(0,0,0,.03);
}

/* Kártyák – levegősebb, kevésbé “doboz” */
.card{
  border: 1px solid rgba(0,0,0,.10);
}
.card-body{
  padding: 2rem;
}
.card-hover{
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-hover:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Finom elválasztó */
.micro-divider{
  height: 1px;
  background: rgba(0,0,0,.10);
  margin: 2rem 0;
}