:root{
  --bg:#0f172a;
  --muted:#cbd5e1;
  --text:#e5e7eb;
  --brand:#2563eb;
  --accent:#38bdf8;
  --radius:16px;
}

body{
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), #0a0f22 40%, #070c1a 100%);
  margin:0; padding:0;
  line-height:1.6;
}

.container{width:min(1100px,92%);margin:auto}
h1,h2,h3{margin:0 0 12px}
a{color:var(--accent);text-decoration:none}

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(7,12,26,0.75);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav{display:flex;gap:18px}
.btn{background:var(--brand);padding:10px 16px;border-radius:var(--radius);color:#fff;font-weight:bold}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.15)}

.hero{padding:80px 0 30px;border-bottom:1px solid rgba(255,255,255,.06)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero h1{font-size:42px}
.hero p{color:var(--muted);font-size:18px}
.hero-cta{display:flex;gap:12px;margin-top:18px}
.hero-art img{width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.06)}

.section{padding:70px 0}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:start}
.card{background:rgba(255,255,255,.05);border-radius:var(--radius);padding:22px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
.service .icon{font-size:26px}