:root{
    --bg:#0b0b0c; --fg:#f6f6f7; --muted:#a4a4ad; --card:#121214; --accent:#7c8cff; --line:#1d1d20;
  }
  :root.light{
    --bg:#ffffff; --fg:#0d0e12; --muted:#5a5f6a; --card:#f5f6f8; --accent:#384cff; --line:#e8e9ee;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
    color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; scroll-behavior:smooth;
  }
  .container{width:min(1100px, 92%); margin-inline:auto}
  .site-header, .site-footer{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; border-bottom:1px solid var(--line)}
  .site-footer{border-top:1px solid var(--line); border-bottom:none; margin-top:4rem; padding:1.5rem 0}
  .brand{font-weight:700; letter-spacing:.2px; text-decoration:none; color:var(--fg)}
  .brand span{color:var(--accent)}
  .site-nav{display:flex; gap:.8rem; align-items:center}
  .site-nav a{color:var(--fg); text-decoration:none; padding:.5rem .8rem; border-radius:.75rem}
  .site-nav a:hover{background:var(--card)}
  .ghost{background:transparent; border:1px solid var(--line); color:var(--fg); padding:.5rem .8rem; border-radius:.75rem; cursor:pointer}
  .cta{background:var(--accent); color:white; padding:.5rem .9rem; border-radius:.75rem; text-decoration:none; border:0}
  .cta:hover{opacity:.9}
  .hero{padding:6rem 0 3rem}
  .eyebrow{color:var(--muted); text-transform:uppercase; letter-spacing:.15em; font-size:.8rem; margin:0 0 .4rem}
  h1{font-size:clamp(2rem,5vw,3.2rem); line-height:1.15; margin:.2rem 0 1rem}
  .lead{font-size:1.125rem; color:var(--muted); max-width:65ch}
  .actions{display:flex; gap:.8rem; margin-top:1.2rem}
  .section{padding:3rem 0}
  .section-head h2{margin:0 0 .3rem}
  .section-head .muted{color:var(--muted); margin:0 0 1.2rem}
  .grid{
    display:grid; gap:1rem; grid-template-columns:repeat(12, 1fr);
  }
  .card{
    grid-column:span 4; background:var(--card); border:1px solid var(--line); border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease;
  }
  .card:hover{transform:translateY(-4px)}
  .card-cover img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
  .card-body{padding:1rem 1rem 1.2rem}
  .card h3{margin:.2rem 0 .4rem}
  /* Make entire-card links look like normal text (no blue/purple) */
  .card a{color:inherit; text-decoration:none}
  .card a:visited{color:inherit}
  .card a:hover{text-decoration:none}
  .tags{display:flex; gap:.5rem; padding:0; margin:.6rem 0 0; list-style:none; flex-wrap:wrap}
  .tags li{font-size:.8rem; color:var(--muted); border:1px solid var(--line); padding:.2rem .5rem; border-radius:.6rem}
  .contact-cards{display:flex; gap:.8rem; flex-wrap:wrap}
  .contact-card{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:.9rem; text-decoration:none; color:var(--fg)}
  .contact-card:hover{transform:translateY(-2px)}
  .muted{color:var(--muted)}
  .reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
  .reveal.is-visible{opacity:1; transform:none}
  @media (max-width: 900px){
    .card{grid-column:span 6}
  }
  @media (max-width: 640px){
    .grid{grid-template-columns:1fr}
    .card{grid-column:1}
    .site-header{flex-wrap:wrap}
  }