:root{
  --bg:#070b14; --panel:#0d1320; --panel2:#101827; --text:#edf4ff; --muted:#94a3b8;
  --line:rgba(148,163,184,.15); --accent:#69a7ff; --accent2:#9b7bff; --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 85%);pointer-events:none}
.glow{position:fixed;width:500px;height:500px;border-radius:50%;filter:blur(110px);opacity:.13;pointer-events:none}.glow-a{background:#377dff;top:-180px;right:-150px}.glow-b{background:#8a42ff;bottom:10%;left:-250px}
.site-header{height:78px;position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - var(--max))/2));background:rgba(7,11,20,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{font:700 24px "Space Grotesk",sans-serif;letter-spacing:-1px}.brand span{color:var(--accent)}
.nav{display:flex;align-items:center;gap:27px;font-size:13px;color:#b9c5d6}.nav a{transition:.25s}.nav a:hover{color:white}.nav-cta{padding:9px 15px;border:1px solid var(--line);border-radius:9px;color:white!important}.menu-btn{display:none;background:none;border:0;color:white;font-size:24px}
.section{width:min(var(--max),calc(100% - 48px));margin:auto;padding:110px 0}.hero{min-height:760px;padding-top:165px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#86b8ff;font-weight:700}.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(105,167,255,.2);padding:8px 11px;border-radius:999px;background:rgba(105,167,255,.05)}.pulse{width:7px;height:7px;border-radius:50%;background:#72d6a1;box-shadow:0 0 14px #72d6a1}
h1{font:700 clamp(62px,9vw,110px)/.9 "Space Grotesk",sans-serif;letter-spacing:-5px;margin:25px 0 23px}h1 span{color:transparent;-webkit-text-stroke:1px #7892b7}
.hero-role{font-size:17px;color:#d7e1ee;font-weight:600}.hero-role i{color:#6285ad;font-style:normal;margin:0 7px}.hero-text{max-width:620px;color:var(--muted);font-size:16px;margin:17px 0 28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:700;transition:.25s}.btn.primary{background:#eaf3ff;color:#07101f}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(105,167,255,.2)}.btn.secondary{border:1px solid var(--line);background:rgba(255,255,255,.025)}.btn.secondary:hover{background:rgba(255,255,255,.07)}
.quick-links{display:flex;gap:22px;margin-top:28px;font-size:12px;color:#71849d}.quick-links a:hover{color:white}
.hero-visual{min-height:560px;position:relative;display:grid;place-items:center}.photo-frame{position:relative;width:min(390px,75vw);aspect-ratio:1/1;z-index:2;border-radius:50%;padding:11px;background:linear-gradient(145deg,rgba(116,175,255,.65),rgba(141,90,255,.15) 50%,transparent);box-shadow:0 0 100px rgba(75,137,255,.14)}.photo-frame:before{content:"";position:absolute;inset:11px;border-radius:50%;background:#0b111d}.profile-photo{position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;filter:saturate(.92) contrast(1.03)}.orbit{position:absolute;border:1px solid rgba(105,167,255,.15);border-radius:50%}.orbit-1{width:500px;height:500px}.orbit-2{width:630px;height:630px;border-color:rgba(155,123,255,.09)}
.floating-card{position:absolute;z-index:5;display:flex;align-items:center;gap:11px;background:rgba(12,19,31,.9);border:1px solid var(--line);padding:12px 15px;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:blur(14px)}.floating-card strong{display:block;font-size:12px}.floating-card small{display:block;color:#74869d;font-size:10px;margin-top:1px}.mini-icon{font-size:20px}.card-cloud{top:95px;left:1%}.card-ai{right:0;bottom:100px}.tech-dot{position:absolute;z-index:4;padding:7px 9px;border-radius:8px;background:#0b1422;border:1px solid var(--line);font:600 10px monospace;color:#8fbfff}.dot-1{top:20%;right:7%}.dot-2{bottom:25%;left:3%}.dot-3{top:45%;right:-2%}
.stats{padding-top:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats>div{padding:25px 20px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats strong{display:block;font:700 20px "Space Grotesk"}.stats span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}.section-heading h2{font:600 clamp(35px,4vw,57px)/1.05 "Space Grotesk";letter-spacing:-2px;margin-top:16px}.section-heading h2 em,.learning-box h2 em,.contact-card h2 em{font-style:normal;color:#719fe1}.about-copy{padding-top:33px;color:#a8b6c8;font-size:15px}.about-copy p+p{margin-top:18px}.about-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:32px}.about-meta div{border-left:2px solid #31527d;padding-left:13px}.about-meta span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:#637891}.about-meta strong{font-size:14px}
.centered{text-align:center;max-width:760px;margin:0 auto 48px}.centered p{color:var(--muted);font-size:14px;margin-top:15px}
.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.skill-card{background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:14px;padding:23px;min-height:180px;transition:.3s}.skill-card:hover{transform:translateY(-4px);border-color:rgba(105,167,255,.28)}.skill-number{font:600 11px monospace;color:#506782;margin-bottom:19px}.skill-card h3{font:600 18px "Space Grotesk";margin-bottom:14px}.tags,.project-tags,.learning-tags{display:flex;gap:7px;flex-wrap:wrap}.tags span,.project-tags span,.learning-tags span{font-size:10px;color:#aebed1;border:1px solid rgba(148,163,184,.13);background:rgba(255,255,255,.025);padding:5px 8px;border-radius:6px}
.project-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card{overflow:hidden;background:#0b111c;border:1px solid var(--line);border-radius:16px;transition:.3s}.project-card:hover{transform:translateY(-5px);border-color:rgba(105,167,255,.3)}.project-art{height:230px;display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.art-cicd{background:radial-gradient(circle at 50% 50%,#162a42,#09101a 65%)}.terminal{width:75%;background:#080d15;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:13px;box-shadow:0 20px 50px #0006}.terminal span{font-size:8px;color:#6f8198;display:block;margin-bottom:13px}.terminal code{font:10px/2 monospace;color:#9fb4cd}.terminal b{color:#79d5a4}.art-ms{background:linear-gradient(145deg,#121c31,#0a0e17);overflow:hidden}.art-ms strong{position:absolute;font:800 130px "Space Grotesk";color:#eaf3ff0d}.ms-grid{display:grid;grid-template-columns:repeat(2,65px);gap:8px;z-index:2}.ms-grid i{height:65px;background:#8dbdff;opacity:.72}.ms-grid i:nth-child(2){opacity:.45}.ms-grid i:nth-child(3){opacity:.35}.ms-grid i:nth-child(4){opacity:.58}.art-agent{background:radial-gradient(circle,#172a3e,#090e17 65%);display:flex;gap:10px}.agent-node{font:700 9px monospace;border:1px solid #4f7da9;border-radius:50%;width:62px;height:62px;display:grid;place-items:center;background:#0c1827;box-shadow:0 0 30px #3b78b31c}.agent-line{width:35px;height:1px;background:#416887}.project-content{padding:22px}.project-label{font-size:9px;letter-spacing:1.5px;color:#669ee2;font-weight:700}.project-content h3{font:600 23px "Space Grotesk";margin:7px 0 9px}.project-content p{color:#8798ad;font-size:12px;min-height:64px}.project-tags{margin:15px 0}.project-link,.achievement-card a,.timeline-item a{font-size:11px;color:#8cbaff;font-weight:700}.github-banner{margin-top:20px;border:1px solid var(--line);padding:19px 22px;border-radius:13px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.02)}.github-banner>div{display:flex;gap:13px;align-items:center}.github-mark{font-size:26px}.github-banner strong{display:block;font-size:13px}.github-banner small{display:block;color:#6f8198;font-size:10px}
.timeline{max-width:820px;margin:0 auto;border-left:1px solid #23364d;padding-left:35px}.timeline-item{position:relative;padding:0 0 42px}.timeline-item:last-child{padding-bottom:0}.timeline-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#79aaf0;left:-40px;top:7px;box-shadow:0 0 0 5px #101c2c}.timeline-item span{font-size:9px;letter-spacing:1.6px;color:#658db9;font-weight:700}.timeline-item h3{font:600 21px "Space Grotesk";margin:6px 0}.timeline-item p{font-size:13px;color:#8999ac;max-width:700px}.timeline-item a{display:inline-block;margin-top:9px}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.cert-card{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.02);transition:.3s}.cert-card:hover{transform:translateY(-3px);border-color:rgba(105,167,255,.28)}.cert-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(105,167,255,.2);border-radius:10px;font:700 12px "Space Grotesk";color:#a7c8f6;background:#0c1625}.cert-card span:not(.cert-icon){font-size:8px;letter-spacing:1px;color:#6684a5}.cert-card h3{font:600 15px "Space Grotesk";margin:4px 0}.cert-card p{font-size:10px;color:#718298}.cert-card>b{font-size:15px;color:#6d88a6}
.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.achievement-card{min-height:190px;border:1px solid var(--line);border-radius:13px;padding:23px;background:rgba(255,255,255,.02);transition:.3s}.achievement-card:hover{transform:translateY(-4px)}.achievement-card>span{font:600 10px monospace;color:#526b87}.achievement-card h3{font:600 20px "Space Grotesk";margin:24px 0 8px}.achievement-card p{font-size:12px;color:#8292a7}.achievement-card a{display:inline-block;margin-top:13px}
.event-list{border-top:1px solid var(--line)}.event-item{display:grid;grid-template-columns:140px 1fr auto;gap:20px;padding:20px 5px;border-bottom:1px solid var(--line);align-items:center;transition:.25s}.event-item:hover{padding-left:12px;background:rgba(255,255,255,.02)}.event-item span{font-size:9px;letter-spacing:1.4px;color:#6799ce;font-weight:700}.event-item strong{font:500 18px "Space Grotesk"}.event-item b{color:#6482a2}
.learning-box{border:1px solid var(--line);border-radius:16px;padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:40px;background:linear-gradient(135deg,rgba(64,120,195,.1),rgba(129,83,201,.05))}.learning-box h2{font:600 34px/1.08 "Space Grotesk";letter-spacing:-1.5px;margin-top:13px}.learning-tags{align-content:center;justify-content:flex-end}.learning-tags span{font-size:12px;padding:8px 11px}
.contact{padding-bottom:80px}.contact-card{text-align:center;padding:85px 20px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(83,137,219,.13),transparent 48%)}.contact-card h2{font:600 clamp(40px,6vw,68px)/1 "Space Grotesk";letter-spacing:-3px;margin:16px 0}.contact-card>p{max-width:600px;margin:0 auto;color:#8798ad;font-size:14px}.email-link{display:inline-block;font:600 clamp(18px,3vw,28px) "Space Grotesk";color:#9dc6ff;margin:27px 0 25px}.contact-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;color:#6f8198;font-size:11px}.contact-links a:hover{color:white}
.footer{width:min(var(--max),calc(100% - 48px));margin:auto;border-top:1px solid var(--line);padding:25px 0 35px;display:flex;justify-content:space-between;color:#5f7087;font-size:10px}.footer a:hover{color:white}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.nav{gap:14px}.hero{grid-template-columns:1fr;padding-top:135px}.hero-visual{min-height:470px}.card-cloud{left:4%}.split{grid-template-columns:1fr;gap:25px}.skill-grid,.project-list,.cert-grid,.achievement-grid{grid-template-columns:repeat(2,1fr)}.learning-box{grid-template-columns:1fr}.learning-tags{justify-content:flex-start}.stats{grid-template-columns:repeat(2,1fr)}.stats>div:nth-child(2){border-right:0}.stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:680px){.site-header{height:68px}.menu-btn{display:block}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:#080d16;border-bottom:1px solid var(--line);padding:18px 24px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.nav-cta{margin-top:5px}.section{width:min(100% - 32px,560px);padding:80px 0}.hero{padding-top:115px;min-height:auto}.hero-visual{min-height:390px}.photo-frame{width:285px}.orbit-1{width:350px;height:350px}.orbit-2{width:430px;height:430px}.card-cloud{top:35px;left:-3%}.card-ai{right:-2%;bottom:38px}.tech-dot{display:none}h1{font-size:62px;letter-spacing:-3px}.stats{grid-template-columns:1fr}.stats>div{border-right:0;border-bottom:1px solid var(--line)!important}.stats>div:last-child{border-bottom:0!important}.skill-grid,.project-list,.cert-grid,.achievement-grid{grid-template-columns:1fr}.project-art{height:210px}.event-item{grid-template-columns:85px 1fr auto;gap:10px}.event-item strong{font-size:14px}.learning-box{padding:28px}.contact-card{padding:60px 18px}.footer{flex-direction:column;gap:9px}.about-meta{grid-template-columns:1fr 1fr}}


/* ===== ADVANCED MOTION SYSTEM ===== */
html { scroll-padding-top: 90px; }
body { cursor: default; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:100;
  opacity:0;
  background:radial-gradient(450px circle at var(--mx,50%) var(--my,50%), rgba(105,167,255,.075), transparent 55%);
  transition:opacity .25s ease;
}
body.cursor-active::before{opacity:1}

.site-header{
  transition:height .35s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header.scrolled{
  height:64px;
  background:rgba(5,9,17,.9);
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}

.hero-copy .eyebrow{
  animation:floatBadge 4s ease-in-out infinite;
}
@keyframes floatBadge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

.hero-visual{
  perspective:1100px;
}
.photo-frame{
  animation:heroFloat 6s ease-in-out infinite;
  transform-style:preserve-3d;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) rotateZ(0deg)}
  50%{transform:translateY(-12px) rotateZ(.5deg)}
}
.photo-frame::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  border:1px solid rgba(105,167,255,.12);
  animation:spinRing 16s linear infinite;
}
@keyframes spinRing{to{transform:rotate(360deg)}}

.orbit-1{animation:spinRing 18s linear infinite}
.orbit-2{animation:spinRing 28s linear reverse infinite}
.floating-card{animation:cardFloat 5s ease-in-out infinite}
.card-ai{animation-delay:-2.2s}
@keyframes cardFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-10px,0)}
}

.tech-dot{
  animation:dotPulse 3s ease-in-out infinite;
}
.dot-2{animation-delay:-1s}.dot-3{animation-delay:-2s}
@keyframes dotPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}

.hero h1 span{
  background:linear-gradient(90deg,#6fa8ff,#b79aff,#6fa8ff);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:0;
  animation:shimmer 5s linear infinite;
}
@keyframes shimmer{to{background-position:220% center}}

.btn, .quick-links a, .project-link, .cert-card, .achievement-card, .event-item{
  will-change:transform;
}
.btn{
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-30%;
  width:35%;
  height:340%;
  transform:rotate(25deg);
  background:rgba(255,255,255,.18);
  transition:left .65s ease;
}
.btn:hover::after{left:115%}

.skill-card, .project-card, .cert-card, .achievement-card{
  transform-style:preserve-3d;
}
.skill-card::before,.project-card::before,.cert-card::before,.achievement-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%), rgba(111,168,255,.14), transparent 55%);
  transition:opacity .25s ease;
}
.skill-card,.project-card,.cert-card,.achievement-card{position:relative;overflow:hidden}
.skill-card:hover::before,.project-card:hover::before,.cert-card:hover::before,.achievement-card:hover::before{opacity:1}

.project-art img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .project-art{transform:scale(1.01)}
.project-card:hover .project-art > *{transform:scale(1.035)}

.tags span,.project-tags span,.learning-tags span{
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.tags span:hover,.project-tags span:hover,.learning-tags span:hover{
  transform:translateY(-3px);
  border-color:rgba(105,167,255,.35);
  background:rgba(105,167,255,.06);
}

.stats>div{
  transition:background .35s ease, transform .35s ease;
}
.stats>div:hover{
  background:rgba(255,255,255,.025);
  transform:translateY(-2px);
}

.timeline-item .timeline-dot{
  transition:transform .4s ease, box-shadow .4s ease;
}
.timeline-item:hover .timeline-dot{
  transform:scale(1.55);
  box-shadow:0 0 0 7px #101c2c, 0 0 22px rgba(105,167,255,.45);
}

.event-item b{
  transition:transform .3s ease;
}
.event-item:hover b{transform:translateX(7px) rotate(-5deg)}

.reveal{
  opacity:0;
  transform:translateY(35px) scale(.985);
  filter:blur(4px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),
             transform .8s cubic-bezier(.2,.7,.2,1),
             filter .8s ease;
  transition-delay:var(--delay,0ms);
}
.reveal.visible{
  opacity:1;
  transform:none;
  filter:none;
}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:0;
  z-index:1000;
  background:linear-gradient(90deg,#69a7ff,#a982ff,#69a7ff);
  box-shadow:0 0 14px rgba(105,167,255,.65);
}

.particle-field{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.particle{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#8dbbff;
  opacity:.18;
  animation:particleDrift linear infinite;
}
@keyframes particleDrift{
  from{transform:translate3d(0,30px,0);opacity:0}
  15%{opacity:.22}
  85%{opacity:.12}
  to{transform:translate3d(var(--dx),-120vh,0);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none;filter:none}
}