:root {
      --brand: #0d6efd; --brand-dark: #0b5ed7;
      --c1: #6a11cb; --c2: #2575fc; --c3: #00c6ff; --c4: #7f00ff; --c5: #ee0979; --c6: #ff6a00;
      /* New gold tones for animated nav chips */
      --gold1: #fff4bf;  /* light gold */
      --gold2: #ffd54d;  /* classic gold */
      --gold3: #f4b942;  /* amber */
      --gold4: #ffefc1;  /* pale highlight */
      --gold-border: rgba(255, 215, 0, 0.65);
    }

    html, body { height: 100%; }
    body { scroll-behavior: smooth; background: transparent; }

    /* Enable Bootstrap ScrollSpy */
    body[data-bs-spy="scroll"] { position: relative; }

    /* Animated gradient page background behind canvas */
    body::before { content: ""; position: fixed; inset: 0; z-index: -2;
      background: radial-gradient(1200px 800px at 10% 10%, rgba(106,17,203,.15), transparent 60%),
                  radial-gradient(1200px 800px at 90% 20%, rgba(37,117,252,.12), transparent 60%),
                  linear-gradient(120deg, #120628, #180b3a, #120628);
      background-size: 200% 200%;
      animation: gradientMove 28s ease-in-out infinite;
    }
    @keyframes gradientMove { 0%{background-position: 0% 50%} 50%{background-position: 100% 50%} 100%{background-position: 0% 50%} }

    /* Animated gradient navbar */
    .gradient-nav { background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6));
      background-size: 300% 300%; animation: gradientMove 16s ease infinite; box-shadow: 0 6px 20px rgba(0,0,0,.18);
    }
    .navbar .nav-link, .navbar-brand { color: #fff; }
    .navbar .nav-link { opacity: 1; }
    .navbar .btn { /*color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.15);*/width:90px; }
    .navbar .btn:hover { background: rgba(255,255,255,.25); }
    .navbar-brand b { letter-spacing: .5px; }

    /* Canvas sits behind everything */
    .bg-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

    /* Hero / Sections use glass effect so background shows through */
    .hero { padding-top: 7rem; padding-bottom: 4rem; }
    .hero h1 { font-weight: 800; }

    .section-title { font-weight: 700; }
    .gradient-text { background: linear-gradient(90deg, var(--c1), var(--c2), var(--c5)); -webkit-background-clip: text; background-clip: text; color: transparent; }

    .badge-soft { background: linear-gradient(90deg, rgba(106,17,203,.12), rgba(37,117,252,.12)); color: #f8f9ff; border: 1px solid rgba(255,255,255,.25); }
    .feature-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; background: rgba(255,255,255,.12); color: #fff; }

    .card-quiet { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.25); color: #fff; }

    .list-check li { margin-bottom: .4rem; }
    .list-check li i { color: var(--c3); margin-right: .5rem; }

    .btn-gradient { background-image: linear-gradient(90deg, var(--c1), var(--c2)); border: 0; color: #fff; }
    .btn-gradient-2 { background-image: linear-gradient(90deg, var(--c5), var(--c6)); border: 0; color: #fff; }
    .btn-gradient, .btn-gradient-2 { transition: transform .15s ease, box-shadow .15s ease; }
    .btn-gradient:hover, .btn-gradient-2:hover { transform: translateY(-1px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.35); }

    .bg-gradient-1 { background: rgba(255,255,255,.02); }
    .bg-gradient-2 { background: rgba(255,255,255,.02); }

    .footer { background: #0b1220; color: #b7c0d8; }
    .footer a { color: #dbe4ff; text-decoration: none; }
    .footer a:hover { text-decoration: underline; }
    .cta-btns .btn { min-width: 190px; }
    .divider { height: 1px; background: rgba(255,255,255,.15); }

    /* === GOLD animated gradient chips for menu tabs === */
    .navbar .nav-link {
      position: relative; z-index: 0; color: #2a2300; /* dark text for contrast on light gold */
      border-radius: 999px; border: 1px solid var(--gold-border);
      padding: .5rem .9rem; margin: .25rem .25rem; overflow: hidden;
      transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease, color .2s ease;
      backdrop-filter: saturate(140%) blur(2px);
      background: linear-gradient(90deg, var(--gold1), var(--gold2), var(--gold3));
      background-size: 240% 240%;
      animation: goldFlow 10s linear infinite;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 .2rem .6rem rgba(0,0,0,.15);
    }
    .navbar .nav-link i { opacity: .9; }
    @keyframes goldFlow { 0%{background-position: 0% 50%} 50%{background-position: 100% 50%} 100%{background-position: 0% 50%} }

    /* subtle shine on hover */
    .navbar .nav-link::after {
      content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 20%, transparent 40%);
      transform: translateX(-120%);
      transition: transform .7s ease;
    }
    .navbar .nav-link:hover { transform: translateY(-1px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.35); }
    .navbar .nav-link:hover::after { transform: translateX(120%); }
    .navbar .nav-link.active, .navbar .nav-link:focus {
      border-color: rgba(255,215,0,.9); color: #1d1700;
      box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.45);
    }

    /* On very dark navbar, ensure chip legibility */
    .navbar.navbar-dark .nav-link { color: #2a2300; }

    /* Accordion icon tweak */
    .accordion-button::after { filter: brightness(1.1); }
    
    
    .fw-reveal {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

.fw-reveal.is-visible {
  animation: fw-fadeSlide 420ms both ease-out;
  /* use CSS var set by JS; NO attr() */
  animation-delay: calc(var(--fw-base-delay, 0ms) + (var(--fw-step, 20ms) * var(--i, 0)));
}

:root { --fw-step: 20ms; --fw-base-delay: 0ms; }

@keyframes fw-fadeSlide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fw-elevate { box-shadow: 0 6px 16px rgba(0,0,0,.06); transition: box-shadow .2s ease; }
.fw-elevate.is-visible { box-shadow: 0 12px 28px rgba(0,0,0,.08); }

@media (prefers-reduced-motion: reduce) {
  .fw-reveal { opacity: 1; transform: none; animation: none !important; }
  .fw-elevate { transition: none; }
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;           /* default hidden */
  z-index: 999;
}