:root {
  --bg: #050816;
  --bg-2: #080c1f;
  --surface: rgba(15, 23, 42, 0.72);
  --surface-2: rgba(30, 41, 59, 0.65);
  --border: rgba(148, 163, 184, 0.18);
  --text: #f8fafc;
  --muted: #94a3b8;
  --primary: #7c3aed;
  --primary-2: #a855f7;
  --cyan: #22d3ee;
  --blue: #60a5fa;
  --emerald: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --gradient-primary: linear-gradient(135deg, #7c3aed, #22d3ee);
  --gradient-warm: linear-gradient(135deg, #f59e0b, #f43f5e);
  --gradient-cool: linear-gradient(135deg, #60a5fa, #10b981);
  --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.35);
}
body.theme-light {
  --bg: #eef4ff;
  --bg-2: #f6f9ff;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(241, 245, 255, 0.8);
  --border: rgba(99, 102, 241, 0.2);
  --text: #0f172a;
  --muted: #52607a;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0;
  color:var(--text);
  font-family:"Plus Jakarta Sans","Segoe UI",Tahoma,Arial,sans-serif;
  background:
    radial-gradient(850px 520px at -10% -10%, rgba(124,58,237,.25), transparent 62%),
    radial-gradient(900px 480px at 105% 20%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(620px 400px at 75% 75%, rgba(96,165,250,.16), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.08;
  background-image: linear-gradient(to right, rgba(148,163,184,.2) 1px, transparent 1px),linear-gradient(to bottom, rgba(148,163,184,.2) 1px, transparent 1px);
  background-size: 28px 28px;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.color-orb{position:fixed;border-radius:999px;filter:blur(44px);opacity:.32;pointer-events:none;z-index:-1;animation:drift 16s ease-in-out infinite}
.orb-violet{width:300px;height:300px;left:2%;top:6%;background:rgba(124,58,237,.65)}
.orb-cyan{width:360px;height:360px;right:4%;top:28%;background:rgba(34,211,238,.55);animation-delay:-5s}
.orb-blue{width:280px;height:280px;right:18%;bottom:4%;background:rgba(96,165,250,.5);animation-delay:-9s}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;z-index:110;background:var(--gradient-primary);box-shadow:0 0 18px rgba(124,58,237,.7)}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:120;opacity:0;transform:translate(-50%,-50%)}
.cursor-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue))}
.cursor-ring{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(124,58,237,.7);box-shadow:0 0 18px rgba(34,211,238,.35)}
.cursor-ring.is-hover{transform:translate(-50%,-50%) scale(1.35);border-color:rgba(34,211,238,.9)}

.container-lg{max-width:1200px;margin:0 auto;padding:0 20px}
.main-offset{padding-top:114px}
.section{max-width:1200px;margin:0 auto;padding:56px 20px;position:relative}
.section-accent::after{content:"";position:absolute;left:20px;top:-8px;width:84px;height:3px;background:var(--gradient-primary);border-radius:999px;opacity:.8}

.site-header{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:14px}
.nav-shell{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border:1px solid var(--border);border-radius:20px;background:color-mix(in srgb,var(--surface) 86%, transparent);backdrop-filter:blur(15px);box-shadow:0 12px 36px rgba(2,6,23,.24);transition:.25s}
.site-header.scrolled .nav-shell{border-color:rgba(34,211,238,.35);box-shadow:0 14px 38px rgba(34,211,238,.12),0 0 0 1px rgba(124,58,237,.2)}
.brand{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:20px}
.navlink{position:relative;font-size:1rem;color:var(--muted);padding:8px 2px;transition:.25s}
.navlink::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gradient-primary);transition:width .25s}
.navlink:hover{color:var(--text)}
.navlink:hover::after{width:100%}
.navlink.active{color:var(--text);font-weight:700}
.navlink.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:10px}

.icon-btn{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--border);background:var(--surface-2);border-radius:14px;color:var(--text);cursor:pointer;transition:.25s}
.icon-btn:hover{box-shadow:0 0 0 3px rgba(34,211,238,.12),0 10px 26px rgba(2,6,23,.2);border-color:rgba(34,211,238,.45);transform:translateY(-1px)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.primary-btn,.btn-primary,.nav-cta,.secondary-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:14px;border:1px solid transparent;font-weight:700;transition:.24s;overflow:hidden}
.primary-btn,.btn-primary,.nav-cta{background:var(--gradient-primary);color:#f8fbff;box-shadow:0 14px 30px rgba(124,58,237,.28)}
.primary-btn::before,.btn-primary::before,.nav-cta::before{content:"";position:absolute;left:-140%;top:0;height:100%;width:70%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.28),transparent);transition:left .6s}
.primary-btn:hover::before,.btn-primary:hover::before,.nav-cta:hover::before{left:160%}
.primary-btn:hover,.btn-primary:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(34,211,238,.34),0 18px 32px rgba(124,58,237,.25)}
.secondary-btn{background:color-mix(in srgb,var(--surface) 80%, transparent);color:var(--text);border-color:rgba(34,211,238,.45);box-shadow:inset 0 0 0 1px rgba(124,58,237,.24)}
.secondary-btn:hover{border-color:rgba(124,58,237,.8);box-shadow:0 0 24px rgba(34,211,238,.2)}

.show-mobile{display:none}
.mobile-menu{margin-top:10px;padding:10px;border:1px solid var(--border);background:var(--surface);border-radius:16px;box-shadow:0 10px 24px rgba(15,23,42,.15)}
.mobile-menu.hidden{display:none}
.mobile-nav{display:block;padding:10px 12px;border-radius:10px;color:var(--muted)}
.mobile-nav:hover{background:rgba(124,58,237,.1);color:var(--text)}

.h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.04;font-weight:800;letter-spacing:-.03em}
.h2{font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.14;font-weight:750;letter-spacing:-.02em}
.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.reveal{opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important}

.accent-badge,.tag{display:inline-flex;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--surface-2) 82%, transparent);border:1px solid var(--border);font-size:.78rem;font-weight:700;color:var(--text)}
.accent-badge{box-shadow:0 0 0 1px rgba(34,211,238,.18),0 6px 18px rgba(2,6,23,.18)}

.premium-card,.card,.timeline-item,.project-card,.skill-card,.achievement-card{
  border:1px solid var(--border);
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 92%, transparent),color-mix(in srgb,var(--surface-2) 86%, transparent));
  border-radius:22px;
  box-shadow:0 16px 34px rgba(2,6,23,.24);
  position:relative;
  overflow:hidden;
  transition:.26s;
}
.gradient-border::before,.premium-card::before,.card::before,.timeline-item::before,.project-card::before,.skill-card::before,.achievement-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(130deg,rgba(124,58,237,.55),rgba(34,211,238,.5),rgba(16,185,129,.36));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  z-index:1;
}
.premium-card::after,.card::after{content:"";position:absolute;top:-120%;left:-55%;width:52%;height:250%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);opacity:0;transition:.45s}
.premium-card:hover::after,.card:hover::after{opacity:1;left:115%}
.premium-card:hover,.card:hover,.timeline-item:hover,.project-card:hover,.skill-card:hover,.achievement-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(124,58,237,.25),0 0 28px rgba(34,211,238,.18),0 18px 36px rgba(2,6,23,.25)}
.premium-card > *,.card > *{position:relative;z-index:2}
.premium-card .color-orb,.card .color-orb{z-index:1}

.project-card img,.card img{transition:transform .45s ease}
.project-card:hover img,.card:hover img{transform:scale(1.04)}
.hero-visual-card{padding:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.hero-portrait{width:100%;height:auto;display:block;object-fit:contain;object-position:center bottom;transform:none}
.hero-visual-card{border:0;border-bottom:1px solid rgba(34,211,238,.45);border-radius:0}
.hero-visual-card::before,.hero-visual-card::after{display:none!important}
@media (max-width:900px){.hero-portrait{max-height:440px}}

.section:nth-of-type(1) .h1{color:var(--text)}
.section:nth-of-type(1) .text-2xl{background:var(--gradient-cool);-webkit-background-clip:text;background-clip:text;color:transparent}
.section:nth-of-type(2) .h2{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.section:nth-of-type(3) .h2{background:var(--gradient-cool);-webkit-background-clip:text;background-clip:text;color:transparent}
.section:nth-of-type(4) .h2{background:linear-gradient(135deg,var(--rose),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.empty{border:1px dashed var(--border);background:color-mix(in srgb,var(--surface-2) 85%, transparent);padding:16px 20px;border-radius:14px;color:var(--muted)}
.input,.textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 14px;outline:none}
.input:focus,.textarea:focus{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 4px rgba(34,211,238,.15)}
.textarea{min-height:130px}

.blog-content{color:var(--text)}
.blog-content h2,.blog-content h3{margin:1.25rem 0 .75rem;font-weight:700;line-height:1.3}
.blog-content p{margin:0 0 1rem}
.blog-content ul,.blog-content ol{margin:0 0 1rem 1.25rem;padding:0}
.blog-content li{margin:.35rem 0}
.blog-content a{color:var(--primary-2);text-decoration:underline}
.blog-content blockquote{margin:1rem 0;padding:.75rem 1rem;border-left:3px solid var(--primary-2);background:color-mix(in srgb,var(--surface-2) 80%,transparent);border-radius:8px}
.blog-content table{width:100%;border-collapse:collapse;margin:1rem 0}
.blog-content th,.blog-content td{border:1px solid var(--border);padding:8px 10px;text-align:left}
.blog-content img{max-width:100%;height:auto;border-radius:12px;margin:1rem 0;cursor:zoom-in}
.blog-detail-title{font-size:clamp(2rem,4vw,3.2rem)}
.blog-detail-excerpt{max-width:52rem}
.blog-back-link{display:inline-block;margin-bottom:1rem;color:var(--muted);text-decoration:none;font-size:.92rem}
.blog-back-link:hover{color:var(--primary-2)}
.blog-cover-trigger{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.blog-cover-img{width:100%;max-height:420px;object-fit:cover;display:block}
.blog-cover-hint{position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(2,6,23,.72);color:#f8fafc;font-size:.78rem;font-weight:600;letter-spacing:.02em}
.blog-card-media{display:block;text-decoration:none}
.blog-card-placeholder{background:color-mix(in srgb,var(--surface-2) 85%,transparent)}
.blog-lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px}
.blog-lightbox.hidden{display:none!important}
.blog-lightbox-backdrop{position:absolute;inset:0;border:0;background:rgba(2,6,23,.88);cursor:pointer}
.blog-lightbox-panel{position:relative;z-index:1;max-width:min(1100px,96vw);max-height:90vh}
.blog-lightbox-img{display:block;max-width:min(1100px,96vw);max-height:90vh;width:auto;height:auto;border-radius:14px;box-shadow:0 24px 60px rgba(2,6,23,.45)}
.blog-lightbox-close{position:absolute;top:-12px;right:-12px;width:40px;height:40px;border:0;border-radius:999px;background:var(--surface);color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(2,6,23,.35)}

.site-footer{margin-top:48px;border-top:1px solid var(--border);padding:36px 0 28px;color:var(--muted)}
.footer-inner{display:flex;flex-direction:column;gap:24px}
.footer-brand-block{display:flex;flex-direction:column;gap:6px}
.footer-brand{font-size:1.15rem;font-weight:700;color:var(--text);text-decoration:none}
.footer-brand:hover{color:var(--primary-2)}
.footer-tagline{font-size:.95rem;color:var(--muted);margin:0}
.footer-contact{font-size:.9rem;margin:0}
.footer-contact a{color:var(--text);text-decoration:none}
.footer-contact a:hover{color:var(--primary-2)}
.footer-sep{margin:0 .35rem;opacity:.6}
.footer-social{display:flex;flex-wrap:wrap;gap:10px}
.footer-social-link{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);transition:border-color .2s,transform .2s,box-shadow .2s}
.footer-social-link svg{width:18px;height:18px;fill:currentColor}
.footer-social-link:hover{border-color:rgba(34,211,238,.55);transform:translateY(-2px);box-shadow:0 8px 20px rgba(34,211,238,.12);color:var(--primary-2)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.footer-bottom p{margin:0;font-size:.9rem}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:none;font-size:.9rem}
.footer-links a:hover{color:var(--primary-2)}

.glow-orb{box-shadow:var(--shadow-glow)}
.color-orb{will-change:transform,opacity}

.grid{display:grid}.flex{display:flex}.inline-block{display:inline-block}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.space-y-2>*+*{margin-top:.5rem}.space-y-4>*+*{margin-top:1rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mb-6{margin-bottom:1.5rem}.pt-0{padding-top:0}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.w-full{width:100%}.max-w-2xl{max-width:42rem}.text-center{text-align:center}.font-medium{font-weight:500}.font-semibold{font-weight:700}
.text-xs{font-size:.78rem}.text-sm{font-size:.92rem}.text-base{font-size:1rem}.text-lg{font-size:1.14rem}.text-xl{font-size:1.45rem}.text-2xl{font-size:clamp(1.4rem,2.4vw,2rem)}.leading-8{line-height:2rem}
.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:14px}.object-cover{object-fit:cover}.object-contain{object-fit:contain}
.h-44{height:11rem}.h-48{height:12rem}.h-\[360px\]{height:360px}.h-\[420px\]{height:420px}.h-\[440px\]{height:440px}

.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,0)}}

@media (max-width:1100px){
  .nav-links{display:none}
  .show-mobile{display:inline-flex}
  .hide-mobile{display:none}
  .lg\:grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cursor-dot,.cursor-ring{display:none}
}
@media (max-width:900px){
  .main-offset{padding-top:106px}
  .lg\:grid-cols-2,.md\:grid-cols-3,.xl\:grid-cols-3{grid-template-columns:1fr}
  .md\:grid-cols-2,.sm\:grid-cols-2{grid-template-columns:1fr}
  .h-\[440px\],.h-\[420px\],.h-\[360px\]{height:auto;max-height:440px}
}
@media (max-width:760px){
  .section{padding:44px 16px}
  .container-lg{padding:0 16px}
  .footer-row{flex-direction:column;align-items:flex-start}
  .color-orb{opacity:.18}
}