:root{
	--green:#1db954; /* accent */
	--dark:#0f172a;  /* slate-900 */
	--text:#111827;  /* gray-900 */
	--light:#f8fafc; /* slate-50 */
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--text);background:#fff}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.hero{
	position:relative;min-height:44vh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden
}
.hero::before{
	content:"";position:absolute;inset:0;background:
	linear-gradient(0deg, rgba(16,24,40,.6), rgba(16,24,40,.4)),
	url("secondary-background-2.jpg") center/cover no-repeat;
	filter:saturate(0.9) contrast(1) brightness(0.95)
}
.hero > div{position:relative;padding:48px 20px}
.hero h1{margin:0 0 10px;font-size:clamp(28px,5vw,44px);letter-spacing:.4px}
.hero p{margin:0;font-size:clamp(16px,2.4vw,20px);opacity:.95}
.wrap{max-width:1100px;margin:0 auto;padding:28px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}

footer{padding:28px 20px;border-top:1px solid #e5e7eb;background:#fafafa;color:#334155;font-size:.95rem}
.small{font-size:.9rem;color:#475569}