/* ========== FINANCE COST ANALYSIS - ENHANCED STYLES ========== */

/* Section subtitle */
.ab-section-subtitle {
    font-size: 1.1rem;
    color: var(--text-medium);
    max-width: 700px;
    margin: 0 auto;
}

/* Problem grid with enhanced icons */
.ab-problem-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.ab-problem-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.2rem;
    background: var(--white-color);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-softs);
}

.ab-problem-item:hover {
    border-color: var(--primary-navy);
    transform: translateX(5px);
    box-shadow: var(--shadow-card);
}

.ab-problem-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-problem-icon i {
    color: white;
    font-size: 1.2rem;
}

.ab-problem-item p {
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-medium);
    flex: 1;
}

/* Why It Happens - 4 cards grid */
.ab-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.ab-why-card {
    background: var(--white-color);
    border-radius: 24px;
    padding: 1.8rem;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
}

.ab-why-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-navy);
    box-shadow: var(--shadow-card);
}

.ab-why-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ab-why-icon i {
    color: white;
    font-size: 1.5rem;
}

.ab-why-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.ab-why-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-medium);
    margin-bottom: 0;
}

/* Practical Solution - Enhanced Grid */
.ab-solution-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.ab-solution-item-enhanced {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.ab-solution-item-enhanced:hover {
    border-color: var(--primary-navy);
    transform: translateY(-3px);
    box-shadow: var(--shadow-softs);
}

.ab-solution-item-enhanced i {
    color: var(--primary-navy);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.ab-solution-item-enhanced span {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-medium);
}

.ab-solution-highlight {
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 30px;
    padding: 1.5rem;
    text-align: center;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.ab-solution-highlight i {
    color: white;
    font-size: 1.5rem;
}

.ab-solution-highlight p {
    color: white;
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 500;
}

/* Key Benefits - Attractive Premium Cards */
.ab-benefits-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

.ab-benefit-premium-card {
    background: var(--white-color);
    border-radius: 28px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
}

.ab-benefit-premium-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-navy);
    box-shadow: var(--shadow-card);
}

.ab-benefit-premium-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ab-benefit-premium-icon i {
    color: white;
    font-size: 2rem;
}

.ab-benefit-premium-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
}

.ab-benefit-premium-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ab-benefit-premium-card ul li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-medium);
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.ab-benefit-premium-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-navy);
    font-weight: bold;
}

/* Use Case - Redesigned */
.ab-usecase-redesigned {
    max-width: 900px;
    margin: 0 auto;
    background: var(--white-color);
    border-radius: 40px;
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
}

.ab-usecase-scenario {
    display: flex;
    gap: 2rem;
    align-items: stretch;
}

.ab-usecase-before,
.ab-usecase-after {
    flex: 1;
    background: var(--grey-soft);
    border-radius: 24px;
    padding: 1.5rem;
}

.ab-usecase-label {
    display: inline-block;
    background: var(--primary-navy);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 1.2rem;
    border-radius: 30px;
    margin-bottom: 1rem;
}

.ab-usecase-before p,
.ab-usecase-after p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-medium);
    margin-bottom: 1rem;
}

.ab-usecase-after ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ab-usecase-after ul li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-medium);
    margin-bottom: 0.5rem;
    padding-left: 1.2rem;
    position: relative;
}

.ab-usecase-after ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary-navy);
}

.ab-usecase-arrow-icon {
    display: flex;
    align-items: center;
    color: var(--primary-navy);
    font-size: 1.5rem;
}

.ab-usecase-outcome {
    margin-top: 2rem;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 24px;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ab-usecase-outcome i {
    color: white;
    font-size: 1.5rem;
}

.ab-usecase-outcome p {
    color: white;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 500;
}

/* Conclusion - Enhanced Attractive Design */
.ab-conclusion-premium-enhanced {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 50px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.ab-conclusion-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.ab-conclusion-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.ab-conclusion-icon-wrapper i {
    color: white;
    font-size: 2rem;
}

.ab-conclusion-main {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.ab-conclusion-divider {
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin: 1.5rem auto;
}

.ab-conclusion-highlight {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Helps premium */
.ab-helps-premium {
    max-width: 900px;
    margin: 0 auto;
}

.ab-helps-card {
    background: linear-gradient(145deg, var(--primary-navy) 0%, #1e3a5f 100%);
    border-radius: 40px;
    padding: 3rem;
    color: var(--white-color);
    text-align: center;
}

.ab-helps-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
}

.ab-helps-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.95;
}

/* CTA subtext */
.ab-cta-subtext {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 1200px) {
    .ab-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ab-solution-grid-enhanced {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .ab-problem-grid {
        grid-template-columns: 1fr;
    }
    
    .ab-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ab-solution-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .ab-benefits-premium {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ab-usecase-scenario {
        flex-direction: column;
    }
    
    .ab-usecase-arrow-icon {
        justify-content: center;
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .ab-why-grid {
        grid-template-columns: 1fr;
    }
    
    .ab-benefits-premium {
        grid-template-columns: 1fr;
    }
    
    .ab-conclusion-premium-enhanced {
        padding: 2rem;
    }
    
    .ab-conclusion-main {
        font-size: 1rem;
    }
    
    .ab-conclusion-highlight {
        font-size: 1rem;
    }
    
    .ab-helps-card {
        padding: 2rem;
    }
}

@media (max-width: 480px) {
    .ab-problem-item {
        flex-direction: column;
        text-align: center;
    }
    
    .ab-problem-icon {
        margin: 0 auto;
    }
    
    .ab-why-card {
        text-align: center;
    }
    
    .ab-why-icon {
        margin: 0 auto 1rem;
    }
    
    .ab-solution-item-enhanced {
        flex-direction: column;
        text-align: center;
    }
    
    .ab-solution-item-enhanced i {
        margin: 0 auto;
    }
    
    .ab-usecase-outcome {
        flex-direction: column;
        text-align: center;
    }
}
/* Conclusion - Enhanced Attractive Design */
.ab-conclusion-premium-enhanced {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 50px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.ab-conclusion-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.ab-conclusion-heading {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.ab-conclusion-main {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.ab-conclusion-divider {
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin: 1.5rem auto;
}

.ab-conclusion-highlight {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== NEW CSS CLASSES FOR REPORTING DELAYS PAGE ========== */

/* Impact Grid for Real-World Impact Section */
.ab-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.ab-impact-item {
    background: var(--white-color);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.ab-impact-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-navy);
    box-shadow: var(--shadow-softs);
}

.ab-impact-item i {
    font-size: 2rem;
    color: var(--primary-navy);
    margin-bottom: 1rem;
}

.ab-impact-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}

.ab-impact-item p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-medium);
    margin-bottom: 0;
}

/* Why It Happens - Causes Grid (5 cards) */
.ab-why-grid-causes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.ab-why-cause-card {
    background: var(--white-color);
    border-radius: 24px;
    padding: 1.8rem;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
}

.ab-why-cause-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-navy);
    box-shadow: var(--shadow-card);
}

.ab-why-cause-card .ab-why-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ab-why-cause-card .ab-why-icon i {
    color: white;
    font-size: 1.5rem;
}

.ab-why-cause-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.ab-why-cause-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-medium);
    margin-bottom: 0;
}

/* Solution List Grid */
.ab-solution-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.ab-solution-list-item {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.ab-solution-list-item:hover {
    border-color: var(--primary-navy);
    transform: translateX(5px);
    box-shadow: var(--shadow-softs);
}

.ab-solution-list-item i {
    color: var(--primary-navy);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.ab-solution-list-item span {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-medium);
}

/* Outsourcing Grid */
.ab-outsourcing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.ab-outsourcing-item {
    background: var(--primary-navy-05);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.ab-outsourcing-item:hover {
    background: var(--primary-navy-10);
    transform: translateX(5px);
}

.ab-outsourcing-item i {
    color: var(--primary-navy);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.ab-outsourcing-item span {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-medium);
}

/* Benefits Reporting Grid */
.ab-benefits-reporting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

.ab-benefit-reporting-card {
    background: var(--white-color);
    border-radius: 28px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
}

.ab-benefit-reporting-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-navy);
    box-shadow: var(--shadow-card);
}

.ab-benefit-reporting-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ab-benefit-reporting-icon i {
    color: white;
    font-size: 2rem;
}

.ab-benefit-reporting-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
}

.ab-benefit-reporting-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ab-benefit-reporting-card ul li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-medium);
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.ab-benefit-reporting-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-navy);
    font-weight: bold;
}

/* Use Case Reporting */
.ab-usecase-reporting {
    max-width: 900px;
    margin: 0 auto;
    background: var(--white-color);
    border-radius: 40px;
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
}

.ab-usecase-outcome-reporting {
    margin-top: 2rem;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 24px;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ab-usecase-outcome-reporting i {
    color: white;
    font-size: 1.5rem;
}

.ab-usecase-outcome-reporting p {
    color: white;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 500;
}

/* Helps Reporting */
.ab-helps-reporting {
    max-width: 900px;
    margin: 0 auto;
}

.ab-helps-reporting-card {
    background: linear-gradient(145deg, var(--primary-navy) 0%, #1e3a5f 100%);
    border-radius: 40px;
    padding: 3rem;
    color: var(--white-color);
    text-align: center;
}

.ab-helps-reporting-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
}

.ab-helps-reporting-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.95;
}

/* Conclusion Reporting */
.ab-conclusion-reporting {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 50px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.ab-conclusion-reporting-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.ab-conclusion-reporting-heading {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.ab-conclusion-reporting-main {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.ab-conclusion-reporting-highlight {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA Reporting */
.ab-cta-reporting {
    background: linear-gradient(135deg, var(--primary-navy), #1e3a5f);
    border-radius: 40px;
    padding: 3rem;
    text-align: center;
    color: white;
}

.ab-cta-reporting-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.ab-cta-reporting-text {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 2rem;
    opacity: 0.9;
}

/* Responsive for New Classes */
@media (max-width: 1200px) {
    .ab-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ab-why-grid-causes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .ab-solution-list-grid {
        grid-template-columns: 1fr;
    }
    
    .ab-outsourcing-grid {
        grid-template-columns: 1fr;
    }
    
    .ab-benefits-reporting-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ab-impact-grid {
        grid-template-columns: 1fr;
    }
    
    .ab-why-grid-causes {
        grid-template-columns: 1fr;
    }
    
    .ab-benefits-reporting-grid {
        grid-template-columns: 1fr;
    }
    
    .ab-conclusion-reporting {
        padding: 2rem;
    }
    
    .ab-cta-reporting {
        padding: 2rem;
    }
    
    .ab-conclusion-reporting-heading {
        font-size: 1.5rem;
    }
    
    .ab-conclusion-reporting-main {
        font-size: 1rem;
    }
    
    .ab-conclusion-reporting-highlight {
        font-size: 1rem;
    }
    
    .ab-cta-reporting-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .ab-impact-item {
        text-align: center;
    }
    
    .ab-why-cause-card {
        text-align: center;
    }
    
    .ab-why-cause-card .ab-why-icon {
        margin: 0 auto 1rem;
    }
    
    .ab-solution-list-item {
        flex-direction: column;
        text-align: center;
    }
    
    .ab-solution-list-item i {
        margin: 0 auto;
    }
    
    .ab-outsourcing-item {
        flex-direction: column;
        text-align: center;
    }
    
    .ab-outsourcing-item i {
        margin: 0 auto;
    }
    
    .ab-usecase-outcome-reporting {
        flex-direction: column;
        text-align: center;
    }
}