/* Clean, modern, light-first design */
:root{
  --bg: #fbfbfd;
  --panel: #ffffff;
  --ink: #101225;
  --muted: #5b6370;
  --accent: #6c5ce7; /* indigo */
  --accent-2: #00c2ff; /* cyan */
  --ring: color-mix(in oklab, var(--accent) 45%, transparent);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0d14;
    --panel: #0f1220;
    --ink: #e9edf6;
    --muted: #a9b1be;
    --accent: #8b7dff;
    --accent-2: #24d1ff;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, 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(--ink);
  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) 80%, white 20% / 70%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit }
.brand-name{ font-weight:800; letter-spacing:.02em }
.nav{ display:flex; gap:.9rem }
.nav a{
  color:inherit; text-decoration:none; padding:.45rem .6rem; border-radius:.5rem;
}
.nav a:hover{ background: color-mix(in oklab, var(--ink) 8%, transparent) }
.nav a.cta{ background:var(--ink); color:var(--panel); font-weight:600 }
.nav a.cta:hover{ background: color-mix(in oklab, var(--ink) 85%, black 15%) }

.hero{ position:relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(2.2rem, 6vw, 4rem); overflow:hidden; }
.hero-inner{ display:grid; gap:2rem; grid-template-columns: 1.1fr .9fr; align-items:center; }
@media (max-width: 900px){ .hero-inner{ grid-template-columns: 1fr } }
.hero-copy h1{
  font-size: clamp(1.9rem, 4.8vw, 3.3rem);
  line-height:1.15; margin:0 0 .75rem;
}
.lead{ color:var(--muted); font-size: clamp(1rem, 2.2vw, 1.25rem); margin:.5rem 0 1.2rem; max-width: 60ch }
.hero-actions{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap }
.button{
  display:inline-block; background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white; font-weight:700; padding:.8rem 1rem; border-radius:.9rem; text-decoration:none;
  box-shadow: 0 10px 30px -12px var(--ring);
}
.button:hover{ filter: brightness(1.05) }
.link{ text-decoration:none; font-weight:600; }
.link:hover{ text-decoration:underline }
.meta{ list-style:none; padding:0; margin:1rem 0 0; color:var(--muted); display:grid; gap:.35rem }

.hero-art{ position:relative; min-height: 320px; }
.orb{ position:absolute; border-radius:50%; filter: blur(10px); opacity:.8;
  background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
  box-shadow: 0 20px 60px -30px var(--ring);
}
.orb-lg{ width: 320px; height:320px; right:10%; top:10%; }
.orb-sm{ width:160px; height:160px; right:0; bottom:0; transform: translate(20%, 20%); }
.grid{ position:absolute; inset:10% 5% 5% 10%; background:
  linear-gradient(90deg, color-mix(in oklab, var(--ink) 10%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(0deg, color-mix(in oklab, var(--ink) 10%, transparent) 1px, transparent 1px) 0 0 / 24px 24px;
  border-radius:1rem; opacity:.35; mix-blend-mode: multiply;
}

.section{ padding: clamp(2rem, 6vw, 3.2rem) 0 }
.section h2{ font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin:0 0 1rem }
.section p{ margin:.5rem 0 0 }

.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:var(--panel);
  border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  border-radius: 1rem; padding:1.1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset, 0 20px 40px -35px var(--ring);
}
.card h3{ margin:.2rem 0 .4rem; font-size:1.05rem }
.card p{ color:var(--muted) }

.bullets{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem }
.bullets li{ background: var(--panel); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius:.85rem; padding:.8rem 1rem }

.contact .contact-block{
  background:var(--panel);
  border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  border-radius:1rem; 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.2rem 0; color:var(--muted);
  border-top:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}

@media (prefers-reduced-motion: reduce){
  .orb, .button{ transition:none; animation:none }
}