@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800;900&display=swap');

/* ============================================================
   SZ — Developer Portfolio Design System
   Light-first · Emerald/Teal · Glass · Bento · Subtle 3D
   ============================================================ */
.sz{
  /* palette */
  --bg:#F7F9FA; --surface:#FFFFFF; --ink:#0F1720; --muted:#64748B; --line:#E4EAEE;
  --accent:#0E8F7E; --accent-2:#12B5A0; --accent-ink:#fff; --warm:#0E8F7E; --soft:#E5F4F1;
  --glow:rgba(14,143,126,.16);
  /* elevation */
  --sh-sm:0 1px 2px rgba(15,23,32,.05),0 2px 8px rgba(15,23,32,.04);
  --sh-md:0 4px 18px -6px rgba(15,23,32,.1),0 2px 6px rgba(15,23,32,.05);
  --sh-lg:0 24px 60px -24px rgba(15,23,32,.22),0 8px 20px -12px rgba(15,23,32,.1);
  --sh-glow:0 0 0 1px rgba(14,143,126,.22),0 10px 40px -10px var(--glow);
  /* radii */
  --r-xl:32px;--r-lg:26px;--r-md:16px;--r-sm:10px;
  font-family:'Vazirmatn',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  min-height:100vh;line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased;
  overflow-x:clip;position:relative;
}
.sz[data-theme=dark]{
  --bg:#0B141C; --surface:#12202B; --ink:#E9F1F4; --muted:#8FA3B1; --line:#1F3242;
  --accent:#2FCDB6; --accent-2:#48E0CB; --accent-ink:#06211C; --soft:#11302D;
  --glow:rgba(47,205,182,.18);
  --sh-sm:0 1px 2px rgba(0,0,0,.4);--sh-md:0 4px 18px -6px rgba(0,0,0,.5);--sh-lg:0 24px 60px -24px rgba(0,0,0,.65);
}

/* ---------- ambient background ---------- */
.sz::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(52rem 30rem at 88% -6%, var(--glow), transparent 62%),
    radial-gradient(44rem 28rem at 6% 24%, rgba(18,181,160,.09), transparent 60%),
    radial-gradient(40rem 26rem at 50% 110%, rgba(14,143,126,.07), transparent 60%);
}
.sz::after{ /* subtle grid */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70rem 40rem at 50% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(70rem 40rem at 50% 0%,#000 30%,transparent 78%);
  opacity:.35;
}
.sz[data-theme=dark]::after{opacity:.18}

.sz *,.sz *::before,.sz *::after{box-sizing:border-box}
.sz h1,.sz h2,.sz h3,.sz h4,.sz h5,.sz p{margin:0}
.sz a{color:inherit;text-decoration:none}
.sz img{max-width:100%;display:block}
.sz :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sz-wrap{width:min(1160px,100% - 2rem);margin-inline:auto}
.sz section{padding-block:clamp(3.5rem,8vw,6.5rem);scroll-margin-top:6rem;position:relative}

/* glass surface helper */
.sz-glass{
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
}

/* ---------- reveal animation base ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
}

/* ============ Top bar — floating glass pill navbar ============ */
.sz-top{position:sticky;top:0;z-index:50;padding-block:1rem .5rem;transition:padding .3s}
.sz-top .sz-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:min(1280px,100% - 2rem);
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  border-radius:999px;padding:.7rem 1rem;box-shadow:var(--sh-md);
  transition:box-shadow .3s,transform .3s;
}
.sz-top.compact .sz-wrap{transform:scale(.97);box-shadow:var(--sh-lg)}
.sz-brand{display:flex;align-items:center;gap:.75rem;font-weight:900;font-size:1.18rem;padding-inline-start:.5rem;color:var(--ink)}
.sz-mono{width:2.7rem;height:2.7rem;border-radius:14px;color:var(--accent-ink);
  display:grid;place-items:center;font-weight:800;font-size:1rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.25)}
.sz-links{display:flex;gap:.2rem;list-style:none;margin:0;padding:.35rem;background:color-mix(in srgb,var(--surface) 85%,transparent);
  border:1px solid var(--line);border-radius:999px}  .sz-links a{position:relative;display:flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:999px;
  font-size:.98rem;font-weight:600;color:var(--muted);transition:background .25s,color .25s,transform .25s}
.sz-links .sz-mob-lang,.sz-links .sz-mob-theme{display:none}
.sz-links a:hover{color:var(--accent);transform:translateY(-1px)}
.sz-links a.on{background:var(--soft);color:var(--accent);font-weight:800;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}
.sz-links i{font-size:1.2rem}
.sz-ctrl{display:flex;align-items:center;gap:.5rem;padding-inline-end:.25rem}
.sz-btn-i{height:2.8rem;min-width:2.8rem;padding-inline:.8rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  gap:.4rem;cursor:pointer;font:inherit;font-size:.9rem;transition:border-color .2s,box-shadow .2s,transform .2s}
.sz-btn-i:hover{border-color:var(--accent);box-shadow:var(--sh-glow);transform:translateY(-1px)}
.sz-lang{position:relative}
.sz-menu{position:absolute;inset-inline-end:0;top:calc(100% + .5rem);min-width:10.5rem;list-style:none;margin:0;
  padding:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-lg);display:none;z-index:5}
.sz-lang.open .sz-menu{display:block;animation:szDrop .2s ease}
@keyframes szDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sz-menu a{display:flex;justify-content:space-between;padding:.55rem .85rem;border-radius:11px;font-size:.9rem}
.sz-menu a:hover{background:var(--soft)}
.sz-menu a[aria-current=true]{color:var(--accent);font-weight:700}

/* ============ buttons ============ */
.sz-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.9rem;border-radius:999px;
  font-weight:800;border:1.5px solid var(--line);cursor:pointer;font-family:inherit;font-size:1.05rem;
  background:var(--surface);color:var(--ink);transition:transform .22s,box-shadow .22s,border-color .22s,background .22s}
.sz-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--accent)}
.sz-btn:active{transform:translateY(0) scale(.98)}
.sz-btn.fill{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#000));
  border-color:transparent;color:var(--accent-ink);box-shadow:0 10px 26px -8px var(--glow)}
.sz-btn.fill:hover{box-shadow:0 16px 34px -8px var(--glow)}

/* ============ Hero ============ */
.sz-hero{padding-top:clamp(2.5rem,6vw,5rem)!important;overflow:visible}
.sz-hero .sz-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sz-chip{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem 1rem;border-radius:999px;
  background:var(--soft);color:var(--accent);font-size:.88rem;font-weight:600;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.sz-chip::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
/* unified heading color — kills the old theme's gradient text on h1/h2 */
.sz h1,.sz h2,.sz h3,.sz h4,.sz h5,.sz h6,
.sz .role,.sz .sz-cta-title,.sz .sz-cta-sub{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--ink) !important;
}
.sz .sz-cta-sub{color:var(--accent) !important}
.sz h1 .wave,.sz .greet{-webkit-text-fill-color:currentColor !important}

/* hero greeting: slightly larger than body */
.sz-hero .greet{display:block;font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:600;color:var(--accent);line-height:1.6;margin-bottom:.7rem}
/* hero name: huge, bold, single dark tone */
.sz-hero h1{font-size:clamp(3.2rem,8vw,5.6rem);line-height:1.15;font-weight:900;margin:0;letter-spacing:-.015em;color:var(--ink)}
.sz-hero h1 .wave{display:inline-block;transform-origin:70% 70%;font-style:normal}
@media (prefers-reduced-motion:no-preference){.sz-hero h1 .wave{animation:wave 2.2s ease .6s 2}
  @keyframes wave{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}45%{transform:rotate(-8deg)}70%{transform:rotate(12deg)}}}
/* hero role line: bold, ink (NOT accent) */
.sz-hero .role{display:block;font-size:clamp(1.7rem,3.8vw,2.7rem);font-weight:900;color:var(--ink);line-height:1.4;margin-top:.5rem}
/* hero lead: readable muted, consistent */
.sz-hero .lead{color:var(--muted);max-width:36rem;margin:1.4rem 0 2.2rem;font-size:1.12rem;line-height:2.1;font-weight:400}
.sz-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}

/* tech badges */
.sz-tech{display:flex;flex-wrap:wrap;gap:.6rem}
.sz-techb{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  border:1px solid var(--line);font-size:.85rem;font-weight:600;color:var(--muted);
  transition:border-color .2s,color .2s,transform .2s,box-shadow .2s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sz-techb:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-glow)}
.sz-techb .dot{width:.6rem;height:.6rem;border-radius:5px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}

/* profile card with floating tech chips + subtle 3D tilt */
.sz-scene{perspective:1100px;justify-self:center;width:min(100%,400px)}
.sz-photo{position:relative;transform-style:preserve-3d;transition:transform .3s ease-out}
.sz-photo::before{content:"";position:absolute;inset:6% -7% -7% 7%;border-radius:999px 999px var(--r-xl) var(--r-xl);
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent-2) 10%,transparent));
  filter:blur(2px);transform:translateZ(-30px)}
.sz-photo::after{content:"";position:absolute;inset:-8% -12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);transform:translateZ(-60px)}
.sz-photo img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:999px 999px var(--r-xl) var(--r-xl);border:8px solid var(--surface);
  box-shadow:var(--sh-lg)}
.sz-facts{position:absolute;inset-inline-start:-1.2rem;bottom:2rem;z-index:2;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem 1.1rem;font-size:.85rem;
  box-shadow:var(--sh-md);transform:translateZ(50px)}
.sz-facts b{display:block;font-size:1.05rem;color:var(--accent)}
.sz-float{position:absolute;z-index:2;display:flex;align-items:center;gap:.45rem;
  padding:.55rem 1rem;border-radius:16px;font-weight:800;font-size:.9rem;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 14px 30px -8px var(--glow);transform:translateZ(70px);
  animation:floaty 5s ease-in-out infinite}
.sz-float.f2{background:linear-gradient(135deg,#1c2440,#3f4d8c);animation-delay:-1.4s;inset-inline-end:-1.2rem;top:14%}
.sz-float.f3{background:linear-gradient(135deg,#132b3a,#1f6f8b);animation-delay:-2.8s;inset-inline-end:8%;bottom:16%;animation-duration:6s}
.sz-float.f4{background:linear-gradient(135deg,#241a4d,#5b3fa8);animation-delay:-3.6s;inset-inline-start:-1.5rem;top:22%;animation-duration:5.6s}
.sz-float i.ph{font-size:1.1rem;opacity:.9}
@keyframes floaty{0%,100%{transform:translateZ(70px) translateY(0)}50%{transform:translateZ(70px) translateY(-10px)}}
.sz-avail{position:absolute;inset-inline-end:1.2rem;bottom:-1.2rem;z-index:3;display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.2rem;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--sh-md);transform:translateZ(80px)}
.sz-avail::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:pulse2 2s infinite}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.2)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}

/* ============ section heads ============ */
.sz-head{max-width:44rem;margin-bottom:3rem}
.sz-head .kicker{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);font-weight:800;font-size:1.05rem;margin-bottom:.6rem}
.sz-head .kicker i{font-size:1.25rem}
.sz-head h2{font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.35;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.sz-head p{color:var(--muted);margin-top:.8rem;font-size:1.08rem;line-height:2}
.sz-head.center{margin-inline:auto;text-align:center}
.sz-head.center .kicker{justify-content:center}
.sz-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;color:var(--accent);font-weight:700;transition:gap .2s}
.sz-more:hover{gap:.7rem}

/* ============ projects — premium bento ============ */
.sz-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:1.2rem}
/* deterministic row height: fixed image + fixed body → featured (2 rows) always equals 4 side cards */
.sz-bento>.sz-proj:not(.featured){grid-row:span 1}
.sz-bento>.sz-proj:not(.featured) button{aspect-ratio:auto;height:11.5rem}
.sz-bento>.sz-proj:not(.featured) .body{min-height:9.4rem}
.sz-proj{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:var(--sh-sm);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.sz-proj:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.sz-proj::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 20px 60px -18px var(--glow)}
.sz-proj:hover::after{opacity:1}
.sz-proj button{all:unset;cursor:zoom-in;display:block;aspect-ratio:16/11;overflow:hidden;position:relative;flex:none}
.sz-proj img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sz-proj:hover img{transform:scale(1.06)}
.sz-proj .body{padding:1.15rem 1.35rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;flex:1;min-height:0}
.sz-proj .body .desc{-webkit-line-clamp:2}
.sz-proj h4{font-weight:800;font-size:1.15rem;color:var(--ink)}
.sz-proj .desc{color:var(--muted);font-size:.92rem;line-height:1.9;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* featured card — fills its 2x2 area, image ratio matched to two rows */
.sz-proj.featured{grid-column:span 2;grid-row:span 2}
.sz-proj.featured button{aspect-ratio:auto;flex:1;min-height:0}
.sz-proj.featured .body{flex:none;min-height:9.4rem}
.sz-proj .flag{position:absolute;top:1rem;inset-inline-start:1rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .9rem;border-radius:999px;font-size:.78rem;font-weight:700;
  background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(10px);
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.sz-proj .flag::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.sz-proj .go{position:absolute;bottom:1rem;inset-inline-end:1rem;z-index:2;width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--ink);
  transition:background .25s,color .25s,transform .25s;opacity:0}
.sz-proj:hover .go{opacity:1}
.sz-proj .go:hover{background:var(--accent);color:var(--accent-ink);transform:rotate(-45deg)}
.sz-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.4rem}
.sz-tag{font-size:.76rem;padding:.2rem .75rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);
  background:color-mix(in srgb,var(--bg) 60%,transparent);transition:border-color .2s,color .2s}
.sz-proj:hover .sz-tag{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));color:var(--accent)}

/* ============ about — developer dashboard (equal-height panels) ============ */
.sz-about{display:grid;grid-template-columns:1.55fr 1fr;gap:1.4rem;align-items:stretch}
.sz-about>.sz-panel{display:flex;flex-direction:column}
.sz-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--sh-sm);transition:box-shadow .3s}
.sz-panel:hover{box-shadow:var(--sh-md)}
.sz-panel .text{color:var(--muted);font-size:1.08rem;line-height:2.1}
.sz-panel .text p{margin-bottom:.8rem}
.sz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:auto;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.sz-stats>div{text-align:center;padding:1rem .5rem;border-radius:var(--r-md);
  background:linear-gradient(180deg,color-mix(in srgb,var(--soft) 55%,transparent),transparent);transition:transform .25s}
.sz-stats>div:hover{transform:translateY(-3px)}
.sz-stats b{display:block;font-size:clamp(2rem,4vw,2.9rem);font-weight:900;line-height:1.25;color:var(--accent)}
.sz-stats span{font-size:.95rem;color:var(--muted);font-weight:600}
.sz-info{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.sz-info li{display:flex;gap:.9rem;align-items:center}
.sz-info i{width:2.7rem;height:2.7rem;border-radius:13px;background:var(--soft);color:var(--accent);
  display:grid;place-items:center;font-size:1.25rem;flex:none;transition:transform .25s,box-shadow .25s}
.sz-info li:hover i{transform:translateY(-2px) scale(1.05);box-shadow:var(--sh-glow)}
.sz-info small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4}
.sz-info a,.sz-info span{font-weight:600;word-break:break-word}
/* social icons inside the info panel — 4-per-row grid, pushed to the bottom */
.sz-info-soc{margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--line);
  display:grid !important;grid-template-columns:repeat(4,1fr);gap:.8rem}
.sz-info-soc a{width:100% !important;height:50px;padding-block:0;
  font-size:2.6rem !important;border-radius:20px}
.sz-work{margin-top:1.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.sz-work .sz-proj{flex-direction:row-reverse;align-items:stretch;min-height:9.5rem}
.sz-work .sz-proj .body{justify-content:center}
.sz-work .sz-proj img{width:9rem;height:100%;object-fit:cover;flex:none;min-height:100%}
.sz-work .sz-proj:hover img{transform:none}
.sz-work .sz-proj .body{gap:.3rem}

/* ============ skills — categorized ============ */
.sz-skillcats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-bottom:1.6rem}
.sz-scat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem 1.8rem;
  box-shadow:var(--sh-sm);transition:box-shadow .3s,border-color .3s}
.sz-scat:hover{box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}
.sz-scat h5{display:flex;align-items:center;gap:.7rem;font-size:1.2rem;font-weight:900;margin-bottom:1.1rem;color:var(--ink)}
.sz-scat h5 i{width:2.5rem;height:2.5rem;border-radius:12px;background:var(--soft);color:var(--accent);
  display:grid;place-items:center;font-size:1.25rem}
.sz-scat ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.sz-scat li{font-size:.95rem;padding:.4rem 1.05rem;border-radius:999px;background:var(--bg);
  border:1px solid var(--line);color:var(--muted);transition:all .2s;cursor:default}
.sz-scat li:hover{background:var(--soft);color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
/* DB-driven skill chips */
.sz-skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:1.1rem;margin-top:1.2rem}
.sz-skill{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.4rem .6rem;text-align:center;position:relative;overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.sz-skill::before{content:"";position:absolute;inset:0;background:radial-gradient(8rem 8rem at 50% -30%,var(--glow),transparent);opacity:0;transition:opacity .25s}
.sz-skill:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--sh-glow)}
.sz-skill:hover::before{opacity:1}
.sz-skill img{width:3rem;height:3rem;object-fit:contain;margin:0 auto .6rem;position:relative;transition:transform .3s}
.sz-skill:hover img{transform:scale(1.15) rotate(-5deg)}
.sz-skill h6{margin:0;font-size:.95rem;font-weight:700;color:var(--ink);position:relative}
.sz-skill .pct{position:relative;display:block;font-size:.8rem;color:var(--accent);font-weight:700;margin-top:.15rem}

/* ============ timeline — glowing ============ */
.sz-cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.sz-tl h3{font-size:1.35rem;margin-bottom:1.6rem;font-weight:800;display:flex;align-items:center;gap:.6rem;color:var(--ink)}
.sz-tl h3 i{color:var(--accent)}
.sz-tl ol{list-style:none;margin:0;padding:0;position:relative}
.sz-tl ol::before{content:"";position:absolute;inset-block:.5rem;inset-inline-start:.45rem;width:2px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 15%,transparent));
  box-shadow:0 0 12px var(--glow)}
.sz-tl li{position:relative;padding-inline-start:2.2rem;padding-bottom:1.8rem}
.sz-tl li::before{content:"";position:absolute;inset-inline-start:.1rem;top:.6rem;width:.85rem;height:.85rem;
  border-radius:50%;background:var(--bg);border:3px solid var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent);transition:transform .25s,box-shadow .25s}
.sz-tl li:hover::before{transform:scale(1.25);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 18%,transparent)}
.sz-tl time{display:inline-block;font-size:.85rem;color:var(--accent);font-weight:700;margin-bottom:.15rem;
  padding:.2rem .85rem;border-radius:999px;background:var(--soft)}
.sz-tl h5{font-size:1.12rem;font-weight:800;margin-top:.2rem;color:var(--ink)}
.sz-tl .src{color:var(--muted);font-size:.95rem}
.sz-tl .d{color:var(--muted);font-size:.95rem;margin-top:.35rem;line-height:1.9}

/* ============ contact — big CTA ============ */
.sz-contact{display:grid;grid-template-columns:1fr 1.25fr;gap:2rem;align-items:start}
.sz-cta-title{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:900;line-height:1.35}
.sz-cta-sub{color:var(--accent);font-weight:800;font-size:1.15rem;margin-top:.5rem}
.sz-form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.sz-form .full{grid-column:1/-1}
.sz-form input,.sz-form textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);
  border:1.5px solid var(--line);border-radius:14px;padding:.85rem 1.1rem;transition:border-color .2s,box-shadow .2s,background .2s}
.sz-form textarea{min-height:9rem;resize:vertical}
.sz-form input::placeholder,.sz-form textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.sz-form input:focus,.sz-form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--glow);background:var(--surface)}
.sz .form__reply{display:none;text-align:center;padding:1.5rem;color:var(--accent)}
.sz-social{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.sz-social a{width:3.1rem;height:3.1rem;border-radius:15px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;font-size:1.45rem;color:var(--muted);
  transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
.sz-social a:hover{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  border-color:transparent;transform:translateY(-4px) scale(1.04);box-shadow:0 12px 26px -8px var(--glow)}

/* ============ footer ============ */
.sz-foot{border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);
  margin-top:2rem;padding-bottom:7rem}
.sz-foot .sz-wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem;padding-block:3.2rem 2rem;align-items:start}
.sz-foot .f-brand{display:flex;align-items:center;gap:.75rem;font-weight:900;font-size:1.2rem;margin-bottom:.8rem;color:var(--ink)}
.sz-foot .f-tag{color:var(--muted);font-size:1rem;max-width:24rem;line-height:2}
.sz-foot h6{font-size:1.02rem;font-weight:900;color:var(--ink);margin-bottom:1rem;letter-spacing:.02em}
.sz-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:1rem}
.sz-foot ul a{color:var(--muted);transition:color .2s,padding .2s}
.sz-foot ul a:hover{color:var(--accent);padding-inline-start:.25rem}
.sz-foot .f-soc{display:flex;gap:.6rem;margin-top:.5rem}
.sz-foot .f-soc a{width:2.8rem;height:2.8rem;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);font-size:1.15rem;transition:all .25s}
.sz-foot .f-soc a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.sz-foot .f-bar{border-top:1px solid var(--line);padding-block:1.2rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;color:var(--muted);font-size:.92rem}
.sz-totop{width:2.8rem;height:2.8rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:all .25s;font-size:1.15rem}
.sz-totop:hover{color:var(--accent-ink);background:var(--accent);border-color:transparent;transform:translateY(-3px);box-shadow:var(--sh-glow)}

/* ---------- lightbox ---------- */
.sz-lb{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:90vh}
.sz-lb::backdrop{background:rgba(5,10,15,.88);backdrop-filter:blur(6px)}
.sz-lb img{max-height:88vh;border-radius:var(--r-md);box-shadow:var(--sh-lg)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .sz-bento{grid-template-columns:repeat(2,1fr)}
  .sz-bento>.sz-proj:not(.featured) button{height:9.5rem}
  .sz-bento>.sz-proj:not(.featured) .body{min-height:8rem}
  .sz-skillcats{grid-template-columns:1fr}
  .sz-about{grid-template-columns:1fr}
  .sz-info-soc{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .sz-hero .sz-wrap,.sz-about,.sz-cols,.sz-contact{grid-template-columns:1fr}
  .sz-photo{order:-1;width:min(70%,300px);margin-inline:auto}
  .sz-facts{inset-inline-start:0}
  .sz-foot .sz-wrap{grid-template-columns:1fr;gap:1.6rem}
  /* top controls stay as a floating pill at the TOP on mobile */
  .sz-top{position:sticky;top:.5rem;padding:0;z-index:70}
  .sz-top .sz-wrap{justify-content:space-between;padding:.4rem .5rem;border-radius:999px;
    box-shadow:var(--sh-lg);background:color-mix(in srgb,var(--surface) 88%,transparent)}
  .sz-brand{font-size:1rem}
  .sz-brand span:last-child{display:none}
  .sz-ctrl .sz-btn-i{height:2.5rem;min-width:2.5rem;font-size:.8rem}
  /* nav becomes a bottom tab bar with 5 items + safe area */
  .sz-links{position:fixed;bottom:0;inset-inline:0;transform:none;
    justify-content:space-around;padding:.5rem .4rem calc(.5rem + env(safe-area-inset-bottom,0));z-index:61;
    border-radius:20px 20px 0 0;border:0;border-top:1px solid var(--line);
    box-shadow:0 -8px 30px rgba(0,0,0,.12);
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);width:100%}
  /* menu must not clip the popover; blur filters create a stacking context */
  .sz-links{overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none;
    background:color-mix(in srgb,var(--surface) 97%,transparent)}
  .sz-links li{overflow:visible}
  .sz-links a{flex-direction:column;gap:.1rem;padding:.45rem .35rem;font-size:.64rem;border-radius:14px;line-height:1.5}
  .sz-links i{font-size:1.35rem}
  /* hide desktop-only lang/theme; show mobile ones in the tab bar */
  .sz-ctrl{display:none}
  .sz-links .sz-mob-lang,.sz-links .sz-mob-theme{display:block}
  .sz-links li{position:relative}
  .sz-mob-menu{position:fixed;bottom:calc(4.6rem + env(safe-area-inset-bottom,0px));inset-inline-start:50%;transform:translateX(50%);
    list-style:none;margin:0;padding:.35rem;min-width:9rem;
    background:color-mix(in srgb,var(--surface) 97%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);display:none;z-index:999}
  .sz-mob-lang.open .sz-mob-menu{display:block;animation:szDrop .2s ease}
  .sz-mob-menu a{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.7rem 1rem;font-size:.95rem;border-radius:10px;color:var(--ink)}
  .sz-mob-menu a:hover{background:var(--soft);color:var(--accent);transform:none}
  .sz-foot{padding-bottom:7.5rem}
  .sz-lb img{max-height:70vh}
}
@media (max-width:640px){
  .sz-hero h1{font-size:clamp(2.6rem,13vw,3.4rem)}
  .sz-hero .role{font-size:clamp(1.4rem,6.5vw,1.9rem)}
  .sz-hero .lead{font-size:1rem}
  .sz-bento{grid-template-columns:1fr}
  .sz-bento>.sz-proj:not(.featured) button{height:12rem}
  .sz-proj.featured{grid-column:auto;grid-row:auto}
  .sz-proj.featured button{min-height:0;height:14rem}
  .sz-form{grid-template-columns:1fr}
  .sz-stats{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .sz-stats b{font-size:1.5rem}
  .sz-work{grid-template-columns:1fr}
  .sz-work .sz-proj{min-height:7rem}
  .sz-work .sz-proj img{width:6.5rem}
  .sz-float{display:none}
  .sz-links{gap:0}
  .sz-links a{padding:.4rem .2rem}
  .sz-head h2{font-size:clamp(1.6rem,7vw,2.1rem)}
  .sz-panel{padding:1.2rem}
  .sz-top .sz-wrap{inset-inline:.6rem;max-width:calc(100% - 1.2rem)}
  .sz-btn{padding:.8rem 1.3rem;font-size:.95rem}
  .sz-actions{gap:.6rem}
  .sz-actions .sz-btn{flex:1;min-width:9rem}
  .sz-tech{gap:.4rem}
  .sz-info-soc{gap:.5rem}
  .sz-info-soc a{font-size:2rem;height:46px}
}
@media (max-width:380px){
  .sz-links a{font-size:.58rem}
  .sz-links i{font-size:1.2rem}
}
@media (prefers-reduced-motion:no-preference){
  .sz-hero .sz-wrap>*{animation:szIn .8s cubic-bezier(.2,.7,.2,1) both}
  .sz-hero .sz-wrap>*:nth-child(2){animation-delay:.15s}
  @keyframes szIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .sz *,.sz *::before,.sz *::after{transition:none!important;animation:none!important}
  .rv{opacity:1!important;transform:none!important}
}