:root {
      --brand-primary: #0d6efd;
      --brand-secondary: #6610f2;
      --brand-dark: #0b2a4a;
      --bg-soft: #f7f9fc;
    }

    body {
      background: var(--bg-soft);
    }

    /* Header with animated waves */
    .hero {
      position: relative;
      background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
      color: #fff;
      padding: 2.5rem 0 6rem;
      overflow: hidden;
    }

    .brand-logo {
      background: #fff;
      border-radius: .5rem;
      padding: .5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
      width: 68px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .brand-logo img {
      max-width: 100%;
      height: auto;
    }

    .hero-title {
      font-weight: 700;
      letter-spacing: .3px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }

    .hero-subtitle {
      opacity: .9;
    }

    .version-badge {
      background: rgba(255, 255, 255, .15);
      border: 1px solid rgba(255, 255, 255, .35);
      color: #fff;
      backdrop-filter: blur(6px);
    }

    /* Wave animation using tiled SVG background */
    .wave-wrap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 140px;
      pointer-events: none;
    }

    .wave {
      position: absolute;
      left: -25%;
      width: 150%;
      height: 100%;
      background-repeat: repeat-x;
      background-size: 800px 140px;
      opacity: .55;
      animation: waveMove 18s linear infinite;
      filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, .12));
    }

    .wave.wave-2 {
      opacity: .35;
      animation-duration: 28s;
      animation-direction: reverse;
    }

    .wave.wave-3 {
      opacity: .2;
      animation-duration: 38s;
    }

    /* Inline SVG waves encoded as data URI, inheriting theme color */
    .wave {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 140' preserveAspectRatio='none'><path fill='%23ffffff' d='M0 70 C 80 120, 160 120, 240 70 C 320 20, 400 20, 480 70 C 560 120, 640 120, 720 70 C 760 45, 800 50, 800 50 L 800 140 L 0 140 Z'/></svg>");
    }

    @keyframes waveMove {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-400px);
      }
    }

    /* Cards */
    .portal-card {
      box-shadow: 0 10px 18px rgba(13, 110, 253, .08);
    }

    .card-title i {
      color: var(--brand-primary);
    }

    /* Right card: vertical marquee */
    .news-ticker {
      position: relative;
      height: 240px;
      overflow: hidden;
      border-radius: .5rem;
      background: #fff;
      border: 1px solid #eef1f6;
    }

    .news-track {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      animation: scrollY 14s linear infinite;
    }

    .news-item {
      padding: .75rem 1rem;
      border-bottom: 1px dashed #e9edf3;
      background: #fff;
    }

    .news-item:nth-child(even) {
      background: #fafcff;
    }

    .news-ticker:hover .news-track {
      animation-play-state: paused;
    }

    @keyframes scrollY {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-50%);
      }
    }

    .download-links .list-group-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px dashed #e9edf3;
    }

    /* Footer */
    footer {
      background: #0f1f33;
      color: #c9d5e7;
    }

    .footer-logo {
      background: #fff;
      border-radius: .5rem;
      padding: .35rem .5rem;
      width: 56px;
      height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
      margin-right: .75rem;
    }

    .badge-secure {
      background: #0ea566;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .25);
    }

    .badge-imunify {
      background: #00bfa6;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .25);
    }

    .powered a {
      color: #9fc2ff;
      text-decoration: none;
    }

    .powered a:hover {
      text-decoration: underline;
    }

    /* Responsive tweaks */
    @media (max-width: 575.98px) {
      .hero {
        padding-bottom: 7.5rem;
      }

      .hero .col-center {
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
    }

    .rgvp-logo-stack {
      width: 100px;
    }

    .logo-stack-1x {
      margin: 11px;
      width: 117px;
    }

    .logo-stack-2x {
      margin-right: 10px;
      width: 138px;
    }

    @media(max-width:400px) {
      .rgvp-logo-stack {
        width: 100px;
      }

      .logo-stack-1x {
        margin: 8px;
        width: 85%;
      }

      .logo-stack-2x {
        margin-right: 10px;
        width: 100%;
      }
    }

    .rgvp-spin {
      -webkit-animation: fa-spin 10s infinite linear;
      animation: fa-spin 10s infinite linear;
    }

    @keyframes logo-spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .spinning-ring {
      animation: logo-spin 10s infinite linear;
    }