:root{
  --bg0: #0b1220;
  --bg1: #0f172a;
  --card: rgba(255,255,255,.06);
  --card-border: rgba(255,255,255,.12);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --brand: #38bdf8;
  --brand2: #a78bfa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
  background: radial-gradient(60rem 60rem at 70% -10%, rgba(56,189,248,.12), transparent),
              radial-gradient(50rem 50rem at 20% 10%, rgba(167,139,250,.10), transparent),
              linear-gradient(to bottom, #020617, #0b1220 30%, #0b1220);
}
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.btn{display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.75rem 1rem; background:linear-gradient(90deg, var(--brand), var(--brand2)); color:#0b1220; font-weight:700; text-decoration:none; border:0; cursor:pointer}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--card-border)}
.btn.small{padding:.5rem .75rem; font-weight:600}
.btn:hover{opacity:.95}
.icon-inline{width:1.1em; height:1.1em; vertical-align:-.15em}

.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:rgba(2,6,23,.6); border-bottom:1px solid var(--card-border)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{color:var(--text); text-decoration:none; font-weight:700}
.brand-sub{color:#7dd3fc}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{color:var(--text); text-decoration:none; opacity:.85}
.nav a:hover{opacity:1}
.hamburger{display:none; background:transparent; border:1px solid var(--card-border); color:var(--text); padding:.3rem .5rem; border-radius:.5rem}

.hero{padding:64px 0 72px}
.badge{display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--card-border); color:var(--text)}
.badge svg{width:16px; height:16px; fill:currentColor}
.hero h1{font-size:clamp(28px, 5vw, 56px); line-height:1.1; margin:.75rem 0 1rem}
.lead{max-width:640px; color:#cbd5e1}
.actions{display:flex; gap:.75rem; margin-top:.5rem; flex-wrap:wrap}

.section{padding:64px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px}
.section-head h2{margin:0; font-size:clamp(22px, 4vw, 34px)}
.section-icon{width:24px; height:24px; fill:#7dd3fc}

.grid{display:grid; gap:16px}
.grid.two{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 900px){ .grid.three{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width: 640px){ .grid.two, .grid.three{grid-template-columns: 1fr} .nav{display:none} .hamburger{display:inline-block} }

.card{background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:16px}
.card h3{display:flex; align-items:center; gap:.5rem; margin-top:0}
.card h3 svg{width:20px; height:20px; fill:currentColor}

.project .thumb{aspect-ratio:16/9; border-radius:12px; background:linear-gradient(135deg, rgba(56,189,248,.25), rgba(167,139,250,.25)); margin-bottom:12px}
.project .thumb img{width:100%; height:100%}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.tags span{background:rgba(255,255,255,.08); border:1px solid var(--card-border); color:var(--text); padding:.25rem .5rem; border-radius:999px; font-size:.85rem}

.stat h4{margin:.2rem 0; font-weight:700}
.stat p{margin:.2rem 0 .4rem; color:#cbd5e1}
.stat.wide{grid-column:span 2}
.inner{align-content:start}

.contact{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px}
.contact label{display:flex; flex-direction:column; gap:6px; font-size:.95rem; color:#dbeafe}
.contact input,.contact textarea{background:rgba(255,255,255,.08); border:1px solid var(--card-border); color:var(--text); border-radius:12px; padding:.75rem; outline:none}
.contact input:focus,.contact textarea:focus{border-color:#7dd3fc; box-shadow:0 0 0 3px rgba(125,211,252,.2)}
.contact .full{grid-column: span 2}
.contact-footer{grid-column: span 2; display:flex; align-items:center; justify-content:space-between; gap:12px}
@media (max-width: 640px){ .contact{grid-template-columns: 1fr} .contact .full,.contact-footer{grid-column: span 1} }

.site-footer{border-top:1px solid var(--card-border); padding:24px 0; margin-top:40px}
.foot-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.foot-nav{display:flex; gap:12px}
.foot-nav a{color:var(--text); text-decoration:none; opacity:.8}
.foot-nav a:hover{opacity:1}