/* ==============================================
   INDEX2.CSS - Estilos para as Novas Seções
   ============================================== */

/* ===== HERO: GUI Configurator ===== */
.split-configurator {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    overflow: hidden;
    margin-bottom: 20px;
}

.configurator-header {
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.configurator-header .code-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    text-align: center;
}

.config-save {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.config-save:hover {
    background: rgba(255,255,255,0.3);
}

.configurator-body {
    padding: 24px;
}

.config-section {
    margin-bottom: 20px;
}

.config-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-input-group {
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
}

.input-prefix {
    font-weight: 600;
    color: #6b7280;
    margin-right: 8px;
}

.config-input {
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    flex: 1;
    outline: none;
}

.split-rule {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rule-recipient {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.rule-recipient i {
    color: #3A42FE;
    font-size: 18px;
}

.rule-select {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    outline: none;
    cursor: pointer;
}

.rule-config {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rule-input {
    width: 60px;
    text-align: center;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.rule-result {
    font-size: 16px;
    font-weight: 700;
    color: #059669;
    min-width: 90px;
    text-align: right;
}

.config-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-top: 16px;
}

.config-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.config-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.config-toggle label {
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

/* ===== Split Animation Result ===== */
.split-animation-result {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.animation-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    text-align: center;
}

.split-recipients-mini {
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;
}

.recipient-mini {
    text-align: center;
    animation: bounceIn 0.6s ease-out;
}

.recipient-mini i {
    display: block;
    font-size: 32px;
    color: #3A42FE;
    margin-bottom: 8px;
}

.mini-amount {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #059669;
}

@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.animation-footer {
    text-align: center;
    font-size: 13px;
    color: #059669;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.animation-footer i {
    font-size: 16px;
}

/* ===== Split Types Dual Section ===== */
.split-types-dual {
    padding: 80px 0;
    background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
}

.split-types-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
}

.split-type-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
}

.split-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.split-type-header {
    margin-bottom: 30px;
}

.split-type-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.badge-type-a {
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    color: #fff;
}

.badge-type-c {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
}

.split-type-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.split-type-description {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.6;
}

/* Diagrams */
.split-diagram {
    background: #f9fafb;
    border-radius: 12px;
    padding: 30px 20px;
    margin: 30px 0;
    text-align: center;
}

.diagram-node {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #374151;
    margin: 8px 0;
}

.diagram-node i {
    font-size: 20px;
    color: #3A42FE;
}

.node-ezcale {
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    color: #fff;
    border: none;
}

.node-ezcale i {
    color: #fff;
}

.diagram-arrow {
    font-size: 32px;
    color: #9ca3af;
    margin: 8px 0;
}

.diagram-arrows-multi {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 8px 0;
}

.arrow-multi {
    font-size: 28px;
    color: #9ca3af;
}

.diagram-nodes-bottom {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.diagram-node-small {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.diagram-node-small i {
    font-size: 16px;
    color: #3A42FE;
}

.diagram-label {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Features List */
.split-features-list {
    margin: 24px 0;
}

.feature-check {
    padding: 10px 0;
    font-size: 15px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-check i {
    color: #059669;
    font-size: 16px;
}

.split-connections {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #166534;
    margin-top: 20px;
}

.split-connections strong {
    font-weight: 700;
}

/* Compare CTA */
.split-compare-cta {
    text-align: center;
    margin-top: 50px;
}

/* ===== Dynamic Pricing Section ===== */
.dynamic-pricing-section {
    padding: 80px 0;
    background: #fff;
}

.dynamic-pricing-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 50px;
}

.pricing-visual {
    text-align: center;
}

.pricing-diagram {
    background: linear-gradient(135deg, #f9fafb 0%, #fff 100%);
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 40px;
}

.pricing-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.price-node {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    min-width: 140px;
}

.node-base {
    border-color: #9ca3af;
}

.node-conditions {
    flex: 1;
    margin: 0 20px;
}

.node-result {
    border-color: #059669;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.price-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.price-value {
    font-size: 32px;
    font-weight: 700;
    color: #374151;
}

.price-value-final {
    font-size: 36px;
    font-weight: 700;
    color: #059669;
}

.price-save {
    font-size: 14px;
    font-weight: 600;
    color: #059669;
    margin-top: 8px;
}

.price-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.rule-chip {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.price-arrow {
    font-size: 24px;
    color: #9ca3af;
    font-weight: 700;
}

.pricing-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.timeline-item span {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d1d5db;
}

.timeline-dot-active {
    background: #059669;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.2);
}

.timeline-line {
    width: 60px;
    height: 2px;
    background: #d1d5db;
}

.pricing-features {
    display: grid;
    gap: 20px;
}

.pricing-feature-card {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s;
}

.pricing-feature-card:hover {
    background: #fff;
    border-color: #3A42FE;
    transform: translateX(5px);
}

.pricing-feature-card .feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.pricing-feature-card .feature-icon i {
    color: #fff;
    font-size: 24px;
}

.pricing-feature-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.pricing-feature-card p {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.6;
}

/* ===== Omnichannel Routing Section ===== */
.omnichannel-routing {
    padding: 80px 0;
    background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
}

.routing-scenarios {
    display: grid;
    gap: 30px;
    margin-top: 50px;
}

.routing-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s;
}

.routing-card:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.routing-card-fallback {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
}

.routing-header {
    margin-bottom: 24px;
}

.routing-badge {
    display: inline-block;
    background: #3A42FE;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.badge-fallback {
    background: #fbbf24;
    color: #78350f;
}

.routing-header h4 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.routing-diagram {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.routing-node {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    min-width: 140px;
}

.routing-node i {
    display: block;
    font-size: 32px;
    color: #3A42FE;
    margin-bottom: 10px;
}

.routing-node span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.routing-node small {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.node-ezcale {
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    border: none;
}

.node-ezcale i,
.node-ezcale span {
    color: #fff;
}

.node-success {
    background: #f0fdf4;
    border-color: #86efac;
}

.node-success i {
    color: #059669;
}

.node-fail {
    background: #fef2f2;
    border-color: #fca5a5;
    position: relative;
}

.node-fail i {
    color: #dc2626;
}

.routing-analysis {
    margin-top: 12px;
    text-align: left;
}

.analysis-item {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    padding: 4px 0;
}

.routing-arrow {
    font-size: 24px;
    color: #9ca3af;
    font-weight: 700;
}

.routing-bounce {
    font-size: 28px;
    color: #fbbf24;
    font-weight: 700;
}

.routing-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.routing-feature {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.routing-feature i {
    color: #059669;
}

/* ===== Reconciliation Section ===== */
.reconciliation-section {
    padding: 80px 0;
    background: #fff;
}

.reconciliation-content {
    margin-top: 50px;
}

.reconciliation-guarantee {
    text-align: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 50px;
}

.guarantee-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: pulse-slow 3s ease-in-out infinite;
}

.guarantee-icon i {
    font-size: 40px;
    color: #fff;
}

@keyframes pulse-slow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(5, 150, 105, 0);
    }
}

.reconciliation-guarantee h3 {
    font-size: 32px;
    font-weight: 700;
    color: #166534;
    margin-bottom: 12px;
}

.reconciliation-guarantee p {
    font-size: 18px;
    color: #166534;
}

.reconciliation-outputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.output-card {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s;
}

.output-card:hover {
    background: #fff;
    border-color: #3A42FE;
    transform: translateY(-5px);
}

.output-card i {
    font-size: 40px;
    color: #3A42FE;
    margin-bottom: 16px;
}

.output-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.output-card p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}

.reconciliation-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) {
    .reconciliation-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

.feature-badge-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-badge-item i {
    color: #059669;
    font-size: 16px;
}

/* ===== White-label Section ===== */
.whitelabel-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
}

.whitelabel-demo {
    margin-top: 50px;
}

.whitelabel-screens {
    margin-bottom: 40px;
}

.screen-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.screen-item {
    border-radius: 12px;
    padding: 24px;
    min-height: 280px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    transition: all 0.3s;
}

.screen-item:hover {
    transform: scale(1.05);
}

.screen-header {
    margin-bottom: 20px;
}

.screen-logo {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
}

.screen-content {
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 20px;
}

.screen-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.screen-chart {
    height: 120px;
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
}

/* APIs */
.whitelabel-apis {
    background: #1f2937;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
}

.api-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.api-endpoint {
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Courier New', monospace;
    transition: all 0.3s;
}

.api-endpoint:hover {
    background: #4b5563;
    transform: translateX(5px);
}

.http-method {
    background: #059669;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.api-endpoint .http-method:first-child {
    background: #3b82f6;
}

.api-path {
    color: #d1d5db;
    font-size: 14px;
}

/* Features */
.whitelabel-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.wl-feature {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    font-size: 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    justify-content: center;
}

.wl-feature i {
    color: #3A42FE;
    font-size: 20px;
}

/* ===== Email Modal ===== */
.email-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 10000;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 28px;
    color: #9ca3af;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.modal-body {
    padding: 50px 40px;
    text-align: center;
}

.modal-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.modal-icon i {
    font-size: 40px;
    color: #fff;
}

.modal-body h3 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.modal-body p {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 30px;
}

.email-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.email-input {
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: all 0.2s;
}

.email-input:focus {
    border-color: #3A42FE;
}

/* ===== Building Blocks Section ===== */
.building-blocks-section {
    padding: 80px 0;
    background: #fff;
}

/* Filtros de Nicho */
.blocks-filters {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 40px 0 30px 0;
    flex-wrap: wrap;
}

.niche-filter {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.niche-filter:hover {
    background: #fff;
    border-color: #3A42FE;
    color: #3A42FE;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(58, 66, 254, 0.15);
}

.niche-filter.active {
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    border-color: #3A42FE;
    color: #fff;
    box-shadow: 0 4px 12px rgba(58, 66, 254, 0.3);
}

.niche-filter i {
    font-size: 16px;
}

/* Indicador de Filtro Ativo */
.niche-indicator {
    background: linear-gradient(135deg, #f9fafb 0%, #fff 100%);
    border: 2px solid #3A42FE;
    border-radius: 12px;
    padding: 16px 24px;
    margin: 20px auto 30px auto;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(58, 66, 254, 0.1);
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.indicator-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
}

.indicator-text {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    flex: 1;
}

.indicator-count {
    background: #3A42FE;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

/* Blocos com filtro ativo */
.block-card {
    transition: all 0.35s ease-out;
    position: relative;
}

.block-card.dimmed {
    opacity: 0.15;
    transform: scale(0.94);
    filter: grayscale(1) blur(0.5px);
    pointer-events: none;
}

.block-card.highlighted {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 8px 32px rgba(58, 66, 254, 0.35),
                0 0 0 3px #3A42FE;
    z-index: 10;
}

.blocks-stats {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin: 50px 0;
}

.block-stat {
    text-align: center;
}

.stat-number-big {
    font-size: 64px;
    font-weight: 700;
    background: linear-gradient(135deg, #3A42FE 0%, #8FCEEE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label-big {
    font-size: 16px;
    color: #6b7280;
    font-weight: 600;
}

.blocks-container {
    margin-top: 50px;
}

.blocks-category {
    margin-bottom: 60px;
}

.category-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid #3A42FE;
    display: inline-block;
}

.category-title i {
    color: #3A42FE;
    margin-right: 8px;
}

.blocks-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.block-card {
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    border: 2px solid transparent;
}

.block-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.block-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.block-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.block-desc {
    font-size: 13px;
    color: #6b7280;
}

/* Color variations */
.block-purple { background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); }
.block-purple .block-icon, .block-purple .block-title { color: #fff; }
.block-purple .block-desc { color: rgba(255,255,255,0.9); }

.block-blue { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); }
.block-blue .block-icon, .block-blue .block-title { color: #fff; }
.block-blue .block-desc { color: rgba(255,255,255,0.9); }

.block-green { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }
.block-green .block-icon, .block-green .block-title { color: #fff; }
.block-green .block-desc { color: rgba(255,255,255,0.9); }

.block-orange { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); }
.block-orange .block-icon, .block-orange .block-title { color: #fff; }
.block-orange .block-desc { color: rgba(255,255,255,0.9); }

.block-cyan { background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%); }
.block-cyan .block-icon, .block-cyan .block-title { color: #fff; }
.block-cyan .block-desc { color: rgba(255,255,255,0.9); }

.block-pink { background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%); }
.block-pink .block-icon, .block-pink .block-title { color: #fff; }
.block-pink .block-desc { color: rgba(255,255,255,0.9); }

.block-red { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); }
.block-red .block-icon, .block-red .block-title { color: #fff; }
.block-red .block-desc { color: rgba(255,255,255,0.9); }

.block-yellow { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.block-yellow .block-icon, .block-yellow .block-title { color: #fff; }
.block-yellow .block-desc { color: rgba(255,255,255,0.9); }

.block-indigo { background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); }
.block-indigo .block-icon, .block-indigo .block-title { color: #fff; }
.block-indigo .block-desc { color: rgba(255,255,255,0.9); }

.block-teal { background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%); }
.block-teal .block-icon, .block-teal .block-title { color: #fff; }
.block-teal .block-desc { color: rgba(255,255,255,0.9); }

.block-lime { background: linear-gradient(135deg, #a3e635 0%, #84cc16 100%); }
.block-lime .block-icon, .block-lime .block-title { color: #fff; }
.block-lime .block-desc { color: rgba(255,255,255,0.9); }

.block-rose { background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%); }
.block-rose .block-icon, .block-rose .block-title { color: #fff; }
.block-rose .block-desc { color: rgba(255,255,255,0.9); }

.block-violet { background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%); }
.block-violet .block-icon, .block-violet .block-title { color: #fff; }
.block-violet .block-desc { color: rgba(255,255,255,0.9); }

.block-amber { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.block-amber .block-icon, .block-amber .block-title { color: #fff; }
.block-amber .block-desc { color: rgba(255,255,255,0.9); }

.block-emerald { background: linear-gradient(135deg, #34d399 0%, #059669 100%); }
.block-emerald .block-icon, .block-emerald .block-title { color: #fff; }
.block-emerald .block-desc { color: rgba(255,255,255,0.9); }

.block-sky { background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%); }
.block-sky .block-icon, .block-sky .block-title { color: #fff; }
.block-sky .block-desc { color: rgba(255,255,255,0.9); }

.block-fuchsia { background: linear-gradient(135deg, #e879f9 0%, #d946ef 100%); }
.block-fuchsia .block-icon, .block-fuchsia .block-title { color: #fff; }
.block-fuchsia .block-desc { color: rgba(255,255,255,0.9); }

.block-slate { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); }
.block-slate .block-icon, .block-slate .block-title { color: #fff; }
.block-slate .block-desc { color: rgba(255,255,255,0.9); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .split-types-wrapper {
        grid-template-columns: 1fr;
    }

    .dynamic-pricing-content {
        grid-template-columns: 1fr;
    }

    .routing-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .reconciliation-outputs {
        grid-template-columns: 1fr;
    }

    .screen-showcase {
        grid-template-columns: 1fr;
    }

    .api-showcase {
        grid-template-columns: 1fr;
    }

    .whitelabel-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .split-type-card {
        padding: 24px;
    }

    .routing-features-grid {
        grid-template-columns: 1fr;
    }

    .reconciliation-features {
        grid-template-columns: 1fr;
    }

    .whitelabel-features {
        grid-template-columns: 1fr;
    }

    .routing-diagram {
        flex-direction: column;
    }

    .blocks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blocks-stats {
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 640px) {
    .blocks-grid {
        grid-template-columns: 1fr;
    }
}