:root{
  --bg:#08050f; --surface:#140f26; --surface-2:#1a1330;
  --border:rgba(168,130,255,0.14); --border-strong:rgba(168,130,255,0.3);
  --text:#f1edfb; --text-muted:#a99fc4; --text-dim:#6f6690;
  --accent:#8b5cf6; --accent-2:#c026d3; --accent-3:#5eead4;
  --accent-grad: linear-gradient(120deg, #8b5cf6 0%, #a855f7 45%, #d946ef 100%);
  --shadow-lg: 0 20px 60px -20px rgba(0,0,0,0.6);
  --glow-1:rgba(139,92,246,.22); --glow-2:rgba(217,70,239,.16); --glow-3:rgba(94,234,212,.10);
  --grid-op:.35; --star-op:.55;
  --radius-md:14px; --radius-lg:20px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --logo:url(/img/logo.png);
  color-scheme: dark;
}
html[data-theme="light"]{
  --bg:#f7f5fd; --surface:#ffffff; --surface-2:#f2edfb;
  --border:rgba(94,53,177,0.16); --border-strong:rgba(94,53,177,0.30);
  --text:#1a1230; --text-muted:#565073; --text-dim:#857da0;
  --accent:#7c3aed; --accent-2:#a21caf; --accent-3:#0d9488;
  --accent-grad: linear-gradient(120deg, #7c3aed 0%, #9333ea 45%, #c026d3 100%);
  --shadow-lg: 0 18px 44px -22px rgba(76,29,149,0.28);
  --glow-1:rgba(139,92,246,.20); --glow-2:rgba(217,70,239,.14); --glow-3:rgba(13,148,136,.10);
  --grid-op:.30; --star-op:.35;
  color-scheme: light;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow-x:hidden;transition:background .45s ease,color .45s ease;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,32px);}
::selection{background:var(--accent);color:#fff;}

/* ===== ANIMATED BACKGROUND ===== */
.bg-blobs{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9;will-change:transform;}
.blob.b1{width:52vw;height:52vw;left:-12vw;top:-16vw;background:radial-gradient(circle,var(--glow-1),transparent 70%);animation:drift1 22s ease-in-out infinite;}
.blob.b2{width:46vw;height:46vw;right:-10vw;top:8vh;background:radial-gradient(circle,var(--glow-2),transparent 70%);animation:drift2 27s ease-in-out infinite;}
.blob.b3{width:44vw;height:44vw;left:22vw;bottom:-18vw;background:radial-gradient(circle,var(--glow-3),transparent 70%);animation:drift3 31s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(9vw,7vh) scale(1.14);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05);}50%{transform:translate(-8vw,10vh) scale(.92);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(.95);}50%{transform:translate(6vw,-8vh) scale(1.12);}}
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:var(--grid-op);background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 38%,transparent 100%);mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 38%,transparent 100%);animation:gridPan 26s linear infinite;}
@keyframes gridPan{to{background-position:52px 52px;}}
.bg-dots{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.dot-p{position:absolute;border-radius:50%;background:var(--accent);opacity:var(--star-op);animation:floatUp linear infinite;}
@keyframes floatUp{0%{transform:translateY(0) scale(.6);opacity:0;}12%{opacity:var(--star-op);}88%{opacity:var(--star-op);}100%{transform:translateY(-105vh) scale(1.2);opacity:0;}}
@media (prefers-reduced-motion: reduce){.blob,.bg-grid,.dot-p{animation:none!important;}}

/* ===== LOADER ===== */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;transition:opacity .7s ease,visibility .7s ease;}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-logo{width:96px;height:96px;background:var(--logo) center/contain no-repeat;margin-bottom:26px;animation:logoPop 2.6s ease-in-out infinite;filter:drop-shadow(0 0 26px rgba(139,92,246,.55));}
@keyframes logoPop{0%,100%{transform:scale(1) rotate(0);}50%{transform:scale(1.09) rotate(4deg);}}
.loader-title{font-family:var(--font-display);font-size:clamp(22px,4vw,38px);font-weight:700;text-align:center;letter-spacing:-0.01em;}
.loader-title span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.loader-domain{margin-top:20px;font-family:var(--font-mono);font-size:clamp(13px,3.4vw,16px);color:var(--accent);display:flex;align-items:center;gap:6px;min-height:22px;}
.loader-domain .cursor{width:2px;height:16px;background:var(--accent);animation:blink 1s step-end infinite;}
.loader-bar{margin-top:28px;width:min(220px,70vw);height:2px;border-radius:2px;background:var(--border);overflow:hidden;}
.loader-bar span{display:block;height:100%;width:0%;background:var(--accent-grad);animation:loadBar 2.6s ease forwards;}
@keyframes loadBar{to{width:100%;}}
@keyframes blink{50%{opacity:0;}}

/* ===== NAV ===== */
header{position:fixed;top:0;left:0;right:0;z-index:200;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);background:color-mix(in srgb,var(--bg) 74%,transparent);border-bottom:1px solid var(--border);transition:background .4s ease,border-color .4s ease;}
nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 32px;max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:17px;z-index:210;}
.brand .logo-img{display:block;width:40px;height:40px;background:var(--logo) center/contain no-repeat;filter:drop-shadow(0 0 12px rgba(139,92,246,.45));transition:transform .35s ease;}
.brand:hover .logo-img{transform:rotate(-8deg) scale(1.06);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--text-muted);position:relative;padding:4px 0;transition:color .25s ease;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent-grad);transition:width .25s ease;}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:12px;z-index:210;}
.theme-toggle{width:40px;height:40px;border-radius:50%;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;box-shadow:0 8px 22px -6px rgba(139,92,246,.6);transition:transform .3s ease,box-shadow .3s ease;}
.theme-toggle:hover{transform:translateY(-2px) rotate(-8deg);}
.ham{display:none;flex-direction:column;gap:5px;padding:9px;}
.mobile-menu{display:none;}
.ham span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s ease;}
.ham.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ham.active span:nth-child(2){opacity:0;}
.ham.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:12px;font-weight:600;font-size:14.5px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;white-space:nowrap;}
.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 10px 30px -8px rgba(139,92,246,.55);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px -6px rgba(139,92,246,.65);}
.btn-outline{border:1px solid var(--border-strong);color:var(--text);background:color-mix(in srgb,var(--surface) 60%,transparent);}
.btn-outline:hover{background:var(--surface);border-color:var(--accent);}

/* ===== HERO ===== */
.hero{padding-top:160px;padding-bottom:80px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--border-strong);color:var(--accent-3);margin-bottom:22px;}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 10px var(--accent-3);animation:dotPulse 1.6s ease-in-out infinite;}
@keyframes dotPulse{50%{opacity:.35;}}
.hero h1{font-family:var(--font-display);font-size:clamp(34px,5.4vw,60px);line-height:1.06;font-weight:700;letter-spacing:-0.02em;margin-bottom:18px;}
.hero h1 .grad{background:var(--accent-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s ease-in-out infinite;}
@keyframes gradShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.hero p.lead{font-size:16.5px;line-height:1.75;color:var(--text-muted);max-width:520px;margin-bottom:28px;min-height:3.5em;}
.lead-cursor{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:text-bottom;margin-left:1px;animation:blinkCursor .85s step-end infinite;}
@keyframes blinkCursor{50%{opacity:0;}}

/* ===== GITHUB STATS ===== */
.gh-stats{margin-top:44px;display:grid;grid-template-columns:1.3fr 1fr;gap:18px;}
.gh-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:196px;}
.gh-card img{width:100%;height:auto;display:block;border-radius:8px;}
.gh-error{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);font-size:13.5px;text-align:center;padding:20px;}
.gh-error i{font-size:22px;}
@media(max-width:760px){.gh-stats{grid-template-columns:1fr;}}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px;}
.social-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.social-row span{font-size:12px;color:var(--text-dim);margin-right:2px;text-transform:uppercase;letter-spacing:.08em;}
.social-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:15px;transition:all .25s ease;}
.social-icon:hover{color:#fff;background:var(--accent-grad);border-color:transparent;transform:translateY(-3px);}

/* ===== TERMINAL (always dark for readability) ===== */
.hero-card-wrap{position:relative;}
.hero-card-wrap::before{content:'';position:absolute;inset:-30px;z-index:-1;background:radial-gradient(circle at 60% 30%,rgba(139,92,246,.30),transparent 65%);filter:blur(10px);}
.terminal{background:#140f26;border:1px solid rgba(168,130,255,.28);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#1a1330;border-bottom:1px solid rgba(168,130,255,.16);}
.terminal-bar .tdot{width:11px;height:11px;border-radius:50%;}
.tdot.red{background:#ff5f57;}.tdot.yellow{background:#febc2e;}.tdot.green{background:#28c840;}
.terminal-bar .tlabel{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:#7d7399;}
.terminal-body{padding:22px 20px;font-family:var(--font-mono);font-size:13.5px;line-height:1.85;height:280px;overflow-y:auto;color:#a99fc4;white-space:pre-wrap;word-break:break-word;scrollbar-width:none;-ms-overflow-style:none;}
.terminal-body::-webkit-scrollbar{display:none;}
.terminal-body .prompt{color:#5eead4;}
.terminal-body .cmd{color:#f1edfb;}
.terminal-body .ok{color:#4ade80;}
.terminal-cursor{display:inline-block;width:8px;height:15px;background:#8b5cf6;vertical-align:middle;animation:blink 1s step-end infinite;}
.hero-tags{display:flex;gap:8px;padding:14px 20px 20px;flex-wrap:wrap;border-top:1px solid rgba(168,130,255,.16);}
.hero-tag{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:99px;background:#1a1330;color:#a99fc4;border:1px solid rgba(168,130,255,.16);}

/* ===== STATS ===== */
.stats-wrap{padding:0 0 40px;}
.stats{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow-lg);overflow:hidden;}
.stat{text-align:center;padding:30px 14px;border-right:1px solid var(--border);}
.stat:last-child{border-right:none;}
.stat .num{font-family:var(--font-display);font-size:clamp(24px,3vw,36px);font-weight:700;}
.stat .num .accent-txt{color:var(--accent-2);}
.stat .label{margin-top:6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}

/* ===== SECTIONS ===== */
section{padding:clamp(58px,10vw,105px) 0;}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
.eyebrow::before,.eyebrow::after{content:'';width:26px;height:1px;background:var(--border-strong);}
.section-title{font-family:var(--font-display);font-weight:700;letter-spacing:-0.01em;font-size:clamp(26px,4vw,42px);text-align:center;margin-bottom:14px;}
.section-sub{text-align:center;color:var(--text-muted);font-size:15px;max-width:560px;margin:0 auto;}

/* ===== ABOUT ===== */
.about-box{max-width:820px;margin:42px auto 0;text-align:center;}
.about-box p{font-size:16px;line-height:1.9;color:var(--text-muted);}
.about-box strong{color:var(--text);font-weight:600;}
.marquee{margin-top:44px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scrollLeft 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.pill{display:flex;align-items:center;gap:8px;padding:11px 20px;border-radius:99px;white-space:nowrap;background:var(--surface);border:1px solid var(--border-strong);font-size:13.5px;font-weight:500;color:var(--text);}
.pill i{color:var(--accent);}

/* ===== WORK ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
/* ===== PROJECT CAROUSEL (book-flip / coverflow) ===== */
.project-carousel{position:relative;padding:0 64px;}
.pc-track{position:relative;height:440px;transition:height .45s cubic-bezier(.4,0,.2,1);}
.project-card{
  position:absolute;top:0;left:50%;width:min(440px,88%);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .5s ease,filter .5s ease,box-shadow .3s ease,border-color .3s ease;
  will-change:transform,opacity,filter;
}
.project-card[data-pos="active"]{transform:translate(-50%,0) scale(1);opacity:1;filter:blur(0);z-index:5;pointer-events:auto;box-shadow:var(--shadow-lg);}
.project-card[data-pos="prev"]{transform:translate(calc(-50% - 76%),0) scale(.8) rotateY(18deg);opacity:.5;filter:blur(3px);z-index:3;pointer-events:auto;cursor:pointer;}
.project-card[data-pos="next"]{transform:translate(calc(-50% + 76%),0) scale(.8) rotateY(-18deg);opacity:.5;filter:blur(3px);z-index:3;pointer-events:auto;cursor:pointer;}
.project-card[data-pos="hidden"]{transform:translate(-50%,0) scale(.6);opacity:0;filter:blur(6px);z-index:1;pointer-events:none;}
.project-card[data-pos="prev"]:hover,.project-card[data-pos="next"]:hover{opacity:.75;}
.pc-track{perspective:1400px;}
.pc-arrow{position:absolute;top:190px;width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:16px;z-index:8;transition:all .25s ease;box-shadow:var(--shadow-lg);}
.pc-arrow:hover{background:var(--accent-grad);color:#fff;border-color:transparent;transform:scale(1.08);}
.pc-prev{left:0;}
.pc-next{right:0;}
.pc-dots{display:flex;justify-content:center;gap:9px;margin-top:26px;}
.pc-dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);transition:all .3s ease;}
.pc-dot.active{background:var(--accent-grad);width:24px;border-radius:5px;}
.project-thumb{height:190px;overflow:hidden;border-bottom:1px solid var(--border);position:relative;display:block;}
.project-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s ease;}
.project-card:hover .project-thumb img{transform:scale(1.05);}
.project-body{padding:22px;}
.project-body h3{font-family:var(--font-display);font-size:18px;margin-bottom:8px;}
.project-body p{font-size:14px;color:var(--text-muted);line-height:1.65;margin-bottom:16px;}
.project-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.project-links .demo{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;background:var(--accent-grad);color:#fff;transition:transform .25s ease,box-shadow .25s ease;}
.project-links .demo:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(139,92,246,.6);}
.project-links .url{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);word-break:break-all;}
.project-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);margin-bottom:10px;}

/* ===== CONTACT ===== */
.contact-panel{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:66px 40px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
.contact-panel::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%);}
.contact-panel>*{position:relative;z-index:1;}
.contact-panel h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,5vw,50px);line-height:1.1;margin-bottom:16px;}
.contact-panel h2 .grad{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.contact-panel p{color:var(--text-muted);font-size:15.5px;max-width:480px;margin:0 auto 30px;}
.contact-social{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;}
.contact-rows{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px;text-align:left;}
.contact-row{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);transition:border-color .25s ease,transform .25s ease,background .25s ease;}
.contact-row:hover{border-color:var(--accent);transform:translateX(4px);}
.cr-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--accent);font-size:16px;}
.cr-text{font-size:14px;font-weight:500;color:var(--text);word-break:break-word;}
.cr-go{margin-left:auto;font-size:12px;color:var(--text-dim);flex-shrink:0;}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--border);margin-top:40px;background:color-mix(in srgb,var(--surface) 55%,transparent);}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 0 20px;}
.footer-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:17px;}
.footer-brand .logo-img{display:block;width:38px;height:38px;background:var(--logo) center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(139,92,246,.4));}
.footer-links{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.footer-links a{font-size:14.5px;color:var(--text-muted);transition:color .25s ease;}
.footer-links a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--border);padding:16px 0 22px;text-align:center;}
.footer-copy{font-size:13.5px;color:var(--text-dim);}
.footer-copy a{color:var(--text-muted);}
.footer-copy a:hover{color:var(--accent);}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ===== TO TOP ===== */
#toTop{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:var(--accent-grad);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(139,92,246,.7);opacity:0;pointer-events:none;transform:translateY(12px);transition:all .3s ease;z-index:150;}
#toTop.show{opacity:1;pointer-events:auto;transform:translateY(0);}

/* ===== SCROLL PROGRESS ===== */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--accent-grad);z-index:300;transition:width .1s linear;box-shadow:0 0 10px rgba(139,92,246,.7);}

/* ===== EXTRA TOUCHES ===== */
.badge{animation:badgeGlow 3s ease-in-out infinite;}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 0 rgba(139,92,246,0);}50%{box-shadow:0 0 18px -4px rgba(139,92,246,.55);}}
.social-icon,.cr-icon{transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease;}
.social-icon:hover{box-shadow:0 10px 24px -8px rgba(139,92,246,.6);}
.project-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35));opacity:0;transition:opacity .35s ease;}
.project-card:hover .project-thumb::after{opacity:1;}
.stat .num{transition:transform .3s ease;}
.stat:hover .num{transform:scale(1.08);}
.theme-toggle i{transition:transform .4s ease;}
.theme-toggle:active i{transform:rotate(180deg);}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:120px;padding-bottom:56px;}
  .hero-card-wrap{order:2;}
}
@media(max-width:860px){
  nav{padding:11px 18px;}
  .nav-links{display:none;}
  .ham{display:flex;}
  .mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;padding-top:30px;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:26px;z-index:190;overflow-y:auto;}
  .mobile-menu.open{display:flex;animation:fadeUp .3s ease;}
  .mobile-menu a{font-size:22px;font-weight:600;color:var(--text);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat{border-right:none;border-bottom:1px solid var(--border);}
  .stat:nth-child(odd){border-right:1px solid var(--border);}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:none;}
  .project-carousel{padding:0 46px;}
  .project-card[data-pos="prev"]{transform:translate(calc(-50% - 58%),0) scale(.74);}
  .project-card[data-pos="next"]{transform:translate(calc(-50% + 58%),0) scale(.74);}
  .pc-arrow{width:38px;height:38px;font-size:13px;top:170px;}
  .contact-panel{padding:44px 20px;border-radius:22px;}
  .contact-rows{max-width:100%;}
  .footer-top{flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:30px;}
  .footer-links{gap:22px;justify-content:center;}
}
@media(max-width:560px){
  .hero{padding-top:110px;padding-bottom:44px;}
  .hero p.lead{font-size:15.5px;}
  .btn{padding:12px 20px;font-size:14px;}
  .hero-actions .btn{flex:1 1 auto;justify-content:center;}
  .social-row span{width:100%;margin-bottom:4px;}
  .terminal-body{font-size:12px;padding:16px 14px;height:220px;}
  .pill{padding:9px 15px;font-size:12.5px;}
  .project-thumb{height:165px;}
  .project-carousel{padding:0 40px;}
  .project-card{width:92%;}
  .project-card[data-pos="prev"]{transform:translate(calc(-50% - 48%),0) scale(.7);opacity:.35;}
  .project-card[data-pos="next"]{transform:translate(calc(-50% + 48%),0) scale(.7);opacity:.35;}
  .pc-arrow{width:34px;height:34px;font-size:12px;top:150px;}
  .stat{padding:22px 10px;}
  .cr-text{font-size:13px;}
  #toTop{right:14px;bottom:14px;width:40px;height:40px;}
}
@media(max-width:380px){
}

/* ===== SKILLS SECTION ===== */
.skill-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:40px auto 32px;}
.skill-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:99px;font-size:13px;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);transition:transform .25s ease,color .25s ease,background .3s ease,box-shadow .3s ease,border-color .3s ease;}
.skill-chip i{font-size:12px;}
.skill-chip:hover{transform:translateY(-2px);color:var(--text);border-color:var(--border-strong);}
.skill-chip.active{background:var(--accent-grad);color:#fff;border-color:transparent;box-shadow:0 10px 24px -10px rgba(139,92,246,.7);}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.skill-item{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px 10px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;opacity:0;transform:translateY(22px) scale(.94);transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.25,.64,1),border-color .3s ease,box-shadow .3s ease;}
.skill-item.in{opacity:1;transform:translateY(0) scale(1);}
.skill-item::before{content:'';position:absolute;inset:0;background:var(--accent-grad);opacity:0;transition:opacity .35s ease;z-index:0;}
.skill-item::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--accent) 30%,transparent),transparent);transform:skewX(-18deg);opacity:0;z-index:1;pointer-events:none;}
@keyframes skillSheen{0%{left:-70%;opacity:.9;}100%{left:130%;opacity:0;}}
.skill-item:hover::after{animation:skillSheen .85s ease;}
.skill-item:hover{transform:translateY(-8px) scale(1.03);border-color:var(--border-strong);box-shadow:0 18px 34px -16px rgba(139,92,246,.5);}
.skill-item:hover::before{opacity:.08;}
.skill-item>*{position:relative;z-index:2;}
.skill-item i{font-size:40px;line-height:1;transition:transform .35s cubic-bezier(.34,1.4,.64,1);}
.skill-item:hover i,.skill-item:hover .skill-ico{transform:translateY(-3px) scale(1.14) rotate(-5deg);}
.skill-ico{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--text);transition:transform .35s cubic-bezier(.34,1.4,.64,1);}
.skill-ico svg{width:100%;height:100%;display:block;}
.skill-name{font-size:12.8px;font-weight:700;color:var(--text);}
.skill-item i.si-white{color:var(--text);}
.skill-item i.si-discord{color:#5865F2;}
.skill-item i.si-android{color:#3DDC84;}
.skill-item.hidden-skill{display:none;}
.pc-hint{display:none;text-align:center;margin-top:16px;font-size:12.5px;color:var(--text-dim);}
.pc-hint i{margin-right:6px;color:var(--accent);}

/* ===== EXTRA ANIMATIONS ===== */
@keyframes heroIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
.hero-text>*{animation:heroIn .8s cubic-bezier(.22,.9,.3,1) both;}
.hero-text>*:nth-child(1){animation-delay:.15s;}
.hero-text>*:nth-child(2){animation-delay:.25s;}
.hero-text>*:nth-child(3){animation-delay:.35s;}
.hero-text>*:nth-child(4){animation-delay:.45s;}
.hero-text>*:nth-child(5){animation-delay:.55s;}
.hero-text>*:nth-child(6){animation-delay:.65s;}
.hero-text>.badge{animation:heroIn .8s cubic-bezier(.22,.9,.3,1) .15s both, badgeGlow 3s ease-in-out 1.3s infinite;}
nav{transition:padding .3s ease;}
@keyframes cardFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero-card-wrap{animation:heroIn .9s cubic-bezier(.22,.9,.3,1) .35s both;}
.hero-card-wrap .terminal{animation:cardFloat 7s ease-in-out 1.4s infinite;}
.btn{position:relative;overflow:hidden;}
.btn::after{content:'';position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease;}
.btn:hover::after{left:130%;}
.section-title{position:relative;}
.section-title::after{content:'';display:block;width:0;height:3px;margin:16px auto 0;border-radius:3px;background:var(--accent-grad);transition:width .8s cubic-bezier(.22,.9,.3,1) .15s;}
.section-title.visible::after{width:72px;}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.3,1);}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.3,1);}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none;}
.project-card[data-pos="active"]{animation:cardPop .5s cubic-bezier(.34,1.3,.64,1);}
@keyframes cardPop{from{transform:translate(-50%,10px) scale(.96);}to{transform:translate(-50%,0) scale(1);}}
.contact-row .cr-go{transition:transform .3s ease;}
.contact-row:hover .cr-go{transform:translate(3px,-3px);}
header.scrolled{box-shadow:0 10px 30px -22px rgba(0,0,0,.7);}
header.scrolled nav{padding-top:8px;padding-bottom:8px;}
.brand .logo-img{animation:logoBreathe 6s ease-in-out infinite;}
@keyframes logoBreathe{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-3px) rotate(3deg);}}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rippleGo .6s ease-out;pointer-events:none;}
@keyframes rippleGo{to{transform:scale(3.4);opacity:0;}}
.stat{transition:background .3s ease;}
.stat:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.social-icon:hover i{animation:iconPop .45s ease;}
@keyframes iconPop{50%{transform:scale(1.3) rotate(-8deg);}}
@media (prefers-reduced-motion: reduce){
  .hero-text>*,.hero-card-wrap,.hero-card-wrap .terminal,.brand .logo-img{animation:none!important;}
}

/* ===== LIGHT THEME POLISH ===== */
html[data-theme="light"] body{background:linear-gradient(180deg,#faf8ff 0%,#f2eefb 55%,#f7f4fe 100%);}
html[data-theme="light"] header{background:color-mix(in srgb,#ffffff 82%,transparent);box-shadow:0 6px 24px -20px rgba(76,29,149,.5);}
html[data-theme="light"] .skill-item,html[data-theme="light"] .project-card,html[data-theme="light"] .stats,html[data-theme="light"] .contact-panel,html[data-theme="light"] .gh-card{box-shadow:0 14px 34px -22px rgba(76,29,149,.45);}
html[data-theme="light"] .skill-item:hover{box-shadow:0 20px 38px -18px rgba(124,58,237,.38);}
html[data-theme="light"] .skill-item i.si-white,html[data-theme="light"] .skill-ico{color:#241a4d;}
html[data-theme="light"] .pill{background:#fff;}
html[data-theme="light"] .pc-arrow{background:#fff;}
html[data-theme="light"] .terminal{box-shadow:0 22px 48px -26px rgba(49,20,110,.55);}
html[data-theme="light"] .hero-card-wrap::before{background:radial-gradient(circle at 60% 30%,rgba(139,92,246,.22),transparent 65%);}
html[data-theme="light"] .mobile-menu{background:color-mix(in srgb,#ffffff 96%,transparent);}
html[data-theme="light"] .gh-card{background:#fff;}
html[data-theme="light"] .badge{background:#fff;}
html[data-theme="light"] .btn::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);}
html[data-theme="light"] .btn-outline{background:#fff;}
html[data-theme="light"] .social-icon{background:#fff;}
html[data-theme="light"] footer{background:color-mix(in srgb,#ffffff 70%,transparent);}

/* ===== MOBILE POLISH ===== */
@media(max-width:860px){
  .mobile-menu{gap:18px;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(10px);}
  .mobile-menu a{width:min(320px,82vw);text-align:center;padding:15px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--border);font-size:19px;animation:menuIn .45s cubic-bezier(.22,.9,.3,1) both;}
  .mobile-menu a.active{background:var(--accent-grad);color:#fff;border-color:transparent;}
  .mobile-menu.open a:nth-child(1){animation-delay:.05s;}
  .mobile-menu.open a:nth-child(2){animation-delay:.12s;}
  .mobile-menu.open a:nth-child(3){animation-delay:.19s;}
  .mobile-menu.open a:nth-child(4){animation-delay:.26s;}
  .mobile-menu.open a:nth-child(5){animation-delay:.33s;}
  @keyframes menuIn{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}

  /* one clean card per screen on mobile */
  .project-carousel{padding:0;}
  .pc-track{perspective:none;}
  .project-card{width:100%;}
  .project-card[data-pos="prev"],.project-card[data-pos="next"]{transform:translate(-50%,0) scale(.94);opacity:0;filter:blur(0);pointer-events:none;}
  .pc-arrow{top:64px;width:42px;height:42px;font-size:14px;background:rgba(10,7,22,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(255,255,255,.22);color:#fff;}
  .pc-prev{left:10px;}
  .pc-next{right:10px;}
  .pc-hint{display:block;}
  .project-body{padding:20px 18px 22px;}
  .project-body h3{font-size:17px;}
  .project-links .demo{flex:1;justify-content:center;}

  .skills-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:11px;}
  .skill-item{padding:20px 6px 16px;border-radius:15px;gap:11px;}
  .skill-item i{font-size:31px;}
  .skill-ico{width:31px;height:31px;}
  .skill-name{font-size:11.3px;}
  .skill-filters{gap:7px;margin:30px auto 24px;}
  .skill-chip{padding:8px 14px;font-size:12px;}
  .hero-text{text-align:center;}
  .hero-text .lead{margin-left:auto;margin-right:auto;}
  .hero-actions,.social-row{justify-content:center;}
  .eyebrow{font-size:11.5px;}
}
@media(max-width:400px){
  .skills-grid{grid-template-columns:repeat(3,1fr);gap:9px;}
  .skill-item i{font-size:27px;}
  .skill-ico{width:27px;height:27px;}
  .skill-name{font-size:10.6px;}
}

/* ===== LIGHT THEME — REFINED (scoped: dark theme untouched) ===== */
html[data-theme="light"]{
  --bg:#f6f4fc;
  --surface:#ffffff;
  --surface-2:#f7f4fe;
  --border:rgba(76,29,149,0.10);
  --border-strong:rgba(109,40,217,0.24);
  --text:#170f2e;
  --text-muted:#544d70;
  --text-dim:#8a83a4;
  --accent:#6d28d9;
  --accent-2:#a21caf;
  --accent-3:#0f766e;
  --accent-grad:linear-gradient(120deg,#6d28d9 0%,#8b5cf6 48%,#c026d3 100%);
  --shadow-lg:0 1px 2px rgba(23,15,46,.04), 0 16px 36px -22px rgba(49,20,110,.30);
  --glow-1:rgba(139,92,246,.15); --glow-2:rgba(217,70,239,.10); --glow-3:rgba(13,148,136,.07);
  --grid-op:.13; --star-op:.20;
}
/* soft, clean page backdrop instead of the heavy dark-mode wash */
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 560px at 10% -6%, #ece4ff 0%, transparent 62%),
    radial-gradient(900px 520px at 96% 2%, #fdeaf8 0%, transparent 58%),
    linear-gradient(180deg,#fbfaff 0%,#f5f2fd 60%,#f8f6fe 100%);
  background-attachment:fixed;
}
html[data-theme="light"] .blob{filter:blur(120px);opacity:.7;}
html[data-theme="light"] .bg-grid{
  -webkit-mask-image:radial-gradient(ellipse 78% 52% at 50% 0%,#000 22%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 52% at 50% 0%,#000 22%,transparent 100%);
}
html[data-theme="light"] .dot-p{background:#8b5cf6;}
html[data-theme="light"] ::selection{background:#6d28d9;color:#fff;}

/* header */
html[data-theme="light"] header{
  background:rgba(255,255,255,.80);
  border-bottom:1px solid rgba(76,29,149,.08);
  box-shadow:0 1px 0 rgba(76,29,149,.03);
}
html[data-theme="light"] header.scrolled{box-shadow:0 8px 26px -22px rgba(49,20,110,.45);}
html[data-theme="light"] .nav-links a{color:#5b5478;}
html[data-theme="light"] .nav-links a:hover,html[data-theme="light"] .nav-links a.active{color:#170f2e;}
html[data-theme="light"] .theme-toggle{box-shadow:0 8px 20px -8px rgba(109,40,217,.55);}

/* surfaces: crisp white cards with soft layered shadow */
html[data-theme="light"] .stats,
html[data-theme="light"] .project-card,
html[data-theme="light"] .skill-item,
html[data-theme="light"] .gh-card,
html[data-theme="light"] .contact-panel,
html[data-theme="light"] .pill,
html[data-theme="light"] .badge,
html[data-theme="light"] .social-icon,
html[data-theme="light"] .cr-icon,
html[data-theme="light"] .skill-chip,
html[data-theme="light"] .pc-arrow,
html[data-theme="light"] .btn-outline{
  background:#fff;
  border-color:rgba(76,29,149,.11);
}
html[data-theme="light"] .stats,
html[data-theme="light"] .project-card,
html[data-theme="light"] .skill-item,
html[data-theme="light"] .gh-card,
html[data-theme="light"] .contact-panel{
  box-shadow:0 1px 2px rgba(23,15,46,.04), 0 14px 30px -20px rgba(49,20,110,.28);
}
html[data-theme="light"] .skill-item:hover,
html[data-theme="light"] .project-card[data-pos="active"]:hover{
  box-shadow:0 1px 2px rgba(23,15,46,.05), 0 20px 36px -18px rgba(109,40,217,.34);
  border-color:rgba(109,40,217,.22);
}
html[data-theme="light"] .pill,
html[data-theme="light"] .badge,
html[data-theme="light"] .social-icon,
html[data-theme="light"] .skill-chip,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .pc-arrow{
  box-shadow:0 1px 2px rgba(23,15,46,.04), 0 6px 14px -12px rgba(49,20,110,.30);
}
html[data-theme="light"] .contact-row{background:#fff;border-color:rgba(76,29,149,.10);box-shadow:0 1px 2px rgba(23,15,46,.03);}
html[data-theme="light"] .contact-row:hover{border-color:rgba(109,40,217,.35);box-shadow:0 10px 22px -16px rgba(49,20,110,.4);}
html[data-theme="light"] .contact-panel::before{background:radial-gradient(circle at 50% 0%,rgba(109,40,217,.10),transparent 60%);}
html[data-theme="light"] .stat{border-color:rgba(76,29,149,.09);}
html[data-theme="light"] .stat:hover{background:rgba(109,40,217,.045);}

/* accents / small text */
html[data-theme="light"] .eyebrow{color:#6d28d9;}
html[data-theme="light"] .eyebrow::before,html[data-theme="light"] .eyebrow::after{background:rgba(109,40,217,.28);}
html[data-theme="light"] .badge{color:#0f766e;border-color:rgba(15,118,110,.28);}
html[data-theme="light"] .badge .dot{background:#0f766e;box-shadow:0 0 10px rgba(15,118,110,.7);}
html[data-theme="light"] .project-badge{background:rgba(109,40,217,.08);color:#6d28d9;border-color:rgba(109,40,217,.20);}
html[data-theme="light"] .project-links .url{color:#8a83a4;}
html[data-theme="light"] .pill i{color:#7c3aed;}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .skill-chip.active{box-shadow:0 10px 26px -12px rgba(109,40,217,.55);}
html[data-theme="light"] #toTop{box-shadow:0 10px 24px -10px rgba(109,40,217,.6);}
html[data-theme="light"] #scrollProgress{box-shadow:0 0 10px rgba(109,40,217,.35);}

/* icons that are white in dark mode must go dark here */
html[data-theme="light"] .skill-item i.si-white,
html[data-theme="light"] .skill-ico{color:#241a4d;}

/* terminal stays dark, but sits on the light page more gently */
html[data-theme="light"] .terminal{border-color:rgba(76,29,149,.18);box-shadow:0 24px 50px -28px rgba(49,20,110,.55);}
html[data-theme="light"] .hero-card-wrap::before{background:radial-gradient(circle at 60% 30%,rgba(139,92,246,.20),transparent 66%);}

/* loader + mobile menu + footer */
html[data-theme="light"] #loader{background:#fbfaff;}
html[data-theme="light"] .loader-bar{background:rgba(76,29,149,.14);}
html[data-theme="light"] .mobile-menu{background:rgba(251,250,255,.97);}
html[data-theme="light"] .mobile-menu a{background:#fff;border-color:rgba(76,29,149,.10);box-shadow:0 1px 2px rgba(23,15,46,.04);}
html[data-theme="light"] footer{background:rgba(255,255,255,.72);border-color:rgba(76,29,149,.09);}
html[data-theme="light"] .footer-bottom{border-color:rgba(76,29,149,.09);}

/* subtler hover sheen on white cards */
html[data-theme="light"] .skill-item::after{background:linear-gradient(100deg,transparent,rgba(109,40,217,.12),transparent);}
html[data-theme="light"] .btn::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);}
html[data-theme="light"] .ripple{background:rgba(109,40,217,.22);}
html[data-theme="light"] .btn-primary .ripple,html[data-theme="light"] .skill-chip.active .ripple{background:rgba(255,255,255,.5);}

@media(max-width:860px){
  html[data-theme="light"] .pc-arrow{background:rgba(23,15,46,.50);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none;}
}
/* hide until the swarm builds the page */
html.sw-on :is(header,section,.stats-wrap,footer),html.sw-on :is(header,section,.stats-wrap,footer) *,html.sw-on #toTop{visibility:hidden}