:root{
      --bg:#071023;           /* deep navy */
      --card:#0b1522;         /* card dark */
      --muted:#9aa7b6;
      --accent1:#22d3ee;      /* cyan */
      --accent2:#06b6d4;      /* teal */
      --accent3:#34d399;      /* green */
      --glow: 0 6px 30px rgba(34,211,238,0.07);
    }
    html { scroll-behavior: smooth; }
    body { background: radial-gradient(1200px 400px at 10% 10%, rgba(6,182,212,0.06), transparent),
                   radial-gradient(800px 300px at 90% 90%, rgba(52,211,153,0.03), transparent),
                   var(--bg); }
    /* thin neon border */
    .neon-border { border: 1px solid rgba(34,211,238,0.12); }
    .neon-glow:hover { box-shadow: 0 8px 40px rgba(6,182,212,0.10); transform: translateY(-4px); }
    /* subtle grid background */
    .grid-bg { background-image:
      linear-gradient(transparent 0 49%, rgba(255,255,255,0.01) 50% 100%),
      linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,0.01) 50% 100%);
      background-size: 32px 32px, 32px 32px;
    }
    /* timeline */
    .timeline { position: relative; }
    .timeline::before {
      content: ""; position: absolute; left: 18px; top: 0; bottom: 0;
      width: 2px; background: linear-gradient(180deg,var(--accent1),var(--accent2));
      opacity: .18; border-radius: 2px;
    }
    /* responsive tweaks */
    @media (max-width:767px){
      .sidebar { display:none; }
      .mobile-nav { display:flex; }
    }
    @media (min-width:768px){
      .mobile-nav { display:none; }
    }