/* SAITORA SEO pages (hub / case / industry / article / index) — tools/seo/generate_pages.py.
   Builds on style.css + portfolio.css (same header, footer, contact block, colours and type). */
.portfolio-page.seo-page { background: #0b1730; }
.seo-page .site-header { z-index: 50; }

/* hero */
.portfolio-page .seo-hero.section-dark { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 85% 0%, #2a1a7a66, transparent 70%), radial-gradient(700px 380px at 0% 100%, #5d36ff22, transparent 70%), #0b1730; color: #fff; }
.seo-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 40px; padding-bottom: 72px; align-items: center; }
.seo-hero-media .seo-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.seo-hero-copy { max-width: 780px; min-width: 0; }
.seo-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 34px; padding: 0; font-size: 13px; color: #b4bdda; }
.seo-crumbs li + li::before { content: "/"; margin-right: 6px; color: #536078; }
.seo-crumbs a { color: #d9d7f0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #536078; }
.seo-crumbs a:hover { color: #fff; text-decoration-color: #b9a7ff; }
.seo-kicker { margin: 0 0 18px; color: #b9a7ff; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.seo-hero h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 24px; color: #fff; text-wrap: balance; }
.seo-lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: #c3cbe6; margin: 0; max-width: 680px; }
.seo-byline { margin: 22px 0 0; font-size: 14px; color: #b4bdda; }
.seo-byline strong { color: #fff; font-weight: 600; }
.seo-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.seo-chips li { border: 1px solid #3a5080; background: #101f3a; border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #d9d7f0; }
.seo-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.seo-page .seo-button-ghost { background: transparent; color: #fff; border: 1px solid #ffffff55; }
.seo-page .seo-button-ghost:hover, .seo-page .seo-button-ghost:focus-visible { border-color: #fff; background: #ffffff14; }
.seo-hero .seo-figure { margin: 0; }
.seo-hero .seo-figure img { border-radius: 12px; border: 1px solid #2c4270; box-shadow: 0 30px 70px #02071466; transform: rotate(-1.5deg); }

/* body layout */
.portfolio-page .seo-body.section-light { background: #fff; color: #0b1730; }
.seo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; padding-top: 72px; padding-bottom: 96px; align-items: start; }
.seo-narrow { max-width: 980px; padding-top: 64px; padding-bottom: 96px; }
.seo-article { min-width: 0; max-width: 780px; }
.seo-section { padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid #ebe9f5; }
.seo-section:last-child { border-bottom: 0; margin-bottom: 0; }
.seo-section h2 { font-size: clamp(27px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.035em; margin: 0 0 20px; color: #0b1730; text-wrap: balance; }
.seo-section h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.02em; margin: 28px 0 10px; color: #0b1730; }
.seo-section p, .seo-section li { font-size: 17px; line-height: 1.75; color: #34405c; }
.seo-section p { margin: 0 0 16px; }
.seo-section a:not(.button):not(.seo-related-card) { color: #4a2be0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.seo-section a:not(.button):not(.seo-related-card):hover { color: #0b1730; }
.seo-section strong { color: #0b1730; font-weight: 650; }
.seo-list { padding-left: 22px; margin: 4px 0 18px; }
.seo-list li { margin: 8px 0; padding-left: 4px; }
.seo-list li::marker { color: #5d36ff; }

/* cards */
.seo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0 22px; }
.seo-card { border: 1px solid #dfdcec; border-radius: 12px; padding: 22px 22px 8px; background: #faf9fe; }
.seo-card h3 { margin: 0 0 8px; font-size: 18px; }
.seo-card p { font-size: 15.5px; line-height: 1.65; }

/* steps (numbers come from CSS counters, not from the copy) */
.seo-steps { list-style: none; counter-reset: step; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.seo-steps li { counter-increment: step; position: relative; padding: 22px 22px 8px 78px; border: 1px solid #dfdcec; border-radius: 12px; background: #fff; }
.seo-steps li::before { content: counter(step); position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0b1730; color: #fff; font-weight: 650; font-size: 15px; box-shadow: 0 0 0 4px #ebe6ff; }
.seo-steps h3 { margin: 4px 0 6px; font-size: 19px; }
.seo-steps p { font-size: 16px; }
.seo-step-result { color: #0b1730 !important; }
.seo-step-result span { font-weight: 650; color: #5d36ff; }

/* figures */
.seo-figure { margin: 26px 0 28px; }
.seo-figure picture, .seo-figure img { display: block; width: 100%; height: auto; }
.seo-figure img { border-radius: 10px; border: 1px solid #dfdcec; background: #0b1730; }
.seo-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.55; color: #536078; }
.seo-figures { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; align-items: end; margin: 26px 0; }
.seo-figures .seo-figure { margin: 0; }
.seo-figure-phone img { border-radius: 22px; border: 6px solid #0b1730; }
.seo-figures-phones { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; }
.seo-figures-phones .seo-figure figcaption { font-size: 13px; }

/* facts list */
.seo-factlist { display: grid; gap: 0; margin: 20px 0 24px; border: 1px solid #dfdcec; border-radius: 12px; overflow: hidden; }
.seo-factlist > div { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; padding: 14px 20px; border-top: 1px solid #ebe9f5; }
.seo-factlist > div:first-child { border-top: 0; }
.seo-factlist > div:nth-child(odd) { background: #faf9fe; }
.seo-factlist dt { font-size: 14px; color: #536078; font-weight: 600; }
.seo-factlist dd { margin: 0; font-size: 16px; color: #0b1730; line-height: 1.6; }
.seo-factlist a { color: #4a2be0; }

/* table */
.seo-table-wrap { overflow-x: auto; margin: 20px 0 22px; border: 1px solid #dfdcec; border-radius: 12px; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.seo-table caption { text-align: left; padding: 14px 18px 0; font-size: 13px; color: #536078; }
.seo-table th, .seo-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-top: 1px solid #ebe9f5; line-height: 1.55; color: #34405c; }
.seo-table thead th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #536078; font-weight: 650; }
.seo-table tbody th { color: #0b1730; font-weight: 650; }

/* research charts (P20): HTML bars, no scripts */
.seo-chart { margin: 20px 0 24px; padding: 18px 20px 10px; border: 1px solid #dfdcec; border-radius: 12px; background: #faf9fe; }
.seo-chart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.seo-chart-list li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 56px; align-items: center; gap: 12px; font-size: 14.5px; color: #34405c; }
.seo-chart-label { line-height: 1.3; }
.seo-chart-track { height: 14px; border-radius: 7px; background: #ebe9f5; overflow: hidden; }
.seo-chart-bar { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #5d36ff, #8c6bff); }
.seo-chart-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: #0b1730; }
.seo-chart figcaption { margin-top: 12px; font-size: 13px; color: #536078; }
.seo-table-data td, .seo-table-data tbody th { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .seo-chart-list li { grid-template-columns: 1fr 52px; } .seo-chart-track { grid-column: 1 / -1; order: 3; } }

/* callout + CTA */
.seo-callout { border-left: 3px solid #5d36ff; background: #f4f1ff; border-radius: 0 10px 10px 0; padding: 16px 20px 2px; margin: 20px 0; }
.seo-callout-title { font-weight: 650; color: #0b1730 !important; margin-bottom: 6px !important; }
.seo-callout p { font-size: 15.5px; }
.seo-cta { margin: 30px 0 0; padding: 28px; border-radius: 14px; background: linear-gradient(135deg, #0b1730, #1b1460); color: #fff; }
.seo-cta p { color: #c3cbe6 !important; }
.seo-cta .seo-cta-title { font-size: 22px; font-weight: 650; color: #fff !important; letter-spacing: -.02em; margin-bottom: 8px !important; }
.seo-cta .button { margin-top: 6px; }

/* FAQ (always visible: FAQPage only for visible answers) */
.seo-faq-item { padding: 18px 0; border-top: 1px solid #ebe9f5; }
.seo-faq-item:first-of-type { border-top: 0; padding-top: 0; }
.seo-faq-item h3 { margin: 0 0 8px; }
.seo-faq-item p { margin: 0; }

/* related */
.seo-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.seo-related-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid #dfdcec; border-radius: 12px; background: #fff; color: #0b1730; transition: border-color .2s, transform .2s, box-shadow .2s; }
.seo-related-card:hover, .seo-related-card:focus-visible { border-color: #b9a7ff; transform: translateY(-2px); box-shadow: 0 14px 34px #0b17301a; }
.seo-related-kind { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #5d36ff; font-weight: 650; }
.seo-related-card strong { font-size: 18px; line-height: 1.35; letter-spacing: -.015em; }
.seo-related-card span:last-child { font-size: 15px; line-height: 1.6; color: #536078; }

/* aside */
.seo-aside { position: sticky; top: 112px; display: grid; gap: 20px; }
.seo-toc { border: 1px solid #dfdcec; border-radius: 12px; padding: 20px 22px; }
.seo-toc-title, .seo-aside-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: #536078; }
.seo-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.seo-toc a { display: block; padding: 6px 0; font-size: 14.5px; line-height: 1.4; color: #34405c; }
.seo-toc a:hover { color: #4a2be0; }
.seo-aside-card { border-radius: 12px; padding: 22px; background: #0b1730; color: #fff; }
.seo-aside-card .seo-aside-title { color: #b9a7ff; }
.seo-aside-card p { font-size: 15px; line-height: 1.6; color: #c3cbe6; margin: 0 0 16px; }
.seo-aside-card .button { width: 100%; justify-content: space-between; }

/* contact (reuses .contact-section from portfolio.css) */
.seo-contact .contact-grid { align-items: start; }
.seo-contact .contact-details { margin-top: 26px; }
.seo-contact .inquiry-card { scroll-margin-top: 100px; }

/* footer */
.seo-footer { padding: 56px 0 30px !important; }
.seo-foot-grid { display: grid; grid-template-columns: 240px repeat(auto-fit, minmax(150px, 1fr)); gap: 36px; padding-bottom: 32px; border-bottom: 1px solid #26395f; }
.seo-foot-brand p { margin: 14px 0 0; font-size: 13px; max-width: 220px; }
.seo-foot-title { margin: 0 0 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8f9bc0 !important; font-weight: 650; }
.seo-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.seo-foot-col a { font-size: 14px; color: #d9d7f0; }
.seo-foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.seo-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 22px; font-size: 12px; color: #c8cbe0; }
.seo-foot-bottom a { color: #c8cbe0; }
.seo-foot-bottom .saitora-motion-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid #26395f; border-radius: 999px; background: transparent; color: #c8cbe0; font: 500 12px/1 var(--body); cursor: pointer; }
.seo-foot-bottom .saitora-motion-toggle:hover { border-color: #a78bfa; color: #fff; }
.seo-foot-bottom .saitora-motion-toggle .dot { width: 7px; height: 7px; border-radius: 50%; background: #7ee8ff; box-shadow: 0 0 8px #7ee8ff; }
.seo-foot-bottom .saitora-motion-toggle[aria-pressed="true"] .dot { background: #536078; box-shadow: none; }
html:not(.js) .saitora-motion-toggle { display: none; }

/* responsive */
@media (max-width: 1080px) {
  .seo-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .seo-aside { display: none; }
  .seo-toc { display: none; }
  .seo-aside-card { display: none; }
}
@media (max-width: 980px) {
  .seo-hero-media .seo-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .seo-hero .seo-figure img { transform: none; }
  .seo-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .seo-hero-inner { padding-top: 24px; padding-bottom: 52px; gap: 32px; }
  .seo-crumbs ol { margin-bottom: 24px; }
  .seo-layout, .seo-narrow { padding-top: 48px; padding-bottom: 64px; }
  .seo-cards, .seo-related-grid { grid-template-columns: minmax(0, 1fr); }
  .seo-steps li { padding: 18px 18px 6px 64px; }
  .seo-steps li::before { left: 16px; top: 18px; width: 34px; height: 34px; }
  .seo-factlist > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .seo-figures { grid-template-columns: minmax(0, 1fr); }
  .seo-figures-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .seo-figure-phone { max-width: 240px; }
  .seo-hero-actions .button { width: 100%; justify-content: space-between; }
  .seo-foot-grid { grid-template-columns: minmax(0, 1fr); }
  .seo-foot-bottom .saitora-motion-toggle { margin-left: 0; }
  .seo-section p, .seo-section li { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .seo-related-card { transition: none; } }

/* offer card — the single owner-approved price (facts.json "price": true) */
.seo-hero-offer { min-width: 0; display: flex; justify-content: flex-end; }
.seo-offer { position: relative; width: 100%; max-width: 440px; padding: 30px 30px 24px; border-radius: 16px; background: linear-gradient(160deg, #16264a 0%, #101d3a 55%, #0d1832 100%); border: 1px solid #4b3fb8; box-shadow: 0 0 0 1px #6a4bff33, 0 24px 70px #02071488, 0 0 60px -10px #6a4bff88; color: #fff; isolation: isolate; }
.seo-offer::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, #7ee8ff, #6a4bff 45%, #c58bff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; opacity: .9; }
.seo-offer-badge { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: #6a4bff26; border: 1px solid #6a4bff88; color: #d9d0ff; font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.seo-offer-title { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: #fff; }
.seo-offer-price { margin: 6px 0 8px; color: #c3cbe6; font-size: 18px; }
.seo-offer-price strong { font-size: clamp(46px, 5vw, 60px); line-height: 1; letter-spacing: -.04em; color: #fff; font-weight: 700; text-shadow: 0 0 28px #7ee8ff55; }
.seo-offer-sub { margin: 0 0 18px; color: #c3cbe6; font-size: 15px; line-height: 1.6; }
.seo-offer-label { margin: 16px 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8f9bc0; font-weight: 650; }
.seo-offer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.seo-offer li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: #e6e9f5; }
.seo-offer-yes li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid #7ee8ff; border-bottom: 2px solid #7ee8ff; transform: rotate(-45deg); }
.seo-offer-no li { color: #b4bdda; }
.seo-offer-no li::before { content: "–"; position: absolute; left: 4px; top: 0; color: #8f9bc0; }
.seo-offer .seo-offer-cta { width: 100%; justify-content: space-between; margin-top: 22px; }
.seo-offer-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #8f9bc0; }
@media (max-width: 980px) { .seo-hero-offer { justify-content: flex-start; } }
@media (max-width: 640px) { .seo-offer { padding: 24px 20px 20px; } }