.hero{
padding:180px 0 90px;
background:linear-gradient(135deg,var(--background-soft),#fff);
text-align:center;
}
.hero h1{margin-bottom:18px}
.hero p{max-width:700px;margin:0 auto;color:var(--text-muted)}

.content{
padding:90px 0;
background:var(--background-soft);
}

.card{
max-width:900px;
margin:auto;
padding:50px;
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-large);
box-shadow:var(--shadow-soft);
}

.card h2{
margin:48px 0 18px;
padding-bottom:12px;
border-bottom:1px solid var(--border);
font-size:2rem;
}
.card h2:first-child{margin-top:0}

.card p{
color:var(--text-muted);
line-height:1.9;
}

.card a{
color:var(--accent);
font-weight:600;
word-break:break-word;
}

.card a:hover{
text-decoration:underline;
}

@media(max-width:700px){
.hero{padding:140px 0 70px}
.content{padding:60px 0}
.card{padding:28px 22px}
.card h2{font-size:1.7rem}
}