/* Hero section */
    .hero{
      display:grid;
      grid-template-columns:minmax(0, 1.3fr) minmax(0, .9fr);
      gap:24px;
      align-items:stretch;
      padding:28px 0 24px;
    }
    .panel{
      background:var(--card);
      border-radius:var(--radius2);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:24px 22px;
      position:relative;
      overflow:hidden;
    }
    .panel::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(800px 340px at 10% 0%, rgba(124,58,237,.20), transparent 60%),
        radial-gradient(800px 340px at 95% 10%, rgba(6,182,212,.18), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }
    .panel > *{ position:relative; z-index:1; }

    .heroIntro{
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .tagRow{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      font-size:11px;
    }
    .tag{
      padding:3px 8px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.6);
      background:rgba(15,23,42,.92);
      color:rgba(226,232,240,.92);
    }

    .title{
      font-size:clamp(24px, 3.4vw, 32px);
      font-weight:800;
      letter-spacing:.3px;
    }
    .subtitle{
      font-size:13px;
      color:var(--muted);
      max-width:60ch;
      line-height:1.7;
    }

    .pillRow{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:6px;
    }

    .btn{
      border:none;
      cursor:pointer;
      border-radius:999px;
      padding:10px 14px;
      font-size:12px;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:8px;
      text-decoration:none;
      transition:.25s ease;
    }
    
    .miniNote{
      font-size:11px;
      color:var(--muted2);
    }

    /* Right panel - Avatar & quick stats */
    .profilePanel{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
      text-align:center;
    }
    .avatarWrap{
      width:96px; height:96px;
      border-radius:999px;
      background:
        radial-gradient(circle at 30% 10%, #e5e7eb, transparent 55%),
        linear-gradient(135deg,#0f172a,#1f2937);
      border:2px solid rgba(148,163,184,.9);
      box-shadow:0 14px 40px rgba(0,0,0,.6);
      position:relative;
      overflow:hidden;
    }
    .avatarWrap::after{
      content:"PARDEEP";
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      font-weight:700;
      color:rgba(148,163,184,.9);
    }
    .name{
      font-size:16px;
      font-weight:700;
      letter-spacing:.2px;
    }
    .role{
      font-size:11px;
      color:var(--muted);
    }
    .statGrid{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      width:100%;
    }
    .stat{
      padding:10px 8px;
      border-radius:14px;
      background:rgba(15,23,42,.96);
      border:1px solid rgba(148,163,184,.6);
      font-size:11px;
      text-align:left;
    }
    .stat b{ display:block; font-size:13px; margin-bottom:2px; }

    /* Sections */
    section.block{
      margin-bottom:24px;
    }
    .sectionTitle{ font-size:16px; font-weight:700; }
    .sectionHint{ font-size:12px; color:var(--muted); }

    .twoCol{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:16px;
    }
    .card{
      background:var(--card);
      border-radius:var(--radius);
      border:1px solid var(--border);
      box-shadow:0 14px 40px rgba(0,0,0,.5);
      padding:16px 16px 14px;
      position:relative;
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:radial-gradient(520px 220px at 20% 0%, rgba(6,182,212,.12), transparent 60%);
      opacity:.7;
      pointer-events:none;
    }
    .card > *{ position:relative; z-index:1; }
    .cardTitle{ font-size:13px; font-weight:700; margin-bottom:6px; }
    .cardText{ font-size:12px; color:var(--muted); line-height:1.8; }

    /* Timeline */
    .timeline{
      list-style:none;
      padding-left:0;
      margin:4px 0 0;
      border-left:1px solid rgba(148,163,184,.5);
    }
    .timeline li{
      padding:8px 0 8px 12px;
      position:relative;
      font-size:12px;
      color:var(--muted);
    }
    .timeline li::before{
      content:"";
      position:absolute;
      left:-5px; top:11px;
      width:9px; height:9px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--b),var(--a));
      box-shadow:0 0 0 4px rgba(37,99,235,.3);
    }
    .timeline span{
      display:block;
      font-weight:600;
      color:#e5e7eb;
      margin-bottom:2px;
    }

    /* Skill chips */
    .chipGrid{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:6px;
    }
    .chip{
      font-size:11px;
      padding:5px 9px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.7);
      background:rgba(15,23,42,.96);
      color:rgba(226,232,240,.96);
    }

    /* Animated gradient bar */
    .gradBar{
      margin:18px 0 16px;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--b),var(--a),var(--e),var(--c),var(--d));
      background-size:200% 100%;
      animation:gradMove 6s linear infinite;
    }
    @keyframes gradMove{
      from{ background-position:0% 50%; }
      to{ background-position:100% 50%; }
    }

    /* CTA bottom */
    .bottomCTA{
      margin:16px 0 26px;
      padding:14px 16px;
      border-radius:20px;
      background:linear-gradient(135deg, rgba(34,197,94,.15), rgba(6,182,212,.18));
      border:1px solid rgba(34,197,94,.5);
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      font-size:12px;
    }

    /* Responsive */
    @media(max-width:900px){
      .hero{ grid-template-columns:1fr; }
      .twoCol{ grid-template-columns:1fr; }
    }
    @media(max-width:640px){
      .topbar{ flex-direction:column; align-items:flex-start; gap:10px; }
      .nav{ align-self:flex-end; }
      .panel{ padding:18px 16px; }
      .card{ padding:14px 12px; }
      .bottomCTA{ flex-direction:column; align-items:flex-start; }
    }