.hooks{max-width:1280px;margin:0 auto;padding:64px 24px 40px}.hooks-hero-content,.hooks-code{min-width:0}.hooks-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}.hooks-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}.hooks-hero h1{margin:20px 0 16px;font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.1}.hooks-hero p{max-width:100%;color:var(--color-text-secondary);line-height:1.8}.hooks-action{display:flex}.hooks-actions{gap:16px;margin-top:32px;display:flex}.hooks-code{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-background);padding:24px}.hooks-code span{margin-bottom:16px;font-weight:600;display:block}.hooks-code pre{margin:0;overflow-x:auto}.hooks-section{margin-bottom:72px}.hooks-section h2{margin-bottom:20px}.hooks-section-description{color:var(--color-text-secondary);margin-bottom:24px;line-height:1.8}.hooks-example pre{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-background);margin:0;padding:24px;overflow-x:auto}.hooks-benefits{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.hooks-benefit{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);padding:28px}.hooks-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}.hooks-benefit h3{margin-bottom:12px}.hooks-benefit p{color:var(--color-text-secondary);line-height:1.8}.hooks-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}@media (max-width:900px){.hooks-hero,.hooks-grid,.hooks-benefits{grid-template-columns:1fr}}@media (max-width:768px){.hooks-actions{flex-direction:column;gap:12px;width:100%;display:flex}.hooks-actions a{width:100%;display:block}.hooks-actions button{justify-content:center;width:100%;display:inline-flex}}@media (max-width:480px){.hooks{padding:24px 12px 48px}.hooks-actions{flex-direction:column;gap:12px}.hooks-action{width:100%}.hooks-action button{justify-content:center;width:100%}.hooks-hero{border-radius:var(--radius-lg);gap:24px;padding:18px}.hooks-badge{padding:5px 12px;font-size:.75rem}.hooks-hero h1{font-size:1.75rem}.hooks-hero p{font-size:.875rem}.hooks-code{padding:14px}.hooks-code code{font-size:.8125rem}}