/* ============================
   OOH Spotter – Global tokens
   ============================ */
:root{
  --ooh-bg: #FFFFFF;     /* fundal general alb */
  --ooh-accent: #3943B7; /* accent principal (CTA, linkuri, butoane) */
  --ooh-hover: #62A87C;  /* hover pentru CTA */
  --ooh-gray: #C0C0C0;   /* borduri/subtile, linii de separare */
  --ooh-success: #426A5A;/* verde pt. stări/mesaje pozitive */
  --ooh-white: #FFFFFF;
}

/* ============================
   Typography & base
   ============================ */
html, body{ height:100%; }
body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#333;
  background: var(--ooh-bg);
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Lexend', 'Inter', sans-serif;
  font-weight:700;
  color:#111;
}

/* linkuri */
a{ color: var(--ooh-accent); text-decoration: none; }
a:hover{ color: var(--ooh-hover); text-decoration: underline; text-underline-offset: 3px; }
a.btn:hover, a.btn-primary:hover, a.btn-ghost:hover, a.btn-hero:hover, a.btn-hero-outline:hover,
a[class*="btn-"]:hover { text-decoration: none; color: #fff; }

/* separatoare */
.hr-soft{ border:0; height:1px; background: var(--ooh-gray); opacity:.35; }

/* spacing secțiuni */
.section-default{ padding:72px 0; background:#fff; }
.section-muted{   padding:72px 0; background:#FAFAFA !important; }
.section-title{   font-family:'Lexend',sans-serif; font-weight:800; margin-bottom:.75rem; }

/* ============================
   Navbar (alb, accent violet)
   ============================ */
.navbar-ooh{
  background:#fff !important;
  border-bottom:1px solid var(--ooh-gray);
  padding-block:.6rem;
}

.navbar-ooh .navbar-brand{
  font-family:'Lexend',sans-serif;
  color: var(--ooh-accent) !important;
  font-weight:800;
  letter-spacing:.2px;
}

.navbar-ooh .nav-link{
  font-family:'Inter',sans-serif;
  color:#111 !important;
  margin-left:1rem;
  opacity:.95;
}
.navbar-ooh .nav-link:hover,
.navbar-ooh .nav-link.active{
  color: var(--ooh-accent) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity:1;
}

/* toggler vizibil pe alb */
.navbar-toggler{ border-color: rgba(0,0,0,.15); }
.navbar-toggler:focus{ box-shadow: none; }

/* Mobile: align collapse menu to the right, under hamburger */
@media (max-width: 991.98px) {
  .navbar-ooh .navbar-nav {
    align-items: flex-end;
    text-align: right;
  }
}

/* ============================
   Hero (video + overlay brand)
   ============================ */
.hero{ color:#fff; }
.hero-video-wrap{ position:relative; overflow:hidden; }
.bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: rgba(0,0,0,0.65); /* Semi-transp */
  pointer-events:none;
}
.hero-content{ position:relative; z-index:2; padding:140px 20px; }
.hero h1, .hero .lead{
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* ============================
   Buttons (accent + hover)
   ============================ */
.btn-primary{
  --bs-btn-bg: var(--ooh-accent);
  --bs-btn-border-color: var(--ooh-accent);
  --bs-btn-hover-bg: var(--ooh-hover);
  --bs-btn-hover-border-color: var(--ooh-hover);
  --bs-btn-active-bg: var(--ooh-hover);
  --bs-btn-active-border-color: var(--ooh-hover);
  box-shadow: 0 6px 20px rgba(79,70,229,.25);
}
.btn-outline-primary{
  --bs-btn-color: var(--ooh-accent);
  --bs-btn-border-color: var(--ooh-accent);
  --bs-btn-hover-bg: var(--ooh-accent);
  --bs-btn-hover-border-color: var(--ooh-accent);
  --bs-btn-hover-color: #fff;
}

/* succes / badge-uri opționale */
.badge-success{
  background: #E7F1ED;
  color: var(--ooh-success);
  border:1px solid rgba(66,106,90,.25);
}

/* ============================
   Coverage – tiles simple
   ============================ */
.stat-box{
  background:#fff; border:1px solid var(--ooh-gray); border-radius:12px; padding:18px;
}
.stat-k{
  font-family:'Lexend',sans-serif; font-weight:800; font-size:1.75rem; color:#111;
}
.stat-l{ color:#5d5d5d; }

/* ============================
   Pricing (un plan)
   ============================ */
.pricing{ max-width: 900px; margin:0 auto; }
.price-card{
  background:#fff; border:1px solid var(--ooh-gray); border-radius:16px; padding:28px;
}
.price-name{ font-family:'Lexend',sans-serif; font-weight:800; color:#111; font-size:1.4rem; }
.price-value{ font-family:'Lexend',sans-serif; font-weight:800; color:var(--ooh-accent); font-size:2rem; }
.price-feats{ color:#555; margin:18px 0 22px; }
.price-feats li{ margin:.35rem 0; }

/* ============================
   Footer (alb + delimitare)
   ============================ */
.footer-ooh{
  background:#fff; color:#111;
  border-top:1px solid var(--ooh-gray);
}
.footer-ooh a{ color: var(--ooh-accent); }
.footer-ooh a:hover{ color: var(--ooh-hover); }

/* ============================
   Utilities
   ============================ */
.text-accent{ color: var(--ooh-accent) !important; }
.bg-accent{ background: var(--ooh-accent) !important; color:#fff !important; }
.border-soft{ border:1px solid var(--ooh-gray) !important; }

/* responsive tweak: grilă KPIs */
@media (max-width: 991px){
  .hero-content{ padding: 110px 16px; }
}
/* Hero buttons */
.hero .btn {
  font-size: 1.15rem;
  padding: 0.9rem 2rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all .15s ease-in-out;
}

/* Full button (plin alb) */
.btn-hero {
  background-color: #fff;
  color: var(--ooh-accent);
  border: 2px solid #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.btn-hero:hover {
  background-color: var(--ooh-accent);
  color: #fff;
  border-color: var(--ooh-accent);
}

/* Outline button (doar contur) */
.btn-hero-outline {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;;
}
.btn-hero-outline:hover {
  background-color: var(--ooh-accent);
  color: #fff;
}

/* elimină sublinierea la hover pentru toate butoanele */
.btn:hover {
  text-decoration: none !important;
}

/* spațiere între butoane din Hero */
.hero .btn + .btn {
  margin-left: 1.5rem; /* mai mare decât .me-3 din Bootstrap */
}

.feature-card {
  background: #3943B7; /* accent violet */
  color: #fff;
  border: none;
  border-radius: 12px;
  transition: box-shadow .3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* shadow subtil default */
}

.feature-card .card-title,
.feature-card .card-text {
  color: #fff;
}

.feature-card .btn {
  background: #fff;
  color: var(--ooh-accent);
  border: none;
  font-weight: 600;
  border-radius: 6px;
}

.feature-card:hover {
  transform: none !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.35) !important;
}
@media (min-width: 992px) {
  .feature-card-col {
    flex: 0 0 22%;   /* în loc de 25% */
    max-width: 22%;
  }
}
.feature-card .card-body {
  text-align: left;
}