html{
      scroll-behavior: smooth;
    }
    :root {
      --bg: #0b1220;
      --card: #0f1724;
      --muted: #9aa4b2;
      --accent: #3b82f6;
      --glass: rgba(255, 255, 255, 0.04);
    }

    body {
      background: linear-gradient(180deg, var(--bg), #06080b);
      color: #e6eef6;
      font-family: Inter, system-ui;
    }

    .glass {
      background: var(--glass);
      backdrop-filter: blur(10px)
    }

    .soft-card {
      box-shadow: 0 8px 30px rgba(2, 6, 23, .6)
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 99px;
      background: #28313a;
      cursor: pointer
    }

    .dot.active {
      background: var(--accent)
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #28313a;
      cursor: pointer;
    }

    .dot.active {
      background: #3b82f6;
    }