:root{
  --bg1:#f7fafc; --bg2:#eef2ff; --card:#ffffff; --text:#07203a; --muted:#475569; --accent:#3b82f6;
  --max-width:1100px; --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body.site-body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;color:var(--text);-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}

/* large, visible background blobs (lighter theme) */
body.site-body::before{
  content:'';position:fixed;inset:-20% -10% -20% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(59,130,246,0.14) 0 25%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(99,102,241,0.10) 0 30%, transparent 50%),
    radial-gradient(circle at 60% 10%, rgba(236,72,153,0.08) 0 28%, transparent 50%);
  filter: blur(48px);opacity:0.95;animation:bgFloat 22s ease-in-out infinite;
}

@keyframes bgFloat{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-120px) scale(1.06)}100%{transform:translateY(0) scale(1)}}

.hero{padding:40px 16px 20px;max-width:1200px;margin:0 auto}
.hero-inner{display:flex;align-items:center;gap:18px;max-width:var(--max-width);margin:0 auto}
.avatar{font-size:48px;width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(135deg, #dbeafe, #fef3c7);box-shadow:0 8px 20px rgba(7,32,58,0.06);}
h1{font-size:28px;margin:0;color:var(--text)}
.tagline{margin:6px 0 0;color:var(--muted)}
.hero-nav{margin-top:10px;display:flex;gap:10px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:700;color:var(--text);border:1px solid rgba(7,32,58,0.06);background:transparent}
.btn.ghost{color:var(--muted)}
.btn.primary{background:linear-gradient(90deg,var(--accent),#60a5fa);color:#fff;border:none}

.content{max-width:var(--max-width);margin:20px auto;padding:0 16px;display:grid;grid-template-columns:1fr 340px;gap:20px}
.card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:0 6px 20px rgba(15,23,42,0.06);border:1px solid rgba(7,32,58,0.04)}
.card h2{margin-top:0}
.about p{color:var(--muted);margin:8px 0 12px}
.code-sample{background:#f1f5f9;padding:12px;border-radius:8px;color:#0b1220;overflow:auto}
.code-sample code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;display:block}

.projects ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.projects a{color:var(--accent);text-decoration:none;font-weight:700}

.footer{max-width:var(--max-width);margin:20px auto 48px;padding:0 16px;color:var(--muted);font-size:13px;text-align:center}

@media (max-width:980px){.content{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){*{animation:none;transition:none}}

@media (max-width:520px){
  .hero-inner{flex-direction:row;gap:12px}
  .avatar{font-size:40px;width:64px;height:64px}
  .content{grid-template-columns:1fr}
}