/* ---- Base Theme ---- */
:root{
  --bg-overlay: rgba(0,0,0,.55);
  --bg-card: rgba(255,255,255,.06);
  --bg-card-topped: rgba(65, 255, 0, 0.06);
  --bg-card-strong: rgba(255,255,255,.12);
  --text: #f2f4f7;
  --text-dim: #c9d1d9;
  --primary: #8ab4ff;
  --primary-contrast: #12213a;
  --accent: #61dafb;
  --success: #4caf50;
  --warning: #ffb020;
  --danger: #ff6b6b;
  --border: rgba(255,255,255,.14);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

body{
  min-height:100vh;
  background-image:url('../img/bg-40-d.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center top;
  color:var(--text);
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(10,14,22,.7) 0%, rgba(10,14,22,.5) 25%, rgba(10,14,22,.35) 60%, rgba(10,14,22,.65) 100%);
  z-index: 0;
}

h1,h2,h3,h4{ font-weight:700; letter-spacing:.2px;z-index: 999; }
.lead{ color:var(--text-dim); }

.navbar{
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.35));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.navbar .nav-link{ color:var(--text-dim); }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--text); }
.navbar-brand img{ height:40px; object-fit:contain; }
.navbar-cta{
  background:var(--primary);
  color:#0a0f1a !important;
  border:0; box-shadow:var(--shadow);
  transition: transform .15s ease;
}
.navbar-cta:hover{ transform: translateY(-1px); opacity:.95; }

.section{ padding: clamp(48px, 6vw, 60px) 0;
  z-index: 1;
  position: relative;
}
.section-title{ }
.section-title .icon{
  width:34px; height:34px; display:inline-grid; place-items:center;
  border-radius:12px; background:var(--bg-card-strong); border:1px solid var(--border);
}

.colBg{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.colBg h3{ margin-bottom:.5rem; }
.colBg p{ color:var(--text-dim); }

.hero{ padding-top: min(210px, 20vh); text-align:center; }
.hero-logo{ width: clamp(260px, 40vw, 560px); filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
.splashText p{ font-size:clamp(22px, 3.2vw, 36px); }


.feature-card{
  padding:1.25rem;
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius:18px;
  position:relative;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease;
  height: 100%;
}
.feature-card.topped {
  background: var(--bg-card-topped);
}
.feature-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.feature-card .fi-wrap{
  width:56px; height:56px;
  border-radius:16px;
  display:inline-grid; place-items:center;
  background: var(--bg-card-strong);
  border:1px solid var(--border);
  margin-bottom:.75rem;
}
.feature-card .fi{
  width:28px; height:28px; color:var(--text);
}
.fi-h{
  width:23px; height:23px;
}
.feature-card h3{ margin-bottom:.25rem; }
.feature-card p{ color:var(--text-dim); margin-bottom:0; }

/* --- Pricing --- */
.pricing .feature-card{  }
.pricing .badge{
  position:absolute; top:16px; right:16px;
  background:var(--primary); color:var(--primary-contrast);
}
.pricing .price{ font-size:1.75rem; font-weight:800; margin: .5rem 0 0;color: #ceffce; }
.pricing ul{ margin:0; padding-left:1.1rem; }
.pricing li{ margin:.25rem 0; }

/* Icon utility */
.icon-rounded{
  width: 40px; height:40px; display:inline-grid; place-items:center;
  border-radius:12px; background:var(--bg-card-strong); border:1px solid var(--border);
}

/* Footer */
.site-footer{ background:rgba(0,0,0,.55); border-top:1px solid var(--border); }
.site-footer a{ color:var(--text-dim); }
.site-footer a:hover{ color:var(--text); }
.hr-soft{ border-top:1px solid var(--border); opacity:.8; }

/* Responsive */
@media (max-width: 1199.98px){
  .promoScr1 img {max-width: 100% !important;}
  .promoScr2 img {max-width: 100% !important;}
}
@media (max-width: 767.98px){
  .navbar .navbar-nav{ gap:.25rem; }
  .hero{ padding-top:30px; }

}
@media (max-width: 479.98px){
}
.hero { position:relative; z-index:1; }
@media (min-width: 1200px) {
  .h3, h3 {
    font-size: 1.45rem;
  }
}