:root {
    --black: #0a0a0a;
    --dark: #111214;
    --dark2: #1a1c20;
    --dark3: #23262b;
    --surface: #14161a;
    --surface-alt: #181b20;

    --yellow: #fdb81e;
    --yellow-dim: #d1941c;
    --yellow-light: #fdc956;
    --yellow-soft: rgba(253, 184, 30, 0.12);
    --yellow-glow: rgba(253, 184, 30, 0.22);

    --orange: var(--yellow);
    --orange-bright: var(--yellow);
    --orange-dim: var(--yellow-dim);
    --orange-light: var(--yellow-light);
    --orange-pale: #ffe9b8;
    --orange-soft: var(--yellow-soft);
    --orange-glow: var(--yellow-glow);

    --white: #f7f8fa;
    --white-soft: #e4e6ea;
    --gray: #9a9da3;
    --gray-muted: #6d7078;
    --gray-light: #35383f;
    --gray-border: #2c2f36;
    --card-bg: #181b20;
    --card-bg-hover: #1f2329;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: linear-gradient(180deg, var(--dark) 0%, #0e1013 50%, var(--dark) 100%);
    color: var(--white);
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    overflow-x: hidden;
  }

  a { color: inherit; }

  /* ── TOP BAR ── */
  .topbar {
    background: var(--black);
    border-bottom: 1px solid var(--gray-border);
    box-shadow: inset 0 -2px 0 var(--orange);
    padding: 8px 0;
    font-size: 13px;
    color: var(--gray);
    display: flex;