:root{
  --bg:#f6f6f4;
  --bg2:#ffffff;
  --text:#0e0f10;
  --muted:#5b5b60;
  --line:#e7e7e2;
  --shadow: 0 16px 50px rgba(0,0,0,.08);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% 0%, #ffffff 0%, var(--bg) 55%, #f1f1ee 100%);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a{color:inherit; text-decoration:none}
.wrap{max-width:1120px; margin:0 auto; padding:28px 18px 86px;}

.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:680; letter-spacing:-.02em;}
.dot{width:10px;height:10px;border-radius:999px;background:#111;}
.brand small{color:var(--muted); font-weight:600; letter-spacing:0; margin-left:6px}

.links{display:flex; gap:18px; color:var(--muted); font-size:14px;}
.links a:hover{color:#1c1c20}

.cta{display:flex; gap:10px; align-items:center;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  font-size:14px; font-weight:650;
}
.btn:hover{border-color:#d2d2cc}
.btn.primary{background:#111;color:#fff;border-color:#111;}
.btn.primary:hover{background:#0b0b0c}

.hero{padding:66px 0 26px;}
.kicker{color:var(--muted); font-weight:750; letter-spacing:.08em; font-size:12px; text-transform:uppercase;}
h1{margin:12px 0 14px; font-size:60px; line-height:1.02; letter-spacing:-.055em;}
.sub{max-width:72ch; color:var(--muted); font-size:18px; line-height:1.6;}

.grid{display:grid; grid-template-columns:1.35fr .65fr; gap:16px; margin-top:26px;}
.card{
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

.card h3{margin:0 0 8px; letter-spacing:-.02em;}
.card p{margin:0; color:var(--muted); line-height:1.6;}

.pillrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
  font-size:13px;
  color:#2b2b2f;
  background:#fbfbfa;
}

.steps{margin-top:18px; display:grid; gap:10px;}
.step{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:16px; border:1px solid var(--line);
  background:#fcfcfb;
}
.num{
  width:26px;height:26px;border-radius:10px;
  background:#111; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
}
.step b{display:block; margin-bottom:2px;}

.two{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
.list{margin:10px 0 0; padding:0; list-style:none; color:var(--muted); line-height:1.65;}
.list li{padding:6px 0; border-bottom:1px solid var(--line);}
.list li:last-child{border-bottom:0;}

.price{display:flex; align-items:baseline; gap:10px; margin-top:8px;}
.amt{font-size:36px; font-weight:850; letter-spacing:-.03em;}
.per{color:var(--muted);}

.strip{
  margin-top:16px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  display:flex; gap:10px; justify-content:space-between; align-items:center;
}
.strip span{color:var(--muted)}
.strip b{letter-spacing:-.02em}

footer{
  margin-top:46px;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}

@media (max-width:900px){
  h1{font-size:44px;}
  .grid{grid-template-columns:1fr;}
  .two{grid-template-columns:1fr;}
  .links{display:none;}
  .strip{flex-direction:column; align-items:flex-start;}
}