/* -------------------------
   Base / Reset
   ------------------------- */
:root{
  --bg:#fafafa;
  --card:#ffffff;
  --text:#222;
  --muted:#556;
  --accent:#0066cc; /* main accent color */
  --radius:12px;
  --container:1100px;
  --gap:20px;
  --shadow: 0 6px 18px rgba(20,30,40,0.06);
  --glass: rgba(255,255,255,0.6);
  --accent-contrast: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* Container */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
}

/* Header */
.site-header{
  background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(20,20,20,0.04);
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap);
  padding:12px 0;
}

.brand{display:flex; align-items:center; gap:12px;}
.brand-headshot{width:56px; height:56px; object-fit:cover; border-radius:50%; border:2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.08);}
.site-title{font-size:1.05rem; margin:0}
.site-subtitle{margin:0; font-size:0.9rem; color:var(--muted)}

/* Navigation */
.main-nav{display:flex; align-items:center; gap:12px}
.nav-toggle{display:none; background:none; border:0; font-size:1.2rem}
.nav-list{list-style:none; display:flex; gap:12px; margin:0; padding:0}
.nav-list a{display:inline-block; text-decoration:none; color:var(--muted); padding:8px 10px; border-radius:8px}
.nav-list a:hover, .nav-list a:focus{background:rgba(0,102,204,0.08); color:var(--accent)}

/* HERO */
.hero{
  padding:48px 0;
}
.hero-inner{display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:center; align-content:center}
.hero-text h2{font-size:2rem; margin:0 0 10px}
.lead{color:var(--muted); margin:0 0 16px}