/* Dellvantix CMS — Dark Premium (RECTIFIED / CLEAN) */

/* =========================
   THEME TOKENS
========================= */
:root{
  --dv-bg: #070A12;
  --dv-bg2:#0B1020;
  --dv-card:#0F172A;
  --dv-card2:#0B1224;
  --dv-border: rgba(255,255,255,.10);
  --dv-text: rgba(255,255,255,.92);
  --dv-muted: rgba(255,255,255,.70);
  --dv-muted2: rgba(255,255,255,.55);
  --dv-radius: 22px;
}

html, body{
  background: var(--dv-bg);
  color: var(--dv-text);
}

a{ color: rgba(255,255,255,.9); }
a:hover{ color: #fff; }

.text-secondary{ color: var(--dv-muted)!important; }
.long-home-muted{ color: var(--dv-muted); }

/* =========================
   NAVBAR (PREMIUM)
========================= */
.navbar-pro{
  min-height: 82px;
  background: rgba(10,14,26,.78)!important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  transition: all .35s ease;
}

.navbar-pro.scrolled{
  background: rgba(7,10,18,.95)!important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  border-bottom-color: rgba(255,255,255,.14);
}

/* Brand */
.navbar-brand{
  gap: 12px;
}

.brand-logo{
  height: 58px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.brand-name{
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.1;
  color: #ffffff;
}

.brand-tagline{
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}

/* Nav links */
.navbar .nav-link{
  position: relative;
  color: rgba(255,255,255,.82);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
}

.navbar .nav-link:hover{
  color:#fff;
  background: rgba(255,255,255,.06);
}

/* Elegant underline */
.navbar .nav-link::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:4px;
  width:0;
  height:2px;
  background:#0d6efd;
  transition:all .25s ease;
  transform:translateX(-50%);
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
  width:18px;
}

/* CTA button */
.btn-primary{
  background: linear-gradient(180deg, #0d6efd, #0b5ed7);
  border: none;
  box-shadow: 0 18px 45px rgba(13,110,253,.35);
  transition: all .2s ease;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(13,110,253,.45);
}

/* =========================
   HERO / SLIDER (NO CARD)
   - Slight dark overlay for text visibility
   - Desktop: cover
   - Mobile: contain + smaller text
========================= */
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
  height: 100vh;
  background: var(--dv-bg);
}

.hero-carousel .carousel-item{
  position: relative;
}

.hero-media{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(900px 320px at 20% 20%, rgba(13,110,253,.18), transparent 55%),
              radial-gradient(650px 280px at 80% 30%, rgba(25,135,84,.14), transparent 55%),
              #070A12;
}

.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* desktop cinematic */
}

/* Slight darkening (NOT a card) */
.hero-carousel .overlay{
  position:absolute;
  inset:0;
  display:block;
  background: linear-gradient(
    90deg,
    rgba(7,10,18,.62) 0%,
    rgba(7,10,18,.32) 48%,
    rgba(7,10,18,.60) 100%
  );
  pointer-events:none;
}

.hero-carousel .content{
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 0;                 /* no card */
  background: transparent;    /* no card */
  border: 0;
  backdrop-filter: none;
}

.hero-carousel .content h1,
.hero-carousel .content .lead{
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* Pills */
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  font-size: .86rem;
}

/* =========================
   SECTIONS / TYPOGRAPHY
========================= */
.section-pad{ padding: 92px 0; }

.section-alt{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.section-top{ margin-bottom: 26px; }

.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dv-muted2);
}

.kicker .dot{
  width:7px;
  height:7px;
  border-radius:99px;
  background: #0d6efd;
  box-shadow: 0 0 0 6px rgba(13,110,253,.15);
}

.section-title{ letter-spacing: .2px; }
.section-desc{ color: var(--dv-muted); }

/* =========================
   CARDS
========================= */
.card{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,18,36,.92));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--dv-radius);
  overflow:hidden;
}

.shadow-soft{
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}

.card-img-top{
  height: 220px;
  object-fit: cover;
}

.btn-ghost{
  border-color: rgba(255,255,255,.18)!important;
  color: rgba(255,255,255,.9)!important;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.08)!important;
  border-color: rgba(255,255,255,.22)!important;
}

/* =========================
   STATS
========================= */
.stat-card{
  border-radius: var(--dv-radius);
  background: linear-gradient(180deg, rgba(13,110,253,.16), rgba(15,23,42,.85));
  border: 1px solid rgba(255,255,255,.10);
}
.stat-number{
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: .5px;
}
.stat-label{
  color: var(--dv-muted);
  margin-top: 6px;
}

/* =========================
   BADGES / CERTS
========================= */
.badge-card{
  border-radius: var(--dv-radius);
  background: rgba(15,23,42,.75);
  border: 1px dashed rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.35);
  transition: all .2s ease;
}
.badge-card:hover{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 70px rgba(0,0,0,.5);
  transform: translateY(-2px);
}

.badge-img{
  max-height: 56px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.badge-placeholder{
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--dv-muted2);
  background: rgba(255,255,255,.04);
}

/* =========================
   LOGO MARQUEE (CLIENTS)
========================= */
.logo-marquee{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 18px 0;
}

.logo-track{
  display: flex;
  gap: 26px;
  width: max-content;
  animation: dv-marquee 24s linear infinite;
  padding-left: 26px;
}
.logo-marquee:hover .logo-track{ animation-play-state: paused; }

@keyframes dv-marquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-item{
  width: 160px;
  height: 70px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-item img{
  max-height: 44px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.2);
  opacity: .9;
}
.logo-item img:hover{
  filter:none;
  opacity: 1;
}

/* =========================
   TESTIMONIALS
========================= */
.testimonial-card{
  border-radius: var(--dv-radius);
  background: linear-gradient(180deg, rgba(25,135,84,.12), rgba(15,23,42,.90));
  border: 1px solid rgba(255,255,255,.10);
}
.testimonial-quote{
  color: var(--dv-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}
.avatar-pill{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(13,110,253,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
}

/* =========================
   FAQ / ACCORDION
========================= */
.accordion-item{
  background: rgba(15,23,42,.65)!important;
  border: 1px solid rgba(255,255,255,.10)!important;
  border-radius: 18px!important;
  overflow:hidden;
}
.accordion-button{
  background: transparent!important;
  color: rgba(255,255,255,.92)!important;
}
.accordion-button:focus{ box-shadow: none!important; }
.accordion-button:not(.collapsed){
  background: rgba(255,255,255,.05)!important;
}

/* =========================
   PAGE HERO
========================= */
.page-hero{
  min-height: 320px;
  background: radial-gradient(900px 320px at 20% 20%, rgba(13,110,253,.22), transparent 55%),
              var(--dv-bg2);
  color: #fff;
  display:flex;
  align-items:center;
  position:relative;
  border-bottom: 1px solid var(--dv-border);
}
.page-hero .overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(7,10,18,.3), rgba(7,10,18,.85));
}
.page-hero .inner{
  position:relative;
  z-index:2;
}

/* =========================
   FOOTER
========================= */
footer{
  border-top: 1px solid var(--dv-border);
}
footer .text-secondary{
  color: var(--dv-muted2)!important;
}
footer a.link-light{
  color: rgba(255,255,255,.85)!important;
}

/* =========================
   MOBILE (ONLY ON MOBILE)
========================= */
@media (max-width: 768px){

  /* Navbar */
  .navbar-pro{ min-height: 68px; }
  .brand-logo{ height: 44px; }
  .brand-name{ font-size: 1.05rem; }
  .brand-tagline{ display:none; }

  /* Hero height */
  .hero-carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item{
    height: 68vh;
  }

  /* Mobile: NO CROP */
  .hero-img{
    object-fit: contain !important;
    background: #070A12;
  }

  /* Mobile overlay (slightly lighter) */
  .hero-carousel .overlay{
    background: linear-gradient(
      180deg,
      rgba(7,10,18,.55) 0%,
      rgba(7,10,18,.25) 45%,
      rgba(7,10,18,.60) 100%
    );
  }

  /* Smaller hero text on mobile */
  .hero-carousel .content{
    max-width: 100%;
    padding: 0 14px;
  }
  .hero-carousel .content h1{
    font-size: 1.45rem;
    line-height: 1.15;
    margin-bottom: 10px;
  }
  .hero-carousel .content .lead{
    font-size: .95rem;
    line-height: 1.45;
  }

  /* Buttons smaller */
  .hero-carousel .btn{
    padding: .55rem .9rem;
    font-size: .9rem;
  }

  /* Pills smaller */
  .pill{
    padding: 6px 10px;
    font-size: .78rem;
  }

  /* Sections */
  .section-pad{ padding: 64px 0; }
}