/* RESET */
*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}
:root{
  --bg:#040713;--bg2:#080d20;
  --cyan:#00e5ff;--blue:#3b82f6;--purple:#8b5cf6;--pink:#ec4899;--green:#22c55e;
  --white:#f8fafc;--text:#dbe4f5;--muted:#94a3b8;
  --glass:rgba(12,20,43,.70);--border:rgba(255,255,255,.10);
}
html{overflow-x:hidden}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--white);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font-family:inherit}

/* ANIMATED BACKGROUND */
.animated-bg{
  position:fixed;inset:0;z-index:-20;overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%,rgba(0,229,255,.12),transparent 30%),
    radial-gradient(circle at 85% 25%,rgba(139,92,246,.12),transparent 30%),
    radial-gradient(circle at 50% 90%,rgba(236,72,153,.10),transparent 35%),
    var(--bg);
}
.grid{
  position:absolute;inset:-100px;
  background-image:
    linear-gradient(rgba(0,229,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.055) 1px,transparent 1px);
  background-size:55px 55px;
  transform:perspective(500px) rotateX(60deg) scale(1.5);
  transform-origin:center bottom;
  animation:gridMove 12s linear infinite;
}
@keyframes gridMove{
  from{transform:perspective(500px) rotateX(60deg) translateY(0) scale(1.5)}
  to{transform:perspective(500px) rotateX(60deg) translateY(55px) scale(1.5)}
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;animation:orbFloat 10s ease-in-out infinite}
.orb1{width:350px;height:350px;background:var(--cyan);left:-120px;top:-100px}
.orb2{width:400px;height:400px;background:var(--purple);right:-150px;top:25%;animation-delay:-3s}
.orb3{width:320px;height:320px;background:var(--pink);left:35%;bottom:-150px;animation-delay:-6s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(80px,-60px) scale(1.15)}
}
#particles{position:absolute;inset:0}
.particle{
  position:absolute;width:3px;height:3px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan),0 0 18px var(--cyan);
  animation:particleMove linear infinite,particleBlink ease-in-out infinite;
}
@keyframes particleMove{from{transform:translateY(110vh)}to{transform:translateY(-20vh)}}
@keyframes particleBlink{0%,100%{opacity:.15}50%{opacity:1}}
.mouse-glow{
  position:absolute;width:350px;height:350px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,229,255,.13),rgba(139,92,246,.05),transparent 70%);
  transform:translate(-50%,-50%);
}
#networkCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* CUSTOM CURSOR */
.cursor-dot,.cursor-ring{
  position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;
  opacity:0;transition:opacity .3s,width .25s,height .25s,background .25s,border-color .25s;
}
.cursor-dot{width:7px;height:7px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.cursor-ring{width:36px;height:36px;border:1.5px solid rgba(0,229,255,.55)}
.cursor-active .cursor-dot,.cursor-active .cursor-ring{opacity:1}
.cursor-hover .cursor-ring{width:58px;height:58px;border-color:var(--pink);background:rgba(236,72,153,.08)}
.cursor-hover .cursor-dot{background:var(--pink);box-shadow:0 0 12px var(--pink)}
.cursor-down .cursor-ring{width:26px;height:26px}
.click-ripple{
  position:fixed;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:9998;
  border:2px solid var(--cyan);transform:translate(-50%,-50%);animation:ripple .7s ease-out forwards;
}
@keyframes ripple{to{width:110px;height:110px;opacity:0;border-color:var(--purple)}}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}
@media(prefers-reduced-motion:reduce){
  #networkCanvas,.cursor-ring,.click-ripple{display:none}
  .orb,.grid,.particle{animation:none}
}

/* HEADER */
header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(4,7,19,.78);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.navbar{max-width:1200px;height:75px;margin:auto;padding:0 25px;display:flex;align-items:center;justify-content:space-between}
.logo{
  font-size:24px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple),var(--pink));
  background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradientText 6s infinite;
}
@keyframes gradientText{0%{background-position:0%}50%{background-position:100%}100%{background-position:0%}}
.nav-links{list-style:none;display:flex;align-items:center;gap:25px}
.nav-links a{color:#cbd5e1;font-size:14px;font-weight:600;transition:.3s}
.nav-links a:hover,.nav-links a.active{color:var(--cyan);text-shadow:0 0 12px rgba(0,229,255,.5)}
.nav-cv{
  padding:9px 17px;border-radius:25px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  color:#001018 !important;font-weight:800 !important;
}
.menu-btn{display:none;font-size:27px;cursor:pointer}
.theme-toggle{
  position:relative;width:42px;height:42px;border-radius:50%;cursor:pointer;flex-shrink:0;margin-left:18px;
  border:1px solid var(--border);background:rgba(255,255,255,.05);overflow:hidden;transition:.3s;
}
.theme-toggle:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(0,229,255,.25);transform:rotate(15deg)}
.theme-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .45s,opacity .45s}
.theme-icon.sun{transform:translateY(120%) rotate(90deg);opacity:0}
[data-theme="light"] .theme-icon.sun{transform:none;opacity:1}
[data-theme="light"] .theme-icon.moon{transform:translateY(-120%) rotate(-90deg);opacity:0}
body,header,.glass,.nav-links a,.btn,.social{transition:background-color .4s,color .4s,border-color .4s,box-shadow .4s,transform .3s}

/* COMMON */
.container{width:min(1150px,92%);margin:auto}
section{position:relative;padding:110px 0}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:clamp(32px,5vw,48px);margin-bottom:8px}
.section-title span{color:var(--cyan);text-shadow:0 0 15px rgba(0,229,255,.45)}
.section-title p{color:var(--muted)}
.glass{
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid var(--border);backdrop-filter:blur(18px);border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.20);
}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:110px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.status{
  display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:30px;
  color:var(--cyan);background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.20);
  font-size:13px;margin-bottom:20px;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.hero h1{font-size:clamp(50px,8vw,88px);line-height:.95;margin-bottom:20px}
.gradient-name{
  display:block;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple),var(--pink));
  background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradientText 6s infinite;
}
.hero h2{font-size:clamp(20px,3vw,30px);margin-bottom:18px}
.typing{color:var(--cyan);border-right:2px solid var(--cyan);padding-right:5px}
.hero p{max-width:650px;color:var(--muted);font-size:17px;margin-bottom:28px}

/* BUTTONS */
.buttons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:25px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;
  border:1px solid var(--border);transition:.3s;cursor:pointer;
}
.btn:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.30)}
.btn-primary{color:#001018;border:none;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.btn-secondary{color:white;background:rgba(255,255,255,.04)}

/* SOCIAL */
.socials{display:flex;gap:10px}
.social{
  width:45px;height:45px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.045);
  color:#dbeafe;transition:.3s;
}
.social svg{width:21px;height:21px;fill:currentColor}
.social:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-5px);box-shadow:0 0 20px rgba(0,229,255,.20)}

/* PHOTO */
.hero-photo{display:flex;justify-content:center}
.photo-ring{
  width:340px;height:340px;padding:7px;border-radius:50%;
  background:conic-gradient(var(--cyan),var(--blue),var(--purple),var(--pink),var(--cyan));
  animation:rotateRing 8s linear infinite;box-shadow:0 0 40px rgba(0,229,255,.20);
}
@keyframes rotateRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.photo-inner{width:100%;height:100%;padding:6px;border-radius:50%;background:#080c1d;animation:counterRotate 8s linear infinite}
@keyframes counterRotate{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.photo-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.photo-fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(135deg,#071827,#151038);color:var(--cyan);font-size:75px;font-weight:900;
}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.about-card{padding:30px}
.about-card h3{color:var(--cyan);font-size:24px;margin-bottom:15px}
.about-card p{color:var(--muted);margin-bottom:13px}
.info-list{display:grid;gap:11px;margin-top:15px}
.info{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.info span:first-child{color:#94a3b8}
.info span:last-child{text-align:right;font-weight:600}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.skill-card{padding:25px}
.skill-head{display:flex;justify-content:space-between;margin-bottom:9px}
.skill-head span{color:var(--cyan)}
.progress{height:9px;background:rgba(255,255,255,.08);border-radius:20px;overflow:hidden}
.progress-bar{
  width:0;height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple),var(--pink));
  box-shadow:0 0 15px rgba(0,229,255,.35);transition:width 1.5s ease;
}

/* PROJECTS */
.project-toolbar{display:flex;justify-content:flex-end;margin-bottom:25px}
.project{position:relative;padding:28px;overflow:hidden;transition:.4s}
.project:hover{transform:translateY(-8px);border-color:rgba(0,229,255,.30);box-shadow:0 25px 55px rgba(0,0,0,.35)}
.project::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),transparent);transition:.5s;
}
.project:hover::before{left:100%}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}
.project-icon{
  width:55px;height:55px;display:flex;align-items:center;justify-content:center;border-radius:15px;
  background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(139,92,246,.15));
  border:1px solid rgba(0,229,255,.15);font-size:26px;margin-bottom:18px;
}
.project h3{font-size:22px;margin-bottom:6px}
.project-tech{color:var(--cyan);font-size:13px;margin-bottom:13px}
.project p{color:var(--muted);font-size:14px;margin-bottom:18px}
.project-actions{display:flex;gap:9px;flex-wrap:wrap}
.project-link{
  display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;
  border:1px solid var(--border);font-size:12px;transition:.3s;
}
.project-link:hover{color:var(--cyan);border-color:var(--cyan)}
.remove-project{color:#fda4af;border-color:rgba(244,63,94,.20);background:transparent;cursor:pointer}
.remove-project:hover{color:#fb7185;border-color:#fb7185}

/* ADD PROJECT PANEL */
.add-project-panel{display:none;padding:30px;margin-bottom:30px;animation:panelIn .4s ease}
.add-project-panel.show{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}
.add-project-panel h3{color:var(--cyan);margin-bottom:20px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.form-group{display:flex;flex-direction:column;gap:7px}
.form-group.full{grid-column:1/-1}
.form-group label{color:#cbd5e1;font-size:13px;font-weight:600}
.form-group input,.form-group textarea{
  width:100%;padding:12px 14px;border-radius:9px;outline:none;color:white;
  background:rgba(0,0,0,.25);border:1px solid var(--border);
}
.form-group input:focus,.form-group textarea:focus{border-color:var(--cyan);box-shadow:0 0 15px rgba(0,229,255,.10)}
.form-group textarea{min-height:100px;resize:vertical}
.form-actions{display:flex;gap:10px;margin-top:18px}

/* CERTIFICATES */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cert{padding:25px;transition:.3s}
.cert:hover{transform:translateY(-7px);border-color:rgba(139,92,246,.35)}
.cert-icon{font-size:32px;margin-bottom:12px}
.cert h3{font-size:17px;margin-bottom:7px}
.cert p{color:var(--muted);font-size:13px;margin-bottom:15px}
.cert a{color:var(--cyan);font-size:13px;font-weight:700}

/* CTA */
.cta{padding:55px;text-align:center}
.cta h2{font-size:35px;margin-bottom:10px}
.cta p{max-width:700px;margin:0 auto 25px;color:var(--muted)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.contact-card{padding:25px;text-align:center;transition:.3s}
.contact-card:hover{transform:translateY(-6px);border-color:var(--cyan)}
.contact-card svg{width:30px;height:30px;fill:currentColor;margin-bottom:10px;color:var(--cyan)}
.contact-card h3{font-size:16px;margin-bottom:5px}
.contact-card p{color:var(--muted);font-size:12px;word-break:break-word}

/* TERMINAL */
.terminal{
  max-width:800px;margin:40px auto 0;overflow:hidden;
  border:1px solid rgba(0,229,255,.15);border-radius:15px;background:rgba(2,6,23,.88);
}
.terminal-top{display:flex;gap:7px;padding:12px 15px;background:rgba(255,255,255,.04)}
.terminal-dot{width:10px;height:10px;border-radius:50%;background:#64748b}
.terminal-body{padding:20px;font-family:monospace;font-size:13px;color:#94a3b8}
.terminal-line{margin-bottom:7px}
.green{color:#22c55e}
.cyan{color:var(--cyan)}
.purple{color:var(--purple)}

/* FOOTER */
footer{padding:35px 0;border-top:1px solid var(--border);text-align:center;color:#64748b;font-size:13px}
footer strong{color:var(--cyan)}

/* BACK TO TOP */
#topBtn{
  position:fixed;right:22px;bottom:22px;width:45px;height:45px;display:none;
  align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(0,229,255,.30);background:rgba(5,8,22,.85);
  color:var(--cyan);cursor:pointer;z-index:900;font-size:20px;
}

/* REVEAL */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:950px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .buttons,.socials{justify-content:center}
  .hero-photo{order:-1}
  .about-grid,.skills-grid,.projects-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .navbar{height:68px}
  .menu-btn{display:block;order:3;margin-left:14px}
  .theme-toggle{order:2;margin-left:auto}
  .nav-links{
    position:absolute;top:68px;left:0;width:100%;display:none;flex-direction:column;gap:0;
    background:rgba(4,7,19,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);
  }
  .nav-links.show{display:flex}
  .nav-links li{width:100%;padding:14px 25px;border-bottom:1px solid rgba(255,255,255,.05)}
  .hero h1{font-size:53px}
  .photo-ring{width:270px;height:270px}
  .cert-grid,.contact-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:auto}
  .cta{padding:35px 20px}
  .cta h2{font-size:27px}
  .info{flex-direction:column}
  .info span:last-child{text-align:left}
  .mouse-glow{display:none}
  .grid{opacity:.5}
}

/* LIGHT MODE */
[data-theme="light"]{
  --bg:#f1f5fb;--bg2:#e6edf8;
  --cyan:#0891b2;--blue:#2563eb;--purple:#7c3aed;--pink:#db2777;--green:#16a34a;
  --white:#0f172a;--text:#1e293b;--muted:#475569;
  --glass:rgba(255,255,255,.72);--border:rgba(15,23,42,.12);
}
[data-theme="light"] .animated-bg{
  background:
    radial-gradient(circle at 15% 20%,rgba(8,145,178,.12),transparent 30%),
    radial-gradient(circle at 85% 25%,rgba(124,58,237,.10),transparent 30%),
    radial-gradient(circle at 50% 90%,rgba(219,39,119,.08),transparent 35%),
    var(--bg);
}
[data-theme="light"] .grid{
  background-image:
    linear-gradient(rgba(8,145,178,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,145,178,.09) 1px,transparent 1px);
}
[data-theme="light"] .orb{opacity:.18}
[data-theme="light"] .mouse-glow{background:radial-gradient(circle,rgba(8,145,178,.12),rgba(124,58,237,.05),transparent 70%)}
[data-theme="light"] header{background:rgba(255,255,255,.78)}
[data-theme="light"] .nav-links a{color:#334155}
[data-theme="light"] .nav-links a.nav-cv{color:#fff !important}
[data-theme="light"] .glass{background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,255,255,.6));box-shadow:0 20px 50px rgba(15,23,42,.08)}
[data-theme="light"] .btn-primary{color:#fff}
[data-theme="light"] .btn-secondary{color:var(--white);background:rgba(15,23,42,.04)}
[data-theme="light"] .btn:hover{box-shadow:0 12px 30px rgba(15,23,42,.15)}
[data-theme="light"] .project:hover{box-shadow:0 25px 55px rgba(15,23,42,.14)}
[data-theme="light"] .social,[data-theme="light"] .theme-toggle,[data-theme="light"] .terminal-top{background:rgba(15,23,42,.04)}
[data-theme="light"] .photo-inner{background:#fff}
[data-theme="light"] .photo-fallback{background:linear-gradient(135deg,#e0f2fe,#ede9fe)}
[data-theme="light"] .info{border-bottom-color:rgba(15,23,42,.08)}
[data-theme="light"] .progress{background:rgba(15,23,42,.08)}
[data-theme="light"] .form-group input,[data-theme="light"] .form-group textarea{background:rgba(255,255,255,.8);color:var(--white)}
[data-theme="light"] .terminal-body{color:#475569}
[data-theme="light"] footer{color:#64748b}
[data-theme="light"] .particle{box-shadow:0 0 6px var(--cyan)}
[data-theme="light"] .cursor-ring{border-color:rgba(8,145,178,.6)}
@media(max-width:700px){
  [data-theme="light"] .nav-links{background:rgba(255,255,255,.97)}
  [data-theme="light"] .nav-links li{border-bottom-color:rgba(15,23,42,.06)}
}