:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#98a0b3;
  --accent1: #6EA8FE;
  --accent2: #FFD28C;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,var(--bg) 0%, #0b1220 100%);
  color: #E6EEF6;
  min-height:100vh;
  overflow-x:hidden;
}

/* header */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  position:sticky;
  top:0;
  z-index:50;
  background: linear-gradient(180deg, rgba(10,12,20,0.6), rgba(10,12,20,0.2));
  backdrop-filter: blur(6px);
}
.site-header .brand a{ color:var(--accent1); text-decoration:none; font-size:1.05rem;}
.main-nav a{ color:var(--muted); margin-left:16px; text-decoration:none; font-size:0.95rem; }
.main-nav a:hover{ color:#fff; text-decoration:underline; }

/* hero + blob stage */
#blob-stage{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero{
  min-height:54vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:10;
  padding:40px 20px;
  text-align:center;
}
.hero-inner{ max-width:920px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:40px; border-radius:14px; box-shadow: 0 6px 40px rgba(0,0,0,0.5); }
.hero h1{ margin:0 0 8px; font-size:clamp(1.6rem, 3.6vw, 3rem); color:#fff; }
.lead{ color:var(--muted); font-size:1.05rem; margin:0 0 12px; }
.cta{ display:inline-block; background: linear-gradient(90deg, var(--accent1), var(--accent2)); color:#07203d; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600; }

/* content */
.intro{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:18px; padding:28px 20px; max-width:1100px; margin:0 auto 40px; position:relative; z-index:10; }
.card{ background:var(--glass); padding:18px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.4); }

/* projects / experience */
.page{ max-width:1000px; margin:28px auto; padding:0 20px; z-index:10; position:relative; }
.project-card{ display:flex; gap:18px; margin:18px 0; padding:14px; background:rgba(255,255,255,0.02); border-radius:12px; align-items:center; }
.project-thumb svg{ border-radius:8px; }
.project-body h2{ margin:0 0 6px; }

/* footer */
.site-footer{ text-align:center; padding:20px; color:var(--muted); }

/* floating blobs */
.blob{
  position:absolute;
  border-radius:50%;
  filter: blur(10px);
  opacity:0.85;
  mix-blend-mode:screen;
  will-change: transform;
}

/* responsive tweak */
@media (max-width:700px){
  .hero-inner{ padding:26px }
}