:root {
      --bg: #1e1e2f;
      --text: #f2f2f2;
      --accent: #f06292;
      --link-bg: #33334d;
      --hover: #ff80ab;
    }

    body {
      margin: 0;
      padding: 2em;
      font-family: 'Segoe UI', sans-serif;
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.6;
      text-align: center;
    }

    h1 {
      font-size: 2em;
      margin-bottom: 0.5em;
    }

    p {
      max-width: 700px;
      margin: 0 auto 2em;
      font-size: 1.1em;
    }

    .link-box {
      background: var(--link-bg);
      border-radius: 10px;
      padding: 1em 1.5em;
      margin: 1.5em auto;
      max-width: 500px;
      text-align: left;
      transition: background 0.3s ease;
    }

    .link-box:hover {
      background: var(--hover);
    }

    .link-box a {
      text-decoration: none;
      color: var(--text);
      font-weight: bold;
      font-size: 1.2em;
      display: block;
      margin-bottom: 0.3em;
    }

    .description {
      font-size: 0.95em;
      color: #ccc;
    }

    .tagline {
      font-style: italic;
      color: var(--accent);
      margin-bottom: 2em;
    }

    @media (max-width: 600px) {
      body {
        padding: 1em;
      }

      h1 {
        font-size: 1.5em;
      }

      .link-box {
        padding: 1em;
      }
    }