.seo-page { background: #f7f9fc; color: #12203a; }
.seo-page main { overflow: hidden; }
.seo-hero { position: relative; overflow: hidden; background: #0b1d38; color: #fff; padding: 88px 0 76px; }
.seo-hero::before { position: absolute; width: 720px; height: 720px; right: -230px; top: -430px; border-radius: 50%; background: radial-gradient(circle, #16bbb783, #13a5a02b 38%, transparent 70%); content: ""; }
.seo-hero::after { position: absolute; width: 450px; height: 450px; left: -250px; bottom: -340px; border-radius: 50%; background: #9bd33734; content: ""; }
.seo-hero .wrap { position: relative; max-width: 960px; }
.seo-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: #a9c1d7; font-size: 12px; font-weight: 700; }
.seo-breadcrumb a { color: #b8ebe8; text-decoration: none; }
.seo-breadcrumb a:hover { color: #fff; }
.seo-hero .eyebrow { margin-top: 42px; color: #62ddd7; }
.seo-hero h1 { max-width: 850px; margin: 0; font: 800 clamp(40px, 6vw, 65px)/1.04 "Manrope", sans-serif; letter-spacing: -2.6px; text-wrap: balance; }
.seo-hero h1 em { color: #b9e55e; font-style: normal; }
.seo-hero > .wrap > p:not(.eyebrow) { max-width: 710px; margin: 24px 0 0; color: #d1dfed; font-size: 18px; line-height: 1.62; }
.seo-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.seo-page .button { background: #12aead; box-shadow: 0 12px 24px #12aead2e; }
.seo-page .button:hover { background: #088d91; }
.seo-page .button.ghost { border-color: #89a4bf; color: #fff; }
.seo-page .button.ghost:hover { background: #ffffff12; }
.seo-summary { position: relative; z-index: 1; margin-top: -35px; }
.seo-summary__grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #d9e6ec; border-radius: 19px; background: #fff; box-shadow: 0 17px 48px #12203a12; }
.seo-summary__grid div { padding: 21px 24px; }
.seo-summary__grid div + div { border-left: 1px solid #e5edf2; }
.seo-summary__grid b, .seo-summary__grid span { display: block; }
.seo-summary__grid b { color: #087d86; font-size: 11px; letter-spacing: .09em; }
.seo-summary__grid span { margin-top: 8px; color: #405470; font-size: 14px; font-weight: 700; line-height: 1.4; }
.seo-section { padding: 94px 0; }
.seo-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 70px; align-items: start; }
.seo-copy h2, .seo-section-title { margin: 0; font: 800 clamp(29px, 3.5vw, 45px)/1.12 "Manrope", sans-serif; letter-spacing: -1.5px; text-wrap: balance; }
.seo-copy > p, .seo-copy li { color: #576a84; font-size: 16px; line-height: 1.7; }
.seo-copy > p { margin: 20px 0 0; }
.seo-copy ul { display: grid; gap: 11px; margin: 24px 0 0; padding: 0; list-style: none; }
.seo-copy li { position: relative; padding-left: 30px; }
.seo-copy li::before { position: absolute; left: 0; top: 7px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 6px; background: #dff7f5; color: #068b8c; content: "✓"; font-size: 11px; font-weight: 800; }
.seo-panel { position: sticky; top: 104px; overflow: hidden; border: 1px solid #d8e4eb; border-radius: 24px; background: #fff; box-shadow: 0 18px 45px #12203a0c; }
.seo-panel__head { padding: 24px; background: linear-gradient(135deg, #0e2747, #116f79); color: #fff; }
.seo-panel__head small { display: block; color: #a4e9e4; font-weight: 800; letter-spacing: .1em; }
.seo-panel__head b { display: block; margin-top: 10px; font: 800 23px/1.2 "Manrope", sans-serif; letter-spacing: -.7px; }
.seo-panel__body { padding: 21px 24px 24px; }
.seo-panel__body p { margin: 0 0 18px; color: #5d6e85; font-size: 14px; line-height: 1.55; }
.seo-panel__body a { width: 100%; }
.seo-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 39px; }
.seo-pillar { min-height: 240px; border: 1px solid #dde8ed; border-radius: 21px; background: #fff; padding: 24px; box-shadow: 0 12px 30px #12203a08; }
.seo-pillar span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #e2f8f7; color: #058a8c; font-size: 11px; font-weight: 800; }
.seo-pillar h3 { margin: 22px 0 9px; font: 800 19px/1.25 "Manrope", sans-serif; letter-spacing: -.55px; }
.seo-pillar p { margin: 0; color: #63738a; font-size: 14px; line-height: 1.58; }
.seo-process { background: #eef4f5; }
.seo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }
.seo-step { position: relative; border-top: 3px solid #13aaa8; padding: 21px 3px 0; }
.seo-step span { color: #0c8f91; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.seo-step h3 { margin: 13px 0 8px; font: 800 20px "Manrope", sans-serif; letter-spacing: -.55px; }
.seo-step p { margin: 0; color: #60718a; font-size: 14px; line-height: 1.55; }
.seo-faq { max-width: 850px; }
.seo-faq details { border-bottom: 1px solid #dce6ec; padding: 18px 0; }
.seo-faq summary { cursor: pointer; color: #12203a; font: 800 17px "Manrope", sans-serif; list-style: none; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { float: right; color: #0e999b; content: "+"; font-size: 22px; line-height: .8; }
.seo-faq details[open] summary::after { content: "–"; }
.seo-faq p { max-width: 760px; margin: 12px 0 0; color: #5c6d84; font-size: 15px; line-height: 1.65; }
.seo-related { padding-top: 0; }
.seo-related__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 28px; }
.seo-related__cards a { min-height: 117px; border: 1px solid #dce7ec; border-radius: 17px; background: #fff; padding: 19px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.seo-related__cards a:hover { transform: translateY(-3px); box-shadow: 0 14px 31px #13263b13; }
.seo-related__cards small, .seo-related__cards b { display: block; }
.seo-related__cards small { color: #0d9092; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.seo-related__cards b { margin-top: 8px; color: #162541; font: 800 16px/1.25 "Manrope", sans-serif; }
.seo-final { background: #0b203c; color: #fff; }
.seo-final .wrap { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.seo-final h2 { max-width: 670px; margin: 0; font: 800 clamp(28px, 3.5vw, 43px)/1.12 "Manrope", sans-serif; letter-spacing: -1.4px; }
.seo-final .button { flex: none; background: #9bd337; color: #153119; box-shadow: none; }
.seo-final .button:hover { background: #b3e457; }
@media (max-width: 850px) { .seo-grid { grid-template-columns: 1fr; gap: 35px; }.seo-panel { position: static; }.seo-pillars, .seo-steps, .seo-related__cards { grid-template-columns: 1fr; }.seo-final .wrap { align-items: start; flex-direction: column; }.seo-final .button { width: 100%; }.seo-summary__grid { grid-template-columns: 1fr; }.seo-summary__grid div + div { border-top: 1px solid #e5edf2; border-left: 0; } }
@media (max-width: 540px) { .seo-hero { padding: 66px 0 61px; }.seo-hero .eyebrow { margin-top: 32px; }.seo-hero h1 { font-size: 39px; letter-spacing: -1.8px; }.seo-hero > .wrap > p:not(.eyebrow) { font-size: 16px; }.seo-hero-actions { display: grid; }.seo-hero-actions .button { width: 100%; }.seo-section { padding: 70px 0; }.seo-pillar { min-height: auto; }.seo-final { padding: 58px 0; } }