:root{
  --bg:#ffffff; --alt:#f6f7fb; --text:#151827; --muted:#6b7280; --border:#eceaf5;
  --accent:#7c3aed; --accent2:#a78bfa; --accent-soft:#f1ecfe; --card:#ffffff;
  --code-bg:#0f1220; --radius:16px; --max:1080px;
  --nav-bg:rgba(255,255,255,.85); --banner-bg:#151827;
}
:root[data-theme="dark"]{
  --bg:#0e1117; --alt:#161b24; --text:#e8ebf2; --muted:#98a2b3; --border:#242c38;
  --accent:#a78bfa; --accent2:#8b5cf6; --accent-soft:#241b3a; --card:#161b24;
  --code-bg:#0b0e14; --nav-bg:rgba(14,17,23,.86); --banner-bg:#0b0e14;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem}
a{text-decoration:none;color:inherit}
.accent{color:var(--accent)}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:.75rem}

/* nav */
header{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brandwrap{display:flex;align-items:center;gap:.6rem;font-weight:700}
.logo{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.nav ul{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav ul a{color:var(--muted);font-size:.92rem;font-weight:500}
.nav ul a:hover{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:1rem}
.icon{color:var(--muted)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;padding:4rem 0 3rem}
.hero h1{font-size:3.2rem;font-weight:800;line-height:1.08;letter-spacing:-1.5px;margin:.8rem 0 1rem}
.hero p.lead{color:var(--muted);font-size:1.08rem;max-width:460px;margin-bottom:1.8rem}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{padding:.8rem 1.4rem;border-radius:10px;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.4rem;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--accent);color:#fff}
.btn-o{border:1px solid var(--border);color:var(--text)}
.hero-stats{display:flex;gap:1.8rem;flex-wrap:wrap;margin-top:2.2rem}
.hstat{display:flex;flex-direction:column}
.hstat b{font-size:1rem}.hstat span{color:var(--muted);font-size:.82rem}
.hero-right{display:flex;flex-direction:column;align-items:center;gap:1rem}
.photo-wrap{position:relative}
.photo{position:relative;z-index:1;width:190px;height:190px;border-radius:20px;object-fit:cover;box-shadow:0 20px 50px rgba(124,58,237,.25)}
.codecard{width:100%;background:var(--code-bg);border-radius:14px;padding:1rem 1.1rem;font-family:ui-monospace,Menlo,monospace;font-size:.82rem;box-shadow:0 16px 40px rgba(15,18,32,.25)}
.codecard .top{display:flex;gap:.4rem;margin-bottom:.7rem}
.codecard .top i{width:11px;height:11px;border-radius:50%;display:block}
.codecard .fn{color:#8b93a7;margin-left:.4rem;font-size:.75rem}
.cl{white-space:pre;line-height:1.7}
.ck{color:#7ee787}.cs{color:#a5d6ff}.cv{color:#e6edf3}.cc{color:#6e7681}

/* sections */
section{padding:3.5rem 0}
.sec-alt{background:var(--alt)}
.sec-head{margin-bottom:2rem}
.sec-head h2{font-size:2rem;font-weight:800;letter-spacing:-.5px;margin-top:.3rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.wcard .ic{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.wcard h3{font-size:1.05rem;margin-bottom:.4rem}
.wcard p{color:var(--muted);font-size:.9rem}

/* projects */
.projgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .18s,box-shadow .2s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,24,39,.10)}
.pthumb{height:150px;background:linear-gradient(135deg,#1e1b4b,#312e81);display:flex;align-items:center;justify-content:center;color:#c7d2fe;font-weight:700;position:relative}
.pthumb.p2{background:linear-gradient(135deg,#134e4a,#0f766e)}
.pthumb.p3{background:linear-gradient(135deg,#0f1220,#26314a)}
.ptag-featured{position:absolute;top:.7rem;left:.7rem;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;padding:.2rem .55rem;border-radius:6px}
.pbody{padding:1.2rem}
.pbody h3{font-size:1.08rem;margin-bottom:.4rem}
.pbody p{color:var(--muted);font-size:.88rem;margin-bottom:.8rem}
.ptags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.ptags span{background:var(--alt);color:var(--muted);font-size:.75rem;padding:.2rem .55rem;border-radius:6px}
.plinks{display:flex;gap:1rem}
.plinks a{color:var(--accent);font-weight:600;font-size:.85rem}
.soon{color:var(--muted);font-size:.82rem;font-style:italic}


/* tech */
.techrow{display:grid;grid-template-columns:repeat(8,1fr);gap:1rem;text-align:center}
.tech{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);font-size:.8rem;font-weight:600}
.tech .tc{width:46px;height:46px;border-radius:12px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--accent)}

/* exp + cert */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.tl{position:relative;padding-left:1.4rem;border-left:2px solid var(--border)}
.tl .item{margin-bottom:1.6rem;position:relative}
.tl .item::before{content:"";position:absolute;left:-1.9rem;top:.35rem;width:11px;height:11px;border-radius:50%;background:var(--accent)}
.tl h3{font-size:1rem}
.tl .meta{color:var(--muted);font-size:.82rem;margin-bottom:.3rem}
.tl ul{margin:.3rem 0 0 1rem;color:var(--muted);font-size:.85rem}
.certcard{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.9rem 1.1rem;margin-bottom:.8rem}
.certcard h4{font-size:.95rem}
.certcard .org{color:var(--muted);font-size:.8rem}
.verified{background:#dcfce7;color:#15803d;font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:6px;white-space:nowrap}

/* stat banner */
.banner{background:var(--banner-bg);border-radius:var(--radius);display:grid;grid-template-columns:repeat(4,1fr);padding:1.6rem;color:#fff}
.banner .b{text-align:center}
.banner .b b{font-size:1.5rem;display:block}
.banner .b span{color:#a7adbe;font-size:.82rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.cinfo p.lead{color:var(--muted);margin-bottom:1.4rem}
.crow{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.crow .ci{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.crow small{color:var(--muted);display:block;font-size:.75rem}
.crow b{font-weight:600;font-size:.9rem}
form input,form textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:.9rem;margin-bottom:.8rem;background:var(--card);color:var(--text)}
form input::placeholder,form textarea::placeholder{color:var(--muted)}
form input:focus,form textarea:focus{outline:none;border-color:var(--accent)}
form textarea{min-height:120px;resize:vertical}
form .btn-p{width:100%;justify-content:center;border:none;cursor:pointer}

/* footer */
footer{border-top:1px solid var(--border);padding:1.6rem 0;color:var(--muted);font-size:.85rem}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:2rem}
  .grid4,.techrow{grid-template-columns:repeat(2,1fr)}
  .projgrid,.twocol,.contact-grid,.banner{grid-template-columns:1fr}
  .nav ul{display:none}
  .hero h1{font-size:2.4rem}
}

.tc{width:54px;height:54px;border-radius:14px;background:#ffffff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(20,24,39,.05)}
.tc svg{width:30px;height:30px}
.tech{gap:.6rem;font-size:.82rem;color:var(--text);font-weight:600}
.ic-link{display:inline-flex;color:var(--muted)}
.ic-link svg{width:22px;height:22px;fill:currentColor}
.ic-link:hover{color:var(--accent)}
.nav-right{gap:1.1rem}

.theme-toggle{background:none;border:none;cursor:pointer;font-size:1.15rem;line-height:1;color:var(--muted)}
.form-status{font-size:.85rem;margin-top:.2rem;min-height:1.1rem}
.form-status.ok{color:#15803d}
.form-status.err{color:#dc2626}