:root{
  --mq-ink:#0b1020;
  --mq-slate:#223049;
  --mq-muted:#5b6b86;
  --mq-border:rgba(34,48,73,.12);

  --mq-violet:#7c3aed;
  --mq-indigo:#3b5bdb;
  --mq-blue:#38bdf8;

  --mq-grad: linear-gradient(135deg, rgba(124,58,237,.95), rgba(59,91,219,.92), rgba(56,189,248,.80));
  --mq-grad-soft: linear-gradient(135deg, rgba(124,58,237,.12), rgba(59,91,219,.10), rgba(56,189,248,.08));
}

html{scroll-behavior:smooth;}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--mq-ink);
  background:#f7f8fc;
  position: relative;
}

/* Very light background image layer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('../img/maxquantis_tlo_main.png') no-repeat center / cover;

  /* make image lighter */
  opacity: 0.40;                 /* try 0.06–0.15 for “very very light” */
  filter: brightness(1.25) saturate(0.9);
  pointer-events: none;
}

/* White veil for readability */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,0.70); /* raise to 0.75–0.85 if needed */
  pointer-events: none;
}

/* Glass surfaces */
.mq-glass{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--mq-border);
}

/* ✅ Make the fixed top header ALWAYS readable over content */
header.mq-glass{
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid rgba(34,48,73,.14);
  box-shadow: 0 10px 30px rgba(11,16,32,.12);
  z-index: 9999; /* ensure it stays above everything */
}

/* Top nav links */
.top-nav-active{
  color: var(--mq-violet);
  position:relative;
}
.top-nav-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:3px;
  border-radius:999px;
  background: var(--mq-grad);
}
.top-nav-inactive{
  color: rgba(34,48,73,.78);
}
.top-nav-inactive:hover{
  color: var(--mq-violet);
}

/* Left nav links */
.left-nav-active{
  background: var(--mq-grad);
  color: white;
  box-shadow: 0 12px 25px rgba(59,91,219,.22);
}
.left-nav-inactive{
  background: rgba(255,255,255,.0);
  color: rgba(34,48,73,.82);
}
.left-nav-inactive:hover{
  background: rgba(124,58,237,.10);
  color: var(--mq-violet);
}

/* Hero overlay */
.mq-hero-overlay{
  background: radial-gradient(1200px 600px at 20% 20%, rgba(124,58,237,.45), transparent 60%),
              radial-gradient(900px 500px at 80% 35%, rgba(56,189,248,.30), transparent 55%),
              rgba(7,10,20,.55);
}

/* Buttons */
.mq-btn{
  background: var(--mq-grad);
  color:white;
  border-radius: 0.75rem;
  padding: .85rem 1.25rem;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(124,58,237,.22);
}
.mq-btn:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.mq-btn:active{ transform: translateY(0); }

.mq-btn-secondary{
  background: rgba(255,255,255,.92);
  color: var(--mq-violet);
  border: 1px solid rgba(124,58,237,.18);
}
.mq-btn-secondary:hover{ background:white; }

/* Footer */
.mq-footer{
  background: rgba(11,16,32,.92);
  color: rgba(236,240,255,.72);
  border-top: 1px solid rgba(255,255,255,.10);
}
.mq-footer a{ color: rgba(236,240,255,.82); }
.mq-footer a:hover{ color: white; }

/* Dropdown */
.mq-dropdown{ position: relative; }
.mq-dropdown-panel{
  position:absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: .5rem;
  border-radius: 1rem;
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
}
.mq-dropdown:hover .mq-dropdown-panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mq-dropdown-item{
  display:block;
  padding:.6rem .75rem;
  border-radius:.75rem;
  color: rgba(34,48,73,.86);
  font-weight: 600;
}
.mq-dropdown-item:hover{
  background: rgba(124,58,237,.10);
  color: var(--mq-violet);
}

/* Content cards */
.mq-section{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(34,48,73,.10);
}