body { background: var(--gray-50); }
    .spinner { border-radius: 50%; animation: spin 0.75s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
    @keyframes successPop { from { transform:scale(0.4); opacity:0; } to { transform:scale(1); opacity:1; } }

    /* ── HERO ── */
    .sp-hero {
      background: linear-gradient(160deg, #070f1e 0%, #0d2148 50%, #091830 100%);
      min-height: calc(100vh - 280px); padding: clamp(2rem, 4.5vh, 3.5rem) 2rem;
      text-align: center; position: relative; overflow: hidden;
      display: flex; align-items: center;
    }
    .sp-hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 70% 90% at 12% 60%, rgba(209,124,43,0.16) 0%, transparent 55%),
        radial-gradient(ellipse 55% 70% at 88% 25%, rgba(26,68,148,0.28) 0%, transparent 55%);
    }
    .sp-hero::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
      background-size: 54px 54px;
    }
    .sp-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; animation: fadeUp 0.5s ease both; }
    .sp-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(209,124,43,0.14); border: 1px solid rgba(209,124,43,0.32);
      color: #f0a84a; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 20px;
    }
    .sp-badge-dot { width: 6px; height: 6px; background: #f0a84a; border-radius: 50%; }
    .sp-hero h1 {
      max-width: 1040px; margin: 0 auto 0.9rem; font-family: var(--font-display);
      font-size: clamp(2.6rem, 4.7vw, 4rem); font-weight: 900; color: #fff;
      line-height: 1.05; letter-spacing: -0.035em; text-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }
    .sp-hero h1 em { font-style: normal; color: #f0a84a; }
    .sp-hero-desc {
      max-width: 800px; margin: 0 auto 1.5rem; color: var(--gray-200);
      font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6;
    }
    .sp-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2rem; }
    .sp-hero-primary,
    .sp-hero-secondary {
      display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
      border-radius: var(--radius-full); font-family: var(--font-display); text-decoration: none;
      transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
    }
    .sp-hero-primary {
      padding: 0 1.6rem; background: var(--white); color: var(--blue-900);
      box-shadow: 0 16px 40px rgba(0,0,0,0.22); font-size: 1rem; font-weight: 800;
    }
    .sp-hero-primary:hover { transform: translateY(-2px); background: var(--orange-500); color: var(--white); box-shadow: 0 20px 48px rgba(0,0,0,0.28); }
    .sp-hero-secondary {
      padding: 0 1.25rem; border: 1px solid rgba(255,255,255,0.22);
      color: var(--white); font-size: 0.95rem; font-weight: 700;
    }
    .sp-hero-secondary:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); }
    .sp-stats-pill {
      display: inline-flex; gap: 0;
      background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px; padding: 21px 0; backdrop-filter: blur(14px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    }
    .sp-stat { min-width: 132px; text-align: center; padding: 0 34px; }
    .sp-stat + .sp-stat { border-left: 1px solid rgba(255,255,255,0.1); }
    .sp-stat-n { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; }
    .sp-stat-l { display: block; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.52); margin-top: 7px; text-transform: uppercase; letter-spacing: 0.09em; }

    /* ── 3 PASSOS ── */
    .sp-process { padding: 76px 24px 80px; background: var(--white); }
    .sp-section-head { max-width: 720px; margin: 0 auto 42px; text-align: center; }
    .sp-section-label {
      display: inline-flex; padding: 6px 13px; margin-bottom: 15px; border: 1px solid var(--orange-100);
      border-radius: var(--radius-full); background: var(--orange-50); color: var(--orange-700);
      font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    }
    .sp-section-head h2 {
      margin: 0 0 12px; color: var(--blue-900); font-family: var(--font-display);
      font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.03em;
    }
    .sp-section-head h2 span { color: var(--orange-500); }
    .sp-section-head p { margin: 0; color: var(--gray-500); font-size: 0.98rem; line-height: 1.65; }
    .sp-process-grid {
      max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    }
    .sp-process-card {
      position: relative; min-height: 290px; padding: 26px; border: 1px solid var(--gray-100);
      border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow-md);
    }
    .sp-process-card:not(:last-child)::after {
      content: '→'; position: absolute; z-index: 2; top: 50%; right: -17px; width: 32px; height: 32px;
      display: grid; place-items: center; border: 1px solid var(--orange-100); border-radius: 50%;
      background: var(--white); color: var(--orange-500); font-size: 1.1rem; font-weight: 700;
    }
    .sp-process-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
    .sp-process-icon {
      width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-md);
      background: var(--orange-50); color: var(--orange-600);
    }
    .sp-process-icon svg { width: 22px; height: 22px; }
    .sp-process-number { color: var(--gray-200); font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; }
    .sp-process-card h3 { margin: 0 0 10px; color: var(--blue-900); font-size: 1.06rem; }
    .sp-process-card > p { margin: 0 0 18px; color: var(--gray-500); font-size: 0.85rem; line-height: 1.65; }
    .sp-process-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
    .sp-process-list li { display: flex; gap: 8px; color: var(--gray-600); font-size: 0.78rem; line-height: 1.45; }
    .sp-process-list li::before { content: '•'; color: var(--orange-500); font-weight: 900; }
    .sp-process-cta { margin-top: 32px; text-align: center; }
    .sp-process-cta a {
      display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 12px 22px;
      border-radius: var(--radius-md); background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
      color: var(--white); box-shadow: var(--shadow-sm); font-family: var(--font-display);
      font-size: 0.9rem; font-weight: 800; text-decoration: none; cursor: pointer;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    }
    .sp-process-cta a:hover {
      transform: translateY(-2px); background: linear-gradient(135deg, var(--orange-600), var(--orange-900));
      box-shadow: 0 12px 26px rgba(139,78,24,0.28);
    }
    .sp-process-cta a:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-xs); }
    .sp-process-cta a:focus-visible { outline: 3px solid var(--orange-100); outline-offset: 4px; }
    .sp-process-cta a span { transition: transform var(--transition-fast); }
    .sp-process-cta a:hover span { transform: translateX(4px); }

    /* ── COMO FUNCIONA ── */
    .sp-explainer {
      position: relative; overflow: hidden; padding: 76px 24px; border-bottom: 1px solid var(--blue-700);
      background:
        radial-gradient(circle at 72% 42%, rgba(209,124,43,0.13), transparent 28rem),
        linear-gradient(120deg, #071a38 0%, #0b2248 55%, #101638 100%);
    }
    .sp-explainer::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    }
    .sp-explainer-inner {
      position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; display: grid;
      grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
      gap: clamp(48px, 7vw, 80px); align-items: center;
    }
    .sp-flow-stage {
      position: relative;
    }
    .sp-flow-card {
      position: relative; background: #fff; border: 1px solid #e8ebf0; border-radius: 18px;
      padding: 22px; box-shadow: var(--shadow-lg);
    }
    .sp-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
    .sp-flow-brand { display: flex; align-items: center; gap: 10px; }
    .sp-flow-logo {
      width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
      background: #0f1a38; color: #fff;
    }
    .sp-flow-logo svg { width: 19px; height: 19px; }
    .sp-flow-brand strong { display: block; color: #0f1a38; font-size: 0.82rem; }
    .sp-flow-brand small { display: block; color: #9ca3af; font-size: 0.67rem; margin-top: 2px; }
    .sp-flow-live {
      display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 100px;
      background: var(--orange-50); color: var(--orange-700); font-size: 0.65rem; font-weight: 700;
    }
    .sp-flow-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); }
    .sp-flow-list { list-style: none; margin: 0; padding: 0; }
    .sp-flow-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; position: relative; padding: 11px 0; border-top: 1px solid var(--gray-100); }
    .sp-flow-n {
      position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center;
      border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #c2711f;
      font-family: var(--font-display); font-size: 0.72rem; font-weight: 800;
    }
    .sp-flow-step:last-child .sp-flow-n { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }
    .sp-flow-copy { padding-top: 2px; }
    .sp-flow-copy strong { display: block; color: #172033; font-size: 0.82rem; margin-bottom: 3px; }
    .sp-flow-copy span { display: block; color: #7b8493; font-size: 0.72rem; line-height: 1.45; }
    .sp-preview-lead {
      margin-top: 14px; padding: 12px 13px; border: 1px solid var(--orange-100); border-radius: var(--radius-md);
      background: var(--orange-50);
    }
    .sp-preview-lead strong { display: flex; align-items: center; gap: 7px; color: var(--orange-700); font-size: 0.72rem; }
    .sp-preview-lead strong::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-500); }
    .sp-preview-lead span { display: block; margin-top: 4px; color: var(--blue-900); font-size: 0.76rem; font-weight: 600; }
    .sp-explainer-tag {
      display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; margin-bottom: 15px;
      border: 1px solid rgba(229,158,61,0.28); border-radius: var(--radius-full);
      background: rgba(209,124,43,0.14); color: var(--orange-300); font-size: 0.7rem; font-weight: 800;
    }
    .sp-explainer-tag svg { width: 13px; height: 13px; }
    .sp-explainer-copy h2 {
      max-width: 540px; margin: 0 0 15px; color: var(--white); font-family: var(--font-display);
      font-size: clamp(1.75rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.025em;
    }
    .sp-explainer-lead { max-width: 540px; margin: 0 0 20px; color: var(--blue-100); font-size: 0.9rem; line-height: 1.65; }
    .sp-explainer-points { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
    .sp-explainer-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--blue-50); font-size: 0.84rem; line-height: 1.5; }
    .sp-explainer-check {
      flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center;
      margin-top: 1px; border-radius: 50%; background: var(--orange-500); color: var(--white);
    }
    .sp-explainer-check svg { width: 10px; height: 10px; }

    /* ── LAYOUT ── */
    .sp-page {
      max-width: 1180px; margin: 0 auto; padding: 48px 20px 80px;
      display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start;
    }

    /* ── SIDEBAR ── */
    .sp-sidebar {
      background: var(--white); border-radius: var(--radius-xl); overflow: hidden;
      border: 1px solid var(--gray-100); box-shadow: var(--shadow-md);
      position: sticky; top: 92px; animation: fadeUp 0.5s 0.06s ease both;
    }
    .sp-sb-head {
      padding: 24px 24px 20px; border-bottom: 1px solid var(--gray-100);
      background: radial-gradient(circle at top right, rgba(209,124,43,0.11), transparent 42%), var(--white);
    }
    .sp-sb-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--blue-900); margin: 0 0 4px; }
    .sp-sb-sub { font-size: 0.78rem; color: var(--gray-500); margin: 0; }
    .sp-sb-body { padding: 20px 22px 22px; }
    .sp-perk { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
    .sp-perk:last-of-type { border-bottom: none; padding-bottom: 0; }
    .sp-perk-ico {
      flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-full);
      background: var(--orange-50); display: flex; align-items: center; justify-content: center; color: var(--orange-700);
    }
    .sp-perk-title { font-size: 0.84rem; font-weight: 800; color: var(--blue-900); margin: 0 0 3px; }
    .sp-perk-desc { font-size: 0.75rem; color: var(--gray-500); line-height: 1.5; margin: 0; }
    .sp-sb-sep { border: none; border-top: 1px solid #f3f4f6; margin: 12px 0; }
    .sp-sb-free {
      display: flex; align-items: center; gap: 8px;
      background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; padding: 9px 12px;
    }
    .sp-sb-free svg { color: #16a34a; flex-shrink: 0; }
    .sp-sb-free span { font-size: 0.73rem; color: #166534; font-weight: 600; line-height: 1.4; }

    /* ── CARD ── */
    .sp-card {
      background: var(--white); border-radius: var(--radius-xl); overflow: hidden;
      border: 1px solid var(--gray-100); box-shadow: var(--shadow-md);
      scroll-margin-top: 92px; animation: fadeUp 0.5s 0.1s ease both;
    }

    /* Step bar */
    .sp-stepbar { display: flex; border-bottom: 1px solid var(--gray-100); }
    .sp-steptab {
      flex: 1; display: flex; align-items: center; gap: 9px;
      padding: 18px 28px; background: var(--gray-50); border-right: 1px solid var(--gray-100);
      transition: background 0.18s;
    }
    .sp-steptab:last-child { border-right: none; }
    .sp-steptab.active { background: var(--white); box-shadow: inset 0 -3px 0 var(--orange-500); }
    .sp-bubble {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      font-size: 0.67rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
      background: var(--gray-100); color: var(--gray-400); transition: background 0.18s, color 0.18s;
    }
    .sp-steptab.active .sp-bubble { background: var(--orange-500); color: var(--white); }
    .sp-steptab.done .sp-bubble { background: #16a34a; color: #fff; }
    .sp-steplbl { font-size: 0.82rem; font-weight: 700; color: var(--gray-400); transition: color 0.18s; }
    .sp-steptab.active .sp-steplbl { color: var(--blue-900); }
    .sp-steptab.done .sp-steplbl { color: #16a34a; }

    /* Card inner */
    .sp-card-hd { padding: 30px 36px 0; }
    .sp-card-hd-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--blue-900); margin: 0 0 7px; }
    .sp-card-hd-sub { font-size: 0.9rem; color: var(--gray-500); margin: 0; }
    .sp-card-bd { padding: 26px 36px 38px; }

    /* Loading */
    .sp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 44px 0; }
    .sp-loading p { color: #9ca3af; font-size: 0.8rem; margin: 0; }

    /* Section label */
    .sp-sect {
      display: flex; align-items: center; gap: 9px;
      font-size: 0.82rem; font-weight: 800; letter-spacing: 0;
      color: var(--blue-900); margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-100);
    }
    .sp-sect-n {
      width: 24px; height: 24px; border-radius: 50%; background: var(--orange-500); color: var(--white);
      font-size: 0.7rem; font-weight: 800; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }

    /* Grid */
    .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .sp-grid .full { grid-column: 1 / -1; }

    /* Inputs */
    .fg { margin: 0; }
    .fg label { display: block; font-size: 0.9rem; font-weight: 800; color: var(--blue-900); margin-bottom: 8px; }
    .fg label .req { color: var(--orange-600); margin-left: 2px; }
    .finput {
      width: 100%; min-height: 48px; padding: 12px 15px;
      border: 1px solid var(--gray-200); border-radius: var(--radius-md);
      font-size: 0.98rem; font-family: var(--font-body); color: var(--gray-800);
      transition: border-color 0.14s, box-shadow 0.14s; background: #fff;
      box-sizing: border-box; -webkit-appearance: none; appearance: none;
    }
    select.finput {
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer;
    }
    .finput:focus, select.finput:focus { outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 4px var(--orange-50); }
    .finput[readonly] { background: #f9fafb; color: #6b7280; cursor: not-allowed; border-color: #f3f4f6; }
    .finput::placeholder { color: #d1d5db; }
    textarea.finput { resize: vertical; min-height: 108px; line-height: 1.6; }
    .fhint { font-size: 0.76rem; color: var(--gray-400); margin-top: 6px; }
    .sp-hr { border: none; border-top: 1px solid #f3f4f6; margin: 20px 0; }

    /* Notices */
    .sp-notice {
      display: none; align-items: flex-start; gap: 9px;
      border-radius: 9px; padding: 10px 13px; margin-bottom: 18px;
    }
    .sp-notice.green { background: #f0fdf4; border: 1px solid #bbf7d0; }
    .sp-notice.green svg { color: #16a34a; }
    .sp-notice.green span { font-size: 0.79rem; color: #166534; line-height: 1.5; }
    .sp-notice.red { background: #fef2f2; border: 1px solid #fecaca; margin-bottom: 0; margin-top: 14px; }
    .sp-notice.red svg { color: #dc2626; }
    .sp-notice.red span { font-size: 0.79rem; color: #991b1b; line-height: 1.5; }

    /* ── FILE UPLOAD ZONE ── */
    .sp-upload-zone {
      border: 1.5px dashed var(--gray-300); border-radius: var(--radius-lg);
      padding: 30px 20px; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 10px;
      cursor: pointer; transition: border-color 0.15s, background 0.15s;
      text-align: center;
    }
    .sp-upload-zone:hover, .sp-upload-zone.drag-over {
      border-color: #c97220; background: rgba(201,114,32,0.04);
    }
    .sp-upload-zone.drag-over { border-style: solid; }
    .sp-upload-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: rgba(201,114,32,0.08); display: flex; align-items: center;
      justify-content: center; color: #c97220; pointer-events: none;
    }
    .sp-upload-title { font-size: 0.84rem; font-weight: 600; color: #374151; pointer-events: none; }
    .sp-upload-title strong { color: #c97220; }
    .sp-upload-hint { font-size: 0.72rem; color: #9ca3af; pointer-events: none; }

    /* File preview */
    .sp-file-preview {
      display: none; align-items: center; gap: 12px;
      background: #f9fafb; border: 1.5px solid #e5e7eb;
      border-radius: 11px; padding: 12px 14px;
    }
    .sp-file-icon {
      width: 36px; height: 36px; border-radius: 8px;
      background: rgba(201,114,32,0.1); display: flex; align-items: center;
      justify-content: center; color: #c97220; flex-shrink: 0;
    }
    .sp-file-info { flex: 1; min-width: 0; }
    .sp-file-name { font-size: 0.82rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sp-file-size { font-size: 0.72rem; color: #9ca3af; margin-top: 1px; }
    .sp-file-remove {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
      border: 1.5px solid #e5e7eb; background: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center; color: #9ca3af;
      transition: border-color 0.13s, color 0.13s;
    }
    .sp-file-remove:hover { border-color: #dc2626; color: #dc2626; }

    /* Upload progress */
    .sp-upload-progress {
      display: none; align-items: center; gap: 10px;
      background: #fffbeb; border: 1px solid #fde68a;
      border-radius: 9px; padding: 10px 13px;
    }
    .sp-upload-progress .spinner { width: 16px; height: 16px; border: 2px solid #fde68a; border-top-color: #d97706; flex-shrink: 0; }
    .sp-upload-progress span { font-size: 0.79rem; color: #92400e; }

    /* Buttons */
    .sp-btn-primary {
      flex: 1; min-height: 48px; padding: 12px 22px; border: none; border-radius: var(--radius-md);
      background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
      color: var(--white); font-family: var(--font-display); font-size: 0.9rem; font-weight: 800;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
      transition: transform 0.13s, box-shadow 0.13s, opacity 0.13s;
      box-shadow: var(--shadow-sm); letter-spacing: 0.01em;
    }
    .sp-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .sp-btn-primary:active { transform: translateY(0); }
    .sp-btn-primary:disabled { opacity: 0.62; cursor: not-allowed; transform: none; box-shadow: none; }
    .sp-btn-back {
      padding: 12px 16px; border: 1.5px solid #e5e7eb; border-radius: 9px;
      background: #fff; font-size: 0.83rem; font-weight: 600; color: #6b7280;
      cursor: pointer; display: flex; align-items: center; gap: 6px;
      transition: border-color 0.13s, color 0.13s;
    }
    .sp-btn-back:hover { border-color: #9ca3af; color: #374151; }
    .sp-btn-row { display: flex; gap: 10px; align-items: stretch; margin-top: 22px; }
    .sp-link-c { text-align: center; margin-top: 13px; font-size: 0.77rem; color: #9ca3af; }
    .sp-link-c a { color: #c97220; font-weight: 600; text-decoration: none; }
    .sp-link-c a:hover { text-decoration: underline; }

    /* States */
    .sp-state { text-align: center; padding: 38px 20px; }
    .sp-state-icon {
      width: 54px; height: 54px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
    }
    .sp-state-icon.green { background: rgba(22,163,74,0.1); color: #16a34a; }
    .sp-state-icon.anim { animation: successPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
    .sp-state-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: #111827; margin: 0 0 8px; }
    .sp-state-desc { color: #6b7280; font-size: 0.85rem; line-height: 1.65; margin: 0 0 22px; max-width: 360px; margin-left: auto; margin-right: auto; }

    /* Responsive */
    @media (max-width: 900px) {
      .sp-process-grid { max-width: 620px; grid-template-columns: 1fr; }
      .sp-process-card { min-height: 0; }
      .sp-process-card:not(:last-child)::after { content: '↓'; top: auto; right: calc(50% - 16px); bottom: -17px; }
    }
    @media (max-width: 760px) {
      .sp-process { padding: 58px 18px 62px; }
      .sp-section-head { margin-bottom: 30px; }
      .sp-explainer { padding: 42px 18px; }
      .sp-explainer-inner { grid-template-columns: 1fr; gap: 30px; }
      .sp-flow-stage { width: min(100%, 480px); margin: 0 auto; }
      .sp-explainer-copy { text-align: center; }
      .sp-explainer-lead { margin-left: auto; margin-right: auto; }
      .sp-explainer-points { width: min(100%, 520px); margin: 0 auto; text-align: left; }
      .sp-page { grid-template-columns: 1fr; padding: 18px 12px 60px; gap: 14px; }
      .sp-sidebar { position: static; }
      .sp-hero { min-height: auto; padding: 56px 20px 60px; }
      .sp-stat { padding: 0 18px; }
      .sp-card-bd, .sp-card-hd { padding-left: 18px; padding-right: 18px; }
      .sp-grid { grid-template-columns: 1fr; }
      .sp-grid .full { grid-column: 1; }
      .sp-stats-pill { flex-direction: column; gap: 10px; padding: 14px 24px; }
      .sp-stat + .sp-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }
    }
    @media (max-width: 420px) {
      .sp-hero h1 { font-size: 2.35rem; }
      .sp-hero-actions { flex-direction: column; }
      .sp-hero-primary, .sp-hero-secondary { width: 100%; }
      .sp-flow-card { padding: 17px; }
      .sp-flow-head { align-items: flex-start; }
      .sp-flow-live { padding: 5px 7px; }
      .sp-steplbl { display: none; }
      .sp-steptab { justify-content: center; }
    }