@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

    :root{
      --bg0:#0b1220;
      --bg1:#0f172a;
      --card:#0b1326cc;
      --stroke:#1f2b46;
      --text:#e5e7eb;
      --muted:#94a3b8;
      --brand:#3b82f6;
      --brand2:#22c55e;
    }
    body{
      min-height:100vh;
      background:
        radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,.20), transparent 60%),
        radial-gradient(800px 500px at 90% 20%, rgba(34,197,94,.14), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      color:var(--text);
    }
    .glass{
      background: var(--card);
      border:1px solid rgba(148,163,184,.20);
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      backdrop-filter: blur(10px);
      border-radius: 22px;
    }
    .soft-border{ border:1px solid rgba(148,163,184,.18) !important; }
    .muted{ color:var(--muted); }
    .brand-dot{
      width:10px;height:10px;border-radius:999px;background:var(--brand);display:inline-block;
      box-shadow:0 0 18px rgba(59,130,246,.8);
    }
    .btn-brand{
      background: linear-gradient(90deg, rgba(59,130,246,1), rgba(34,197,94,1));
      border:0;
      color:white;
      font-weight:600;
    }
    .btn-brand:hover{ filter: brightness(1.03); }
    .form-control, .form-select{
      background: rgba(2,6,23,.55);
      border:1px solid rgba(148,163,184,.18);
      color: var(--text);
      border-radius: 14px;
    }
    .form-control:focus, .form-select:focus{
      background: rgba(2,6,23,.60);
      color: var(--text);
      border-color: rgba(59,130,246,.7);
      box-shadow: 0 0 0 .25rem rgba(59,130,246,.18);
    }
    .pill{
      border-radius:999px;
      background: rgba(148,163,184,.10);
      border:1px solid rgba(148,163,184,.18);
      padding:.35rem .65rem;
      font-size:.85rem;
      color:var(--muted);
    }
    .side-hero{
      position:relative;
      overflow:hidden;
      border-radius: 22px;
      border:1px solid rgba(148,163,184,.18);
      background:
        radial-gradient(700px 450px at 30% 30%, rgba(59,130,246,.22), transparent 60%),
        radial-gradient(600px 400px at 70% 50%, rgba(34,197,94,.14), transparent 60%),
        linear-gradient(180deg, rgba(2,6,23,.35), rgba(2,6,23,.15));
      min-height: 520px;
    }
    .hero-plane{
      position:absolute;
      inset:auto -40px 40px auto;
      width:min(520px, 85%);
      opacity:.95;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
      transform: rotate(-8deg);
    }
    .hero-lines{
      position:absolute;
      inset:0;
      opacity:.22;
      background:
        repeating-linear-gradient(135deg, rgba(148,163,184,.25) 0 1px, transparent 1px 14px);
      mask-image: radial-gradient(circle at 60% 30%, black 0 45%, transparent 72%);
    }
    .hero-badge{
      position:absolute;
      top:18px; left:18px;
    }
    .tiny{
      font-size:.92rem;
    }
    .nav-pills .nav-link{
      border-radius: 999px;
      color: var(--muted);
      border:1px solid rgba(148,163,184,.18);
      background: rgba(148,163,184,.08);
      padding:.55rem .9rem;
    }
    .nav-pills .nav-link.active{
      color: white;
      background: rgba(59,130,246,.25);
      border-color: rgba(59,130,246,.55);
      box-shadow: 0 0 0 .22rem rgba(59,130,246,.12);
    }
    .link-quiet{
      color: rgba(226,232,240,.85);
      text-decoration: none;
    }
    .link-quiet:hover{ text-decoration: underline; }
    .toast-container{ z-index: 1080; }
    @media (max-width: 991.98px){
      .side-hero{ min-height: 260px; }
      .hero-plane{ bottom: -10px; right: -50px; width: min(420px, 90%); }
    }