/*! HowToEarn Style Kit v1.0 */
:root{
  --brand:#2563EB; --accent:#F59E0B;
  --bg:#F8FAFC; --text:#0F172A; --muted:#475569;
  --card:#fff; --border:#E2E8F0; --radius:14px; --shadow:0 8px 24px rgba(2,6,23,.06);
}
body{color:var(--text); background:var(--bg);}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}
.ast-container{max-width:1200px}
.menu-highlight > a{background:var(--accent); color:#fff!important; padding:.55rem 1rem; border-radius:999px; box-shadow:var(--shadow)}
.menu-highlight > a:hover{transform:translateY(-1px)}
.section{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; margin:18px 0}
.section--soft{background:linear-gradient(180deg,#f4f9ff, #fff)}
.section h2{margin:.25rem 0 1rem}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid, .grid.cols-2, .grid.cols-3{grid-template-columns:1fr}}
.card{border:1px solid var(--border); border-radius:12px; padding:18px; background:#fff}
.card h3{margin:.25rem 0 .5rem}
.card p{color:var(--muted)}
.btn{display:inline-block; padding:.65rem 1rem; border-radius:10px; border:1px solid var(--border); background:#fff}
.btn-primary{background:var(--brand); color:#fff; border-color:transparent}
.btn-ghost{background:transparent}
.btn:hover{transform:translateY(-1px)}
.newsletter{border:1px dashed var(--border); padding:18px; border-radius:12px; background:#FCFEFF}
.newsletter p{margin:0 0 .5rem}
.site-footer a{color:var(--muted)}