.utilities{max-width:1280px;margin:0 auto;padding:64px 24px 40px}.utilities-hero{border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);grid-template-columns:1.4fr .8fr;gap:48px;margin-bottom:72px;padding:48px;display:grid}.utilities-badge{background:var(--color-primary-light);color:var(--color-primary);border-radius:999px;align-items:center;padding:6px 14px;font-size:.875rem;font-weight:600;display:inline-flex}.utilities-hero h1{margin:20px 0 16px;font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.1}.utilities-hero p{max-width:650px;color:var(--color-text-secondary);line-height:1.8}.utilities-actions{gap:16px;margin-top:32px;display:flex}.utilities-code{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-background);padding:24px}.utilities-code span{margin-bottom:16px;font-weight:600;display:block}.utilities-code pre{margin:0;overflow-x:auto}.utilities-section{margin-bottom:72px}.utilities-section h2{margin-bottom:20px}.utilities-section-description{color:var(--color-text-secondary);margin-bottom:24px;line-height:1.8}.utilities-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.utilities-example pre{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-background);margin:0;padding:24px;overflow-x:auto}.utilities-benefits{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.utilities-benefit{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);padding:28px}.utilities-benefit span{background:var(--color-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;margin-bottom:20px;font-weight:700;display:inline-flex}.utilities-benefit h3{margin-bottom:12px}.utilities-benefit p{color:var(--color-text-secondary);line-height:1.8}@media (max-width:900px){.utilities-hero,.utilities-grid,.utilities-benefits{grid-template-columns:1fr}}@media (max-width:768px){.utilities{padding:48px 20px 80px}.utilities-hero{padding:24px}.utilities-actions{flex-direction:column}}