*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#06050d;--panel:#0d0b19;--text:#f5f3ff;--muted:#9c98ad;--purple:#9b5cff;--line:rgba(255,255,255,.09)}
html{scroll-behavior:smooth}
body{font-family:Inter,sans-serif;background:radial-gradient(circle at 75% 15%,rgba(101,43,189,.18),transparent 28%),var(--bg);color:var(--text);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(to bottom,black,transparent 80%);z-index:-1}
a{text-decoration:none;color:inherit}.section{width:min(1120px,90%);margin:auto;padding:120px 0}
.navbar{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1120px,90%);height:80px;display:flex;align-items:center;justify-content:space-between;z-index:20;background:linear-gradient(to bottom,rgba(6,5,13,.94),rgba(6,5,13,.45));backdrop-filter:blur(12px)}
.logo{font:700 28px "Space Grotesk";letter-spacing:-2px}.logo span,.section-heading span,h1 span{color:var(--purple)}
nav{display:flex;gap:34px}nav a{font-size:13px;color:var(--muted);transition:.25s}nav a:hover,nav a.active{color:#fff}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:24px}
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding-top:100px}
.eyebrow{font-size:11px;letter-spacing:3px;color:#a66cff;font-weight:700;margin-bottom:20px}
h1{font:700 clamp(60px,9vw,105px)/.9 "Space Grotesk";letter-spacing:-6px}
h1 span{display:inline-block}
h2{font:600 24px "Space Grotesk";margin:30px 0 18px}.hero h2 i{color:var(--purple);font-style:normal}
.hero-text{max-width:590px;color:var(--muted);line-height:1.8;font-size:14px}
.hero-buttons{display:flex;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:18px;padding:14px 20px;border:1px solid var(--line);font-size:12px;font-weight:700;transition:.25s}
.btn.primary{background:#8c4ff0;border-color:#8c4ff0}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(133,73,235,.25)}
.btn.secondary:hover{border-color:var(--purple)}
.socials{display:flex;gap:15px;align-items:center;margin-top:30px;color:var(--muted);font-size:11px;flex-wrap:wrap}
.socials a:hover,.contact-links a:hover{color:#fff}

.hero-visual{position:relative;min-height:480px;display:grid;place-items:center}
.code-card{position:relative;width:min(490px,100%);padding:20px;border:1px solid rgba(163,104,255,.3);background:rgba(13,10,27,.78);box-shadow:0 0 80px rgba(113,53,210,.18);border-radius:10px;z-index:2}
.code-top{display:flex;gap:7px;margin-bottom:18px}.code-top span{width:8px;height:8px;border-radius:50%;background:#49445a}
.code-card pre{font:12px/2 monospace;color:#bcb6ca;overflow:auto}.code-card b{color:#c18cff}.code-card em{color:#a9e6d1;font-style:normal}
.orb{position:absolute;border-radius:50%;animation:float 6s ease-in-out infinite}
.orb-one{width:260px;height:260px;background:rgba(130,51,255,.18);top:35px;right:25px;filter:blur(55px)}
.orb-two{width:190px;height:190px;background:rgba(36,104,255,.15);bottom:30px;left:20px;filter:blur(50px);animation-delay:-2s}
.floating-tag{position:absolute;z-index:3;padding:9px 12px;background:rgba(18,14,34,.9);border:1px solid var(--line);font-size:9px;letter-spacing:2px}
.tag-one{top:90px;left:15px}.tag-two{right:5px;bottom:100px}

.profile-photo{position:absolute;top:15px;right:15px;width:210px;height:210px;border-radius:50%;padding:6px;background:linear-gradient(135deg,#b477ff,#5b2ca8,transparent);z-index:5;animation:photoFloat 5s ease-in-out infinite;box-shadow:0 0 45px rgba(139,76,241,.28)}
.profile-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:50%;border:4px solid #0a0812}
.photo-ring{position:absolute;inset:-12px;border:1px solid rgba(166,108,255,.45);border-radius:50%;border-top-color:transparent;border-right-color:transparent;animation:spinPhoto 8s linear infinite}
.photo-label{position:absolute;bottom:-12px;right:-20px;padding:7px 10px;background:rgba(12,9,23,.95);border:1px solid rgba(166,108,255,.35);color:#b98aff;font:700 8px monospace;letter-spacing:1.5px;white-space:nowrap}

.section-heading{margin-bottom:55px}.section-heading h2{font-size:48px;line-height:1.05;margin:0;letter-spacing:-2px}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px}.about-text p{color:var(--muted);line-height:1.9;font-size:15px;margin-bottom:20px}
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.stat{padding:25px 0;border-bottom:1px solid var(--line)}.stat strong{font:700 28px "Space Grotesk";display:block;margin-bottom:8px}.stat span{color:var(--muted);font-size:11px}
.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.skill-card{padding:28px;background:rgba(14,11,27,.7);border:1px solid var(--line);transition:.3s}.skill-card:hover{border-color:rgba(155,92,255,.5);transform:translateY(-5px)}
.icon{font:bold 15px monospace;color:#b178ff;margin-bottom:35px}.skill-card h3{font:600 18px "Space Grotesk";margin-bottom:10px}.skill-card p{font-size:12px;line-height:1.7;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.project-card{background:#0c0a16;border:1px solid var(--line);overflow:hidden}.project-card.large{grid-row:span 2}
.project-image{height:230px;display:grid;place-items:center;position:relative;overflow:hidden}.project-card.large .project-image{height:360px}
.project-image:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(20px)}
.gradient-a{background:radial-gradient(circle at 50% 40%,#35215e,#11101d 65%)}.gradient-b{background:radial-gradient(circle at 50% 40%,#123c55,#0d111d 65%)}.gradient-c{background:radial-gradient(circle at 50% 40%,#4c2a32,#11101b 65%)}
.project-image span{font:700 28px "Space Grotesk";letter-spacing:5px;opacity:.8;z-index:1}.project-info{padding:22px}
.project-info p:first-child{font-size:9px;letter-spacing:2px;color:#a66cff;margin-bottom:8px}.project-info h3{font:600 20px "Space Grotesk";margin-bottom:8px}.project-info p:last-child{font-size:12px;color:var(--muted);line-height:1.6}
.contact{padding-bottom:80px}.contact-box{text-align:center;padding:100px 20px;border:1px solid var(--line);background:radial-gradient(circle at 50% 0,rgba(127,64,223,.2),transparent 45%),rgba(13,10,25,.7)}
.contact-box h2{font-size:55px;line-height:1.05;letter-spacing:-3px;margin:0 0 18px}.contact-box>p:not(.eyebrow){color:var(--muted);font-size:13px;margin-bottom:28px}
.contact-links{display:flex;justify-content:center;gap:25px;margin-top:25px;color:var(--muted);font-size:11px}
footer{width:min(1120px,90%);margin:auto;padding:25px 0 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#686476;font-size:10px}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}
@keyframes float{50%{transform:translateY(-20px) scale(1.05)}}@keyframes photoFloat{50%{transform:translateY(-8px)}}@keyframes spinPhoto{to{transform:rotate(360deg)}}

@media(max-width:800px){
  .navbar{height:70px}.menu-toggle{display:block}nav{position:absolute;top:70px;left:0;right:0;display:none;flex-direction:column;gap:0;padding:10px;background:rgba(8,6,16,.97);border:1px solid var(--line)}nav.open{display:flex}nav a{padding:15px}
  .hero{grid-template-columns:1fr;padding-top:120px}.hero-visual{min-height:380px}.section{padding:85px 0}
  .about-grid{grid-template-columns:1fr;gap:40px}.skill-grid{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr}.project-card.large{grid-row:auto}.project-card.large .project-image{height:250px}
  .contact-box h2{font-size:40px}.profile-photo{width:145px;height:145px;top:0;right:0}
  footer{flex-direction:column;gap:10px}
}
@media(max-width:480px){
  .skill-grid{grid-template-columns:1fr}h1{letter-spacing:-4px}.hero-buttons{flex-direction:column;align-items:flex-start}
  .code-card pre{font-size:10px}.profile-photo{width:115px;height:115px;right:5px}.photo-label{font-size:6px;right:-8px}
  .section-heading h2{font-size:38px}
}