Spokojní

: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;
}

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-lead{
font-size:22px;
margin-bottom:20px;
max-width:1000px;
}

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

.io-intro{
margin-bottom: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-reward-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:24px;
}

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

.io-tier h3{
margin:0 0 18px;
font-size:24px;
line-height:1.2;
}

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

.io-tier 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-links{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:25px;
}

.io-link-card{
border:1px solid var(–io-line);
border-radius:20px;
padding:30px 28px 26px;
text-decoration:none;
color:inherit;
background:#fff;
transition:.2s ease;
display:block;
}

.io-link-card:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(31,31,31,.07);
}

.io-reco-badge{
display:inline-block;
margin:0 0 14px;
padding:7px 12px;
border-radius:999px;
background:#fff4e8;
color:#b56a00;
font-size:13px;
font-weight:700;
border:1px solid #ffd8a8;
}

.io-link-head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
}

.io-link-head svg{
flex-shrink:0;
display:block;
}

.io-link-card h4{
margin:0;
font-size:30px;
line-height:1.15;
}

.io-stars{
color:#ffc107;
font-size:22px;
letter-spacing:1px;
line-height:1;
margin:8px 0 12px;
}

.io-link-card p{
margin:0 0 18px;
color:var(–io-muted);
font-size:17px;
line-height:1.5;
}

.io-review-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:12px 20px;
border-radius:999px;
background:var(–io-pink);
color:#fff;
font-weight:700;
font-size:16px;
line-height:1.2;
text-decoration:none;
box-shadow:0 10px 22px rgba(216,27,114,.22);
transition:.2s ease;
}

.io-review-btn::after{
content:“→“;
margin-left:8px;
font-weight:700;
}

.io-link-card:hover .io-review-btn{
background:var(–io-pink-dark);
box-shadow:0 14px 28px rgba(185,21,96,.28);
}

@media(max-width je rozdiel medzi:900px){
.io-reward-grid,
.io-links{
grid-template-columns:1fr;
}

h1{
font-size:34px;
}

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

.io-lead{
font-size:20px;
}

.io-link-card h4{
font-size:26px;
}

.io-review-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:12px 20px;
border-radius:999px;
background:var(–io-pink);
color:#fff !important;
font-weight:700;
font-size:16px;
line-height:1.2;
text-decoration:none !important;
box-shadow:0 10px 22px rgba(216,27,114,.22);
transition:.2s ease;
}
}