/* ==== MOBILE COLOR FIX (non-desktop) ==== */
@media (max-width: 880px){
  :root{
    --text-main: #ffffff;
    --text-muted: #e7ebff;

    --accent-pink: #ff6fa6;
    --accent-cyan: #66f0ff;
    --accent-yellow: #ffe38a;

    --bg-card: rgba(10, 16, 50, 0.98);
    --bg-card-soft: rgba(12, 20, 60, 0.98);
    --border-card: rgba(255, 255, 255, 0.12);
  }

  body{
    background-attachment: scroll;
    background:
      radial-gradient(
        circle at top,
        rgba(140, 140, 255, 0.38),
        rgba(18, 18, 48, 0.98) 55%,
        rgba(6, 6, 22, 1) 100%
      );
  }

  .hero-title, .title, .page-title{
    color: var(--accent-yellow);
  }

  @supports (-webkit-background-clip: text) or (background-clip: text){
    .hero-title, .title, .page-title{
      background: linear-gradient(120deg, #fff9cf, #ffe38a, #ffd56a);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  .card{
    background: var(--bg-card-soft);
    border-color: var(--border-card);
  }

  .card p{
    color: var(--text-muted);
  }

  .top-nav > a{
    color: #dfe6ff;
  }
}