:root{
      --bg1: #1f3851;
      --accent1: #4d7df5;
      --accent2: #4cc9f0;
      --muted: #9fb0d1;
      --card-bg: rgba(255,255,255,0.04);
      --glass: rgba(255,255,255,0.03);
      --radius: 14px;
    }

    html,body{height:100%}
    body{
      margin:0;
      font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: #e9f0ff;
      background: radial-gradient(600px 400px at 10% 10%, rgba(124,92,255,0.12), transparent),
                  radial-gradient(500px 300px at 90% 90%, rgba(76,201,240,0.08), transparent),
                  linear-gradient(120deg,#071126 0%, #0d1b2a 25%, #0b1220 50%, #081025 100%);
      background-size: 400% 400%;
      animation: bgMove 14s ease infinite;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    @keyframes bgMove {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }

    /* Navbar */
    .navbar{
      background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .navbar .brand-mark{
      width:40px; height:40px; display:inline-grid; place-items:center;
      background: linear-gradient(135deg,var(--accent1),var(--accent2));
      border-radius:10px; box-shadow: 0 6px 18px rgba(76,201,240,0.08);
      font-weight:700;
    }

    /* Hero */
    .hero {
      min-height:85vh;
      display:flex;
      align-items:center;
      padding-top:56px; /* navbar space */
    }
    .hero-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 18px;
      padding:28px;
      box-shadow: 0 12px 40px rgba(4,10,20,0.6);
    }
    .avatar {
      width:150px;height:150px;border-radius:22px;
      background: linear-gradient(135deg,var(--accent1),var(--accent2));
      display:grid;place-items:center;font-weight:800;font-size:36px;color:#071126;
      box-shadow: 0 10px 30px rgba(124,92,255,0.12);
      border:4px solid rgba(255,255,255,0.04);
    }

    /* Cards & Effects */
    .card-glass {
      background: var(--card-bg);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: var(--radius);
      transition: transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .32s;
    }
    .card-glass:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 40px rgba(12,20,40,0.6), 0 0 28px rgba(124,92,255,0.08);
    }

    /* Skill badges */
    .skill-badge {
      background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03));
      border:1px solid rgba(255,255,255,0.04);
      color:var(--muted);
      padding:8px 12px;
      border-radius:999px;
      font-weight:600;
      margin:4px;
    }

    /* Projects */
    .proj-thumb {
      height:160px; border-radius:12px;
      background: linear-gradient(135deg, rgba(124,92,255,0.12), rgba(76,201,240,0.08));
      border: 1px solid rgba(255,255,255,0.03);
    }

    /* Timeline (Education & Experience) */
    .timeline {
      position:relative;
      padding-left:28px;
      margin-top:12px;
    }
    .timeline::before {
      content:"";
      position:absolute;
      left:8px; top:0; bottom:0; width:2px;
      background: linear-gradient(180deg,var(--accent1),var(--accent2));
      box-shadow:0 0 18px rgba(76,201,240,0.06);
      border-radius:2px;
    }
    .timeline-item {
      position:relative;
      margin-bottom:28px;
      padding:10px 16px 10px 26px;
      border-radius:12px;
      background: rgba(255,255,255,0.018);
      border:1px solid rgba(255,255,255,0.02);
    }
    .timeline-item::before{
      content:"";
      position:absolute; left:-2px; top:18px; width:12px; height:12px; border-radius:50%;
      background: linear-gradient(135deg,var(--accent1),var(--accent2));
      box-shadow:0 6px 18px rgba(124,92,255,0.12);
      transform:translateX(-50%);
    }

    /* Contact form */
    .form-control, .form-control:focus { background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color: #eaf3ff; }
    ::placeholder { color: rgba(234,243,255,0.35); }

    /* Footer */
    footer { margin-top:40px; padding:28px 0; color:var(--muted); }

    /* Utilities responsive */
    @media (max-width: 768px){
      .hero { padding-top:70px; }
      .avatar { width:120px;height:120px;font-size:28px }
    }