.seo { padding: 56px 0 96px; }.seo-in { max-width: 920px; }.seo .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--faint); margin-bottom: 22px; } .seo .crumbs a { color: var(--muted); } .seo .crumbs a:hover { color: var(--text); }.seo h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -.035em; font-weight: 650; margin: 0 0 18px; text-wrap: balance; }.seo-lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--text-2); max-width: 720px; margin: 0 0 8px; }.seo h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; margin: 52px 0 12px; font-weight: 620; text-wrap: balance; }.seo p, .seo li { color: var(--text-2); font-size: 16.5px; line-height: 1.7; max-width: 760px; } .seo p { margin: 0 0 14px; }.seo ul { margin: 6px 0 16px; padding-left: 20px; } .seo li { margin: 7px 0; } .seo li::marker { color: var(--accent); }.seo a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; } .seo a:hover { text-decoration-color: var(--accent); }.seo a.btn { text-decoration: none; } .seo b { color: var(--text); font-weight: 620; }.seo-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 8px; }.seo-end { margin-top: 64px; padding: 30px; border: 1px solid var(--line-2); border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, var(--accent-bg), transparent 60%), var(--surface); } .seo-end h2 { margin-top: 0; }.seo .faq details { border-bottom: 1px solid var(--line); } .seo .faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16.5px; color: var(--text); list-style: none; } .seo .faq summary::-webkit-details-marker { display: none; }.seo .faq summary::after { content: '+'; float: right; color: var(--muted); font-size: 20px; line-height: 1; } .seo .faq details[open] summary::after { content: '–'; } .seo .faq p { padding-bottom: 14px; }.seo-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }.seo-rel a { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); text-decoration: none; transition: border-color .2s, transform .2s; } .seo-rel a:hover { border-color: var(--accent-line); transform: translateY(-2px); }.seo-rel b { color: var(--text); font-size: 16px; } .seo-rel span { color: var(--muted); font-size: 14px; line-height: 1.5; }.seo-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 14px; }.seo-skill { margin: 0; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--surface); } .seo-skill img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg-2); }.seo-skill figcaption { padding: 14px 16px 16px; } .seo-skill h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); } .seo-skill p { font-size: 14px; line-height: 1.55; margin: 0 0 6px; color: var(--muted); } .seo-skill .ask { color: var(--text-2); }@media (max-width: 720px) { .seo { padding-top: 32px; } }