:root{
      --brand-accent:#00d4ff;
      --brand-accent-soft:#00d4ff22;
    }
    body{
      background: radial-gradient(1200px 600px at 80% -10%, #0b2330 0%, #050b10 45%, #02060a 100%) fixed;
      color:#d9e3ea;
      letter-spacing: .1px;
    }
    .navbar{
      background: rgba(5,11,16,.8);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid #0f2a39;
    }
    .navbar-brand{ font-weight:700; }
    .hero{
      padding: 120px 0 80px;
      background:
        radial-gradient(600px 400px at 10% 0%, var(--brand-accent-soft), transparent 60%),
        radial-gradient(700px 500px at 90% 10%, #ff2d8b22, transparent 60%);
    }
    .hero h1 span{ color: var(--brand-accent); text-shadow:0 0 16px #00d4ff33; }
    .section-title{
      font-weight:700; letter-spacing:.5px;
      border-left:4px solid var(--brand-accent);
      padding-left:.75rem; margin-bottom:1.25rem;
    }
    .card{
      background: #0a1822;
      border: 1px solid #0f2a39;
    }
    .btn-accent{
      --bs-btn-bg: var(--brand-accent);
      --bs-btn-border-color: var(--brand-accent);
      --bs-btn-hover-bg: #00bfe5;
      --bs-btn-hover-border-color: #00bfe5;
      --bs-btn-color: #00131a;
      box-shadow: 0 0 24px #00d4ff33;
      font-weight:600;
    }
    .badge-soft{ background: #ffffff14; border:1px solid #ffffff22; }
    .gallery img{
      object-fit: cover; width:100%; height:220px; border-radius:.5rem;
      border:1px solid #0f2a39;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .gallery img:hover{ transform: translateY(-2px); box-shadow:0 10px 30px #00000088; }
    .list-group-dark .list-group-item{
      background:#07121a; color:#cfe8f3; border-color:#0f2a39;
      cursor:pointer;
    }
    .list-group-dark .list-group-item.active{
      background: linear-gradient(180deg, #092131, #0e2b3d);
      border-color:#17465f;
      color:#eaf7ff;
    }
    footer{
      border-top:1px solid #0f2a39; background:#050b10;
    }
    .fixed-offset{ padding-top: 72px; } /* voor fixed navbar */