:root{
    --bg-1:#05060f;
    --bg-2:#100618;
    --neon-cyan:#22d3ee;
    --neon-fuchsia:#a78bfa;
    --neon-pink:#ec4899;
    --card:#0b0f1f;
    --muted:#a8b3cf;
  }

  html,body{
    height:100%;
    background: radial-gradient(1200px 800px at 20% -10%, #1a0b2e 0%, transparent 60%),
                radial-gradient(1000px 600px at 110% 10%, #0b2830 0%, transparent 55%),
                linear-gradient(180deg, var(--bg-1), var(--bg-2));
    color: #e9ecf2;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    overflow-x:hidden;
  }

  /* Animated Background FX (same as quiz.html) */
  .fx-blobs, .fx-grid, .fx-scan, .fx-stars { pointer-events:none; position:fixed; inset:0; z-index:-1; }
  .fx-blobs::before,
  .fx-blobs::after{
    content:"";
    position:absolute;
    width:38rem; height:38rem;
    border-radius:50%;
    filter: blur(64px);
    mix-blend-mode: screen;
    animation: pulse 10s ease-in-out infinite;
    opacity:.35;
  }
  .fx-blobs::before{
    left:-12rem; top:-10rem; background: radial-gradient(circle at 30% 30%, var(--neon-cyan), transparent 60%);
  }
  .fx-blobs::after{
    right:-12rem; bottom:-12rem; background: radial-gradient(circle at 70% 70%, var(--neon-fuchsia), transparent 60%);
    animation-delay: 2s;
  }
  @keyframes pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08);} }

  .fx-grid{
    opacity:.28;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.95) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
    background-image:
      linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .fx-scan{
    background: repeating-linear-gradient(
      transparent 0px, transparent 3px, rgba(255,255,255,.03) 4px, transparent 5px
    );
    animation: scan 8s linear infinite;
    opacity:.6;
  }
  @keyframes scan { 0%{ background-position: 0 0; } 100% { background-position: 0 200px; } }
  .fx-stars{
    background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.15), transparent 40%),
      radial-gradient(2px 2px at 80% 10%, rgba(255,255,255,.12), transparent 40%),
      radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.10), transparent 40%),
      radial-gradient(2px 2px at 15% 80%, rgba(255,255,255,.15), transparent 40%);
    animation: twinkle 6s ease-in-out infinite;
    opacity:.6;
  }
  @keyframes twinkle { 0%,100%{ opacity:.6 } 50%{ opacity:.85 } }

  .glass{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05);
  }
  .neon-border{
    position: relative;
  }
  .neon-border::after{
    content:"";
    position:absolute; inset:-1px;
    border-radius: inherit;
    background: conic-gradient(
      from 0deg,
      rgba(34,211,238,.4), rgba(167,139,250,.35), rgba(236,72,153,.35), rgba(34,211,238,.4)
    );
    filter: blur(12px);
    opacity:.4;
    z-index:-1;
  }

  .brand{
    font-family: Orbitron, Inter, sans-serif;
    letter-spacing: .08em;
    font-weight: 800;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-fuchsia), var(--neon-pink));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }

  .btn-neon{
    --c1: var(--neon-cyan); --c2: var(--neon-fuchsia);
    background: linear-gradient(90deg, var(--c1), var(--c2));
    border: none;
    color: #0b0f1f;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(34,211,238,.25), 0 0 0 1px rgba(255,255,255,.07) inset;
  }
  .btn-neon:hover{ filter: saturate(1.1) brightness(1.05); }
  .btn-ghost{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    color: #e9ecf2;
  }
  .btn-ghost:hover{ background: rgba(255,255,255,.12); }

  .badge-soft{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    color: #e9ecf2;
  }

  /* Skills orbs */
  .orb{
    width: 150px; height: 150px; border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .orb:hover{ transform: translateY(-2px); box-shadow: 0 0 60px -10px rgba(167,139,250,.45); }
  .orb .ring{
    position:absolute; inset: -2px; border-radius: 20px; filter: blur(10px); opacity:.7;
  }
  .orb .inner{
    position:relative; z-index:1; text-align:center;
  }
  .orb .pct{
    font-weight: 800; font-size: 1.6rem;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .orb .label{ color:#e9ecf2; }

  .chip{
    padding: .35rem .75rem; border-radius: 999px; font-size:.9rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e9ecf2;
  }

  @media (prefers-reduced-motion: reduce){
    .fx-blobs,.fx-grid,.fx-scan,.fx-stars{ display:none; }
    .neon-border::after{ display:none; }
  }

  .skill-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;backdrop-filter:blur(10px);transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
  .skill-card:hover{transform:translateY(-2px);box-shadow:0 0 60px -10px rgba(167,139,250,.35), 0 10px 24px rgba(0,0,0,.25);background:rgba(255,255,255,.06)}
  .skill-ring{--size:56px;--pct:0;--c1:#22d3ee;--c2:#a78bfa;position:relative;width:var(--size);height:var(--size);border-radius:50%;background:conic-gradient(var(--c1) calc(var(--pct) * 1%), rgba(255,255,255,.12) 0)}
  .skill-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .skill-ring .ring-label{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#e9ecf2}
  .skill-body{flex:1;min-width:0}
  .skill-name{display:flex;align-items:center;gap:8px;font-weight:700;color:#e9ecf2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .skill-chip{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.7rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e9ecf2}
  .skill-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);overflow:hidden}
  .skill-bar > span{display:block;height:100%;width:0;background:linear-gradient(90deg, var(--c1), var(--c2));box-shadow:0 0 20px -6px var(--c1);transition:width .7s cubic-bezier(.2,.8,.2,1)}
  .skill-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
  @media (prefers-reduced-motion: reduce){.skill-card:hover{transform:none}}