Tak takhle ne

:root{
–io-pink:#d81b72;
–io-pink-dark:#b91560;
–io-text:#1f1f1f;
–io-muted:#6e6e6e;
–io-bg:#fbf7f9;
–io-card:#ffffff;
–io-line:#f0dbe6;
–io-shadow:0 18px 55px rgba(31,31,31,.08);
–io-radius:22px;
–io-max:1240px;
}

body{
margin:0;
font-family:inherit,-apple-system,BlinkMacSystemFont,“Segoe UI“,Roboto,Arial,sans-serif;
color:var(–io-text);
background:var(–io-bg);
line-height:1.6;
}

.io-wrap{
max-width:var(–io-max);
margin:auto;
padding:40px 20px 70px;
}

.io-section{
margin-top:40px;
background:#fff;
border:1px solid var(–io-line);
border-radius:28px;
box-shadow:var(–io-shadow);
padding:36px;
}

.io-section:first-child{
margin-top:0;
}

.io-badge{
display:inline-block;
background:#fff0f7;
color:var(–io-pink-dark);
border:1px solid #f8cfe1;
border-radius:999px;
padding:8px 16px;
font-weight:700;
font-size:14px;
margin-bottom:18px;
}

.io-alert{
background:#fff4f6;
border:1px solid #f3c7d8;
color:#8f184e;
padding:18px 20px;
border-radius:18px;
font-size:17px;
margin-top:22px;
}

h1{
margin:0 0 18px;
font-size:46px;
line-height:1.1;
letter-spacing:-0.02em;
}

.io-section h2{
font-size:34px;
line-height:1.15;
margin:0 0 10px;
}

.io-sub,
.io-intro{
color:var(–io-muted);
font-size:17px;
max-width:980px;
}

.io-intro{
margin:0;
}

.io-actions{
margin-top:28px;
display:flex;
gap:14px;
flex-wrap:wrap;
}

.io-btn{
padding:14px 24px;
border-radius:999px;
font-weight:700;
text-decoration:none;
display:inline-block;
transition:.2s ease;
}

.io-btn-primary{
background:var(–io-pink);
color:#fff;
}

.io-btn-primary:hover{
background:var(–io-pink-dark);
}

.io-btn-secondary{
background:#fff;
border:1px solid var(–io-line);
color:var(–io-pink-dark);
}

.io-btn-secondary:hover{
border-color:#e8bfd1;
background:#fff7fb;
}

.io-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:24px;
}

.io-card-box{
background:#fff;
border:1px solid var(–io-line);
border-radius:22px;
padding:26px;
}

.io-card-box h3{
margin:0 0 16px;
font-size:24px;
line-height:1.2;
}

.io-card-box strong{
font-size:34px;
display:block;
margin:0 0 14px;
color:var(–io-pink-dark);
line-height:1.1;
}

.io-card-box p{
margin:0;
color:var(–io-muted);
font-size:17px;
}

.io-note{
margin-top:22px;
border:1px dashed #e8bfd1;
padding:18px;
border-radius:18px;
background:#fff;
color:var(–io-muted);
font-size:17px;
}

.io-steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:24px;
}

.io-step{
background:#fff;
border:1px solid var(–io-line);
border-radius:22px;
padding:24px;
}

.io-step-num{
width:42px;
height:42px;
border-radius:999px;
background:#fff0f7;
border:1px solid #f8cfe1;
color:var(–io-pink-dark);
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:18px;
margin-bottom:14px;
}

.io-step h3{
margin:0 0 10px;
font-size:22px;
line-height:1.2;
}

.io-step p{
margin:0;
color:var(–io-muted);
font-size:17px;
}

@media(max-width:900px){
.io-grid,
.io-steps{
grid-template-columns:1fr;
}

h1{
font-size:34px;
}

.io-section h2{
font-size:28px;
}
}