/* Minimal, fast and responsive styles */
:root{
  --bg: #0b0c10;
  --panel: #10131a;
  --text: #e8edf2;
  --muted: #a8b0bc;
  --accent: #5dd6a5;
  --accent-2: #5db5d6;
  --ring: color-mix(in oklab, var(--accent) 50%, transparent);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  line-height:1.5;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, color-mix(in oklab, var(--accent-2) 12%, transparent), transparent 60%),
    var(--bg);
}

.container{ width:min(1100px, 100% - 2rem); margin-inline:auto; }
.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{ left:1rem; top:1rem; background:var(--panel); color:var(--text); padding:.5rem .75rem; border-radius:.5rem; outline:2px solid var(--accent); }

.site-header{ position:sticky; top:0; z-index:10; background: color-mix(in oklab, var(--bg) 85%, #000 15% / 50%); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.06); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit }
.brand-name{ font-weight:700; letter-spacing:.02em }
.nav{ display:flex; gap:1rem }
.nav a{ color:var(--text); text-decoration:none; padding:.4rem .6rem; border-radius:.45rem; transition: background .2s ease, color .2s ease; }
.nav a:hover{ background:rgba(255,255,255,.06) }
.nav a.cta{ background:var(--accent); color:#0b120f; font-weight:600 }
.nav a.cta:hover{ background:color-mix(in oklab, var(--accent) 85%, white 15%) }

.hero{ padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem); text-align:center; }
.hero h1{ font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height:1.2; margin: 0 0 .75rem; }
.lead{ color:var(--muted); font-size: clamp(1rem, 2.2vw, 1.25rem); margin:.5rem auto 1.5rem; max-width: 55ch }

.button{ display:inline-block; background:var(--accent); color:#0b120f; font-weight:700; padding:.75rem 1rem; border-radius:.75rem; text-decoration:none; box-shadow: 0 8px 30px -10px var(--ring), 0 1px 0 0 #000 inset; }
.button:hover{ background:color-mix(in oklab, var(--accent) 85%, white 15%) }

.section{ padding: clamp(2rem, 6vw, 3rem) 0 }
.section h2{ font-size: clamp(1.25rem, 2.8vw, 1.75rem); margin:0 0 1rem }
.section p{ margin:.5rem 0 0; color:var(--text) }

.cards .card-grid{ list-style:none; display:grid; gap:1rem; padding:0; margin:0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card{ background: linear-gradient(180deg, color-mix(in oklab, #fff 2%, transparent), transparent); border:1px solid rgba(255,255,255,.08); border-radius: .9rem; padding:1rem; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -25px #000; }
.card h3{ margin:.2rem 0 .4rem; font-size:1.05rem }
.card p{ color:var(--muted) }

.contact .contact-block{ background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:.9rem; padding:1rem; }
.contact-block ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem }
.contact-block a{ color:var(--accent) }

.site-footer{ padding:1.25rem 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.08); }

@media (prefers-color-scheme: light){
  :root{
    --bg: #f7f9fc;
    --panel: #ffffff;
    --text: #0f1116;
    --muted: #5f6b7a;
    --accent: #0bb67f;
    --accent-2: #2e80f0;
  }
  .site-header{ background: color-mix(in oklab, var(--bg) 80%, white 20% / 80%); border-bottom:1px solid rgba(0,0,0,.06); }
  .card{ border:1px solid rgba(0,0,0,.06); box-shadow: 0 1px 0 rgba(0,0,0,.03) inset, 0 10px 35px -30px rgba(0,0,0,.5); }
  .contact .contact-block{ border:1px solid rgba(0,0,0,.06) }
}