/* Base / tokens / themes (unchanged parts)… */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
:target{scroll-margin-top:8rem}

:root{--max:1100px;--radius:14px;--radius-sm:10px;--shadow-1:0 10px 30px rgba(0,0,0,.08);--shadow-2:0 18px 50px rgba(0,0,0,.12);--e1:cubic-bezier(.2,.8,.2,1);--brand:#3b82f6;--brand-2:#8b5cf6;--ok:#1fbd72;--border:#e8e9ee;--g:linear-gradient(135deg,var(--brand),var(--brand-2))}
@media (prefers-color-scheme: light){:root{--bg:#fff;--panel:#fff;--text:#0f1222;--muted:#5a607a;--border:#e8e9ee}}
@media (prefers-color-scheme: dark){:root{--bg:#0b0b12;--panel:#121327;--text:#e6e8ff;--muted:#9aa1c6;--border:#1e2147}}
html[data-theme=light]{--bg:#fff;--panel:#fff;--text:#0f1222;--muted:#5a607a;--border:#e8e9ee}
html[data-theme=dark]{--bg:#0b0b12;--panel:#121327;--text:#e6e8ff;--muted:#9aa1c6;--border:#1e2147}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; color:var(--text); background:radial-gradient(900px 600px at 10% -10%, rgba(59,130,246,.10), transparent 50%), radial-gradient(900px 600px at 110% 20%, rgba(139,92,246,.10), transparent 50%), var(--bg)}

.container{width:min(100% - 2rem, var(--max)); margin-inline:auto}
.section{padding:clamp(4rem,6vw,7rem) 0}
.section.alt{background:color-mix(in oklch, var(--panel), transparent 90%); border-block:1px solid var(--border)}
.section-head{max-width:64ch; margin:0 auto 2.5rem; text-align:center}
.section-head h2{font-size:clamp(1.8rem,2.4vw,2.6rem); line-height:1.2; margin-bottom:.5rem}
.section-head p{color:var(--muted)}
.grid{display:grid; gap:clamp(1rem,2vw,1.4rem)}
.grid-col-span-2{grid-column:span 2}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow-1)}
.muted{color:var(--muted)}
.badge{display:inline-block; background:var(--g); color:#fff; padding:.25rem .5rem; font-size:.75rem; border-radius:999px}

/* Buttons */
.btn{--btn-bg:var(--text); --btn-fg:#fff; --btn-bd:transparent; display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-radius:10px; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg); text-decoration:none; transition:transform .2s var(--e1), box-shadow .2s var(--e1), background .2s var(--e1)}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--brand)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--border)}
.btn--sm{padding:.55rem .75rem; border-radius:8px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(10px); background:color-mix(in oklch, var(--bg), transparent 65%); border-bottom:1px solid color-mix(in oklch, var(--border), transparent 40%); transition:box-shadow .2s var(--e1)}
.site-header.scrolled{box-shadow:var(--shadow-1)}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; color:inherit; text-decoration:none}
.brand-logo{height:32px; width:auto;border-radius: 50% ;object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.15))}
.brand-name{display:none}
@media (min-width:560px){ .brand-name{display:inline} }
.nav ul{display:flex; gap:.5rem; align-items:center; list-style:none; padding:0}
.nav a{padding:.5rem .7rem; border-radius:8px; text-decoration:none; color:inherit}
.nav a:hover{background:color-mix(in oklch, var(--border), transparent 60%)}
.theme-toggle{border:1px solid var(--border); background:transparent; border-radius:999px; padding:.4rem .65rem; display:inline-flex; align-items:center; gap:.4rem; cursor:pointer}
.nav-toggle{display:none; background:transparent; border:0; width:44px; height:44px; position:relative}
.nav-toggle .nav-toggle-bar,.nav-toggle .nav-toggle-bar::before,.nav-toggle .nav-toggle-bar::after{content:""; position:absolute; left:10px; right:10px; height:2px; background:currentColor; transition:transform .25s var(--e1)}
.nav-toggle .nav-toggle-bar{top:21px}
.nav-toggle .nav-toggle-bar::before{top:-8px}
.nav-toggle .nav-toggle-bar::after{top:8px}
@media (max-width:900px){
  .nav{position:fixed; inset:64px 0 auto 0; background:var(--panel); border-bottom:1px solid var(--border); transform:translateY(-120%); transition:transform .3s var(--e1); box-shadow:var(--shadow-1)}
  .nav.open{transform:translateY(0)}
  .nav ul{flex-direction:column; align-items:flex-start; gap:0}
  .nav a,.nav .btn{display:block; width:100%; padding:1rem 1.2rem; border-radius:0}
  .nav-toggle{display:inline-block}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar{transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{transform:rotate(90deg) translateX(8px)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{opacity:0}
}

/* Hero */
.hero{padding-top:clamp(4rem,10vw,9rem)}
.hero-inner{display:grid; gap:2rem; align-items:center; grid-template-columns:1.1fr 1fr}
@media (max-width:980px){ .hero-inner{grid-template-columns:1fr} }
.hero-title{font-size:clamp(2.2rem,4.5vw,4rem); line-height:1.1; background:var(--g); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-subtitle{margin-top:.4rem; color:color-mix(in oklch, var(--brand-2), white 10%); font-weight:700}
.hero-intro{margin-top:1rem; color:var(--muted); max-width:55ch}
.hero-cta{display:flex; gap:.75rem; margin-top:1.2rem; flex-wrap:wrap}
.tool-chips{display:flex; gap:.5rem; margin-top:1rem; list-style:none; padding:0; flex-wrap:wrap}
.tool-chips li{border:1px solid var(--border); padding:.35rem .65rem; border-radius:999px; font-size:.85rem; background:color-mix(in oklch, var(--panel), transparent 90%)}
.hero-art{position:relative; min-height:360px}
.blob{position:absolute; width:260px; aspect-ratio:1/1; border-radius:50%; filter:blur(30px); opacity:.7; animation:float 18s var(--e1) infinite}
.blob.b1{left:10%; top:2%; background:radial-gradient(circle at 30% 30%, #3b82f6, transparent 60%)}
.blob.b2{right:8%; top:20%; background:radial-gradient(circle at 60% 30%, #8b5cf6, transparent 60%); animation-delay:-6s}
.blob.b3{left:45%; bottom:0; background:radial-gradient(circle at 40% 60%, #00c2ff, transparent 60%); animation-delay:-12s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* Chips */
.chip{border:1px solid var(--border); background:transparent; color:inherit; padding:.5rem .9rem; border-radius:999px; cursor:pointer}
.chip.active,.chip:hover{background:var(--g); color:#fff; border-color:transparent}

/* Featured case studies */
.featured-grid{grid-template-columns:repeat(auto-fit, minmax(280px,1fr))}
.case{position:relative; padding-top:1.8rem; perspective:1000px}
.case-tag{position:absolute; top:0; left:0; transform:translateY(-50%); background:var(--g); color:#fff; padding:.25rem .6rem; border-radius:999px; font-size:.75rem}
.stack{display:flex; gap:.4rem; list-style:none; padding:0; margin:.8rem 0 1rem}
.stack li{padding:.25rem .5rem; border:1px solid var(--border); border-radius:8px; font-size:.8rem; background:color-mix(in oklch, var(--panel), transparent 90%)}

/* Ensure buttons are always clickable */
.links a, .links button { position:relative; z-index:1; pointer-events:auto;text-align: center; }

/* Projects */
.projects-grid{grid-template-columns:repeat(auto-fit, minmax(280px,1fr))}
.project{display:grid; grid-template-rows:160px auto; padding:0; overflow:hidden; perspective:1000px}
.cover{display:grid; place-items:center; font-size:2rem; color:#fff}
.cover.ds{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}
.cover.wa{background:linear-gradient(135deg,#4ecdc4,#44bd87)}
.project-body{padding:1rem 1.2rem}
.project-body h3{font-size:1.1rem; margin-bottom:.4rem}
.project-body p{color:var(--muted); margin-bottom:.8rem}
.links{display:flex; gap:.5rem; flex-wrap:wrap;text-align: center;  display: flex;
  justify-content: center;
  align-items: center;}

/* Blog */
.blog-grid{grid-template-columns:repeat(auto-fit, minmax(280px,1fr))}
.post{display:grid; gap:.6rem}
.post .meta{color:var(--muted); font-size:.85rem}

/* Resume */
.resume-grid{grid-template-columns:repeat(auto-fit, minmax(280px,1fr))}
.responsive-doc{position:relative; aspect-ratio:4/3; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.responsive-doc iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Timeline */
.timeline{position:relative; list-style:none; padding-left:0; margin:0 auto; max-width:800px}
.timeline::before{content:""; position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px; background:color-mix(in oklch, var(--border), transparent 30%)}
.tl-item{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.4rem 0}
.tl-item:nth-child(odd) .tl-content{grid-column:1}
.tl-item:nth-child(even) .tl-content{grid-column:2}
.tl-dot{position:absolute; left:calc(50% - 7px); top:8px; width:14px; height:14px; border-radius:50%; background:var(--brand)}
@media (max-width:820px){
  .timeline::before{left:6px}
  .tl-dot{left:0}
  .tl-item{grid-template-columns:1fr; padding-left:22px}
  .tl-item .tl-content{grid-column:1}
}

/* Forms */
.form label{display:grid; gap:.4rem}
.form input,.form textarea{width:100%; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--border); background:color-mix(in oklch, var(--panel), transparent 0%)}
.form input:focus,.form textarea:focus{outline:2px solid color-mix(in oklch, var(--brand), transparent 50%); outline-offset:2px}
.form .actions{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.error{color:#ff4d9d}
.ok{color:var(--ok)}
.form-success{margin-top:1rem; background:color-mix(in oklch, var(--ok), transparent 86%); border:1px solid color-mix(in oklch, var(--ok), transparent 70%); padding:.75rem 1rem; border-radius:10px}
.form-fail{margin-top:.6rem}

/* Contact quick cards */
.contact-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; margin-top:1rem}
.contact-card{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit}
.contact-card span{display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:var(--g); color:#fff}

/* Footer */
.site-footer{padding:3rem 0; border-top:1px solid var(--border); background:color-mix(in oklch, var(--panel), transparent 90%)}
.footer-grid{display:grid; gap:1.2rem; align-items:start}
@media (min-width:760px){ .footer-grid{grid-template-columns:1fr auto 1fr} }
.footer-links{display:flex; gap:1rem; list-style:none; padding:0}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; display:grid; place-items:center; z-index:100}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.modal-dialog{position:relative; background:var(--panel); border:1px solid var(--border); border-radius:12px; width:min(900px, 92%); max-height:86vh; overflow:auto; box-shadow:var(--shadow-2)}
.modal-header,.modal-footer{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1rem; border-bottom:1px solid var(--border)}
.modal-footer{border-top:1px solid var(--border); border-bottom:0}
.modal-body{padding:1rem}

/* Floating contact button */
.fab-contact{position:fixed; right:1rem; bottom:1rem; z-index:60; background:var(--g); color:#fff; text-decoration:none; padding:.8rem 1rem; border-radius:999px; box-shadow:var(--shadow-2); transition:transform .2s var(--e1), box-shadow .2s var(--e1)}
.fab-contact:hover{transform:translateY(-1px) scale(1.02)}

/* Animations */
[data-animate]{opacity:0; transform:translateY(12px); transition:opacity .6s var(--e1), transform .6s var(--e1)}
[data-animate].in{opacity:1; transform:none}
.flip{transform-style:preserve-3d; transition:transform .35s var(--e1)}
.flip:hover{transform:translateY(-4px) rotateX(6deg)}
@media (prefers-reduced-motion: reduce){ .blob{animation:none} .btn,.nav-toggle .nav-toggle-bar,.nav a{transition:none} }