.integration-page { overflow: hidden; }
.integration-hero { padding: 6rem 2rem 4.5rem; }
.integration-hero h1 { max-width: 850px; margin: 0; color: #f8fafc; font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
.integration-hero p { max-width: 760px; margin: 1.5rem 0 1.75rem; color: #b8c7d9; font-size: 1.05rem; line-height: 1.7; }
.integration-content { padding: 3rem 2rem 5rem; background: rgba(10, 14, 23, .2); }
.integration-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: 3.75rem; }
.integration-intro > div > p, .integration-more p { max-width: 650px; color: #a9b7ca; font-size: .96rem; line-height: 1.7; }
.integration-step-list { padding: 1.6rem 1.8rem; border-radius: 8px; background: rgba(10, 14, 23, .7); }
.integration-step-list p { margin: 0; color: #a9b7ca; font-size: .94rem; line-height: 1.7; }
.integration-step-list p + p { margin-top: 1rem; }
.integration-step-list strong { color: #e2e8f0; }
.integration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.integration-tool { min-width: 0; display: flex; flex-direction: column; padding: 1.75rem; border-radius: 8px; background: rgba(10, 14, 23, .7); }
.integration-tool h3 { margin: 0; color: #f1f5f9; font-size: 1.125rem; font-weight: 600; }
.integration-tool p { flex: 1; margin: 1rem 0 1.35rem; color: #94a3b8; font-size: .9rem; line-height: 1.7; }
.integration-tool a { align-self: flex-start; color: #c4b5fd; font-size: .88rem; font-weight: 600; text-decoration: none; }
.integration-tool a:hover { color: #e9d5ff; }
.integration-tool a:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 4px; }
.integration-more { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 3.75rem; }
@media (max-width: 880px) { .integration-intro { grid-template-columns: 1fr; } .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .integration-hero { padding: 4rem 1rem 3.5rem; } .integration-content { padding: 2.75rem 1rem 4.5rem; } .integration-grid { grid-template-columns: 1fr; } .integration-more { flex-direction: column; align-items: flex-start; } .integration-more .industry-button { width: 100%; } }