/* ===== THEME VARIABLES ===== */
:root[data-theme="dark"] {
  --bg:     #040d18;
  --bg2:    #081526;
  --bg3:    #0c1c33;
  --card:   #0b1a30;
  --border: rgba(0,210,255,0.14);
  --text:   #dff0ff;
  --text2:  #7aadcc;
  --accent: #00d2ff;
  --a2:     #0062ff;
  --a3:     #00ffc3;
  --glow:   rgba(0,210,255,0.28);
  --shad:   rgba(0,0,0,0.55);
  --nav-bg: rgba(4,13,24,0.94);
}
:root[data-theme="light"] {
  --bg:     #eef6ff;
  --bg2:    #ddeeff;
  --bg3:    #cce4ff;
  --card:   #ffffff;
  --border: rgba(0,100,220,0.18);
  --text:   #091525;
  --text2:  #3a6080;
  --accent: #0062ff;
  --a2:     #004ecc;
  --a3:     #00b894;
  --glow:   rgba(0,98,255,0.18);
  --shad:   rgba(0,60,160,0.1);
  --nav-bg: rgba(238,246,255,0.97);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',sans-serif;
  background:var(--bg);color:var(--text);
  overflow-x:hidden;transition:background .4s,color .4s;
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}

/* ===== NAVBAR ===== */
.vkp-nav{
  position:fixed;top:0;width:100%;z-index:1050;
  background:var(--nav-bg);backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
  height:66px;display:flex;align-items:center;
  padding:0 5%;gap:16px;transition:background .3s;
}
.vkp-logo{
  font-family:'JetBrains Mono',monospace;
  font-size:1.12rem;font-weight:700;
  color:var(--accent);letter-spacing:2px;
  text-decoration:none;white-space:nowrap;
}
.vkp-logo span{color:var(--text)}
.nav-desktop{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.nav-desktop a{
  font-size:.8rem;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text2);text-decoration:none;
  position:relative;padding-bottom:3px;transition:color .3s;
}
.nav-desktop a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:2px;background:var(--accent);transition:width .3s;
}
.nav-desktop a:hover{color:var(--accent)}
.nav-desktop a:hover::after{width:100%}

/* Theme btn */
.theme-btn{
  width:38px;height:38px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  color:var(--accent);font-size:.92rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .3s;flex-shrink:0;
}
.theme-btn:hover{background:var(--accent);color:var(--bg);transform:rotate(22deg)}

/* Hamburger btn */
.ham-btn{
  width:38px;height:38px;border-radius:6px;
  background:var(--card);border:1px solid var(--border);
  color:var(--accent);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  cursor:pointer;transition:all .3s;flex-shrink:0;
  display:none;
}
.ham-btn span{
  display:block;width:20px;height:2px;
  background:var(--accent);border-radius:2px;
  transition:all .3s;
}
.ham-btn.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.ham-btn.open span:nth-child(2){opacity:0}
.ham-btn.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile drawer */
.mobile-drawer{
  position:fixed;top:66px;left:0;right:0;z-index:1040;
  background:var(--bg);border-bottom:1px solid var(--border);
  overflow:hidden;max-height:0;
  transition:max-height .38s cubic-bezier(.4,0,.2,1);
}
.mobile-drawer.open{max-height:400px}
.mobile-drawer ul{
  list-style:none;margin:0;padding:8px 0 16px;
  display:flex;flex-direction:column;
}
.mobile-drawer a{
  display:block;padding:13px 5%;
  font-size:.95rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--text2);text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:color .2s,background .2s;
}
.mobile-drawer li:last-child a{border-bottom:none}
.mobile-drawer a:hover{color:var(--accent);background:rgba(0,210,255,.05)}

/* ===== HERO ===== */
.hero-sec{
  min-height:100vh;display:flex;align-items:center;
  padding:100px 5% 70px;position:relative;overflow:hidden;
}
.h-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 60% at 68% 50%,rgba(0,98,255,.11) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 80%,rgba(0,210,255,.07) 0%,transparent 50%);
}
.h-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:55px 55px;opacity:.35;
}
.h-content{position:relative;z-index:2}
.h-eye{
  font-family:'JetBrains Mono',monospace;
  font-size:.76rem;color:var(--accent);
  letter-spacing:3px;text-transform:uppercase;
  display:flex;align-items:center;gap:11px;margin-bottom:1.1rem;
}
.h-eye::before{content:'';width:34px;height:1px;background:var(--accent)}
.h-name{
  font-size:clamp(2.3rem,5.2vw,4.3rem);
  font-weight:900;line-height:1.08;
  margin-bottom:.4rem;letter-spacing:-1px;
}
.h-name .clr{color:var(--accent)}
.h-role{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(.86rem,1.9vw,1.02rem);
  color:var(--text2);margin-bottom:1.4rem;letter-spacing:1px;
}
.blink{animation:blink 1s infinite;color:var(--accent)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.h-desc{
  font-size:.95rem;color:var(--text2);
  line-height:1.88;max-width:490px;
  margin-bottom:2.2rem;font-weight:300;
}
.vbtn{
  padding:13px 28px;border-radius:5px;
  font-family:'Outfit',sans-serif;
  font-weight:700;font-size:.86rem;
  letter-spacing:.8px;cursor:pointer;
  text-decoration:none;display:inline-flex;
  align-items:center;gap:8px;
  transition:all .3s;border:none;
}
.vbtn-fill{background:var(--accent);color:var(--bg);box-shadow:0 0 26px var(--glow)}
.vbtn-fill:hover{transform:translateY(-3px);box-shadow:0 0 44px var(--glow);color:var(--bg)}
.vbtn-out{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.vbtn-out:hover{background:var(--accent);color:var(--bg);transform:translateY(-3px)}
.h-ring-wrap{width:clamp(200px,30vw,380px);aspect-ratio:1}
/*
.h-ring{
  width:100%;height:100%;border-radius:50%;
  background:conic-gradient(var(--accent),var(--a2),var(--a3),var(--accent));
  padding:3px;animation:spin 9s linear infinite;
  box-shadow:0 0 50px var(--glow);
}
  */

  .h-ring{
  width:100%;
  height:100%;
  border-radius:50%;
  position:relative; /* IMPORTANT */
  background:conic-gradient(var(--accent),var(--a2),var(--a3),var(--accent));
  padding:4px;
  animation:spin 9s linear infinite;
  box-shadow:0 0 50px var(--glow);
}

/* @keyframes spin{to{transform:rotate(360deg)}} */

/*
.h-ring-in{
  width:100%;height:100%;border-radius:50%;
  background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(3rem,8vw,6rem);color:var(--accent);
  animation:spin 9s linear infinite reverse;
}
*/

.h-ring-in{
  position:absolute;
  inset:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;

  /* glass overlay */
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(0px);

  font-size:clamp(2.5rem,6vw,4rem);
  color:var(--accent);

  animation:spin 9s linear infinite reverse;
}

.h-ring:hover .hero-img img{
  transform:scale(1.08);
  transition:.5s;
}

.h-ring:hover{
  box-shadow:0 0 80px var(--glow);
}

.scroll-hint{
  position:absolute;bottom:26px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--text2);font-size:.68rem;
  font-family:'JetBrains Mono',monospace;letter-spacing:2px;
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}

/* ===== SECTIONS ===== */
.vsec{padding:96px 5%}
.vsec-alt{background:var(--bg2)}
.sec-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;color:var(--accent);
  letter-spacing:4px;text-transform:uppercase;
  display:block;margin-bottom:9px;
}
.sec-title{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:800;line-height:1.15;letter-spacing:-.4px;
}
.sec-title .clr{color:var(--accent)}
.sec-line{
  width:54px;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--a3));
  border-radius:2px;margin:13px auto 0;
}

/* ===== HERO IMAGE (optional) ===== */
/*
.hero-img-wrap{
  width:clamp(220px,28vw,350px);
  aspect-ratio:1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}


.hero-img-wrap::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:conic-gradient(var(--accent),var(--a2),var(--a3),var(--accent));
  animation:spin 6s linear infinite;
  z-index:0;
  filter:blur(8px);
}

.hero-img::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(transparent,rgba(0,0,0,.25));
}


.hero-img{
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  z-index:2;
  border:3px solid var(--bg);
  box-shadow:0 0 30px var(--glow);
}


.hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}


.hero-img:hover img{
  transform:scale(1.08);
}

.hero-img-wrap{
  animation:float 4s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
*/
.hero-img{
  position:absolute;
  inset:4px; /* space from ring */
  border-radius:50%;
  overflow:hidden;
  z-index:1;
}

.hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.5) contrast(1.2);
}

@media (max-width: 992px){
  
  .hero-sec > div{
    flex-direction:column;
    text-align:center;
    gap:40px;
  }

  .h-content{
    order:1;
  }

  .h-ring-wrap{
    order:2;
    width:220px;
    margin:auto;
  }

}

@media (max-width: 576px){

  .h-ring-wrap{
    width:180px;
  }

  .h-name{
    font-size:2rem;
  }

  .h-desc{
    font-size:.85rem;
  }

}

@media (max-width: 768px){
  .h-ring{
    animation:spin 14s linear infinite;
  }
}

/* ===== ABOUT ===== */
.ainfo{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.atile{
  background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:14px 17px;transition:all .3s;
}
.atile:hover{border-color:var(--accent);transform:translateY(-2px)}
.atile-lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;color:var(--accent);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;
}
.atile-val{font-size:.88rem;font-weight:600}

/* ===== SKILLS ===== */
.sk-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:13px;padding:24px 26px;
  transition:all .3s;position:relative;overflow:hidden;
}
.sk-card::before{
  content:'';position:absolute;top:0;left:0;
  width:100%;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--a3));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.sk-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:0 16px 36px var(--shad)}
.sk-card:hover::before{transform:scaleX(1)}
.sk-ico{font-size:1.85rem;margin-bottom:11px}
.sk-row{display:flex;justify-content:space-between;margin-bottom:9px;font-weight:700;font-size:.91rem}
.sk-pct{color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:.86rem}
.sk-bg{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.sk-bar{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--a2),var(--accent));
  width:0;transition:width 1.5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px var(--glow);
}

/* ===== TIMELINE ===== */
.timeline{position:relative;max-width:760px;margin:0 auto}
.timeline::before{
  content:'';position:absolute;
  left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--accent),var(--a3));
  transform:translateX(-50%);
}
.tl-item{display:flex;margin-bottom:46px;position:relative}
.tl-item:nth-child(even){flex-direction:row-reverse}
.tl-dot{
  position:absolute;left:50%;top:20px;
  transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 16px var(--glow);z-index:2;
  animation:pdot 2s ease-in-out infinite;
}
@keyframes pdot{0%,100%{box-shadow:0 0 7px var(--glow)}50%{box-shadow:0 0 20px var(--accent)}}
.tl-card{
  width:45%;background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;padding:20px 22px;transition:all .3s;
}
.tl-item:nth-child(odd)  .tl-card{margin-right:auto}
.tl-item:nth-child(even) .tl-card{margin-left:auto}
.tl-card:hover{border-color:var(--accent);transform:scale(1.02)}
.tl-yr{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--accent);letter-spacing:2px;margin-bottom:6px}
.tl-ttl{font-weight:700;font-size:.98rem;margin-bottom:3px}
.tl-sub{color:var(--text2);font-size:.83rem}

/* ===== PROJECTS ===== */
.pj-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:13px;overflow:hidden;transition:all .4s;
}
.pj-card:hover{transform:translateY(-7px);box-shadow:0 26px 50px var(--shad);border-color:var(--accent)}
.pj-thumb{
  height:168px;
  background:linear-gradient(135deg,var(--bg3),var(--bg2));
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;position:relative;overflow:hidden;
}
.pj-ov{
  position:absolute;inset:0;
  background:rgba(0,210,255,.08);
  display:flex;align-items:center;justify-content:center;gap:12px;
  opacity:0;transition:opacity .3s;z-index:2;
}
.pj-card:hover .pj-ov{opacity:1}
.pj-lnk{
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;text-decoration:none;transition:transform .3s;
}
.pj-lnk:hover{transform:scale(1.15)}
.pj-body{padding:20px}
.tbadge{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:.66rem;font-family:'JetBrains Mono',monospace;
  background:rgba(0,210,255,.08);color:var(--accent);
  border:1px solid rgba(0,210,255,.18);letter-spacing:.7px;
  margin:0 3px 5px 0;
}
.pj-ttl{font-size:1.02rem;font-weight:700;margin:8px 0 8px}
.pj-desc{color:var(--text2);font-size:.84rem;line-height:1.72}

/* ===== REVIEWS ===== */
.rv-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:13px;padding:26px;transition:all .3s;
}
.rv-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 16px 34px var(--shad)}
.rv-q{font-size:2.6rem;color:var(--accent);opacity:.42;line-height:1;font-family:serif;margin-bottom:12px}
.rv-stars{color:#ffd700;font-size:.8rem;margin-bottom:11px}
.rv-txt{color:var(--text2);font-style:italic;line-height:1.78;font-size:.88rem;margin-bottom:20px;font-weight:300}
.rv-av{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--a2),var(--a3));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;font-size:.95rem;flex-shrink:0;
}
.rv-name{font-weight:700;font-size:.86rem}
.rv-role{color:var(--text2);font-size:.74rem}

/* ===== CONTACT ===== */
.ct-tile{
  background:var(--card);border:1px solid var(--border);
  border-radius:9px;padding:14px 18px;
  display:flex;align-items:center;gap:14px;
  margin-bottom:14px;transition:all .3s;
}
.ct-tile:hover{border-color:var(--accent);transform:translateX(5px)}
.ct-tile i{color:var(--accent);font-size:1.1rem;width:20px;text-align:center}
.ct-lbl{font-family:'JetBrains Mono',monospace;font-size:.63rem;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:2px}
.ct-val{font-size:.86rem}
.ct-val a{color:var(--text);text-decoration:none;transition:color .3s}
.ct-val a:hover{color:var(--accent)}
.form-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:15px;padding:36px;
}
.vlbl{
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;color:var(--accent);
  letter-spacing:2px;text-transform:uppercase;
  display:block;margin-bottom:6px;
}
.vinput{
  width:100%;padding:12px 15px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:7px;color:var(--text);
  font-family:'Outfit',sans-serif;font-size:.91rem;
  outline:none;transition:all .3s;
}
.vinput:focus{border-color:var(--accent);box-shadow:0 0 16px var(--glow)}
textarea.vinput{height:120px;resize:vertical}

/* ===== FOOTER ===== */
.vfooter{
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:36px 5%;text-align:center;
}
.flogo{font-family:'JetBrains Mono',monospace;font-size:1.2rem;font-weight:700;color:var(--accent);margin-bottom:13px}
.soc-a{
  width:40px;height:40px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  color:var(--text2);display:inline-flex;
  align-items:center;justify-content:center;
  font-size:.9rem;text-decoration:none;
  margin:0 5px;transition:all .3s;
}
.soc-a:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);transform:translateY(-3px)}

/* ===== UTILS ===== */
.vtoast{
  position:fixed;bottom:26px;right:26px;z-index:9999;
  background:var(--accent);color:var(--bg);
  padding:12px 20px;border-radius:7px;
  font-weight:700;font-size:.86rem;
  transform:translateY(100px);opacity:0;transition:all .4s;
}
.vtoast.show{transform:translateY(0);opacity:1}
.btop{
  position:fixed;bottom:26px;left:26px;z-index:999;
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:var(--bg);
  border:none;cursor:pointer;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:all .3s;box-shadow:0 0 16px var(--glow);
}
.btop.show{opacity:1;pointer-events:auto}
.btop:hover{transform:translateY(-4px)}
.fade-up{opacity:0;transform:translateY(36px);transition:opacity .7s,transform .7s}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:991px){
  .nav-desktop{display:none!important}
  .ham-btn{display:flex!important}
  /* .h-ring-wrap{display:none!important} */
  .timeline::before{left:16px}
  .tl-item,.tl-item:nth-child(even){flex-direction:column}
  .tl-card,.tl-item:nth-child(even) .tl-card{width:calc(100% - 40px);margin-left:40px}
  .tl-dot{left:16px}
  .form-box{padding:22px}
}
@media(max-width:575px){
  .vsec{padding:68px 5%}
  .ainfo{grid-template-columns:1fr 1fr}
}


/* ===== SCROLL HINT ===== */
.scroll-hint{
  position:absolute;bottom:26px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--text2);font-size:.68rem;
  font-family:'JetBrains Mono',monospace;letter-spacing:2px;
  animation:bob 2s ease-in-out infinite;
  cursor:pointer;                        /* ← yeh add karo */
  user-select:none;                      /* ← yeh bhi */
  transition:color .3s;                  /* ← aur yeh */
}
.scroll-hint:hover{
  color:var(--accent);                   /* ← hover effect */
}

/* ===== Project style New ===== */
.pj-thumb-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10; /* 👈 FIXED RATIO (NO STRETCH) */
  overflow: hidden;
  border-radius: 12px;
  background: #0a1a2f; /* fallback bg */
}

/* IMAGE FIX */
.pj-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 👈 main fix */
  object-position: top; /* 👈 top focus (school sites ke liye best) */
  transition: transform 0.4s ease;
}

/* HOVER EFFECT */
.pj-thumb-img:hover img {
  transform: scale(1.05);
}

/* OVERLAY */
.pj-ov {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: 0.3s;
}

.pj-thumb-img:hover .pj-ov {
  opacity: 1;
}


@media (max-width: 768px) {
  .pj-thumb-img {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .pj-thumb-img {
    height: 140px;
  }
}

.vbtn-fill {
  transition: 0.3s;
}
.vbtn-fill:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* ===== Review SWIPER ===== */
/* .swiper-slide {
  opacity: 0.5;
  transform: scale(0.9);
  transition: 0.4s;
}

.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}


.rv-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
}

.swiper {
  cursor: grab;
}
.swiper:active {
  cursor: grabbing;
} */