.hero { 
    text-align:center; 
    margin-bottom:28px; 
}

.hero h1 { 
    margin:0; 
    font-size:28px; 
}

.hero p {
    margin:8px 0 0; 
}

.ss-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); 
    gap:18px; 
    margin-top:20px;
}

.card { 
    background: var(--surface); 
    border-radius:10px; 
    padding:16px; 
    box-shadow:0 4px 8px var(--border); 
    display:flex; 
    flex-direction:column; 
    gap:10px;
}

.card .meta { 
    color: var(--text-muted); 
    font-size:13px;
}
        
.card h3 { 
    margin:0; 
    font-size:18px;
}

.card p { 
    margin:0;  
    font-size:14px; 
}
    
.card .actions { 
    margin-top:auto; 
    display:flex; 
    gap:8px;
}

.btn { 
      padding: 10px 20px;
      background-color: var(--seamid);
      color: var(--text);
      border: none;
      border-radius: 25px;
      cursor: pointer;
      font-family: 'Jost', sans-serif;
}

.btn:hover { 
    background-color: var(--seadark);
}

.btn.secondary { 
    background:var(--seadark); 
    color:var(--text);
}

.btn.secondary:hover { 
    background: var(--seadark); 
}

@media (max-width:520px){ 
    .hero h1{
        font-size:22px;
            } 
}