:root{
  --sp-primary:#0B5BD3;
  --sp-accent:#1DBF73;
  --sp-text:#1A2433;
  --sp-muted:#6B7280;
  --sp-bg:#FAFBFC;
  --sp-card:#FFFFFF;
  --sp-border:#E5E7EB;
  --sp-focus: rgba(11,91,211,0.3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.spx-body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; color:var(--sp-text); background:var(--sp-bg); line-height:1.6}
a{color:var(--sp-primary); text-decoration:none}
a:hover{text-decoration:underline}
.spx-container{width:min(1140px,92vw); margin:0 auto}
/* Header */
.spx-header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--sp-border)}
.spx-header-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.spx-brand{font-weight:800; letter-spacing:.2px; font-size:1.2rem; color:var(--sp-text)}
.spx-burger{display:none; width:40px; height:36px; border:1px solid var(--sp-border); border-radius:10px; background:#fff; align-items:center; justify-content:center; gap:4px; cursor:pointer}
.spx-burger span{display:block; width:20px; height:2px; background:var(--sp-text)}
.spx-nav{display:flex; align-items:center; gap:16px}
.spx-menu{display:flex; gap:14px; list-style:none; margin:0; padding:0}
.spx-menu a{padding:8px 12px; border-radius:10px}
.spx-menu a:hover{background:#F3F6FB; text-decoration:none}
.spx-btn{display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; border-radius:10px; border:1px solid var(--sp-primary); background:var(--sp-primary); color:#fff; font-weight:600}
.spx-btn-ghost{background:#fff; color:var(--sp-primary); border-color:var(--sp-primary)}
.spx-hide-mobile{}
/* Layout */
.spx-main{padding:0 0 48px}
.spx-section{padding:56px 0; border-bottom:1px solid var(--sp-border)}
.spx-alt{background:#fff}
.spx-hero-light{background:linear-gradient(180deg,#FFFFFF 0%, #FAFBFC 100%)}
.spx-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.spx-stack{display:flex; flex-direction:column; gap:12px}
.spx-kicker{font-size:.9rem; color:var(--sp-muted); text-transform:uppercase; letter-spacing:.12em}
.spx-display{font-size:clamp(28px,4vw,48px); line-height:1.1; margin:0}
.spx-lead{font-size:1.1rem; color:#374151; margin:0}
.spx-bullets{margin:0; padding-left:18px}
/* Typography */
.spx-h1{font-size:clamp(26px,3.5vw,36px); margin:.2rem 0}
.spx-h2{font-size:clamp(22px,3vw,30px); margin:.2rem 0 8px}
.spx-h3{font-size:20px; margin:.2rem 0 6px}
.spx-h4{font-size:18px; margin:.2rem 0 6px}
.spx-text{color:#334155}
.spx-small{font-size:.9rem}
.spx-muted{color:#6B7280}
/* Cards & grids */
.spx-grid{display:grid; gap:16px}
.spx-grid-3{grid-template-columns: repeat(auto-fill,minmax(260px,1fr));}
.spx-cards .spx-card{min-height:180px}
.spx-card{background:#fff; border:1px solid var(--sp-border); border-radius:14px; padding:18px; box-shadow:0 4px 14px rgba(10,20,30,.04)}
.spx-columns{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
/* Lists */
.spx-list{padding-left:18px}
.spx-list-dashed{list-style:none; padding-left:0}
.spx-list-dashed li{position:relative; padding-left:18px; margin-bottom:8px}
.spx-list-dashed li::before{content:"—"; position:absolute; left:0; color:var(--sp-muted)}
.spx-steps{counter-reset:step; list-style:none; padding-left:0}
.spx-steps li{counter-increment:step; margin-bottom:10px; padding-left:30px; position:relative}
.spx-steps li::before{content:counter(step) "."; position:absolute; left:0; top:0; color:var(--sp-primary); font-weight:700}
/* FAQ */
.spx-faq{border:1px solid var(--sp-border); border-radius:10px; padding:12px; background:#fff; margin:10px 0}
.spx-faq summary{cursor:pointer; font-weight:600}
.spx-faq-body{color:#374151; padding-top:6px}
/* Table */
.spx-table-wrap{overflow:auto; border:1px solid var(--sp-border); border-radius:12px; background:#fff}
.spx-table{width:100%; border-collapse:collapse; font-size:.98rem}
.spx-table th,.spx-table td{padding:12px 14px; border-bottom:1px solid var(--sp-border); text-align:left; white-space:nowrap}
.spx-table thead th{position:sticky; top:0; background:#F7FAFF; z-index:1}
.spx-table tbody tr:hover{background:#FAFCFF}
/* Footer */
.spx-footer{padding:24px 0; background:#fff; border-top:1px solid var(--sp-border); color:#4B5563}
.spx-footnote{font-size:.95rem; padding:12px 14px; border:1px dashed var(--sp-border); border-radius:12px; background:#F7FAFF; margin-bottom:16px}
.spx-footer-grid{display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:center}
.spx-footer-menu{justify-self:end}
/* Focus */
:focus{outline:3px solid var(--sp-focus); outline-offset:2px}
/* Mobile */
@media (max-width: 960px){
  .spx-hero-grid{grid-template-columns:1fr}
  .spx-hide-mobile{display:none}
  .spx-burger{display:inline-flex}
  .spx-nav{position:fixed; inset:56px 0 auto 0; background:#fff; border-bottom:1px solid var(--sp-border); padding:10px 16px; display:none; flex-direction:column; gap:8px}
  .spx-nav.is-open{display:flex}
  .spx-menu{flex-direction:column; gap:6px}
  .spx-menu a{padding:10px 12px}
}