:root {
    --seo-ink: #17202a;
    --seo-muted: #53606d;
    --seo-line: #dbe2e8;
    --seo-blue: #1264e3;
    --seo-green: #15a46d;
    --seo-bg: #f5f8fb;
}

* { box-sizing: border-box; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.seo-header {
    min-height: 72px;
    padding: 12px max(20px, calc((100% - 1180px) / 2));
    display: flex;
    align-items: center;
    gap: 28px;
    border-bottom: 1px solid var(--seo-line);
    background: #fff;
}

.seo-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--seo-ink);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.seo-brand img { object-fit: contain; }
.seo-nav { display: flex; align-items: center; gap: 20px; flex: 1; }
.seo-nav a, .seo-footer a { color: var(--seo-ink); text-decoration: none; }
.seo-nav a:hover, .seo-footer a:hover { color: var(--seo-blue); }
.seo-tools { display: flex; align-items: center; gap: 12px; }
.seo-language select {
    max-width: 150px;
    min-height: 40px;
    border: 1px solid var(--seo-line);
    background: #fff;
    color: var(--seo-ink);
    padding: 0 10px;
}
.seo-login, .seo-primary, .seo-secondary {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid var(--seo-blue);
}
.seo-login, .seo-primary { color: #fff; background: var(--seo-blue); }
.seo-secondary { color: var(--seo-blue); background: #fff; }

.seo-main { color: var(--seo-ink); background: #fff; }
.seo-hero {
    padding: 84px 24px 72px;
    background: linear-gradient(120deg, #eef6ff 0%, #fff 58%, #edfff7 100%);
    border-bottom: 1px solid var(--seo-line);
}
.seo-hero-inner { max-width: 980px; margin: 0 auto; }
.seo-eyebrow {
    margin: 0 0 14px;
    color: var(--seo-green);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
}
.seo-hero h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: 0;
}
.seo-lead {
    max-width: 760px;
    margin: 24px 0 0;
    color: var(--seo-muted);
    font-size: 21px;
    line-height: 1.6;
}
.seo-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.seo-section { padding: 64px 24px; }
.seo-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--seo-line);
    border-bottom: 1px solid var(--seo-line);
}
.seo-item { padding: 34px; min-width: 0; }
.seo-item + .seo-item { border-left: 1px solid var(--seo-line); }
.seo-item h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: 0; }
.seo-item p { color: var(--seo-muted); line-height: 1.7; overflow-wrap: anywhere; }
.seo-item a, .seo-band a { color: var(--seo-blue); font-weight: 700; }
.seo-band {
    max-width: 1180px;
    margin: 0 auto 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 48px;
    background: var(--seo-bg);
    border: 1px solid var(--seo-line);
}
.seo-band h2 { margin-top: 0; font-size: 30px; letter-spacing: 0; }
.seo-band p { color: var(--seo-muted); line-height: 1.7; }
.seo-copy-section {
    padding: 72px 24px;
    border-top: 1px solid var(--seo-line);
}
.seo-copy-muted { background: var(--seo-bg); }
.seo-copy-intro, .seo-steps, .seo-use-grid, .seo-copy-two, .seo-faq {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.seo-copy-intro { max-width: 820px; margin-bottom: 38px; }
.seo-copy-intro h2, .seo-copy-two h2 {
    margin: 0 0 18px;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: 0;
}
.seo-copy-intro > p:last-child, .seo-copy-two p {
    color: var(--seo-muted);
    font-size: 18px;
    line-height: 1.75;
}
.seo-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding: 0;
    list-style: none;
    counter-reset: seo-step;
}
.seo-steps li { counter-increment: seo-step; padding-top: 22px; border-top: 3px solid var(--seo-blue); }
.seo-steps h3, .seo-use-grid h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: 0; }
.seo-steps h3::before { content: counter(seo-step) ". "; color: var(--seo-blue); }
.seo-steps p, .seo-use-grid p { margin: 0; color: var(--seo-muted); line-height: 1.7; }
.seo-use-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--seo-line);
    border: 1px solid var(--seo-line);
}
.seo-use-grid article { padding: 30px; background: #fff; }
.seo-copy-two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.seo-check-list { margin: 0; padding: 0; list-style: none; }
.seo-check-list li { position: relative; padding: 0 0 18px 32px; color: var(--seo-muted); line-height: 1.65; }
.seo-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--seo-green); font-weight: 800; }
.seo-faq details { border-top: 1px solid var(--seo-line); padding: 20px 0; }
.seo-faq details:last-child { border-bottom: 1px solid var(--seo-line); }
.seo-faq summary { cursor: pointer; font-size: 19px; font-weight: 700; }
.seo-faq p { max-width: 850px; color: var(--seo-muted); line-height: 1.75; }
.seo-footer { padding: 40px max(24px, calc((100% - 1180px) / 2)); background: #17202a; color: #fff; }
.seo-footer-main { display: flex; justify-content: space-between; gap: 32px; }
.seo-footer-main nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.seo-footer a { color: #fff; }
.seo-legal-note { padding-top: 18px; border-top: 1px solid #3a4652; color: #c8d0d8; }

@media (max-width: 980px) {
    .seo-header { flex-wrap: wrap; }
    .seo-nav { order: 3; width: 100%; overflow-x: auto; padding: 8px 0; }
    .seo-grid { grid-template-columns: 1fr; }
    .seo-item + .seo-item { border-left: 0; border-top: 1px solid var(--seo-line); }
    .seo-steps { grid-template-columns: 1fr; }
    .seo-copy-two { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
    .seo-header { gap: 14px; }
    .seo-brand span { display: none; }
    .seo-tools { margin-left: auto; }
    .seo-login { display: none; }
    .seo-hero { padding: 58px 20px; }
    .seo-hero h1 { font-size: 40px; }
    .seo-lead { font-size: 18px; }
    .seo-band { margin: 0 20px 48px; grid-template-columns: 1fr; padding: 28px; }
    .seo-copy-section { padding: 52px 20px; }
    .seo-copy-intro h2, .seo-copy-two h2 { font-size: 31px; }
    .seo-use-grid { grid-template-columns: 1fr; }
    .seo-footer-main { flex-direction: column; }
    .seo-footer-main nav { justify-content: flex-start; }
}