/* Material 3 Expressive theme (light/dark), zero-JS, fast */
:root{
  /* Color tokens */
  --md-sys-color-primary: #7cc6ff;
  --md-sys-color-secondary: #66e3c4;
  --md-sys-color-surface: #0b0f19;
  --md-sys-color-surface-container: #0f1526;
  --md-sys-color-surface-container-high: #111a2d;
  --md-sys-color-on-surface: #e7ecf3;
  --md-sys-color-outline: #2b3954;
  --md-sys-color-muted: #a7b0c0;
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --md-sys-elevation-2: 0 4px 8px rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.2);
  --md-sys-elevation-3: 0 8px 20px rgba(0,0,0,.35);
  --md-shape-large: 18px; /* expressive rounded */
  --md-shape-full: 999px;
}
@media (prefers-color-scheme: light){
  :root{
    --md-sys-color-primary: #0054b4;
    --md-sys-color-secondary: #0a7f67;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-surface-container: #f6f8fb;
    --md-sys-color-surface-container-high: #eef2f9;
    --md-sys-color-on-surface: #0b1020;
    --md-sys-color-outline: #d6dce8;
    --md-sys-color-muted: #4b5565;
  }
}

*{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--md-sys-color-on-surface); background:var(--md-sys-color-surface);
  font-family: 'Roboto Flex', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  line-height:1.65;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; }
.container{ width:min(1120px, 92vw); margin-inline:auto; }
.row{ display:flex; gap:1rem; }
.between{ justify-content:space-between; }
.center{ align-items:center; }
.grid{ display:grid; gap:2rem; }
.grid.two{ grid-template-columns: repeat(1, 1fr); }
.grid.three{ grid-template-columns: repeat(1, 1fr); }
@media (min-width: 900px){ .grid.two{ grid-template-columns:1.2fr .8fr } .grid.three{ grid-template-columns: repeat(3, 1fr);} }

/* Accessibility */
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{ position:static; width:auto; height:auto; padding:.6rem 1rem; background:var(--md-sys-color-surface-container); border:1px solid var(--md-sys-color-outline); border-radius: var(--md-shape-large); }

/* App bar */
.app-bar{ position:sticky; top:0; z-index:10; -webkit-backdrop-filter:saturate(120%) blur(8px); backdrop-filter:saturate(120%) blur(8px); background-color: var(--md-sys-color-surface); background:color-mix(in srgb, var(--md-sys-color-surface) 85%, transparent); border-bottom:1px solid var(--md-sys-color-outline); }
.app-title{ display:inline-block; padding:1rem 0; color:var(--md-sys-color-on-surface); text-decoration:none; }
.bar{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.elevation-1{ box-shadow: var(--md-sys-elevation-1); }
.elevation-2{ box-shadow: var(--md-sys-elevation-2); }
.elevation-3{ box-shadow: var(--md-sys-elevation-3); }
.nav{ list-style:none; display:flex; gap:.25rem; margin:0; padding:0; }
.nav-link{ color:var(--md-sys-color-on-surface); text-decoration:none; padding:.6rem .8rem; border-radius: var(--md-shape-full); opacity:.9; }
.nav-link:hover{ background:var(--md-sys-color-surface-container); }

/* Typography */
.display-medium{ font-size:clamp(2.25rem, 3vw + 1rem, 3.5rem); font-weight:700; letter-spacing:-.01em; line-height:1.15; margin:0 0 .75rem; }
.headline-medium{ font-size:clamp(1.5rem, 1.4vw + 1rem, 2rem); font-weight:700; letter-spacing:.005em; margin:0 0 .5rem; }
.title-large{ font-size:1.25rem; font-weight:700; letter-spacing:.01em; margin:.2rem 0 .3rem; }
.label-large{ font-size:.98rem; font-weight:600; letter-spacing:.02em; }
.body-large{ font-size:1.05rem; }
.muted{ color:var(--md-sys-color-muted); }

/* Surfaces */
.md3{ color:var(--md-sys-color-on-surface); }
.surface-container-high{ background:var(--md-sys-color-surface-container-high); }

/* Hero */
.hero{ padding:7rem 0 4rem; background-color: var(--md-sys-color-surface); background:
  radial-gradient(1200px 500px at 10% -20%, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent), transparent),
  radial-gradient(1000px 520px at 90% -30%, color-mix(in srgb, var(--md-sys-color-secondary) 12%, transparent), transparent);
}
.cta{ display:flex; gap:.8rem; margin:1.2rem 0 2rem; }

/* Buttons */
.md3-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.1rem; border-radius: var(--md-shape-full); text-decoration:none; transition: transform .12s ease, box-shadow .12s ease, background .15s ease; }
.md3-btn.filled{ background:var(--md-sys-color-primary); color:#021522; box-shadow: var(--md-sys-elevation-1); border:1px solid var(--md-sys-color-outline); border:1px solid color-mix(in srgb, var(--md-sys-color-primary) 50%, var(--md-sys-color-outline)); }
.md3-btn.filled:hover{ transform: translateY(-1px); box-shadow: var(--md-sys-elevation-2); }
.md3-btn.outlined{ background:transparent; border:1px solid var(--md-sys-color-outline); color:var(--md-sys-color-on-surface); }
.md3-btn.outlined:hover{ background:var(--md-sys-color-surface-container); }

/* Cards */
.card{ border:1px solid var(--md-sys-color-outline); border-radius: var(--md-shape-large); padding:1.2rem 1rem; background:var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-1); }

/* Stats */
.stats{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem; margin-top:1.5rem; max-width:720px; }
.stat{ text-align:center; }

/* Sections */
.section{ padding:4rem 0; }
.section.alt{ background-color: var(--md-sys-color-surface-container); background:linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-surface-container) 60%, transparent), transparent); }

/* Lists */
.check{ list-style:none; padding:0; margin:0; }
.check li{ position:relative; padding-left:1.5rem; margin:.35rem 0; }
.check li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--md-sys-color-secondary); font-weight:700; }
.people ul{ list-style:none; padding:0; margin:0; }
.people li{ margin:.3rem 0; }

/* Timeline */
.timeline{ display:grid; gap:1rem; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 900px){ .timeline{ grid-template-columns: repeat(3, 1fr);} }
.timecard{ border-left:3px solid var(--md-sys-color-secondary); }

/* Contact */
.contact{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 0; }
.fine{ color:var(--md-sys-color-muted); font-size:.95rem; }

/* Footer */
.site-footer{ border-top:1px solid var(--md-sys-color-outline); padding:1rem 0; background-color: var(--md-sys-color-surface); background:color-mix(in srgb, var(--md-sys-color-surface) 80%, transparent); }
small{ color:var(--md-sys-color-muted); }