:root{
  --text:#0b1220;
  --muted:#55637a;
  --line:rgba(11,18,32,.1);
  --brand:#2a4bff;
  --t1:#f6f7ff;
  --t2:#f4fbff;
  --t3:#f7fff6;
  --t4:#fff7f3;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,Arial,sans-serif;
  color:var(--text);
}
.container{max-width:1120px;margin:auto;padding:0 18px}
h1{font-size:40px}
h2{font-size:28px}
p{color:var(--muted)}

.header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0}
.header__inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand__logo{width:40px;height:40px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:900}
.brand__name{font-weight:900}
.brand__tag{font-size:12px;color:var(--muted)}

.nav__toggle{display:none}
.nav__menu a{margin-left:12px;text-decoration:none;color:var(--muted)}

.hero{padding:60px 0;background:linear-gradient(120deg,#eef1ff,#ffffff)}
.kicker{text-transform:uppercase;font-size:12px;color:var(--muted)}
.lead{font-size:18px}

.hero__badges{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.badge{padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px}

.section{padding:60px 0}
.tint1{background:var(--t1)}
.tint2{background:var(--t2)}
.tint3{background:var(--t3)}
.tint4{background:var(--t4)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}
.card.accent{border-color:var(--brand)}

footer{padding:20px 0;border-top:1px solid var(--line);text-align:center;color:var(--muted)}

@media(max-width:800px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}