:root{
  --glass-bg: rgba(255,255,255,0.08);
  --glass-bg-strong: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.12);
  --accent: #3b82f6; /* blue-500 */
}

html,body,#root{height:100%;}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: #0f172a; /* slate-800 */
  background: linear-gradient(to bottom, #f8fafc 0%, rgba(255,255,255,0.6) 50%, #ecfdf5 100%);
  position:relative;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* subtle noise overlay */
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:40;
  background-image:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.01));
  opacity:0.6;mix-blend-mode:overlay;
}

/* Glass utility */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.glass-strong{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
}

.soft-glow{box-shadow:0 6px 30px rgba(59,130,246,0.06);} /* blue subtle */
.glass-rounded{border-radius:1rem;}

.perspective-3d{perspective:1200px;}

/* small helpers */
.accent-ring:focus{outline:2px solid rgba(59,130,246,0.12);outline-offset:2px}

.blob-abs{position:absolute;filter:blur(60px);opacity:0.6;transform:translateZ(0);}

/* project image look */
.project-img{position:relative;overflow:hidden;border-radius:1rem}
.project-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.2));mix-blend-mode:multiply}

/* accessible focus for chips */
.chip:focus{box-shadow:0 0 0 4px rgba(59,130,246,0.12);} 

/* hero video */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-20}
.hero-video::cue{display:none}