:root{
  --bg:#0c0d10;
  --panel:#111318;
  --text:#edf0f6;
  --muted:#c2cad9;
  --line:rgba(200,210,230,.16);
  --primary:#b3c3ff; /* soft periwinkle */
  --accent:#e3dcff;  /* whisper lavender */
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

html,body{
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(179,195,255,.08), transparent 65%),
    radial-gradient(700px 500px at 0% 100%, rgba(227,220,255,.08), transparent 65%),
    var(--bg);
  color:var(--text);
  min-height:100%;
}

/* Navbar: glassy, understated */
.navbar{
  background:linear-gradient(180deg, rgba(17,19,24,.88), rgba(17,19,24,.82));
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar-brand, .nav-link{
  color:var(--muted)!important;
  position:relative;
  transition:color .2s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:auto;
  bottom:.35rem;
  height:2px; width:0;
  background:currentColor;
  transition:width .25s ease;
  opacity:.9;
}
.nav-link:hover{ color:var(--text)!important }
.nav-link:hover::after{ width:100% }

/* Offcanvas menu */
.offcanvas.text-bg-dark{
  background:linear-gradient(180deg, rgba(17,19,24,.98), rgba(17,19,24,.9));
  border-left:1px solid var(--line);
}

/* Buttons */
.btn-primary{
  background:linear-gradient(90deg, var(--primary), var(--accent));
  color:#0c0d10;
  border:0;
  box-shadow:0 8px 24px rgba(179,195,255,.25);
}
.btn-primary:hover{ filter:brightness(1.06) }
.btn-outline-primary{
  color:var(--primary);
  border-color:rgba(179,195,255,.45);
}
.btn-outline-primary:hover{
  background:linear-gradient(90deg, var(--primary), var(--accent));
  color:#0c0d10;
  border-color:transparent;
}

/* Panels and cards */
.card, .comparison-card, .price-section, .text-background{
  background:linear-gradient(180deg, rgba(17,19,24,.9), rgba(17,19,24,.84));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:16px;
}

/* Headings */
h1,h2,h3,.card-title{
  color:var(--text);
  letter-spacing:.3px;
  text-shadow:0 0 8px rgba(200,210,255,.18);
}

/* Tables */
.table, .features-table{
  color:var(--text);
  border-color:var(--line);
}
.features-table th, .table thead th{
  background:rgba(17,19,24,.85);
  color:var(--primary);
}

/* Media hover */
img.img-fluid, .fit-cover{
  transition:transform .4s ease, box-shadow .4s ease, filter .4s ease;
  border-radius:14px;
}
img.img-fluid:hover, .fit-cover:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  filter:saturate(1.03);
}

/* Elegant page transitions */
body.fade-init{ opacity:0; transform:translateY(6px); filter:blur(6px) saturate(0.98) }
body.fade-in{ opacity:1; transform:none; filter:none; transition:opacity .35s ease, transform .35s ease, filter .35s ease }
body.fade-out{ opacity:0; transform:translateY(4px); filter:blur(2px); transition:opacity .22s ease, transform .22s ease, filter .22s ease }

/* Active nav state */
.nav-pills .nav-link.active, .navbar .nav-link.active{
  background:rgba(179,195,255,.14);
  color:var(--text)!important;
  border-radius:999px;
}

/* Footer */
footer, .footer{
  background:linear-gradient(0deg, rgba(17,19,24,.95), rgba(17,19,24,.86));
  border-top:1px solid var(--line);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  * { transition:none !important; animation:none !important; filter:none !important; transform:none !important }
  body.fade-init{ opacity:1 }
}