* { margin:0; padding:0; box-sizing:border-box; }
  html { font-family:"Segoe UI", sans-serif; scroll-behavior:smooth; }

body { 
    background: radial-gradient(circle at top, #222 0, #090909 55%, #050505 100%); 
    color:#fff; 
    transition: background 0.4s, color 0.4s; 
  }
  body.light { 
    background: radial-gradient(circle at top, #ffffff 0, #e7e7e7 50%, #d8d8d8 100%); 
    color:#000; 
  }

  footer {
    text-align: center;
    padding: 50px 0;
    color: #666;
    font-size: 15px;
    margin-top: 60px;
  }
    /* Sections */
  section{ 
    min-height:100vh; max-width:900px; margin:auto; padding:120px 20px 60px; 
  }


  /* Profile */
  .profile-pic{
    width:150px; height:150px; border-radius:50%; object-fit:cover;
    border:4px solid rgba(72,198,239,0.9); 
    box-shadow:
      0 0 0 6px rgba(72,198,239,0.18),
      0 18px 45px rgba(0,0,0,0.7);
  }

  /* Generic glassy card */
  .card{
    background:linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    padding:24px; 
    border-radius:24px; 
    margin-bottom:25px;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.16);
    box-shadow:0 12px 35px rgba(0,0,0,0.45);
    position:relative;
    overflow:hidden;
    transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  }
  body.light .card{ 
    background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(245,245,245,0.9)); 
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
  }

  .card::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:radial-gradient(circle at top left, rgba(72,198,239,0.22), transparent 55%);
    opacity:0;
    transition:opacity 0.25s ease;
    pointer-events:none;
  }

  /* subtle hover effect on cards */
  .card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(0,0,0,0.7);
    border-color:rgba(72,198,239,0.5);
    background:linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  }
  body.light .card:hover{
    box-shadow:0 16px 42px rgba(0,0,0,0.18);
    background:linear-gradient(135deg, #ffffff, #f0f0f0);
  }
  .card:hover::before{
    opacity:1;
  }

  /* Timeline */
  .timeline{ position:relative; margin:40px 0; }
  .timeline::before{ 
    content:""; position:absolute; left:20px; top:0; width:3px; height:100%; 
    background:linear-gradient(180deg,#48c6ef,#6f86ff); 
    border-radius:999px;
  }
  .timeline-item{ 
    margin-left:60px; margin-bottom:40px; position:relative; 
    padding-left:6px;
  }
  .timeline-item::before{ 
    content:""; position:absolute; left:-42px; top:5px; width:16px; height:16px; 
    background:radial-gradient(circle at 30% 30%, #ffffff, #48c6ef); 
    border-radius:50%; 
    box-shadow:0 0 0 5px rgba(72,198,239,0.25);
  }

  .resume-btn{
    padding:12px 20px; 
    background:linear-gradient(135deg,#48c6ef,#6f86ff); 
    color:#000; font-weight:600;
    border-radius:16px; text-decoration:none; display:inline-block; margin-top:20px;
    box-shadow:0 12px 30px rgba(0,0,0,0.45);
    border:1px solid rgba(255,255,255,0.2);
    transition:transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  }
  .resume-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(0,0,0,0.7);
    filter:brightness(1.05);
  }

  /* Skills grid */
  #skills h2{ margin-bottom:10px; }
  .skills-grid{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
  }
  #skills .card{
    margin-bottom:0;
  }

  /* Certificates cards clickable */
  .cert-card{
    cursor:pointer;
  }
  .cert-card:hover{
    transform:translateY(-3px);
  }

  /* Modal styles */
  .modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2000;
    visibility:hidden;
    opacity:0;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .modal.show{
    visibility:visible;
    opacity:1;
  }
  .modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .modal-content{
    position:relative;
    max-width:min(90vw, 800px);
    width:90vw;
    max-height:90vh;
    padding:18px 18px 24px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(20,20,20,0.95), rgba(40,40,40,0.9));
    border:1px solid rgba(255,255,255,0.18);
    box-shadow:0 22px 60px rgba(0,0,0,0.8);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    display:flex;
    flex-direction:column;
    z-index:1;
  }
  body.light .modal-content{
    background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,240,240,0.96));
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:0 22px 60px rgba(0,0,0,0.18);
  }

  .modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    gap:12px;
  }
  .modal-title{
    font-size:18px;
    font-weight:600;
  }
  .modal-close{
    border:none;
    background:transparent;
    font-size:24px;
    cursor:pointer;
    line-height:1;
    padding:4px 8px;
    border-radius:999px;
  }
  .modal-close:hover{
    background:rgba(255,255,255,0.09);
  }
  body.light .modal-close:hover{
    background:rgba(0,0,0,0.06);
  }

  .modal-body{
    overflow:auto;
  }

  #certModalImg{
    width:100%;
    height:auto;
    max-height:65vh;
    object-fit:contain;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,0.6);
    background:#111;
  }
  body.light #certModalImg{
    background:#f5f5f5;
    box-shadow:0 12px 30px rgba(0,0,0,0.16);
  }

  @media (max-width:600px){
    .theme-toggle{
      top: 16px;
      left: 12px;
      padding:4px 8px;
    }
    nav ul{ gap:20px; font-size:14px; }
    nav a{ font-size:16px; }
    .modal-content{
      padding:14px 14px 20px;
    }
  }