:root{
    --bg:#090B14; --bg2:#111827; --card:#161B22;
    --orange:#FF8C1A; --orangeHover:#FFA733;
    --txt:#F8FAFC; --txt2:#9CA3AF; --bord:rgba(255,255,255,0.08);
  }
  *{scrollbar-width: thin; scrollbar-color: var(--orange) var(--bg2);}
  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-track{background:var(--bg2);}
  ::-webkit-scrollbar-thumb{background:var(--orange); border-radius:8px;}

  html{scroll-behavior:smooth;}
  body{
    background:var(--bg); color:var(--txt); font-family:'Inter',sans-serif;
    overflow-x:hidden; cursor:none;
  }
  @media (max-width: 768px){ body{cursor:auto;} .cursor-dot,.cursor-ring{display:none;} }

  h1,h2,h3,h4,.font-heading{font-family:'Poppins',sans-serif;}



  

  /* ye background ke liye hain*/
  .grid-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);




  }



  

  /* Floating orange ke liye hain */
  .blob{
    position:absolute; border-radius:50%; filter: blur(110px);
    background: radial-gradient(circle, rgba(255,140,26,0.35), transparent 70%);
    pointer-events:none; z-index:0;
  }
  .blob-anim{ animation: floatBlob 12s ease-in-out infinite; }
  @keyframes floatBlob{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(30px,-40px) scale(1.1); }
  }


  .glass{
    background: rgba(22,27,34,0.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--bord);
  }

  /* isme card ke upper kaam hua ha9in  */
  .panel{
    background: var(--card);
    border: 1px solid var(--bord);
    border-radius: 20px;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .panel:hover{
    transform: translateY(-6px);
    border-color: rgba(255,140,26,0.5);
    box-shadow: 0 20px 60px -20px rgba(255,140,26,0.35);
  }

  /* Orange glow button ke liye h */
  .btn-glow{
    background: var(--orange);
    color:#0A0A0A;
    box-shadow: 0 0 0 rgba(255,140,26,0);
    transition: all .3s ease;
  }
  .btn-glow:hover{
    background: var(--orangeHover);
    box-shadow: 0 0 35px rgba(255,140,26,0.55);
    transform: translateY(-2px);
  }
  .btn-outline{
    border:1px solid var(--bord);
    color:var(--txt);
    transition: all .3s ease;
  }
  .btn-outline:hover{
    border-color: var(--orange);
    color: var(--orange);
    background: rgba(255,140,26,0.06);
  }

  .text-gradient{
    background: linear-gradient(90deg, #FF8C1A, #FFC98A);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }


  .nav-link{ position:relative; color:var(--txt2); transition:color .25s ease; }
  .nav-link::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0; height:1.5px;
    background:var(--orange); transition:width .25s ease;
  }
  .nav-link:hover{ color:var(--txt); }
  .nav-link:hover::after{ width:100%; }


  .cursor-dot{
    position:fixed; width:8px; height:8px; background:var(--orange);
    border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
    transition: opacity .2s ease;
  }
  .cursor-ring{
    position:fixed; width:34px; height:34px; border:1.5px solid rgba(255,140,26,0.6);
    border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%);
    transition: width .2s ease, height .2s ease, border-color .2s ease, background .2s ease;
  }
  .cursor-ring.active{ width:54px; height:54px; background: rgba(255,140,26,0.08); }


  #loader{
    position:fixed; inset:0; background:var(--bg); z-index:99999;
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
    transition: opacity .6s ease, visibility .6s ease;
  }
  .load-bar{ width:220px; height:2px; background:rgba(255,255,255,0.08); overflow:hidden; border-radius:2px; }
  .load-bar-fill{ height:100%; width:0%; background:var(--orange); box-shadow:0 0 12px var(--orange); }

  
  #scroll-progress{
    position:fixed; top:0; left:0; height:3px; background: linear-gradient(90deg,#FF8C1A,#FFA733);
    z-index:9997; width:0%; box-shadow: 0 0 10px rgba(255,140,26,0.6);
  }

  .reveal{ opacity:0; transform: translateY(28px); }

  .hero-layout{
    display:grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items:center;
    gap: clamp(2rem, 5vw, 4rem);
    text-align:left;
  }

  .hero-copy{ width:100%; }

  .hero-profile-figure{
    width:220px;
    height:220px;
    margin: 0 auto;
    border-radius: 12px;
    overflow:hidden;
    border:3px solid #ff9d2d;
    box-shadow: 0 0 26px rgba(255,157,45,0.45);
    animation: floatProfile 3.2s ease-in-out infinite;
    transition: transform .3s ease, box-shadow .3s ease;
  }

  .hero-profile-figure:hover{
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255,157,45,0.6);
  }

  .hero-profile-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius: 10px;
    transition: transform .3s ease;
  }

  @keyframes floatProfile{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  
  .type-cursor{ display:inline-block; width:2px; background: var(--orange); margin-left:2px; animation: blink 1s step-end infinite; }
  @keyframes blink{ 50%{ opacity:0; } }

  .skill-pill{
    background: rgba(255,140,26,0.06); border:1px solid var(--bord); color: var(--txt2);
    transition: all .25s ease;
  }
  .skill-pill:hover{ border-color: var(--orange); color: var(--orange); background: rgba(255,140,26,0.12); }

  .filter-btn.active{ background:var(--orange); color:#0A0A0A; }

  #projects, #upcoming-projects{ padding-top: 4.5rem; padding-bottom: 4.5rem; }
  #upcoming-projects{ background: rgba(17,24,39,0.28); }
  .upcoming-grid{ align-items:stretch; }
  .upcoming-card{
    position:relative; display:flex; flex-direction:column; overflow:hidden; min-height:100%;
    background: rgba(22,27,34,0.55); border:1px solid var(--bord); border-radius:20px;
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 24px 60px -32px rgba(0,0,0,0.8); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .upcoming-card:hover{
    transform: translateY(-8px); border-color: rgba(255,140,26,0.56);
    box-shadow: 0 24px 60px -26px rgba(255,140,26,0.24);
  }
  .upcoming-ribbon{
    position:absolute; top:16px; right:16px; z-index:2; padding:0.38rem 0.65rem; border-radius:999px;
    background: rgba(255,140,26,0.12); color:#F9D9A3; border:1px solid rgba(255,140,26,0.28);
    font-size:0.62rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  }

  .upcoming-illustration{
    position:relative; display:flex; align-items:center; justify-content:center; height:135px; overflow:hidden;
    background: linear-gradient(135deg, rgba(255,140,26,0.14), rgba(17,24,39,0.9));
    border-bottom:1px solid var(--bord);
  }
  .upcoming-illustration::before{
    content:""; position:absolute; inset:12px; border-radius:18px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04);
  }
  .upcoming-illustration span{
    position:relative; z-index:1; font-size:2.4rem; filter: drop-shadow(0 0 22px rgba(255,140,26,0.2));
    transition: transform .3s ease;
  }
  .upcoming-card:hover .upcoming-illustration span{ transform: scale(1.08); }

  .illustration-ai{ background: linear-gradient(135deg, rgba(255,140,26,0.16), rgba(128,90,213,0.14), rgba(17,24,39,0.9)); }
  .illustration-iot{ background: linear-gradient(135deg, rgba(255,140,26,0.18), rgba(12,74,110,0.12), rgba(17,24,39,0.9)); }
  .illustration-finance{ background: linear-gradient(135deg, rgba(255,140,26,0.15), rgba(16,185,129,0.12), rgba(17,24,39,0.9)); }

  .upcoming-body{ padding:1.1rem; display:flex; flex-direction:column; flex:1; }
  .upcoming-meta{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.6rem; }
  .status-badge{
    display:inline-flex; align-items:center; justify-content:center; padding:0.38rem 0.62rem; border-radius:999px; font-size:0.62rem; font-weight:700;
    border:1px solid rgba(255,255,255,0.08);
  }
  .status-badge.in-progress{ background: rgba(34,197,94,0.12); color:#9AE6B4; border-color: rgba(34,197,94,0.2); }
  .status-badge.research{ background: rgba(59,130,246,0.12); color:#BFDBFE; border-color: rgba(59,130,246,0.2); }
  .status-badge.planning{ background: rgba(255,140,26,0.12); color:#F9D9A3; border-color: rgba(255,140,26,0.2); }
  .upcoming-due{ color:var(--txt2); font-size:0.64rem; font-weight:600; }
  .upcoming-description{ margin:0 0 0.9rem; color:var(--txt2); line-height:1.6; font-size:0.82rem; }
  .upcoming-tech{ display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:auto; margin-bottom:0.9rem; }
  .upcoming-tech span{
    display:inline-flex; align-items:center; justify-content:center; padding:0.38rem 0.62rem; border-radius:999px; background: rgba(255,140,26,0.07);
    border:1px solid var(--bord); color:var(--txt2); font-size:0.66rem; font-weight:600;
  }
  .coming-soon-btn{
    width:100%; border:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color:var(--txt2); border-radius:999px; padding:0.7rem 0.9rem;
    font-size:0.68rem; font-weight:700; font-family:'Poppins',sans-serif; letter-spacing:0.04em; cursor:not-allowed; opacity:0.8;
  }

  #project-grid{ align-items:stretch; gap:1.2rem; }
  .project-card{
    position:relative; display:flex; flex-direction:column; overflow:hidden;
    background: rgba(22,27,34,0.55); border:1px solid var(--bord); border-radius:16px;
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 24px 60px -32px rgba(0,0,0,0.8); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .project-card:hover{
    transform: translateY(-8px); border-color: rgba(255,140,26,0.5);
    box-shadow: 0 24px 60px -24px rgba(255,140,26,0.28);
  }
  .project-card.featured{ position:relative; }
  @media (min-width: 768px){ .project-card.featured{ grid-column: span 2; } }

  .project-media{
    position:relative; height:170px; overflow:hidden; border-bottom:1px solid var(--bord);
    background: linear-gradient(135deg, rgba(255,140,26,0.12), rgba(17,24,39,0.8));
  }
  .project-card.featured .project-media{ height:220px; }
  .project-media::before{
    content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(9,11,20,0.18), rgba(9,11,20,0.52));
    z-index:1; pointer-events:none;
  }
  .project-screenshot{
    width:100%; height:100%; object-fit:cover; display:block; border-top-left-radius:20px; border-top-right-radius:20px;
    opacity:0; transition: transform .7s ease, opacity .5s ease, filter .4s ease;
    animation: projectFadeIn .7s ease forwards;
  }
  .project-media.is-loaded .project-screenshot{ opacity:1; }
  .project-card:hover .project-screenshot{ transform: scale(1.05); filter:saturate(1.08) contrast(1.04); }

  .project-body{ padding:1rem 1rem 0.9rem; display:flex; flex-direction:column; gap:0.7rem; }
  .project-header-row{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; }
  .project-card h3{ font-size:1.1rem !important; margin-bottom:0 !important; }
  .project-card.featured h3{ font-size:1.35rem !important; }
  .project-description{ color:var(--txt2); font-size:0.78rem; line-height:1.55; margin:0; }

  .project-achievement{
    display:flex; flex-direction:column; gap:0.3rem; padding:0.7rem 0.8rem; border-radius:14px;
    background: linear-gradient(135deg, rgba(255,140,26,0.12), rgba(255,201,138,0.06));
    border:1px solid rgba(255,140,26,0.18);
  }
  .project-award-badge{ color:#F9D9A3; font-weight:700; font-size:0.75rem; letter-spacing:0.02em; }
  .project-award-sub{ color:var(--txt2); font-size:0.68rem; line-height:1.5; }

  .project-tech-stack{ display:flex; flex-wrap:wrap; gap:0.38rem; margin-top:0.1rem; }
  .skill-pill{
    display:inline-flex; align-items:center; justify-content:center; padding:0.3rem 0.55rem; border-radius:999px;
    background: rgba(255,140,26,0.06); border:1px solid var(--bord); color:var(--txt2); font-size:0.62rem; font-weight:600;
    transition: all .25s ease;
  }
  .skill-pill:hover{ border-color: var(--orange); color: var(--orange); background: rgba(255,140,26,0.12); }

  .project-actions{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.05rem; }
  .project-actions a{
    display:inline-flex; align-items:center; justify-content:center; min-width:88px; padding:0.52rem 0.72rem; border-radius:999px;
    font-size:0.64rem; font-weight:700; font-family:'Poppins',sans-serif; letter-spacing:0.02em; text-transform:none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
  }
  .project-actions a:hover{ transform: translateY(-2px); box-shadow: 0 18px 28px -18px rgba(255,140,26,0.55); }
  .project-actions .btn-outline:hover{ border-color: var(--orange); color: var(--orange); background: rgba(255,140,26,0.06); }
  .project-actions .btn-glow:hover{ box-shadow: 0 16px 30px -18px rgba(255,140,26,0.8); }

  @keyframes projectFadeIn{ from { opacity:0; } to { opacity:1; } }

  #back-to-top{
    position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
    background:var(--card); border:1px solid var(--bord); display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition: all .3s ease; z-index:9996;
  }
  #back-to-top.show{ opacity:1; pointer-events:auto; }
  #back-to-top:hover{ border-color:var(--orange); box-shadow:0 0 24px rgba(255,140,26,0.4); }

  .timeline-line{ background: linear-gradient(to bottom, rgba(255,140,26,0.6), rgba(255,140,26,0.05)); }
  .timeline-dot{ box-shadow: 0 0 0 4px rgba(255,140,26,0.15); }

  input, textarea{
    background: var(--bg2); border:1px solid var(--bord); color:var(--txt);
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  input:focus, textarea:focus{
    outline:none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,140,26,0.15);
  }

  @media (min-width: 768px){
    .upcoming-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1280px){
    .upcoming-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 767px){
    .hero-layout{
      grid-template-columns: 1fr;
      text-align:center;
    }

    .hero-copy{
      text-align:center;
    }

    .hero-profile-figure{
      width:180px;
      height:180px;
      margin-top: 0.5rem;
    }

    .upcoming-meta{ align-items:flex-start; flex-direction:column; }
    .upcoming-ribbon{ top:12px; right:12px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }