:root{
      --bg: #0b0f14;
      --card: #0f1520;
      --muted: #97a3b6;
      --text: #e6ecf2;
      --brand: #4f8cff;
      --brand-2:#7f56d9;
      --accent: #19d3a5;
      --ring: rgba(79,140,255,.45);
      --shadow: 0 10px 20px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.3);
      --radius: 16px;
      --radius-lg: 24px;
      --maxw: 1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1200px 600px at 70% -20%, rgba(127,86,217,.25), transparent),
                  radial-gradient(800px 400px at 10% -10%, rgba(79,140,255,.18), transparent),
                  var(--bg);
      color:var(--text);
    }
    a{color:var(--brand); text-decoration:none}
    a:hover{text-decoration:underline}

    /* Layout */
    .container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(8px);
      background: linear-gradient(to bottom, rgba(11,15,20,.85), rgba(11,15,20,.55));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0}
    .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
    .logo{
      height: 50px;aspect-ratio: 4/1.5;overflow: hidden;margin-left: 10px;
    }.logo img{
      width: 100%;height: 100%;
    }
    nav ul{display:flex; list-style:none; margin:0; padding:0; gap:10px; flex-wrap:wrap;}
    nav a{
      display:inline-block; padding:10px 14px; border-radius:999px; color:var(--text);
    }
    nav a:hover{background:rgba(255,255,255,.06);text-decoration: none;}
    .cta{
      display:inline-grid; place-items:center; padding:10px 16px; border-radius:999px; 
      color:#fff;  font-size: 17px;
    }
    .cta:hover{filter:brightness(1.05)}

    /* Hero */
    .hero{padding:72px 0 40px}
    .hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center}
    .tag{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); font-size:13px}
    .tag .dot{width:8px; height:8px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 4px rgba(25,211,165,.18)}
    h1{font-size: clamp(28px, 4.2vw, 56px); line-height:1.08; margin:16px 0}
    .lead{color:var(--muted); font-size: clamp(16px, 2.2vw, 19px); max-width:60ch}
    .hero-cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}

    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
    }
    .stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:24px}
    .stat{padding:16px; border-radius:var(--radius); background:rgba(255,255,255,.04); text-align:center}
    .stat b{font-size:22px}
    .bgimage{
      width: 100%;height: 400px;background: url(../img/photo3.jpg) no-repeat;background-size: cover;
      position: relative;
    }
    .portrait{ 
      width: 100%;height: 400px; border-radius:22px; border:1px solid rgba(255,255,255,.1);
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);
    }.imgrole{ position: absolute;
      width: 250px;height: 250px;border-radius: 50%; 
      top: calc(50% - 125px);left:calc(50% - 125px);z-index: 1;
      background: url(../img/photo3.jpg); background-size: cover;background-repeat: no-repeat;
    }
    
    /* Sections */
    section{padding:56px 0}
    .section-title{font-size:26px; margin:0 0 18px}
    .muted{color:var(--muted)}

    /* Skills */
    .skills-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
    .skill{padding:16px; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
    .skill h3{margin:0 0 6px; font-size:16px}
    .bars{height:8px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden}
    .bar{height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--brand)); border-radius:99px; animation:grow 1.6s ease forwards}
    @keyframes grow{to{width:var(--w)}}

    /* Projects */
    .projects{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
    .project{display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
    .thumb{aspect-ratio: 16/10; border-radius:12px; background:
      radial-gradient(120px 80px at 80% 20%, rgba(127,86,217,.45), transparent),
      radial-gradient(120px 80px at 10% 90%, rgba(79,140,255,.4), transparent),
      linear-gradient(165deg, #0f1623, #0e1420 60%);
      border:1px solid rgba(255,255,255,.08);
    }
    .project h3{margin:0}
    .meta{display:flex; gap:8px; flex-wrap:wrap}
    .chip{font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); border:1px solid rgba(255,255,255,.08)}

    /* Experience */
    .timeline{display:grid; gap:14px}
    .exp{padding:16px; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
    .exp h3{margin:0 0 4px}

    /* Testimonials */
    .testimonials{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
    .quote{padding:18px; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-style:italic}

    /* Contact */
    .contact{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px}
    form{display:grid; gap:12px}
    .input{padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--text)}
    textarea.input{min-height:120px}
    .input:focus{outline:2px solid var(--ring); box-shadow:0 0 0 4px rgba(79,140,255,.15)}
    .btn{padding:12px 16px; border:0; border-radius:12px; font-weight:600; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; cursor:pointer}
    .btn:hover{filter:brightness(1.06)}

    

    /* Utilities */
    .grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
    .cta span{
      display: none;
    }
    /* Responsive */
    @media (max-width: 960px){
      .hero-grid, .contact{grid-template-columns: 1fr}
      .projects{grid-template-columns: repeat(2, 1fr)}
      .skills-grid{grid-template-columns: repeat(2, 1fr)}
      .testimonials{grid-template-columns: repeat(2, 1fr)}
    }
    @media (max-width: 640px){
      nav{
        width: 200px;
        position: absolute;
        background: #0b0f14;
        top: 75px;
        left: 0;
        height: 0px;
        overflow: hidden;
        transition: 0.6s all;
      }nav ul{
        flex-direction: column;
      }nav a{
        border-bottom: 1px solid white;
        width: 100%;
        border-radius: 0;
      }
      .projects, .skills-grid, .testimonials{grid-template-columns: 1fr}
      .stats{grid-template-columns: 1fr 1fr};
      
    }  @media (min-width: 640px){
      .contact100, .cta svg{
        display: none;
      }.cta{
        background:linear-gradient(135deg, var(--brand), var(--brand-2));
        font-weight:600;
        box-shadow: 0 8px 24px rgba(79,140,255,.35);
      }.cta span{
        display: block;
        text-decoration: none;
        color: white;
      }
    }


  
  .footer{
  
      background:#0d1117;
  
      padding:60px 8% 25px;
  
  }
  
  
  .footer-container{
  
      display:flex;
  
      justify-content:space-between;
  
      align-items:flex-start;
  
      gap:60px;
  
      flex-wrap:wrap;
  
  }
  
  
  .footer-logo{
  
      flex:1;
  
      min-width:260px;
  
  }
  
  
  .footer-logo h2{
  font-family: serif;
      color:#ffffff;
  
      font-size:32px;
  
      margin-bottom:14px;
  
  }
  
  
  .footer-logo p{
  
      color:#9ca3af;
  
      line-height:1.7;
  
      max-width:420px;
  
  }
  
  
  .footer-links,
  .footer-contact{
  
      display:flex;
  
      flex-direction:column;
  
      gap:14px;
  
  }
  
  
  .footer a{
  
      text-decoration:none;
  
      color:#bdbdbd;
  
      transition:.3s;
  
  }
  
  
  .footer a:hover{
  
      color:#3b82f6;
  
  }
  
  
  .footer-bottom{
  
      margin-top:45px;
  
      padding-top:25px;
  
      border-top:1px solid #222;
  
      display:flex;
  
      justify-content:space-between;
  
      align-items:center;
  
      flex-wrap:wrap;
  
      gap:20px;
  
  }
  
  
  .socials{
  
      display:flex;
  
      gap:20px;
  
      flex-wrap:wrap;
  
  }
  
  
  .footer-bottom p{
  
      color:#777;
  
  }
  
  
  /* MOBILE */
  
  @media (max-width:768px){
  
  .footer{
  
  padding:50px 25px;
  
  }
  
  .footer-container{
  
  flex-direction:column;
  
  gap:40px;
  
  }
  
  .footer-bottom{
  
  flex-direction:column;
  
  align-items:flex-start;
  
  }
  
  .socials{
  
  gap:15px;
  
  }
  
  .footer-logo h2{
  
  font-size:26px;
  
  }
  
  }