@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;700&display=swap');
:root{--bg:#0a0e1a;--fg:#e0e8ff;--accent:#4fa3ff;--accent2:#7c3aed;--accent3:#10b981;--card:rgba(255,255,255,0.04);--border:rgba(255,255,255,0.08);--glow:rgba(79,163,255,0.15)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.7;overflow-x:hidden}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;padding:12px 24px;background:rgba(10,14,26,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.site-header h1{font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--accent);white-space:nowrap}
.site-header h1 span{color:var(--accent2)}
.topnav{display:flex;gap:6px;flex-wrap:wrap}
.topnav a{color:var(--fg);text-decoration:none;font-size:0.82rem;padding:4px 10px;border-radius:6px;transition:all 0.3s;border:1px solid transparent;font-weight:500}
.topnav a:hover,.topnav a.active{background:var(--glow);border-color:var(--accent);color:var(--accent)}
#toggle-theme{background:transparent;border:1px solid var(--border);color:var(--fg);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:0.85rem;transition:all 0.3s}
#toggle-theme:hover{border-color:var(--accent);color:var(--accent)}
#search-box{background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--fg);padding:6px 12px;border-radius:8px;font-size:0.82rem;width:160px;transition:all 0.3s}
#search-box:focus{outline:none;border-color:var(--accent);width:220px}

/* HERO */
.hero{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#0a0e1a 0%,#1a1040 40%,#0a2540 70%,#0a0e1a 100%)}
.hero canvas{position:absolute;inset:0;z-index:0}
.hero-content{position:relative;z-index:2;text-align:center;padding:40px 20px;max-width:800px}
.hero h2{font-family:'JetBrains Mono',monospace;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 6s ease infinite;margin-bottom:8px}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero .subtitle{font-size:clamp(1rem,2.5vw,1.4rem);font-weight:300;opacity:0.85;margin-bottom:6px}
.hero .tagline{font-family:'JetBrains Mono',monospace;font-size:0.9rem;color:var(--accent3);opacity:0.7}
.hero .contact-row{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;font-size:0.88rem}
.hero .contact-row a{color:var(--accent);text-decoration:none;transition:color 0.3s}
.hero .contact-row a:hover{color:var(--accent2)}
.scroll-hint{margin-top:30px;font-size:1.5rem;animation:bounce 2s infinite;display:inline-block;cursor:pointer}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ISOMETRIC TOWERS */
.iso-section{padding:80px 24px;max-width:1200px;margin:0 auto}
.iso-section h2{font-family:'JetBrains Mono',monospace;font-size:1.8rem;margin-bottom:30px;text-align:center;position:relative}
.iso-section h2::after{content:'';display:block;width:60px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));margin:10px auto 0;border-radius:2px}

/* ISOMETRIC GRID */
.iso-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;perspective:1000px}
.iso-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;position:relative;overflow:hidden;transition:all 0.4s cubic-bezier(0.23,1,0.32,1);transform-style:preserve-3d}
.iso-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:16px 16px 0 0;opacity:0;transition:opacity 0.3s}
.iso-card:hover{transform:translateY(-8px) rotateX(2deg) rotateY(-1deg);box-shadow:0 20px 60px rgba(79,163,255,0.12),0 0 30px rgba(124,58,237,0.08);border-color:rgba(79,163,255,0.3)}
.iso-card:hover::before{opacity:1}
.iso-card .role{font-family:'JetBrains Mono',monospace;font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:4px}
.iso-card .company{font-size:0.92rem;color:var(--accent3);margin-bottom:4px;font-weight:600}
.iso-card .period{font-size:0.8rem;opacity:0.5;font-family:'JetBrains Mono',monospace;margin-bottom:10px}
.iso-card .desc{font-size:0.88rem;opacity:0.85;margin-bottom:12px;line-height:1.6}
.iso-card .projects{margin-top:8px}
.iso-card .projects h4{font-size:0.82rem;color:var(--accent2);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.iso-card .projects p{font-size:0.85rem;opacity:0.8;margin-bottom:6px}
.iso-card .tech-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.iso-card .tech-tags span{background:rgba(79,163,255,0.1);color:var(--accent);padding:3px 10px;border-radius:20px;font-size:0.72rem;font-family:'JetBrains Mono',monospace;border:1px solid rgba(79,163,255,0.2);transition:all 0.3s}
.iso-card .tech-tags span:hover{background:rgba(79,163,255,0.25);transform:scale(1.05)}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.skill-category{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
.skill-category h3{font-family:'JetBrains Mono',monospace;font-size:0.95rem;color:var(--accent2);margin-bottom:16px}
.skill-bar{margin-bottom:12px}
.skill-bar .label{display:flex;justify-content:space-between;font-size:0.82rem;margin-bottom:4px}
.skill-bar .label span:last-child{opacity:0.5;font-family:'JetBrains Mono',monospace}
.skill-bar .track{height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden}
.skill-bar .fill{height:100%;border-radius:4px;transition:width 1.5s cubic-bezier(0.23,1,0.32,1);width:0}
.fill-db{background:linear-gradient(90deg,#4fa3ff,#7c3aed)}
.fill-code{background:linear-gradient(90deg,#10b981,#4fa3ff)}
.fill-infra{background:linear-gradient(90deg,#f59e0b,#ef4444)}

/* EDUCATION */
.edu-timeline{position:relative;padding-left:30px}
.edu-timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),var(--accent2),var(--accent3))}
.edu-item{position:relative;margin-bottom:20px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:12px;transition:all 0.3s}
.edu-item:hover{border-color:rgba(79,163,255,0.3);transform:translateX(4px)}
.edu-item::before{content:'';position:absolute;left:-26px;top:20px;width:12px;height:12px;background:var(--accent);border-radius:50%;border:2px solid var(--bg)}
.edu-item .year{font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--accent);margin-bottom:4px}
.edu-item .title{font-weight:600;font-size:0.95rem;margin-bottom:2px}
.edu-item .detail{font-size:0.85rem;opacity:0.7}

/* INTERESTS */
.interests-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.interest-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;transition:all 0.3s}
.interest-card:hover{border-color:rgba(16,185,129,0.4);transform:translateY(-4px)}
.interest-card .emoji{font-size:2rem;margin-bottom:8px;display:block}
.interest-card h4{font-family:'JetBrains Mono',monospace;font-size:0.9rem;color:var(--accent3);margin-bottom:6px}
.interest-card p{font-size:0.85rem;opacity:0.8;line-height:1.6}

/* CONTACT SECTION */
.contact-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.contact-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 30px;text-align:center;transition:all 0.3s;min-width:200px}
.contact-item:hover{border-color:var(--accent);transform:translateY(-4px)}
.contact-item .icon{font-size:1.8rem;margin-bottom:8px;display:block}
.contact-item .label{font-size:0.78rem;opacity:0.5;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.contact-item .value{font-size:0.92rem;font-weight:600}
.contact-item a{color:var(--accent);text-decoration:none}

/* FOOTER */
.site-footer{text-align:center;padding:40px 20px;border-top:1px solid var(--border);margin-top:60px}
.site-footer small{opacity:0.4;font-size:0.8rem}

/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s cubic-bezier(0.23,1,0.32,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:768px){
  .iso-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .hero h2{font-size:2rem}
  .topnav{gap:4px}
  .topnav a{font-size:0.75rem;padding:3px 6px}
  #search-box{width:120px}
}
@media(max-width:480px){
  .site-header{padding:10px 12px}
  .iso-section{padding:40px 12px}
  .contact-grid{flex-direction:column;align-items:center}
}