/* ===== Reset & Base ===== */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
     
      html,
      body {
        height: 100%;
        scroll-behavior: smooth;

      }
      :root {
        /* Theme */
        --bg: #0b0e12; /* page background */
        --surface: #11151b; /* card/nav background */
        --muted: #8b97a6; /* secondary text */
        --text: #e6e9ef; /* main text */
        --primary: #7c3aed; /* accent 1 */
        --primary-2: #4f46e5; /* accent 2 */
        --ring: rgba(124, 58, 237, 0.35);
        --border: #202632; /* borders */
        --chip: #0f1319; /* chip bg */
        --radius: 18px;
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        --blur: 10px;
        --container: 1100px;
        /* Brand colors */
        --angular: #dd0031;
        --vue: #42b883;
        --nestjs: #e0234e;
        --node: #3c873a;
        --docker: #2496ed;
        --symfony: #000000;
        --elastic: #005571;
        --js: #f7df1e;
        --tailwind: #38b2ac;
      }
      @media (prefers-color-scheme: light) {
        :root {
          --bg: #f6f7fb;
          --surface: #ffffff;
          --text: #0b0e12;
          --muted: #5c6572;
          --border: #e6e8ee;
          --chip: #f0f3f8;
        }
      }
      body {
        margin: 0;
        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
          "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
        background: var(--bg);
        color: var(--text);
        -webkit-font-smoothing: antialiased;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        max-width: 100%;
        display: block;
      }

      /* ===== Utilities ===== */
      .container {
        max-width: var(--container);
        margin-inline: auto;
        padding: 0 1.25rem;
      }
      .muted {
        color: var(--muted);
      }