*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:       #070709;
  --text:     #ede8e3;
  --muted:    rgba(237,232,227,0.48);
  --dim:      rgba(237,232,227,0.22);
  --border:   rgba(255,255,255,0.07);
  --border-h: rgba(255,255,255,0.13);
  --lgs:
    0 0 8px  rgba(0,0,0,0.03),
    0 2px 6px rgba(0,0,0,0.08),
    inset  3px  3px 0.5px -3.5px rgba(255,255,255,0.09),
    inset -3px -3px 0.5px -3.5px rgba(255,255,255,0.85),
    inset  1px  1px   1px -0.5px rgba(255,255,255,0.60),
    inset -1px -1px   1px -0.5px rgba(255,255,255,0.60),
    inset  0    0   6px   6px    rgba(255,255,255,0.12),
    inset  0    0   2px   2px    rgba(255,255,255,0.06),
    0 0 12px rgba(0,0,0,0.15);
  --r: 16px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}

img { -webkit-user-drag:none; user-drag:none; pointer-events:none; -webkit-touch-callout:none; }
a,button,input,textarea,select { -webkit-user-select:auto; user-select:auto; }

@media print { body { display:none!important; } }

body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025; pointer-events: none; z-index: 9998;
}

.blobs { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.blob  { position: absolute; border-radius: 50%; opacity: 0.35; }
.b1 { width:620px; height:620px; background: radial-gradient(circle, rgba(204,197,189,0.55) 0%, transparent 65%); top:-210px; left:-210px; }
.b2 { width:480px; height:480px; background: radial-gradient(circle, rgba(136,136,160,0.55) 0%, transparent 65%); bottom:-150px; right:-150px; }
.b3 { width:300px; height:300px; background: radial-gradient(circle, rgba(208,204,200,0.55) 0%, transparent 65%); top:45%; left:55%; }

.bg-paths-wrap { position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-paths { width:100%; height:100%; display:block; }
.bg-paths path { fill:none; stroke-linecap:round; }

.gl {
  position: relative; border-radius: var(--r);
  background: linear-gradient(165deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--border); box-shadow: var(--lgs); overflow: visible;
  transition: background 0.28s, border-color 0.28s, transform 0.28s cubic-bezier(0.16,1,0.3,1);
  margin: 4px;
}
.gl::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.11), transparent);
  z-index:2; pointer-events:none;
}
.gl:hover { background: linear-gradient(165deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.025) 100%); border-color:var(--border-h); }
.gl-c { padding: 28px 30px; position: relative; z-index: 3; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
section { padding: 96px 0; position: relative; z-index: 1; }
.divider { width:100%; height:1px; background:var(--border); position:relative; z-index:1; }

.nav-wrap { position:fixed; top:16px; left:16px; right:16px; z-index:1000; display:flex; justify-content:center; pointer-events:none; }
.nav-pill { width:100%; max-width:720px; pointer-events:auto; margin:0 auto; background:linear-gradient(165deg,rgba(10,10,12,0.75) 0%,rgba(10,10,12,0.65) 100%); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; gap:20px; }
.nav-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:18px; color:var(--text); text-decoration:none; letter-spacing:-0.5px; transition:opacity .2s; white-space:nowrap; }
.nav-logo:hover { opacity:0.7; }
.nav-site-link { font-size:13px; color:var(--muted); text-decoration:none; transition:color .2s; display:inline-flex; align-items:center; gap:5px; }
.nav-site-link:hover { color:var(--text); }

.nav-links { display:flex; gap:28px; list-style:none; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:400; transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.nav-dock { display:none; flex:1; overflow-x:auto; gap:8px; padding:2px 4px; margin:0 8px; -ms-overflow-style:none; scrollbar-width:none; }
.nav-dock::-webkit-scrollbar { display:none; }
.nav-dock a { flex-shrink:0; padding:8px 16px; border-radius:100px; font-size:13px; font-weight:500; color:var(--text); text-decoration:none; background:linear-gradient(165deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%); border:1px solid var(--border); white-space:nowrap; transition:all 0.2s; }
.nav-dock a:hover { background:linear-gradient(165deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.03) 100%); border-color:var(--border-h); }
.nav-back-mobile {
  display:inline-flex; align-items:center; gap:6px; width:100%; flex-shrink:0;
  padding:10px 16px; border-radius:100px; font-size:12px; font-weight:500;
  color:var(--dim); text-decoration:none; border:1px solid var(--border);
  transition:all 0.2s; margin-top:4px;
}
.nav-back-mobile:hover { color:var(--text); border-color:var(--border-h); background:rgba(255,255,255,0.04); }
.nav-back-desktop { display:inline-flex; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--text); }
.nav-toggle svg { display:block; }
.icon-close { display:none; }
.nav-wrap.open .icon-menu { display:none; }
.nav-wrap.open .icon-close { display:block; }
.nav-wrap:not(.open) .icon-menu { display:block; }
.nav-wrap:not(.open) .icon-close { display:none; }

.nav-back {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  letter-spacing:0.3px; padding:5px 14px; border-radius:100px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  color:var(--text); text-decoration:none; transition:all 0.2s ease;
}
.nav-back:hover { background:rgba(255,255,255,0.08); border-color:var(--border-h); transform:translateX(-2px); }
.nav-back svg { transition:transform 0.2s; }
.nav-back:hover svg { transform:translateX(-2px); }

.tag {
  display:inline-block; padding:4px 14px; border-radius:100px; font-size:11px; font-weight:500; letter-spacing:0.5px;
  background: var(--accent); border:1px solid var(--accent-border); color:var(--accent-text); text-transform:uppercase;
}

.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:76px; padding-top:120px; }
.hero-tag { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin-bottom:24px; }
.hero-title {
  font-family:'Syne',sans-serif;
  font-size:clamp(52px, 10vw, 100px);
  font-weight:800; line-height:1.1;
  letter-spacing:-2px; color:var(--text); margin-bottom:40px;
}
.hero-title .l {
  display:inline-block; opacity:0; transform:translateY(56px);
  animation:lup 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-title .l:nth-child(1){animation-delay:.05s}
.hero-title .l:nth-child(2){animation-delay:.10s}
.hero-title .l:nth-child(3){animation-delay:.15s}
.hero-title .l:nth-child(4){animation-delay:.20s}
.hero-title .l:nth-child(5){animation-delay:.25s}
.hero-title .l:nth-child(6){animation-delay:.30s}
.hero-title .l:nth-child(7){animation-delay:.35s}
.hero-title .l:nth-child(8){animation-delay:.40s}
.hero-title .l:nth-child(9){animation-delay:.45s}
@keyframes lup { to { opacity:1; transform:translateY(0); } }

.hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.hero-desc { max-width:520px; color:var(--muted); font-size:16px; line-height:1.8; font-weight:300; opacity:0; animation:fup .8s .46s cubic-bezier(0.16,1,0.3,1) forwards; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation:fup .8s .60s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes fup { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

.hero-name {
  font-family:'Syne',sans-serif;
  font-size:clamp(48px, 13.5vw, 168px);
  font-weight:800; line-height:1.05;
  letter-spacing:-3px; color:var(--text); margin-bottom:52px;
  white-space:nowrap;
}
.hero-name .l {
  display:inline-block; opacity:0; transform:translateY(56px);
  animation:lup 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-name .l:nth-child(1){animation-delay:.05s}
.hero-name .l:nth-child(2){animation-delay:.10s}
.hero-name .l:nth-child(3){animation-delay:.15s}
.hero-name .l:nth-child(4){animation-delay:.20s}
.hero-name .l:nth-child(5){animation-delay:.25s}
.hero-name .l:nth-child(6){animation-delay:.30s}

.eyebrow { display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--dim); margin-bottom:52px; }
.eyebrow::after { content:''; flex:1; max-width:44px; height:1px; background:var(--border); }

.stitle { font-family:'Syne',sans-serif; font-size:clamp(34px,5vw,56px); font-weight:800; letter-spacing:-2px; line-height:1.15; color:var(--text); margin-bottom:20px; }

.btn {
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:100px;
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.2px;
  text-decoration:none; border:none; cursor:pointer;
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.btn-solid { background:var(--text); color:var(--bg); }
.btn-solid:hover { opacity:0.87; transform:translateY(-2px); box-shadow:0 10px 26px rgba(237,232,227,0.11); }
.btn-gl {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.05) 40%,rgba(255,255,255,0.02) 100%);
  border:1.5px solid rgba(255,255,255,0.14); color:var(--text);
  box-shadow:0 8px 32px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.2);
}
.btn-gl:hover {
  background:linear-gradient(135deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0.03) 100%);
  border-color:rgba(255,255,255,0.22); transform:translateY(-2px);
}

.section-title {
  font-family:'Syne',sans-serif; font-size:clamp(32px, 5vw, 52px); font-weight:800;
  letter-spacing:-2px; line-height:1.15; color:var(--text); margin-bottom:30px;
}
.section-sub { font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:36px; max-width:600px; }
.section-desc { font-size:15px; color:var(--muted); line-height:1.75; max-width:520px; margin-bottom:40px; }

.items-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:40px; }
.item-card .gl-c { padding:24px 26px; }
.item-card:hover { transform:translateY(-4px); }
.item-icon { display:flex; align-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid var(--border); justify-content:center; margin-bottom:12px; color:var(--dim); }
.item-name { font-family:'Syne',sans-serif; font-size:17px; font-weight:700; letter-spacing:-0.3px; color:var(--text); margin-bottom:6px; }
.item-desc { font-size:13px; color:var(--muted); line-height:1.65; font-weight:300; }

.skill-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:40px; }
.skill-card .gl-c { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; }
.skill-card:hover { transform:translateY(-3px); }
.skill-name { font-family:'Syne',sans-serif; font-size:15px; font-weight:600; color:var(--text); letter-spacing:-0.2px; white-space:nowrap; }
.skill-bar { flex:1; height:5px; background:rgba(255,255,255,0.06); border-radius:100px; overflow:hidden; max-width:160px; }
.skill-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,rgba(237,232,227,0.5),rgba(237,232,227,0.25)); transition:width 1.2s cubic-bezier(0.16,1,0.3,1); }

@media (max-width:768px) {
  .items-grid { grid-template-columns:1fr; }
  .skill-grid { grid-template-columns:1fr; }
  .skill-card .gl-c { flex-direction:column; align-items:flex-start; gap:10px; }
  .skill-bar { max-width:100%; width:100%; }
}

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:40px; }
.info-grid > :last-child:nth-child(odd) { grid-column:1 / -1; }
.info-card .gl-c { padding:28px 28px; }
.info-card:hover { transform:translateY(-3px); }
.info-label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
.info-value { font-size:16px; color:var(--text); font-weight:400; line-height:1.6; word-break:break-word; }
.info-value a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--border-h); padding-bottom:1px; transition:border-color .2s; }
.info-value a:hover { border-color:var(--text); }
.info-value .warn { color:var(--accent-text); }
.info-value .highlight { color:var(--accent-text); }

.contact-section { margin-bottom:60px; }
.contact-title { font-family:'Syne',sans-serif; font-size:26px; font-weight:700; letter-spacing:-1px; color:var(--text); margin-bottom:20px; }
.contact-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.contact-actions .btn { font-size:13px; }

.clinks { display:flex; flex-direction:column; gap:8px; }
.clink {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; text-decoration:none; color:var(--text);
  transition:transform .25s cubic-bezier(0.16,1,0.3,1);
}
.clink:hover { transform:translateX(5px); }
.clink-l { display:flex; align-items:center; gap:13px; position:relative; z-index:1; }
.clink-icon { font-size:17px; opacity:.65; display:flex; align-items:center; }
.clink-name { font-size:14px; font-weight:500; }
.clink-handle { font-size:12px; color:var(--muted); line-height:1.5; margin-top:2px; }
.clink-arr { color:var(--muted); font-size:15px; transition:all .25s; position:relative; z-index:1; display:flex; align-items:center; }
.clink:hover .clink-arr { color:var(--text); transform:translateX(3px); }

.disclaimer-box .gl-c { padding:24px 28px; display:flex; align-items:flex-start; gap:14px; }
.disclaimer-icon { flex-shrink:0; color:var(--accent-text); opacity:0.8; margin-top:2px; }

.thanks-box .gl-c { padding:32px 32px; text-align:center; }
.thanks-title { font-size:18px; font-weight:500; color:var(--text); margin-bottom:12px; }
.thanks-text { font-size:14px; color:var(--muted); line-height:1.7; }

footer { padding:36px 0; border-top:1px solid var(--border); position:relative; z-index:1; }
.fr { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.fn { font-family:'Syne',sans-serif; font-weight:800; font-size:17px; letter-spacing:-.3px; }
.fc { font-size:12px; color:var(--dim); }

.rv { opacity:0; transform:translateY(24px); transition:opacity .74s cubic-bezier(0.16,1,0.3,1), transform .74s cubic-bezier(0.16,1,0.3,1); }
.rv.vis { opacity:1; transform:none; }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s} .d5{transition-delay:.40s}

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:68px; align-items:start; }
.about-text p { color:var(--muted); font-size:16px; line-height:1.85; font-weight:300; margin-bottom:20px; }
.about-text p strong { color:var(--text); font-weight:500; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.tag2 {
  padding:6px 13px; border-radius:100px; font-size:12px; font-weight:400;
  border:1px solid var(--border);
  background:linear-gradient(165deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.01) 100%);
  color:var(--muted); transition:all 0.2s;
}
.tag2:hover { border-color:var(--border-h); color:var(--text); }
.about-stats { display:flex; flex-direction:column; gap:14px; }
.sc .gl-c { padding:26px 28px; }
.sc:hover { transform:translateY(-4px); }
.stat-n { font-family:'Syne',sans-serif; font-size:44px; font-weight:800; color:var(--text); line-height:1.1; letter-spacing:-2px; }
.stat-l { font-size:13px; color:var(--muted); margin-top:10px; font-weight:300; line-height:1.5; }

.ig { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:46px; }
.ic .gl-c { padding:32px 28px; }
.ic:hover { transform:translateY(-4px); }
.ic-icon { color:var(--text); margin-bottom:16px; }
.ic-name { font-family:'Syne',sans-serif; font-size:17px; font-weight:700; color:var(--text); margin-bottom:10px; letter-spacing:-0.3px; line-height:1.3; }
.ic-desc { font-size:14px; color:var(--muted); line-height:1.65; font-weight:300; }

.proj-item {
  border-top:1px solid var(--border); padding:34px 0;
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; cursor:pointer; position:relative;
}
.proj-item:last-of-type { border-bottom:1px solid var(--border); }
.proj-item::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(165deg,rgba(255,255,255,0.035) 0%,rgba(255,255,255,0.01) 100%);
  opacity:0; border-radius:var(--r); margin:-10px -14px;
  border:1px solid var(--border); transition:opacity 0.25s; pointer-events:none;
}
.proj-item:hover::after { opacity:1; }
.pm { display:flex; align-items:center; gap:10px; margin-bottom:10px; position:relative; z-index:1; }
.pn { font-size:11px; color:var(--dim); letter-spacing:1px; }
.ps { font-size:10px; padding:2px 9px; border-radius:100px; letter-spacing:.8px; text-transform:uppercase; font-weight:500; }
.s-live   { background:rgba(255,255,255,.05); color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.09); }
.s-active { background:rgba(255,255,255,.04); color:rgba(255,255,255,.38); border:1px solid rgba(255,255,255,.07); }
.s-dead   { background:rgba(255,255,255,.02); color:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.05); }
.pt { font-family:'Syne',sans-serif; font-size:clamp(22px,2.8vw,32px); font-weight:700; color:var(--text); letter-spacing:-1px; margin-bottom:10px; position:relative; z-index:1; line-height:1.2; }
.pd { font-size:14px; color:var(--muted); font-weight:300; max-width:450px; position:relative; z-index:1; line-height:1.65; }
.pchips { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; position:relative; z-index:1; }
.pchip { font-size:11px; padding:2px 9px; border-radius:100px; color:var(--dim); border:1px solid var(--border); }
.parrow {
  position:relative; z-index:2; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:17px; flex-shrink:0;
  background:linear-gradient(165deg,rgba(255,255,255,0.045) 0%,rgba(255,255,255,0.015) 100%);
  box-shadow:var(--lgs); transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.proj-item:hover .parrow { background:var(--text); border-color:var(--text); color:var(--bg); transform:rotate(90deg); }
.pdetail { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(0.16,1,0.3,1); position:relative; z-index:2; }
.pdetail.open { max-height:260px; }
.pdetail .gl-c { padding:20px 22px; }
.pdetail .gl { margin:8px 0 12px; }
.pdetail p { font-size:14px; color:var(--muted); line-height:1.75; font-weight:300; margin-bottom:13px; }
.pdetail a { color:var(--text); font-size:13px; font-weight:500; text-decoration:none; border-bottom:1px solid var(--border-h); padding-bottom:1px; transition:border-color .2s; }
.pdetail a:hover { border-color:var(--text); }

.cg { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.ch { font-family:'Syne',sans-serif; font-size:clamp(40px,6vw,68px); font-weight:800; letter-spacing:-3px; line-height:1.05; color:var(--text); margin-bottom:20px; }
.cs { font-size:15px; color:var(--muted); line-height:1.75; font-weight:300; }

.error-section { min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:15vh; position:relative; z-index:1; }
.error-container { text-align:center; max-width:680px; margin:0 auto; width:100%; }
.error-code {
  font-family:'Syne',sans-serif;
  font-size:clamp(100px,16vw,180px); font-weight:800;
  line-height:1; letter-spacing:-6px; color:var(--text); margin-bottom:20px;
  opacity:0; transform:translateY(30px);
  animation:fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
.error-title {
  font-family:'Syne',sans-serif; font-size:clamp(24px,5vw,42px); font-weight:700;
  letter-spacing:-1.5px; color:var(--text); margin-bottom:18px;
  opacity:0; transform:translateY(30px);
  animation:fadeUp 0.7s 0.08s cubic-bezier(0.16,1,0.3,1) forwards;
}
.error-desc {
  font-size:16px; color:var(--muted); line-height:1.75;
  max-width:460px; margin:0 auto 40px; font-weight:300;
  opacity:0; transform:translateY(30px);
  animation:fadeUp 0.7s 0.16s cubic-bezier(0.16,1,0.3,1) forwards;
}
.error-actions {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  opacity:0; transform:translateY(30px);
  animation:fadeUp 0.7s 0.24s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* Modal System */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:none; align-items:center; justify-content:center;
  z-index:10000; padding:32px;
  animation:modalFade .25s ease;
}
@keyframes modalFade { from{opacity:0} to{opacity:1} }
.modal-box {
  background:linear-gradient(160deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%);
  border:1px solid var(--border); border-radius:16px;
  max-width:580px; width:100%; max-height:85vh; overflow-y:auto;
  box-shadow:0 48px 80px rgba(0,0,0,0.6);
  animation:modalSlide .3s cubic-bezier(0.16,1,0.3,1);
  scrollbar-width:none; scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.modal-box::-webkit-scrollbar { width:5px; }
.modal-box::-webkit-scrollbar-track { background:transparent; }
.modal-box::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:10px; }
.modal-box::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.25); }
@keyframes modalSlide { from{opacity:0;transform:translateY(24px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; border-bottom:1px solid var(--border);
}
.modal-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:700; color:var(--text); letter-spacing:-.3px; }
.modal-close {
  background:rgba(255,255,255,0.06); border:none; color:var(--muted);
  font-size:20px; cursor:pointer; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; line-height:1;
}
.modal-close svg { width:18px; height:18px; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.modal-close:hover { background:rgba(255,255,255,0.12); color:var(--text); }
.modal-body { padding:28px; }
.modal-body p { font-size:14px; color:var(--muted); line-height:1.8; margin-bottom:14px; }
.modal-body img { max-width:100%; border-radius:10px; margin-bottom:14px; cursor:pointer; display:block; box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.modal-body a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--border-h); padding-bottom:1px; transition:border-color .2s; }
.modal-body a:hover { border-color:var(--text); }
.modal-body ul { margin:10px 0 0 20px; padding:0; }
.modal-body li { font-size:14px; color:var(--muted); margin-bottom:8px; line-height:1.6; }
.modal-desc { font-size:14px; color:var(--muted); line-height:1.8; margin-top:12px; margin-bottom:16px; }
.modal-urls { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.modal-urls-label { font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.modal-urls ul { margin:0; }
.modal-urls li { font-size:13px; }
.modal-footer {
  padding:16px 28px; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end;
}
.modal-footer .btn { font-size:12px; padding:9px 20px; }
.modal-slide { display:none; }
.modal-controls { display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.modal-controls .btn { font-size:11px; padding:6px 14px; min-width:36px; justify-content:center; }
.modal-dot {
  width:8px; height:8px; border-radius:50%; border:none; margin:0 4px;
  background:rgba(255,255,255,0.15); cursor:pointer; transition:all .2s;
}
.modal-dot.active { background:rgba(255,255,255,0.5); }
.modal-dot:hover { background:rgba(255,255,255,0.3); }

/* Bigger project cards */
.proj-cards { display:flex; flex-direction:column; gap:16px; margin-bottom:40px; }
.proj-card { cursor:pointer; }
.proj-card .gl-c { padding:28px 30px; }
.proj-card:hover { transform:translateY(-4px); }
.proj-card-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:10px; }
.proj-card-ttl { font-family:'Syne',sans-serif; font-size:20px; font-weight:700; letter-spacing:-0.5px; color:var(--text); }
.proj-card-badge {
  font-size:10px; padding:3px 10px; border-radius:100px; letter-spacing:.7px; text-transform:uppercase; font-weight:500; flex-shrink:0;
  border:1px solid; white-space:nowrap;
}
.proj-card-badge.completed { background:rgba(255,255,255,.05); color:rgba(255,255,255,.45); border-color:rgba(255,255,255,.09); }
.proj-card-badge.ongoing   { background:rgba(255,255,255,.04); color:rgba(255,255,255,.38); border-color:rgba(255,255,255,.07); }
.proj-card-badge.archived  { background:rgba(255,255,255,.02); color:rgba(255,255,255,.22); border-color:rgba(255,255,255,.05); }
.proj-card-desc { font-size:14px; color:var(--muted); line-height:1.7; font-weight:300; margin-bottom:12px; }
.proj-card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.proj-card-tag { font-size:11px; padding:2px 10px; border-radius:100px; color:var(--dim); border:1px solid var(--border); }
.proj-card-action { margin-top:16px; }

/* Gallery carousel */
.ach-gal-wrap { position:relative; margin-bottom:56px; }
.ach-gal-stage { cursor:pointer;
  border-radius:16px; overflow:hidden; min-height:320px; display:flex; flex-direction:column;
  background:linear-gradient(135deg,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.04) 40%,rgba(255,255,255,0.015) 100%);
  border:1.5px solid rgba(255,255,255,0.13);
  box-shadow:0 8px 32px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.15);
}
.ach-gal-slide { display:none; flex-direction:column; }
.ach-gal-slide.active { display:flex; }
.ach-gal-img { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; min-height:240px; }
.ach-gal-img img { max-width:100%; max-height:380px; object-fit:contain; display:block; cursor:pointer; border-radius:6px; }
.ach-gal-info { padding:16px 24px 20px; border-top:1.5px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); }
.ach-gal-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; color:var(--text); letter-spacing:-.3px; margin-bottom:4px; }
.ach-gal-desc { font-size:13px; color:var(--muted); line-height:1.55; }

.ach-gal-stage[data-ach-side="prev"] { cursor:w-resize; }
.ach-gal-stage[data-ach-side="next"] { cursor:e-resize; }
.ach-gal-arrow {
  position:absolute; top:calc(50% - 28px); transform:translateY(-50%); z-index:3;
  background:linear-gradient(135deg,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0.06) 40%,rgba(255,255,255,0.02) 100%);
  border:1.5px solid rgba(255,255,255,0.16); color:var(--text);
  width:42px; height:42px; border-radius:50%;
  font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2);
}
.ach-gal-arrow:hover { background:linear-gradient(135deg,rgba(255,255,255,0.20) 0%,rgba(255,255,255,0.10) 40%,rgba(255,255,255,0.04) 100%); border-color:rgba(255,255,255,0.25); transform:translateY(-50%) scale(1.08); }
.ach-gal-prev { left:16px; }
.ach-gal-next { right:16px; }

.ach-gal-dots {
  display:flex; justify-content:center; margin-top:20px;
  user-select:none; -webkit-user-select:none; touch-action:none;
}
.ach-gal-track {
  position:relative; width:100%; max-width:400px; height:36px;
  display:flex; align-items:center; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1.5px solid rgba(255,255,255,0.10);
  border-radius:100px; padding:0 14px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.15);
}
.ach-gal-dot-wrap {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.ach-gal-dot {
  width:8px; height:8px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,0.12); transition:all .35s cubic-bezier(0.16,1,0.3,1);
  flex-shrink:0; pointer-events:none;
}
.ach-gal-dot.active {
  width:28px; border-radius:100px;
  background:linear-gradient(135deg,rgba(255,255,255,0.45) 0%,rgba(255,255,255,0.22) 100%);
  box-shadow:0 0 8px rgba(255,255,255,0.08);
}/* Achievement section overhaul */
.ach-section { padding-top:72px; }
.ach-section-header { display:flex; align-items:center; gap:18px; margin-bottom:12px; }
.ach-section-header .section-title { margin-bottom:0; }
.ach-section-icon { flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.ach-section-icon svg { width:36px; height:36px; stroke:var(--text); fill:none; stroke-width:1.8; }
.ach-section-desc { font-size:14px; color:var(--muted); line-height:1.7; max-width:540px; margin-bottom:32px; }

.ach-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:48px; }
.ach-card { cursor:pointer; }
.ach-card .gl-c { padding:32px 34px; }
.ach-card:hover { transform:translateY(-4px); }
.ach-card-img { width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:18px; background:rgba(255,255,255,0.03); display:block; }
.ach-card-ttl { font-family:'Syne',sans-serif; font-size:24px; font-weight:800; letter-spacing:-0.5px; color:var(--text); margin-bottom:10px; line-height:1.25; }
.ach-card-desc { font-size:14px; color:var(--muted); line-height:1.65; font-weight:300; margin-bottom:14px; }
.ach-card-action { margin-top:auto; }

@media (max-width:768px) {
  .wrap { padding:0 20px; }
  section { padding:72px 0; }
  .info-grid { grid-template-columns:1fr; }
  .hero { padding-bottom:52px; }
  .hero-title { letter-spacing:-1px; }
  .hero-cta { flex-direction:column; width:100%; }
  .hero-cta .btn { width:100%; justify-content:center; }
  .contact-actions { flex-direction:column; }
  .contact-actions .btn { width:100%; justify-content:center; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .ig { grid-template-columns:1fr; }
  .cg { grid-template-columns:1fr; gap:36px; }
  .hero-name { letter-spacing:-2px; font-size:clamp(44px,15vw,80px); }
  .proj-item { grid-template-columns:1fr; }
  .parrow { display:none; }
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  .nav-dock { display:flex; }
  .nav-wrap:not(.open) .nav-dock { display:none; }
  .nav-wrap:not(.open) .nav-logo { display:block; }
  .nav-wrap.open .nav-logo { display:none; }
  .error-code { letter-spacing:-3px; }
  .error-actions { flex-direction:column; align-items:center; }
  .error-actions .btn { width:100%; justify-content:center; max-width:260px; }
  .nav-inner { padding:10px 16px; }
  .nav-back-desktop { display:none; }
  .error-section { padding-bottom:12vh; }
  .ach-cards { grid-template-columns:1fr; }
  .proj-card .gl-c { padding:22px 24px; }
  .modal-overlay { padding:16px; }
  .modal-box { max-height:90vh; }
  .ach-section-header { gap:12px; }
  .ach-section-icon { width:36px; height:36px; }
  .ach-section-icon svg { width:28px; height:28px; }
  .ach-gal-stage { min-height:200px; }
  .ach-gal-img { min-height:140px; padding:12px; }
  .ach-gal-img img { max-height:220px; }
  .ach-gal-info { padding:12px 16px 16px; }
  .ach-gal-title { font-size:16px; }
  .ach-gal-desc { font-size:12px; }
  .ach-gal-arrow { width:34px; height:34px; font-size:16px; }
  .ach-gal-prev { left:10px; }
  .ach-gal-next { right:10px; }
}
@media (max-width:480px) {
  .hero-row { flex-direction:column; align-items:flex-start; }
  .error-code { font-size:clamp(80px,14vw,140px); letter-spacing:-2px; }
  .error-title { font-size:28px; }
  .error-desc { font-size:14px; }
}




/* ---- Education Timeline ---- */
.edu-timeline { position:relative; margin-top:32px; }
.edu-timeline::before {
  content:''; position:absolute; left:19px; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.15),rgba(255,255,255,0.04));
}
.edu-node { display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; position:relative; }
.edu-dot {
  width:40px; height:40px; border-radius:50%; flex-shrink:0; position:relative; z-index:2;
  background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.04) 100%);
  border:1.5px solid rgba(255,255,255,0.16);
  box-shadow:0 0 0 4px rgba(255,255,255,0.02);
}
.edu-dot::after {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.3);
}
.edu-content { flex:1; }
.edu-content .gl-c { padding:20px 24px; }
.edu-range { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--dim); margin-bottom:4px; }
.edu-school { font-family:'Syne',sans-serif; font-size:17px; font-weight:700; color:var(--text); margin-bottom:2px; }
.edu-loc { font-size:12px; color:var(--muted); margin-bottom:6px; }
.edu-desc { font-size:13px; color:var(--muted); line-height:1.6; }

/* ---- Programming Life ---- */
.prog-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
.prog-card { cursor:default; }
.prog-card .gl-c { padding:24px 28px; }
.prog-card-title { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; color:var(--text); margin-bottom:8px; letter-spacing:-0.3px; }
.prog-card-text { font-size:13px; color:var(--muted); line-height:1.65; font-weight:300; }

@media (max-width:768px) {
  .prog-grid { grid-template-columns:1fr; }
  .edu-node { gap:14px; }
  .edu-dot { width:32px; height:32px; }
  .edu-content .gl-c { padding:16px 20px; }
}