*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080808;color:#f2f0eb;font-family:Inter,Arial,sans-serif;line-height:1.55;overflow-x:hidden}a{color:inherit;text-decoration:none}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.nav{height:78px;position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1240px)/2));background:rgba(8,8,8,.78);backdrop-filter:blur(18px);border-bottom:1px solid #1b1b1b}.logo{font-size:15px;font-weight:800;letter-spacing:2px}.logo span{color:#a89bff}nav{display:flex;gap:31px;margin-left:auto;margin-right:38px}nav a{font:500 11px "DM Mono",monospace;letter-spacing:1px;color:#8c8b88;transition:.25s}nav a:hover{color:#fff}.nav-cta{font:500 11px "DM Mono",monospace;border:1px solid #333;padding:10px 15px;border-radius:2px}.nav-cta span{color:#a89bff}.menu{display:none;background:none;border:0;color:#fff;font-size:22px}.hero{min-height:100vh;max-width:1240px;margin:auto;padding:150px 24px 90px;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;position:relative}.availability{display:inline-flex;align-items:center;gap:9px;border:1px solid #292929;padding:7px 10px;font:500 9px "DM Mono",monospace;letter-spacing:1.2px;color:#aaa;margin-bottom:32px}.availability i{width:6px;height:6px;background:#8be5a4;border-radius:50%;box-shadow:0 0 12px #8be5a4}.kicker,.section-label,.mono{font:500 10px "DM Mono",monospace;letter-spacing:2px;color:#85837f}.hero h1{font-size:clamp(48px,6.6vw,91px);line-height:.98;letter-spacing:-5px;margin:14px 0 29px;font-weight:800}.hero h1 em,.contact h2 em{font-style:normal;color:#a89bff}.hero-text{max-width:610px;color:#94928e;font-size:16px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:35px}.button{display:inline-flex;gap:25px;align-items:center;padding:15px 18px;font-size:12px;font-weight:700}.button-light{background:#f2f0eb;color:#080808}.button-light span{font-size:17px}.text-link{font:500 11px "DM Mono",monospace;color:#aaa}.text-link span{color:#a89bff;margin-left:6px}.hero-right{display:flex;justify-content:center}.portrait-wrap{width:min(440px,88vw);aspect-ratio:.86;position:relative}.portrait-wrap img{width:83%;height:88%;object-fit:cover;object-position:center top;position:absolute;right:0;top:3%;z-index:2;filter:saturate(.82) contrast(1.03);border-radius:3px}.portrait-glow{position:absolute;width:70%;height:70%;right:4%;top:12%;background:#5148a8;filter:blur(80px);opacity:.18}.orbit{position:absolute;border:1px solid #26234a;border-radius:50%;z-index:1}.orbit-one{width:90%;height:55%;right:-3%;top:21%;transform:rotate(-18deg)}.orbit-two{width:70%;height:46%;right:11%;top:26%;transform:rotate(31deg);border-color:#242c28}.portrait-card{position:absolute;z-index:3;bottom:0;left:0;background:#111;padding:17px 20px;border:1px solid #292929;min-width:205px;box-shadow:0 20px 50px #000}.portrait-card .mono{display:block;font-size:8px;margin-bottom:7px}.portrait-card strong{font-size:11px;line-height:1.45}.scroll{position:absolute;bottom:30px;left:24px;color:#555;font:500 9px "DM Mono",monospace;letter-spacing:1.4px}.scroll span{color:#a89bff;margin-left:8px}.stats{border-top:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c;display:grid;grid-template-columns:repeat(4,1fr);max-width:1240px;margin:auto}.stats div{padding:25px 24px;border-right:1px solid #1c1c1c}.stats div:last-child{border-right:0}.stats strong{font-size:27px;display:block}.stats strong span{font-size:14px;color:#a89bff}.stats span{font:500 9px "DM Mono",monospace;color:#666;letter-spacing:1px}.section{max-width:1240px;margin:auto;padding:125px 24px;border-bottom:1px solid #1c1c1c}.section-label{margin-bottom:55px}.about-content{display:grid;grid-template-columns:1.1fr .9fr;gap:100px}.display{font-size:clamp(38px,5vw,65px);line-height:1.03;letter-spacing:-3px;margin:0;font-weight:700}.display span,h2 span{color:#666}.body-copy{max-width:530px;color:#92908b;font-size:15px}.body-copy p{margin-top:0;margin-bottom:22px}.line-link{display:inline-block;color:#f2f0eb;border-bottom:1px solid #555;padding-bottom:7px;font:500 11px "DM Mono",monospace}.line-link span{color:#a89bff}.section-head{display:flex;justify-content:space-between;gap:80px;align-items:end;margin-bottom:52px}.section-head h2{font-size:clamp(42px,5vw,64px);line-height:1;letter-spacing:-3px;margin:14px 0 0}.section-head>p{max-width:360px;color:#73716d;font-size:13px;margin:0}.stack-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #232323}.stack-grid article{min-height:275px;padding:26px;border-right:1px solid #232323;transition:.3s}.stack-grid article:last-child{border-right:0}.stack-grid article:hover{background:#101010}.stack-no{font:500 9px "DM Mono";color:#5e5d59}.stack-grid h3{font-size:19px;margin:58px 0 16px}.stack-grid p{color:#92908b;font-size:14px;line-height:2}.stack-grid small{color:#555;font:500 8px "DM Mono"}.experience-row{display:grid;grid-template-columns:200px 1fr;gap:90px}.experience-date{font:500 11px "DM Mono";color:#666;letter-spacing:1px;line-height:1.9}.experience-date span{color:#a89bff}.experience-main .role{color:#a89bff}.experience-main h2{font-size:clamp(38px,4.5vw,61px);line-height:1;letter-spacing:-3px;margin:16px 0 10px}.muted{color:#555;font-size:13px}.experience-main ul{max-width:670px;color:#8b8985;font-size:14px;margin-top:34px;padding-left:18px}.experience-main li{margin:9px 0;padding-left:5px}.project-list{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}.project{min-height:390px;border:1px solid #252525;background:#0c0c0c;padding:25px;position:relative;transition:.35s}.project:hover{transform:translateY(-5px);border-color:#454545;background:#101010}.project.featured{background:linear-gradient(140deg,#111019,#0c0c0c)}.project-top{display:flex;justify-content:space-between;color:#64625e;font:500 9px "DM Mono";letter-spacing:1px}.project-body{position:absolute;left:25px;right:25px;bottom:28px;display:flex;justify-content:space-between;gap:30px}.project h3{font-size:clamp(28px,3.3vw,43px);line-height:1.02;letter-spacing:-2px;margin:0 0 18px}.project p{max-width:450px;color:#777570;font-size:13px}.tech{min-width:125px;display:flex;flex-direction:column;gap:7px;font:500 9px "DM Mono";color:#777570}.tech b{color:#4f4e4b;margin-bottom:6px;font-size:8px}.project-arrow{position:absolute;right:24px;top:47px;color:#a89bff;font-size:21px}.edu-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.edu-row>div{border:1px solid #232323;padding:28px}.year{font:500 9px "DM Mono";color:#a89bff}.edu-row h3{font-size:20px;margin:45px 0 6px}.edu-row p{color:#73716d;font-size:13px;margin:0 0 20px}.edu-row b{font:500 9px "DM Mono";color:#555}.contact{background:#a89bff;color:#090909}.contact-inner{max-width:1240px;margin:auto;padding:120px 24px;text-align:center}.contact .section-label{color:#48416e}.contact-kicker{font:500 10px "DM Mono";letter-spacing:3px;margin:55px 0 18px}.contact h2{font-size:clamp(49px,7vw,91px);line-height:.96;letter-spacing:-5px;margin:0}.contact h2 em{color:#4b437f}.contact-copy{max-width:510px;margin:28px auto;color:#514b63;font-size:14px}.big-email{display:inline-block;font-size:clamp(15px,2vw,23px);font-weight:700;border-bottom:2px solid #514b63;padding-bottom:7px;margin:17px 0 65px}.big-email span{font-size:18px;margin-left:10px}.contact-meta{display:flex;justify-content:center;gap:35px;flex-wrap:wrap;font:500 9px "DM Mono";letter-spacing:1.5px;color:#4e4960}.contact-meta a:hover{color:#fff}footer{max-width:1240px;margin:auto;padding:25px 24px;display:flex;justify-content:space-between;color:#4f4d49;font:500 8px "DM Mono";letter-spacing:1px}.reveal{opacity:0;transform:translateY(20px);animation:reveal .9s .15s forwards}.hero-right.reveal{animation-delay:.3s}@keyframes reveal{to{opacity:1;transform:none}}
@media(max-width:850px){.nav{padding:0 20px}nav,.nav-cta{display:none}.menu{display:block}.nav.mobile nav{display:flex;position:absolute;top:78px;left:0;right:0;background:#0c0c0c;border-bottom:1px solid #252525;flex-direction:column;padding:22px 20px;gap:18px}.hero{grid-template-columns:1fr;padding-top:125px}.hero-right{order:-1;justify-content:flex-start}.portrait-wrap{width:310px}.hero h1{letter-spacing:-3px}.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(2){border-right:0}.stats div{border-bottom:1px solid #1c1c1c}.about-content,.experience-row{grid-template-columns:1fr;gap:35px}.section-head{display:block}.section-head>p{margin-top:25px}.stack-grid{grid-template-columns:1fr 1fr}.stack-grid article:nth-child(2){border-right:0}.stack-grid article:nth-child(3),.stack-grid article:nth-child(4){border-top:1px solid #232323}.project-list,.edu-row{grid-template-columns:1fr}.project-body{display:block}.tech{margin-top:20px}.project{min-height:450px}.scroll{display:none}}
@media(max-width:520px){.hero{padding-left:20px;padding-right:20px}.hero h1{font-size:48px}.hero-actions{gap:18px}.stats div{padding:20px}.section{padding:85px 20px}.section-label{margin-bottom:40px}.stack-grid{grid-template-columns:1fr}.stack-grid article{border-right:0!important;border-bottom:1px solid #232323}.stack-grid article:last-child{border-bottom:0}.stack-grid article:nth-child(3){border-top:0}.portrait-wrap{width:280px}.portrait-card{left:-8px}.contact-inner{padding:90px 20px}.contact h2{letter-spacing:-3px}.big-email{font-size:14px}footer{padding:22px 20px;display:block}footer span{display:block;margin:5px 0}}


/* ===== PREMIUM MOTION SYSTEM ===== */
html { scroll-padding-top: 90px; }
body { cursor: default; }
a, button, .project, .stack-grid article, .edu-row > div, .skill-card { will-change: transform; }

@keyframes floatPortrait {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(.35deg); }
}
@keyframes orbitSpin {
  from { transform: rotate(-18deg); }
  to { transform: rotate(342deg); }
}
@keyframes orbitSpinReverse {
  from { transform: rotate(31deg); }
  to { transform: rotate(-329deg); }
}
@keyframes pulseGlow {
  0%,100% { opacity:.13; transform:scale(.95); }
  50% { opacity:.28; transform:scale(1.05); }
}
@keyframes blinkDot {
  0%,100% { opacity:1; box-shadow:0 0 10px #8be5a4; }
  50% { opacity:.35; box-shadow:0 0 3px #8be5a4; }
}
@keyframes marqueeLine {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}
@keyframes lineReveal {
  from { clip-path: inset(0 100% 0 0); opacity:0; }
  to { clip-path: inset(0 0 0 0); opacity:1; }
}
@keyframes navDrop {
  from { transform:translateY(-12px); opacity:0; }
  to { transform:none; opacity:1; }
}
@keyframes arrowNudge {
  0%,100% { transform:translate(0,0); }
  50% { transform:translate(4px,-4px); }
}

.availability i { animation:blinkDot 2s ease-in-out infinite; }
.hero-right .portrait-wrap { animation:floatPortrait 6s ease-in-out infinite; }
.orbit-one { animation:orbitSpin 24s linear infinite; }
.orbit-two { animation:orbitSpinReverse 31s linear infinite; }
.portrait-glow { animation:pulseGlow 5s ease-in-out infinite; }
.project-arrow { transition:transform .35s ease; }
.project:hover .project-arrow { animation:arrowNudge .8s ease-in-out infinite; }
.nav { transition:background .35s ease, border-color .35s ease; }
.nav.scrolled { background:rgba(8,8,8,.94); border-bottom-color:#292929; }
.nav a { position:relative; }
.nav a:not(.logo)::after {
  content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1px;
  background:#a89bff; transition:right .3s ease;
}
.nav a:not(.logo):hover::after { right:0; }

.reveal-on-scroll {
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal-on-scroll.is-visible { opacity:1; transform:none; }

.stagger-item {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.stagger-item.is-visible { opacity:1; transform:none; }
.stagger-item:nth-child(2){transition-delay:.08s}
.stagger-item:nth-child(3){transition-delay:.16s}
.stagger-item:nth-child(4){transition-delay:.24s}

.char { display:inline-block; opacity:0; transform:translateY(20px); animation:lineReveal .65s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1 .char:nth-child(2n){animation-delay:.04s}
.hero h1 .char:nth-child(3n){animation-delay:.08s}

.button-light { transition:transform .25s ease, box-shadow .25s ease; }
.button-light:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(242,240,235,.12); }
.text-link { transition:transform .25s ease,color .25s ease; }
.text-link:hover { transform:translateX(4px); color:#fff; }

.stack-grid article, .edu-row>div {
  transition:transform .35s ease, background .35s ease, border-color .35s ease;
}
.stack-grid article:hover, .edu-row>div:hover {
  transform:translateY(-6px);
  border-color:#3c3c3c;
}

.project { overflow:hidden; }
.project::before {
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  left:50%; top:50%; transform:translate(-50%,-50%) scale(0);
  background:rgba(168,155,255,.055); transition:transform .6s ease; pointer-events:none;
}
.project:hover::before { transform:translate(-50%,-50%) scale(2.2); }

.contact { position:relative; overflow:hidden; }
.contact::before, .contact::after {
  content:""; position:absolute; border:1px solid rgba(75,67,127,.22);
  border-radius:50%; pointer-events:none;
}
.contact::before { width:500px;height:500px;right:-250px;top:-250px; }
.contact::after { width:350px;height:350px;left:-175px;bottom:-175px; }

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


/* Final-year project visual */
.project-with-image { min-height: 520px; }
.project-image-wrap {
  position:absolute; left:25px; right:25px; top:72px; height:205px;
  overflow:hidden; border:1px solid #252525; background:#f2f2f2;
}
.project-image-wrap img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; filter:saturate(.85); transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.project-with-image:hover .project-image-wrap img { transform:scale(1.035); filter:saturate(1); }
.project-with-image .project-body { bottom:27px; }
@media(max-width:850px){
  .project-with-image { min-height:570px; }
  .project-image-wrap { height:210px; }
}
@media(max-width:520px){
  .project-with-image { min-height:610px; }
  .project-image-wrap { left:20px; right:20px; top:68px; height:190px; }
}


/* =========================================================
   ULTRA-PREMIUM MOTION + BACKGROUND
   ========================================================= */
:root{
  --violet:#a89bff;
  --violet2:#6d5dfc;
  --cyan:#7fe8dc;
  --ink:#080808;
}
body{
  background:
    radial-gradient(circle at 15% 15%, rgba(108,91,252,.075), transparent 28%),
    radial-gradient(circle at 85% 30%, rgba(127,232,220,.045), transparent 24%),
    #080808;
}
.ambient-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.grid-lines{
  position:absolute;inset:-20%;
  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:70px 70px;
  mask-image:radial-gradient(circle at center,black 0%,transparent 72%);
  animation:gridDrift 26s linear infinite;
}
.orb{
  position:absolute;border-radius:50%;filter:blur(2px);opacity:.18;
  mix-blend-mode:screen;
}
.orb-a{
  width:380px;height:380px;left:-120px;top:15%;
  background:radial-gradient(circle,rgba(128,110,255,.28),transparent 67%);
  animation:orbFloatA 16s ease-in-out infinite;
}
.orb-b{
  width:460px;height:460px;right:-170px;top:42%;
  background:radial-gradient(circle,rgba(95,224,208,.17),transparent 67%);
  animation:orbFloatB 20s ease-in-out infinite;
}
.orb-c{
  width:320px;height:320px;left:42%;bottom:-150px;
  background:radial-gradient(circle,rgba(168,155,255,.16),transparent 67%);
  animation:orbFloatC 18s ease-in-out infinite;
}
@keyframes orbFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,70px) scale(1.18)}}
@keyframes orbFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,-90px) scale(1.12)}}
@keyframes orbFloatC{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,-70px)}}

.cursor-glow{
  position:fixed;z-index:101;width:260px;height:260px;border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(168,155,255,.075),transparent 67%);
  opacity:0;transition:opacity .3s ease;
}
body.cursor-active .cursor-glow{opacity:1}
.scroll-progress{
  position:fixed;left:0;top:0;width:0;height:2px;z-index:200;
  background:linear-gradient(90deg,var(--violet2),var(--cyan),var(--violet));
  box-shadow:0 0 14px rgba(168,155,255,.55);
}
.section,.contact{position:relative}
.section:before{
  content:"";position:absolute;left:24px;top:-1px;width:0;height:1px;
  background:var(--violet);transition:width 1s ease;
}
.section.is-visible:before{width:130px}

.hero h1{
  text-wrap:balance;
  text-shadow:0 0 50px rgba(168,155,255,.035);
}
.hero h1 em{
  background:linear-gradient(110deg,#a89bff,#d0caff,#7d70ff);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradientText 6s ease-in-out infinite;
}
@keyframes gradientText{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero-text{animation:softIn 1s .75s both}
.hero-actions{animation:softIn 1s .9s both}
@keyframes softIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.availability{
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.availability:hover{
  transform:translateY(-2px);
  border-color:#45406b;background:rgba(168,155,255,.035);
}
.button{
  position:relative;overflow:hidden;
}
.button:before{
  content:"";position:absolute;inset:0;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.45),transparent 75%);
  transition:transform .6s ease;
}
.button:hover:before{transform:translateX(110%)}
.button-light{position:relative}
.button-light span{transition:transform .3s ease}
.button-light:hover span{transform:translateY(4px)}
.nav-cta{transition:transform .25s ease,border-color .25s ease,background .25s ease}
.nav-cta:hover{border-color:#56506f;background:rgba(168,155,255,.05);transform:translateY(-2px)}

.project,.stack-grid article,.edu-row>div{
  transform-style:preserve-3d;
}
.project{
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease;
}
.project:hover{
  box-shadow:0 25px 70px rgba(0,0,0,.32);
}
.project-top span:first-child{transition:color .3s ease}
.project:hover .project-top span:first-child{color:#a89bff}
.project h3{transition:transform .4s ease}
.project:hover h3{transform:translateX(5px)}

.stack-grid article{
  position:relative;overflow:hidden;
}
.stack-grid article:after{
  content:"";position:absolute;width:100px;height:100px;border-radius:50%;
  right:-50px;bottom:-50px;border:1px solid rgba(168,155,255,.16);
  transition:transform .5s ease;
}
.stack-grid article:hover:after{transform:scale(2.2)}
.stack-grid article h3,.stack-grid article p{transition:transform .35s ease}
.stack-grid article:hover h3{transform:translateX(5px)}
.stack-grid article:hover p{transform:translateX(3px)}

.experience-main li{transition:transform .3s ease,color .3s ease}
.experience-main li:hover{transform:translateX(7px);color:#b4b2ad}
.experience-main li::marker{color:#a89bff}

.edu-row>div{position:relative;overflow:hidden}
.edu-row>div:before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--violet);
  transition:height .5s ease;
}
.edu-row>div:hover:before{height:100%}

.big-email{
  position:relative;transition:color .3s ease,transform .35s ease;
}
.big-email:after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  transform:scaleX(.15);transform-origin:left;background:#4e4960;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.big-email:hover{transform:translateY(-3px);color:#242033}
.big-email:hover:after{transform:scaleX(1)}

.contact-inner{position:relative;z-index:2}
.contact:after{
  content:"";position:absolute;width:700px;height:700px;border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px solid rgba(75,67,127,.09);
  animation:contactPulse 7s ease-in-out infinite;pointer-events:none;
}
@keyframes contactPulse{0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}

.magnetic{will-change:transform}
@media(max-width:850px){
  .cursor-glow{display:none}
  .grid-lines{background-size:50px 50px}
}
@media(prefers-reduced-motion:reduce){
  .orb,.grid-lines,.contact:after,.hero h1 em{animation:none!important}
}