:root {
      --bg:           #050507;
      --bg-card:      #0e0e1c;
      --bg-elevated:  #13132000;
      --bg-input:     #07070f;
      --border:       rgba(255,255,255,0.055);
      --border-card:  rgba(255,255,255,0.075);
      --accent:       #0B98DD;
      --accent-dk:    #0880bc;
      --accent-glow:  rgba(11,152,221,0.16);
      --text:         #edf0fa;
      --muted:        #8892a8;
      --dim:          #484f67;
    }

    *, *::before, *::after { box-sizing: border-box }

    html {
      font-family: 'Sora', system-ui, -apple-system, sans-serif;
      font-size: 16px;
    }

    body {
      margin: 0;
      background-color: var(--bg);
      background-image:
        radial-gradient(ellipse 90% 45% at 50% -5%, rgba(11,152,221,0.1) 0%, transparent 70%),
        radial-gradient(ellipse 50% 30% at 90% 100%, rgba(11,152,221,0.04) 0%, transparent 60%);
      color: var(--text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a { text-decoration: none; color: inherit }

    .mono { font-family: 'JetBrains Mono', ui-monospace, monospace }

    /* ── Cards ── */
    .card {
      border-radius: 1rem;
      border: 1px solid var(--border-card);
      background: var(--bg-card);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.025) inset,
        0 2px 16px rgba(0,0,0,.55);
    }
    .card-hover {
      transition: transform .25s cubic-bezier(.4,0,.2,1), border-color .25s, box-shadow .25s;
    }
    .card-hover:hover {
      transform: translateY(-2px);
      border-color: rgba(11,152,221,.28);
      box-shadow:
        0 0 0 1px rgba(11,152,221,0.06) inset,
        0 8px 32px rgba(11,152,221,.12),
        0 2px 8px rgba(0,0,0,.55);
    }
    .card-hover:hover .card-img { transform: scale(1.04) }

    /* ── Buttons ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .375rem; border-radius: .5rem; font-weight: 600; font-size: .875rem;
      line-height: 1; cursor: pointer; white-space: nowrap; border: none; outline: none;
      text-decoration: none; transition: all .15s cubic-bezier(.4,0,.2,1);
      font-family: inherit; padding: .625rem 1.25rem; letter-spacing: -.01em;
    }
    .btn:active:not(:disabled) { transform: translateY(1px) }
    .btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none }

    .btn-primary {
      background: var(--accent); color: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(11,152,221,.3);
    }
    .btn-primary:hover {
      background: var(--accent-dk);
      box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(11,152,221,.4);
    }
    .btn-secondary {
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border-card);
      color: var(--text);
    }
    .btn-secondary:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.13) }
    .btn-ghost { background: transparent; color: var(--muted); padding: .5rem .75rem }
    .btn-ghost:hover { background: rgba(255,255,255,.05); color: var(--text) }
    .btn-danger {
      background: rgba(239,68,68,.09); border: 1px solid rgba(239,68,68,.18); color: rgb(252,165,165)
    }
    .btn-danger:hover { background: rgba(239,68,68,.16) }
    .btn-success {
      background: rgba(16,185,129,.09); border: 1px solid rgba(16,185,129,.18); color: rgb(52,211,153)
    }
    .btn-success:hover { background: rgba(16,185,129,.16) }
    .btn-sm { padding: .375rem .75rem; font-size: .8125rem }
    .btn-lg { padding: .8125rem 1.625rem; font-size: .9375rem }
    .btn-full { width: 100%; justify-content: center }

    /* ── Badges ── */
    .badge {
      display: inline-flex; align-items: center; gap: .25rem;
      border-radius: .375rem; padding: .2rem .55rem;
      font-size: .6875rem; font-weight: 600; line-height: 1rem; letter-spacing: .02em;
    }
    .badge-green  { border: 1px solid rgba(16,185,129,.2);  background: rgba(16,185,129,.08);  color: rgb(52,211,153) }
    .badge-orange { border: 1px solid rgba(255,122,61,.2);  background: rgba(255,122,61,.08);  color: rgb(255,154,100) }
    .badge-gray   { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: rgb(156,163,175) }
    .badge-amber  { border: 1px solid rgba(245,158,11,.2);  background: rgba(245,158,11,.08);  color: rgb(251,191,36) }
    .badge-red    { border: 1px solid rgba(239,68,68,.2);   background: rgba(239,68,68,.08);   color: rgb(252,165,165) }
    .badge-blue   { border: 1px solid rgba(59,130,246,.2);  background: rgba(59,130,246,.08);  color: rgb(96,165,250) }

    /* ── Inputs ── */
    .input {
      background: var(--bg-input);
      border: 1px solid var(--border-card);
      border-radius: .5rem; color: var(--text);
      padding: .6875rem .9375rem; width: 100%;
      font-size: .875rem; font-family: inherit;
      transition: border-color .15s, box-shadow .15s; outline: none;
    }
    .input::placeholder { color: var(--dim) }
    .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,152,221,.08) }
    textarea.input { resize: vertical; min-height: 5rem }
    select.input { cursor: pointer }
    label.field { display: block }
    label.field > span {
      display: block; font-size: .75rem; font-weight: 600;
      color: var(--muted); margin-bottom: .4375rem; letter-spacing: .01em;
    }

    /* ── Nav links ── */
    .nav-link {
      color: var(--dim); font-size: .875rem; font-weight: 500;
      padding: .375rem .625rem; border-radius: .4375rem;
      transition: color .12s, background .12s;
    }
    .nav-link:hover { color: var(--text); background: rgba(255,255,255,.05) }

    /* ── Tables ── */
    table { width: 100%; border-collapse: collapse }
    th {
      text-align: left; font-size: .6875rem; font-weight: 600;
      color: var(--dim); text-transform: uppercase; letter-spacing: .06em;
      padding: .625rem .875rem; border-bottom: 1px solid var(--border);
    }
    td { padding: .75rem .875rem; font-size: .875rem; border-bottom: 1px solid rgba(255,255,255,.03) }
    tr:last-child td { border-bottom: none }
    tbody tr:hover td { background: rgba(255,255,255,.015) }

    /* ── Alerts ── */
    .alert {
      border-radius: .625rem; padding: .875rem 1rem; font-size: .875rem;
      display: flex; gap: .5rem; align-items: flex-start;
    }
    .alert-error   { background: rgba(239,68,68,.07);   border: 1px solid rgba(239,68,68,.18);   color: rgb(252,165,165) }
    .alert-warning { background: rgba(245,158,11,.07);  border: 1px solid rgba(245,158,11,.18);  color: rgb(251,191,36) }
    .alert-success { background: rgba(16,185,129,.07);  border: 1px solid rgba(16,185,129,.18);  color: rgb(52,211,153) }
    .alert-info    { background: rgba(59,130,246,.07);  border: 1px solid rgba(59,130,246,.18);  color: rgb(96,165,250) }

    /* ── Divider ── */
    .divider { height: 1px; background: var(--border) }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 4px; height: 4px }
    ::-webkit-scrollbar-track { background: transparent }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.15) }

    /* ── Page animations ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px) }
      to   { opacity: 1; transform: translateY(0) }
    }
    .fade-up   { animation: fadeUp .45s cubic-bezier(.4,0,.2,1) both }
    .fade-up-1 { animation-delay: .06s }
    .fade-up-2 { animation-delay: .12s }
    .fade-up-3 { animation-delay: .18s }
    .fade-up-4 { animation-delay: .24s }
    .fade-up-5 { animation-delay: .30s }

    @keyframes spin { to { transform: rotate(360deg) } }

    /* ── Dot grid (used in hero) ── */
    .dot-grid {
      background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
      background-size: 28px 28px;
    }