/* ============================================
   PRSH TECHNOLOGIES - MAIN WEBSITE CSS
   ============================================ */

/* ── Global overflow guard ── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

* {
    box-sizing: border-box;
}

/* ============= CSS VARIABLES ============= */
:root {
    --blue-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --green-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --orange-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --purple-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --shadow-sm: 0 1px 6px rgba(0,0,0,0.04);
    --shadow-md: 0 3px 15px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
    --shadow-xl: 0 15px 45px rgba(0,0,0,0.12);
}

/* ============= PAGINATION STYLES ============= */
.pagination-wrapper .pagination {
    gap: 5px;
}

.pagination-wrapper .page-link {
    border: 2px solid #e0e0e0;
    color: #333;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    min-width: 44px;
    text-align: center;
}

.pagination-wrapper .page-link:hover:not(.disabled) {
    background-color: #f0f8ff;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.pagination-wrapper .page-item.active .page-link {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-color: #0056b3;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
}

.pagination-wrapper .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-wrapper .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

@media (max-width: 576px) {
    .pagination-wrapper .pagination {
        flex-wrap: wrap;
        gap: 3px;
    }

    .pagination-wrapper .page-link {
        padding: 6px 10px;
        font-size: 0.875rem;
        min-width: 38px;
    }
}

/* ============= FORM MESSAGE STYLES ============= */
.form-result {
    margin-top: 10px;
}

.form-result.error,
.form-result.error p {
    color: #dc3545;
}

.form-result.success,
.form-result.success p {
    color: #28a745;
    font-weight: 500;
}

#msgSubmit {
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 20px;
}

#msgSubmit.text-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

#msgSubmit.text-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.help-block.with-errors {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
}

/* ============= CONTACT FORM STYLES ============= */
.contacts-form-hidden {
    display: none !important;
}

/* ============= MAP STYLES ============= */
.map-area iframe {
    border: 0;
}

/* ============= TAB STYLES ============= */
.tab-box {
    display: none;
}

.tab-box.active,
#tab-1 {
    display: block;
}

/* ============= MODERN IMAGE CARD STYLES ============= */
.modern-image-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.modern-image-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.modern-image-card img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.modern-image-card:hover img {
    transform: scale(1.03);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 25px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-image-card:hover .image-overlay {
    opacity: 1;
}

.overlay-content {
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
}

.overlay-content i {
    font-size: 28px;
}

/* ============= CONTENT CARD STYLES ============= */
.content-card {
    background: white;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--blue-gradient);
    transition: all 0.3s ease;
}

.content-card:hover {
    box-shadow: var(--shadow-lg);
}

.content-card:hover::before {
    width: 100%;
    opacity: 0.05;
}

.intro-card::before {
    background: var(--blue-gradient);
}

.approach-card::before {
    background: var(--purple-gradient);
}

.why-choose-card::before {
    background: var(--green-gradient);
}

.deliverables-card::before {
    background: var(--orange-gradient);
}

/* ============= CARD ICON STYLES ============= */
.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 16px;
    color: white;
}

.card-icon.blue {
    background: var(--blue-gradient);
}

.card-icon.user-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

/* ============= GRADIENT HEADING STYLES ============= */
.gradient-heading {
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    margin-bottom: 16px;
    font-size: 24px;
}

.blue-gradient {
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.purple-gradient {
    background: var(--purple-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.green-gradient {
    background: var(--green-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.orange-gradient {
    background: var(--orange-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============= LEAD TEXT STYLES ============= */
.lead-text {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

/* ============= SECTION HEADER STYLES ============= */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid transparent;
}

.purple-header {
    border-image: var(--purple-gradient) 1;
}

.green-header {
    border-image: var(--green-gradient) 1;
}

.orange-header {
    border-image: var(--orange-gradient) 1;
}

.header-icon {
    width: 45px;
    height: 45px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
    flex-shrink: 0;
}

/* ============= MODERN FEATURES GRID STYLES ============= */
.modern-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 22px 0;
}

.feature-card {
    background: white;
    padding: 22px;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.blue-card {
    border-image: var(--blue-gradient) 1;
}

.blue-card:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
}

.green-card {
    border-image: var(--green-gradient) 1;
}

.green-card:hover {
    background: linear-gradient(135deg, rgba(17, 153, 142, 0.03) 0%, rgba(56, 239, 125, 0.03) 100%);
}

.orange-card {
    border-image: var(--orange-gradient) 1;
}

.orange-card:hover {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.03) 0%, rgba(245, 87, 108, 0.03) 100%);
}

.purple-card {
    border-image: var(--purple-gradient) 1;
}

.purple-card:hover {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.03) 0%, rgba(0, 242, 254, 0.03) 100%);
}

/* ============= FEATURE ICON STYLES ============= */
.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #333;
    margin-bottom: 14px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.08);
}

.feature-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
}

.feature-card p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.card-corner {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.04) 100%);
    border-radius: 14px 0 14px 0;
}

/* ============= MODERN LIST STYLES ============= */
.modern-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.list-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.list-item:hover {
    background: white;
    box-shadow: var(--shadow-sm);
}

.item-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.blue-bg {
    background: var(--blue-gradient);
}

.green-bg {
    background: var(--green-gradient);
}

.purple-bg {
    background: var(--purple-gradient);
}

.orange-bg {
    background: var(--orange-gradient);
}

/* ============= BLOG DETAIL IMAGE STYLES ============= */
.blog-comment-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.blog-featured-image {
    background-size: cover;
    background-position: center;
}

/* ============= UTILITY CLASSES ============= */
.hidden {
    display: none !important;
}

@media only screen and (max-width: 991px) {
    .navbar-area {
        position: relative;
    }

    .mobile-responsive-nav .mobile-responsive-menu {
        min-height: 56px;
        padding-right: 112px;
        display: flex;
        align-items: center;
    }

    .mobile-responsive-nav .mobile-responsive-menu .logo {
        max-width: none;
        display: flex;
        align-items: center;
    }

    .mobile-responsive-nav .mobile-responsive-menu .logo a {
        display: inline-flex;
        align-items: center;
        max-width: 160px;
    }

    .mobile-responsive-nav .mobile-responsive-menu .logo .main-logo,
    .mobile-responsive-nav .mobile-responsive-menu .logo .white-logo {
        height: 42px !important;
        width: auto;
    }

    .others-option-for-responsive {
        display: block !important;
        position: absolute;
        top: 50%;
        right: 52px;
        transform: translateY(-50%);
        z-index: 10020;
    }

    .others-option-for-responsive .container {
        padding-left: 0;
        padding-right: 0;
    }

    .others-option-for-responsive .dot-menu {
        position: static;
        right: auto;
        top: auto;
        height: auto;
        padding: 0;
        z-index: 10021;
    }

    .others-option-for-responsive .dot-menu .inner {
        height: auto;
    }

    .others-option-for-responsive .others-options {
        padding: 0;
    }

    .others-option-for-responsive .others-options.style2 {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .others-option-for-responsive .others-options.style2 .option-item {
        margin: 0;
    }

    .others-option-for-responsive .others-options.style2 .option-item .default-btn {
        display: none;
    }

    .others-option-for-responsive .others-options.style2 .option-item.style2 {
        display: inline-block;
    }

    .others-option-for-responsive .others-options.style2 .header-contact-box {
        padding-left: 0;
        top: 0;
        margin-bottom: 0;
    }

    .others-option-for-responsive .others-options.style2 .header-contact-box .icon {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .others-option-for-responsive .others-options.style2 .switch-box {
        position: static;
        top: 0;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container a.meanmenu-reveal {
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        z-index: 10030;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container a.meanmenu-reveal.meanclose {
        line-height: 30px;
        text-align: center;
        padding-top: 0;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-bar {
        z-index: 10010;
    }
}

@media only screen and (max-width: 420px) {
    .mobile-responsive-nav .mobile-responsive-menu {
        padding-right: 100px;
    }

    .mobile-responsive-nav .mobile-responsive-menu .logo a {
        max-width: 138px;
    }

    .mobile-responsive-nav .mobile-responsive-menu .logo .main-logo,
    .mobile-responsive-nav .mobile-responsive-menu .logo .white-logo {
        height: 38px !important;
    }
}

@media only screen and (max-width: 767px) {
    .banner-content-two {
        margin-right: 0;
        padding-right: 0;
        overflow: visible;
    }

    .banner-content-two h1 {
        font-size: 34px;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .banner-content-two p {
        font-size: 15px;
        line-height: 1.7;
    }

    .banner-content-two .banner-btn {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .banner-content-two .banner-btn .default-btn {
        margin-right: 0 !important;
    }
}

@media only screen and (max-width: 420px) {
    .banner-content-two h1 {
        font-size: 30px;
    }

    .pl-ring-wrap { width: 92px !important; height: 92px !important; }
    .pl-monogram  { font-size: 21px !important; letter-spacing: 2px !important; }
    .pl-wordmark  { font-size: 9px !important; letter-spacing: 6px !important; }
    .pl-prog-wrap { width: 210px !important; }
    .pl-o1 { width: 300px !important; height: 300px !important; }
    .pl-o2 { width: 220px !important; height: 220px !important; }
    .pl-o3 { display: none !important; }
    .pl-pt:nth-child(n+8) { display: none !important; }
}

@media only screen and (min-width: 421px) and (max-width: 767px) {
    .pl-ring-wrap { width: 102px !important; height: 102px !important; }
    .pl-monogram  { font-size: 24px !important; }
    .pl-prog-wrap { width: 240px !important; }
}


/* ===================================================================
   PAGE-SPECIFIC STYLES - Auto-centralized from PHP views
   =================================================================== */


/* ===================================================================
   Footer - Centralized Styles
   =================================================================== */

/* ═══════════════════════════════════════════
   PREMIUM FOOTER
═══════════════════════════════════════════ */
.pf-wrap{position:relative;background:linear-gradient(160deg,#060c1a 0%,#0d1529 45%,#081322 100%);overflow:hidden}
.pf-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#0070f3,#00b4d8,#7c3aed,#db2777,#ea580c,#059669,#0070f3);background-size:300% 100%;animation:pfBar 6s linear infinite}
@keyframes pfBar{0%{background-position:0% 0}100%{background-position:300% 0}}
.pf-wrap::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");pointer-events:none}
.pf-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.pf-orb-1{width:380px;height:380px;background:rgba(0,112,243,.07);top:-100px;left:-80px}
.pf-orb-2{width:300px;height:300px;background:rgba(124,58,237,.06);bottom:-60px;right:10%}
.pf-orb-3{width:220px;height:220px;background:rgba(219,39,119,.05);top:35%;right:-60px}

/* ── MAIN GRID ── */
.pf-main{position:relative;z-index:2;padding:38px 0 20px}

/* desktop: 4 content cols + newsletter always in own full-width row */
.pf-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px;align-items:start}
.pf-col{min-width:0}
.pf-newsletter-card{grid-column:1/-1;min-width:0}

/* ── BRAND ── */
.pf-brand .logo img{height:52px;width:auto;filter:brightness(1.04)}
.pf-brand p{color:rgba(255,255,255,.68);font-size:.89rem;line-height:1.72;margin:14px 0 16px;max-width:300px}
.pf-social{display:flex;gap:8px;flex-wrap:wrap}
.pf-social a{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);font-size:.95rem;text-decoration:none;transition:.3s}
.pf-social a:hover{background:linear-gradient(135deg,#0070f3,#7c3aed);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,112,243,.22)}
.pf-badge-strip{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.pf-badge-strip span{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;font-size:.7rem;color:rgba(255,255,255,.52);font-weight:600}
.pf-badge-strip span i{font-size:.85rem;color:#7c3aed}

/* ── HEADINGS ── */
.pf-col h4{font-size:.74rem;font-weight:800;color:#f4f7ff;letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px}
.pf-col h4::after{content:'';display:block;margin-top:8px;width:24px;height:2px;background:linear-gradient(90deg,#0070f3,#7c3aed);border-radius:20px}

/* ── LINKS ── */
.pf-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.pf-links li a{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.58);font-size:.87rem;text-decoration:none;transition:.25s;padding:1px 0}
.pf-links li a i{font-size:.82rem;color:#5b7ff6;transition:.25s}
.pf-links li a:hover{color:#fff;padding-left:4px}
.pf-links li a:hover i{color:#00b4d8}

/* ── CONTACT ── */
.pf-contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.pf-contact-list li{display:flex;gap:12px;align-items:flex-start}
.pf-contact-list .ci{width:32px;height:32px;min-width:32px;border-radius:10px;background:rgba(0,112,243,.12);border:1px solid rgba(0,112,243,.2);display:flex;align-items:center;justify-content:center;color:#7c95ff;font-size:.9rem}
.pf-contact-list .ct span{display:block;font-size:.68rem;color:rgba(255,255,255,.36);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.pf-contact-list .ct a,.pf-contact-list .ct p{display:block;color:rgba(255,255,255,.74);font-size:.85rem;text-decoration:none;margin:0;line-height:1.55;transition:.2s}
.pf-contact-list .ct a:hover{color:#7c95ff}

/* ── NEWSLETTER — horizontal strip spanning full footer width ── */
.pf-newsletter{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px 28px;backdrop-filter:blur(22px);box-shadow:0 16px 40px rgba(0,0,0,.12);display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:20px}
.pf-nl-top{display:flex;gap:12px;align-items:flex-start;flex:0 0 auto;max-width:320px}
.pf-nl-icon{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0;margin-top:2px}
.pf-nl-top-text h4{margin:0;font-size:.86rem;font-weight:800;color:#f4f7ff;letter-spacing:0;text-transform:none;margin-bottom:4px}
.pf-nl-top-text h4::after{display:none}
.pf-nl-top-text p{color:rgba(255,255,255,.6);font-size:.8rem;line-height:1.65;margin:0}
.pf-nl-form{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px}
.pf-nl-input{width:100%;height:40px;padding:0 14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;font-size:.87rem;outline:none;transition:.25s}
.pf-nl-input::placeholder{color:rgba(255,255,255,.34)}
.pf-nl-input:focus{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.08)}
.pf-nl-btn{width:100%;height:40px;padding:0 16px;background:linear-gradient(135deg,#0070f3,#7c3aed);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.87rem;cursor:pointer;transition:.3s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pf-nl-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,112,243,.26)}
.pf-nl-note{font-size:.72rem;color:rgba(255,255,255,.34);margin:0;flex:0 0 100%;margin-top:-8px}

/* ── DIVIDER ── */
.pf-divider{position:relative;z-index:2;border:none;border-top:1px solid rgba(255,255,255,.07);margin:0}

/* ── BOTTOM BAR ── */
.pf-bottom{position:relative;z-index:2;padding:14px 0}
.pf-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pf-copy{color:rgba(255,255,255,.42);font-size:.8rem;white-space:nowrap}
.pf-copy strong{color:rgba(255,255,255,.74);font-weight:700}
.pf-bottom-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.pf-bottom-links a{color:rgba(255,255,255,.38);font-size:.78rem;text-decoration:none;transition:.2s}
.pf-bottom-links a:hover{color:rgba(255,255,255,.8)}
.pf-made{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.32);font-size:.77rem}
.pf-made i{color:#f472b6;font-size:.9rem}

/* ── GO TOP ── */
.pf-go-top{position:fixed;bottom:24px;right:24px;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#0070f3,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;cursor:pointer;z-index:9999;opacity:0;visibility:hidden;transform:translateY(20px);transition:.35s;box-shadow:0 8px 20px rgba(0,112,243,.32);text-decoration:none}
.pf-go-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.pf-go-top:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,112,243,.42)}

/* ── RESPONSIVE ── */
@media(max-width:1199.98px){
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  /* revert newsletter to stacked on tablet */
  .pf-newsletter{flex-direction:column;padding:18px 20px}
  .pf-nl-top{max-width:none;flex:0 0 auto}
  .pf-nl-form{flex:unset;min-width:unset}
  .pf-nl-note{flex:0 0 auto;margin-top:0}
  .pf-brand p{max-width:100%}
}
@media(max-width:767.98px){
  .pf-grid{grid-template-columns:1fr}
  .pf-bottom-inner{flex-direction:column;text-align:center;gap:10px}
  .pf-bottom-links{justify-content:center}
  .pf-newsletter{padding:16px 18px}
  .pf-main{padding:32px 0 18px}
  .pf-bottom{padding-bottom:max(env(safe-area-inset-bottom,0px),20px)}
}


/* ===================================================================
   Ai Enablement - Centralized Styles
   =================================================================== */

:root{
  --p1:#7c3aed;--p2:#ec4899;--p3:#a78bfa;
  --g-main:linear-gradient(135deg,#7c3aed,#ec4899);
  --g-alt:linear-gradient(135deg,#6d28d9,#a78bfa);
  --g-green:linear-gradient(135deg,#00b09b,#38ef7d);
  --g-orange:linear-gradient(135deg,#f7971e,#ffd200);
  --g-blue:linear-gradient(135deg,#0070f3,#00b4d8);
  --g-navy:linear-gradient(135deg,#0f172a,#1e293b);
  --t1:#0f172a;--t2:#334155;--t3:#64748b;
  --bg1:#f8fafc;--bg2:#fff;--ln:#e2e8f0;
  --r:18px;--rsm:12px;
  --ease:cubic-bezier(.4,0,.2,1);--tr:.3s var(--ease);
  --sh-sm:0 1px 4px rgba(0,0,0,.06);
  --sh-md:0 4px 20px rgba(0,0,0,.09);
  --sh-lg:0 12px 48px rgba(0,0,0,.13);
  --sh-xl:0 24px 80px rgba(0,0,0,.16);
}
/* HERO */
.ai-hero{position:relative;background:linear-gradient(135deg,#1a0533,#7c3aed,#ec4899);padding:90px 0 0;overflow:hidden;color:#fff;}
.ai-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(167,139,250,.28) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 15% 80%,rgba(236,72,153,.2) 0%,transparent 60%);pointer-events:none;}
.ai-hero::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
.ai-hero-in{position:relative;z-index:3;}
.ai-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:7px 18px;font-size:13px;font-weight:700;color:#fff;margin-bottom:22px;}
.ai-badge .dot{width:8px;height:8px;border-radius:50%;background:#f9a8d4;box-shadow:0 0 0 3px rgba(249,168,212,.35);animation:ai-pulse 2s infinite;}
@keyframes ai-pulse{0%,100%{box-shadow:0 0 0 3px rgba(249,168,212,.35);}50%{box-shadow:0 0 0 7px rgba(249,168,212,.1);}}
.ai-hero h1{font-size:clamp(30px,5.5vw,56px);font-weight:900;color:#fff;margin-bottom:20px;line-height:1.08;letter-spacing:-.02em;}
.ai-hero h1 .hi{background:linear-gradient(90deg,#f9a8d4,#c4b5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ai-hero p.sub{font-size:17px;color:rgba(255,255,255,.78);line-height:1.7;max-width:520px;margin-bottom:36px;}
.ai-bc{display:flex;align-items:center;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 28px;}
.ai-bc li{font-size:13px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px;}
.ai-bc li::after{content:'/';opacity:.45;}.ai-bc li:last-child::after{display:none;}
.ai-bc a{color:rgba(255,255,255,.85);text-decoration:none;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px;}
.btn-h-main{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;background:#fff;color:var(--p1);font-size:15px;font-weight:700;border-radius:50px;text-decoration:none;box-shadow:0 4px 24px rgba(0,0,0,.22);transition:var(--tr);}
.btn-h-main:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.28);color:var(--p1);}
.btn-h-ghost{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:15px;font-weight:600;border-radius:50px;text-decoration:none;transition:var(--tr);}
.btn-h-ghost:hover{background:rgba(255,255,255,.18);color:#fff;}
.hero-img-panel{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;}
.hero-img-panel .img-card{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:24px 24px 0 0;padding:28px 28px 0;box-shadow:var(--sh-xl);overflow:hidden;animation:h-rise .9s var(--ease) both;max-width:420px;width:100%;}
@keyframes h-rise{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
.hero-img-panel .img-card img{width:100%;display:block;filter:drop-shadow(0 -10px 30px rgba(0,0,0,.2));animation:h-float 5s ease-in-out infinite;}
@keyframes h-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.fchip{position:absolute;z-index:5;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:14px;padding:10px 16px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;animation:fc-bob 4s ease-in-out infinite;}
.fchip.c1{top:12%;right:-4%;animation-delay:.6s;}.fchip.c2{bottom:30%;left:-6%;animation-delay:1.2s;}
@keyframes fc-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.fchip .ci{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;}
.fchip .ct strong{display:block;font-size:16px;font-weight:800;color:var(--t1);line-height:1;}
.fchip .ct span{font-size:11px;color:var(--t3);}
.hero-wave{position:relative;z-index:4;line-height:0;margin-top:20px;}
.hero-wave svg{display:block;width:100%;}
/* BODY */
.ai-body{padding:80px 0;background:var(--bg1);}
/* labels */
.slbl{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;padding:5px 14px;border-radius:50px;margin-bottom:14px;}
.slbl.purple{background:rgba(124,58,237,.1);color:var(--p1);}
.slbl.pink{background:rgba(236,72,153,.1);color:#ec4899;}
.slbl.green{background:rgba(0,176,155,.1);color:#00b09b;}
.slbl.orange{background:rgba(247,151,30,.1);color:#f7971e;}
.slbl.blue{background:rgba(0,112,243,.1);color:#0070f3;}
/* card */
.pc{background:var(--bg2);border:1px solid var(--ln);border-radius:var(--r);padding:36px;margin-bottom:28px;box-shadow:var(--sh-sm);transition:var(--tr);position:relative;overflow:hidden;}
.pc:hover{box-shadow:var(--sh-md);transform:translateY(-3px);}
.pc .ab{position:absolute;top:0;left:0;width:100%;height:4px;border-radius:var(--r) var(--r) 0 0;}
.pc .ab.purple{background:var(--g-main);}
.pc .ab.green{background:var(--g-green);}
.pc .ab.orange{background:var(--g-orange);}
.pc .ab.blue{background:var(--g-blue);}
.pc h2{font-size:clamp(21px,3vw,28px);font-weight:800;color:var(--t1);margin-bottom:14px;line-height:1.2;}
.pc h3{font-size:clamp(18px,2.5vw,22px);font-weight:700;color:var(--t1);margin-bottom:14px;}
.pc p{font-size:15px;color:var(--t2);line-height:1.78;margin:0;}
.licon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;margin-bottom:20px;}
.licon.purple{background:var(--g-main);box-shadow:0 6px 20px rgba(124,58,237,.3);}
/* feat grid */
.fg2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:12px;}
.fgc{border-radius:var(--rsm);border:1.5px solid var(--ln);padding:24px 20px;background:var(--bg2);transition:var(--tr);position:relative;overflow:hidden;}
.fgc:hover{border-color:transparent;box-shadow:var(--sh-md);}
.fgc.fp{border-top:3px solid var(--p1);}.fgc.fp:hover{background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(167,139,250,.03));}
.fgc.fk{border-top:3px solid #ec4899;}.fgc.fk:hover{background:linear-gradient(135deg,rgba(236,72,153,.04),rgba(249,168,212,.03));}
.fgc.fo{border-top:3px solid #f7971e;}.fgc.fo:hover{background:linear-gradient(135deg,rgba(247,151,30,.04),rgba(255,210,0,.03));}
.fgc.fb{border-top:3px solid #0070f3;}.fgc.fb:hover{background:linear-gradient(135deg,rgba(0,112,243,.04),rgba(0,180,216,.03));}
.fgi{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;background:var(--bg1);transition:var(--tr);}
.fgc.fp .fgi{color:var(--p1);}.fgc.fk .fgi{color:#ec4899;}.fgc.fo .fgi{color:#f7971e;}.fgc.fb .fgi{color:#0070f3;}
.fgc:hover .fgi{transform:scale(1.1) rotate(-4deg);}
.fgc h4{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:8px;}
.fgc p{font-size:13px;color:var(--t3);line-height:1.6;margin:0;}
/* use case list */
.uc-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.uc-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--rsm);border:1px solid var(--ln);background:var(--bg2);transition:var(--tr);}
.uc-row:hover{border-color:var(--p3);box-shadow:0 0 0 3px rgba(167,139,250,.12);transform:translateX(5px);}
.uc-row .uci{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;flex-shrink:0;transition:var(--tr);}
.uc-row:hover .uci{transform:scale(1.1);}
.uc-row .ucb{flex:1;}
.uc-row .ucb h5{font-size:14px;font-weight:700;color:var(--t1);margin:0 0 3px;}
.uc-row .ucb p{font-size:13px;color:var(--t3);margin:0;line-height:1.5;}
.uc-row .uca{font-size:20px;color:var(--ln);transition:var(--tr);}
.uc-row:hover .uca{color:var(--p1);}
/* tech tiles */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.tech-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 10px;border-radius:var(--rsm);border:1px solid var(--ln);background:var(--bg2);transition:var(--tr);cursor:default;}
.tech-tile .ttic{width:46px;height:46px;border-radius:50%;background:var(--bg1);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--p1);transition:var(--tr);}
.tech-tile strong{font-size:13px;font-weight:700;color:var(--t1);}
.tech-tile span{font-size:11px;color:var(--t3);}
.tech-tile:hover{background:var(--g-main);border-color:transparent;box-shadow:0 6px 24px rgba(124,58,237,.25);transform:translateY(-4px);}
.tech-tile:hover .ttic{background:rgba(255,255,255,.22);color:#fff;}
.tech-tile:hover strong,.tech-tile:hover span{color:#fff;}
/* sidebar */
.ai-sb{position:sticky;top:96px;}
.sc{background:var(--bg2);border-radius:var(--r);border:1px solid var(--ln);overflow:hidden;margin-bottom:20px;box-shadow:var(--sh-sm);transition:var(--tr);}
.sc:hover{box-shadow:var(--sh-md);}
.sc .sh{padding:18px 22px;display:flex;align-items:center;gap:12px;color:#fff;}
.sc .sh i{font-size:22px;}.sc .sh h4{margin:0;font-size:16px;font-weight:700;color:#fff;}
.sc .sb2{padding:18px;}
.sh.hm{background:var(--g-main);}.sh.hn{background:var(--g-navy);}.sh.hg{background:var(--g-green);}.sh.ho{background:var(--g-orange);}
/* menu */
.smenu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.smenu a{text-decoration:none;display:block;}
.srow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--rsm);background:var(--bg1);border:1.5px solid transparent;transition:var(--tr);font-size:13px;font-weight:600;color:var(--t1);}
.srow .sri{width:34px;height:34px;border-radius:9px;background:#e8edf5;display:flex;align-items:center;justify-content:center;font-size:17px;color:#5a6ad4;flex-shrink:0;transition:var(--tr);}
.srow span{flex:1;}.srow .sra{font-size:18px;color:var(--ln);transition:var(--tr);}
.srow:hover{background:var(--bg2);border-color:var(--ln);box-shadow:var(--sh-sm);}
.srow:hover .sra{color:var(--p1);transform:translateX(3px);}
.smenu li.cur .srow{background:var(--g-main);color:#fff;border-color:transparent;box-shadow:0 4px 18px rgba(124,58,237,.3);}
.smenu li.cur .sri{background:rgba(255,255,255,.25);color:#fff;}
.smenu li.cur .sra{color:rgba(255,255,255,.8);}
.smenu li.cur .srow span{color:#fff;}
/* stats */
.sstat-list{display:flex;flex-direction:column;gap:10px;}
.sstat{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--rsm);background:var(--bg1);border:1px solid transparent;transition:var(--tr);}
.sstat:hover{background:var(--bg2);border-color:var(--ln);box-shadow:var(--sh-sm);}
.sstat .si2{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;flex-shrink:0;}
.sstat strong{display:block;font-size:22px;font-weight:900;color:var(--t1);line-height:1;margin-bottom:2px;}
.sstat span{font-size:12px;color:var(--t3);}
/* contact */
.scon{text-align:center;}
.scon .scc{width:70px;height:70px;border-radius:50%;background:var(--g-green);display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;margin:0 auto 16px;box-shadow:0 6px 20px rgba(0,176,155,.3);}
.scon h5{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:14px;}
.plink{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:var(--rsm);background:var(--bg1);border:1px solid var(--ln);color:var(--t1);text-decoration:none;font-size:13px;font-weight:600;margin-bottom:8px;transition:var(--tr);}
.plink:last-of-type{margin-bottom:0;}.plink i{color:#00b09b;font-size:16px;transition:var(--tr);}
.plink:hover{background:var(--g-green);color:#fff;border-color:transparent;}.plink:hover i{color:#fff;}
/* downloads */
.sdl{display:flex;flex-direction:column;gap:10px;}
.dlr{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg2);border:1.5px solid var(--ln);border-radius:var(--rsm);text-decoration:none;color:var(--t1);transition:var(--tr);}
.dlr:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.dlr.pdf:hover{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);border-color:transparent;color:#fff;}
.dlr.doc:hover{background:var(--g-main);border-color:transparent;color:#fff;}
.dlr .di2{width:44px;height:44px;border-radius:11px;background:var(--bg1);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;transition:var(--tr);}
.dlr.pdf .di2{color:#ee5a6f;}.dlr.doc .di2{color:var(--p1);}
.dlr:hover .di2{background:rgba(255,255,255,.2);color:#fff;}
.dlr .dt{flex:1;}.dlr .dt strong{display:block;font-size:13px;font-weight:700;}.dlr .dt span{font-size:11px;opacity:.65;}
.dlr .da2{font-size:20px;flex-shrink:0;}
/* CTA */
.ai-cta{background:linear-gradient(135deg,#1a0533,#7c3aed,#ec4899);padding:90px 0;position:relative;overflow:hidden;}
.ai-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 80% 50%,rgba(167,139,250,.22) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 10% 60%,rgba(236,72,153,.18) 0%,transparent 60%);pointer-events:none;}
.ai-cta::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
.ai-cta-in{position:relative;z-index:3;}
.cta-badge2{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:6px 16px;font-size:12px;font-weight:700;color:#fff;margin-bottom:18px;}
.ai-cta h2{font-size:clamp(24px,4.5vw,42px);font-weight:900;color:#fff;margin-bottom:14px;line-height:1.1;}
.ai-cta p{font-size:16px;color:rgba(255,255,255,.78);line-height:1.7;max-width:540px;margin:0;}
.cta-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
.btn-cw{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;background:#fff;color:var(--p1);font-size:15px;font-weight:700;border-radius:50px;text-decoration:none;box-shadow:0 4px 24px rgba(0,0,0,.2);transition:var(--tr);}
.btn-cw:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(0,0,0,.28);color:var(--p1);}
.btn-cg{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:15px;font-weight:600;border-radius:50px;text-decoration:none;transition:var(--tr);}
.btn-cg:hover{background:rgba(255,255,255,.2);color:#fff;}
.cta-stack{display:flex;flex-direction:column;gap:14px;max-width:340px;margin-left:auto;}
.cta-mc{background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:var(--rsm);padding:16px 20px;display:flex;align-items:center;gap:14px;animation:cslide .8s var(--ease) both;}
.cta-mc:nth-child(2){animation-delay:.15s;margin-left:24px;}.cta-mc:nth-child(3){animation-delay:.3s;margin-left:12px;}
@keyframes cslide{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}
.cta-mc .cmci{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex-shrink:0;}
.cta-mc .cmct strong{display:block;font-size:14px;font-weight:700;color:#fff;}
.cta-mc .cmct span{font-size:12px;color:rgba(255,255,255,.7);}
/* responsive */
@media(max-width:991.98px){.ai-sb{position:static;margin-top:34px;}.fg2{grid-template-columns:repeat(2,1fr);}.tech-grid{grid-template-columns:repeat(3,1fr);}.ai-hero{padding:70px 0 0;}.hero-img-panel{display:none;}.cta-stack{display:none;}}
@media(max-width:767.98px){.ai-body{padding:52px 0;}.pc{padding:24px 20px;}.fg2{grid-template-columns:1fr;gap:12px;}.tech-grid{grid-template-columns:repeat(2,1fr);}.ai-cta{padding:60px 0;}.cta-btns{flex-direction:column;}.btn-cw,.btn-cg{justify-content:center;}}
@media(max-width:575.98px){.ai-hero h1{font-size:28px;}.tech-grid{grid-template-columns:repeat(2,1fr);}.hero-ctas{flex-direction:column;}.btn-h-main,.btn-h-ghost{justify-content:center;}}


/* ===================================================================
   Sap Btp - Centralized Styles
   =================================================================== */

:root{--o1:#ea580c;--o2:#f59e0b;--o3:#fb923c;--oh:#431407}
*{box-sizing:border-box;margin:0;padding:0}

/* ── HERO ── */
.btp-hero{position:relative;min-height:92vh;display:flex;align-items:center;background:linear-gradient(135deg,#1c0a00 0%,#431407 35%,#ea580c 70%,#f59e0b 100%);overflow:hidden;padding:100px 0 0}
.btp-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.btp-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:8px 20px;color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.btp-badge .dot{width:8px;height:8px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 0 rgba(251,191,36,.6);animation:btpPulse 2s infinite}
@keyframes btpPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.6)}50%{box-shadow:0 0 0 8px rgba(251,191,36,0)}}
.btp-hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;color:#fff;line-height:1.15;margin-bottom:20px}
.btp-hero h1 .hi{background:linear-gradient(90deg,#fbbf24,#f97316,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.btp-hero p.lead{color:rgba(255,255,255,.82);font-size:1.1rem;line-height:1.75;max-width:540px;margin-bottom:36px}
.btp-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-btp-p{padding:14px 32px;background:linear-gradient(135deg,var(--o1),var(--o2));color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;transition:.3s;box-shadow:0 8px 24px rgba(234,88,12,.4)}
.btn-btp-p:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(234,88,12,.5);color:#fff}
.btn-btp-o{padding:14px 32px;background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.35);border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;transition:.3s;backdrop-filter:blur(8px)}
.btn-btp-o:hover{background:rgba(255,255,255,.2);transform:translateY(-3px);color:#fff}

/* ── HERO IMAGE PANEL ── */
.btp-img-wrap{position:relative;padding:20px}
.btp-img-card{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15)}
.btp-img-card img{width:100%;display:block}
.btp-img-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(234,88,12,.2),rgba(245,158,11,.1));z-index:1}

/* Float chips */
.btp-chip{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-radius:16px;padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.2);z-index:10;animation:chipBob 3s ease-in-out infinite}
.btp-chip-1{top:18%;left:-30px;animation-delay:0s}
.btp-chip-2{bottom:18%;right:-20px;animation-delay:1.5s}
@keyframes chipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.btp-chip i{font-size:1.4rem;color:var(--o1)}
.btp-chip .cl{display:flex;flex-direction:column}
.btp-chip .cv{font-size:.85rem;font-weight:800;color:#1f2937}
.btp-chip .ct{font-size:.7rem;color:#6b7280}

/* ── WAVE ── */
.btp-wave{position:absolute;bottom:0;left:0;width:100%;line-height:0;z-index:2}
.btp-wave svg{display:block;width:100%}

/* ── BODY ── */
.btp-body{padding:80px 0;background:#f8fafc}
.btp-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
@media(max-width:991.98px){.btp-layout{grid-template-columns:1fr}}

/* ── SECTION LABEL ── */
.sec-label{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(234,88,12,.1),rgba(245,158,11,.1));border:1px solid rgba(234,88,12,.25);border-radius:50px;padding:6px 18px;font-size:.75rem;font-weight:700;color:var(--o1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.sec-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#1f2937;line-height:1.25;margin-bottom:12px}
.sec-sub{color:#6b7280;font-size:1rem;line-height:1.7;margin-bottom:40px}

/* ── BTP PLATFORM PILLARS ── */
.pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:48px}
@media(max-width:575.98px){.pillar-grid{grid-template-columns:1fr}}
.pillar-card{background:#fff;border-radius:20px;padding:28px;border:1px solid #e5e7eb;transition:.35s;position:relative;overflow:hidden}
.pillar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
.pillar-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.1)}
.pillar-card .pico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:16px;background:var(--ibg)}
.pillar-card h4{font-size:1rem;font-weight:700;color:#1f2937;margin-bottom:8px}
.pillar-card p{font-size:.87rem;color:#6b7280;line-height:1.6}

/* ── BTP SERVICES LIST ── */
.bsvc-list{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.bsvc-row{background:#fff;border-radius:16px;padding:22px 24px;border:1px solid #e5e7eb;display:flex;align-items:flex-start;gap:18px;transition:.3s;cursor:default}
.bsvc-row:hover{border-color:var(--o3);box-shadow:0 8px 32px rgba(234,88,12,.1);transform:translateX(6px)}
.bsvc-num{width:40px;height:40px;min-width:40px;border-radius:10px;background:linear-gradient(135deg,var(--o1),var(--o2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.85rem}
.bsvc-body h5{font-size:.95rem;font-weight:700;color:#1f2937;margin-bottom:4px}
.bsvc-body p{font-size:.85rem;color:#6b7280;line-height:1.5}

/* ── TOOLS GRID ── */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
@media(max-width:575.98px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
.tool-tile{background:#fff;border-radius:16px;padding:22px 18px;text-align:center;border:1px solid #e5e7eb;transition:.35s;cursor:default}
.tool-tile:hover{border-color:var(--o1);background:linear-gradient(135deg,rgba(234,88,12,.06),rgba(245,158,11,.06));transform:translateY(-4px);box-shadow:0 12px 40px rgba(234,88,12,.15)}
.tool-tile i{font-size:2rem;color:var(--o1);margin-bottom:10px;display:block}
.tool-tile span{font-size:.82rem;font-weight:700;color:#374151}

/* ── WHY BTP ── */
.why-btp{background:linear-gradient(135deg,#431407 0%,#7c2d12 100%);border-radius:24px;padding:48px;margin-bottom:48px;position:relative;overflow:hidden}
.why-btp::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(245,158,11,.15)}
.why-btp h3{font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:8px}
.why-btp p.sub{color:rgba(255,255,255,.7);margin-bottom:28px;font-size:.95rem}
.why-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:575.98px){.why-list{grid-template-columns:1fr}}
.why-item{display:flex;align-items:flex-start;gap:12px}
.why-item .wi{width:36px;height:36px;min-width:36px;border-radius:10px;background:rgba(251,191,36,.2);display:flex;align-items:center;justify-content:center;color:#fbbf24;font-size:1.1rem}
.why-item .wt h6{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:3px}
.why-item .wt p{font-size:.8rem;color:rgba(255,255,255,.65);line-height:1.5}

/* ── CTA ── */
.btp-cta{background:linear-gradient(135deg,var(--o1) 0%,var(--o2) 100%);border-radius:24px;padding:56px 48px;text-align:center;position:relative;overflow:hidden;margin-top:8px}
.btp-cta::before{content:'';position:absolute;top:-80px;left:-80px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.1)}
.btp-cta::after{content:'';position:absolute;bottom:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.btp-cta h2{font-size:2rem;font-weight:800;color:#fff;margin-bottom:12px;position:relative;z-index:1}
.btp-cta p{color:rgba(255,255,255,.85);margin-bottom:32px;font-size:1rem;position:relative;z-index:1}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta-btns .cb-w{padding:14px 32px;background:#fff;color:var(--o1);border-radius:12px;font-weight:700;text-decoration:none;transition:.3s;font-size:.95rem}
.cta-btns .cb-w:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.cta-btns .cb-t{padding:14px 32px;background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;font-weight:600;text-decoration:none;transition:.3s;font-size:.95rem}
.cta-btns .cb-t:hover{background:rgba(255,255,255,.25);transform:translateY(-3px)}

/* ── SIDEBAR ── */
.btp-sidebar{display:flex;flex-direction:column;gap:20px}
.sb-card{background:#fff;border-radius:20px;padding:24px;border:1px solid #e5e7eb;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.sb-card h5{font-size:.9rem;font-weight:700;color:#1f2937;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f3f4f6}
.sb-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#6b7280;font-size:.875rem;text-decoration:none;transition:.25s;margin-bottom:4px}
.sb-nav a:hover,.sb-nav a.active{background:linear-gradient(135deg,rgba(234,88,12,.1),rgba(245,158,11,.08));color:var(--o1);font-weight:600}
.sb-nav a.active{border-left:3px solid var(--o1);padding-left:9px}
.sb-nav a i{font-size:1rem;width:20px;text-align:center}
.sb-stat{display:flex;flex-direction:column;gap:14px}
.sb-stat-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f3f4f6}
.sb-stat-item:last-child{border-bottom:none}
.sb-stat-item .sl{font-size:.82rem;color:#6b7280}
.sb-stat-item .sv{font-size:1rem;font-weight:800;color:var(--o1)}
.sb-contact a{display:flex;align-items:center;gap:10px;color:#374151;font-size:.85rem;text-decoration:none;margin-bottom:12px;transition:.2s}
.sb-contact a:hover{color:var(--o1)}
.sb-contact i{font-size:1.1rem;color:var(--o1)}
.sb-dl a{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:10px;color:#374151;font-size:.85rem;text-decoration:none;transition:.25s;margin-bottom:8px}
.sb-dl a:hover{border-color:var(--o1);color:var(--o1);background:rgba(234,88,12,.04)}
.sb-dl i{color:var(--o1);font-size:1rem}
.sb-cta-card{background:linear-gradient(135deg,var(--o1),var(--o2));border-radius:20px;padding:28px 24px;text-align:center;color:#fff}
.sb-cta-card i{font-size:2.5rem;margin-bottom:12px;display:block}
.sb-cta-card h5{font-size:1rem;font-weight:700;margin-bottom:8px;color:#fff}
.sb-cta-card p{font-size:.82rem;color:rgba(255,255,255,.8);margin-bottom:16px;line-height:1.5}
.sb-cta-card a{display:inline-block;padding:10px 24px;background:#fff;color:var(--o1);border-radius:10px;font-weight:700;font-size:.85rem;text-decoration:none;transition:.25s}
.sb-cta-card a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}

/* ── STICKY SIDEBAR ── */
@media(min-width:992px){.btp-sidebar{position:sticky;top:96px}}

/* ── RESPONSIVE ── */
@media(max-width:767.98px){
  .btp-hero{min-height:auto;padding:120px 0 80px}
  .btp-img-wrap{display:none}
  .btp-chip{display:none}
  .why-btp{padding:32px 24px}
  .btp-cta{padding:40px 24px}
}


/* ===================================================================
   Sap Analytics Cloud - Centralized Styles
   =================================================================== */

:root{--g1:#059669;--g2:#0d9488;--g3:#34d399;--gh:#064e3b}
*{box-sizing:border-box;margin:0;padding:0}

/* ── HERO ── */
.sac-hero{position:relative;min-height:92vh;display:flex;align-items:center;background:linear-gradient(135deg,#022c22 0%,#064e3b 35%,#059669 70%,#0d9488 100%);overflow:hidden;padding:100px 0 0}
.sac-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.sac-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:8px 20px;color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.sac-badge .dot{width:8px;height:8px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 0 0 rgba(110,231,183,.6);animation:sacPulse 2s infinite}
@keyframes sacPulse{0%,100%{box-shadow:0 0 0 0 rgba(110,231,183,.6)}50%{box-shadow:0 0 0 8px rgba(110,231,183,0)}}
.sac-hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;color:#fff;line-height:1.15;margin-bottom:20px}
.sac-hero h1 .hi{background:linear-gradient(90deg,#6ee7b7,#34d399,#2dd4bf);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sac-hero p.lead{color:rgba(255,255,255,.82);font-size:1.1rem;line-height:1.75;max-width:540px;margin-bottom:36px}
.sac-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-sac-p{padding:14px 32px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;transition:.3s;box-shadow:0 8px 24px rgba(5,150,105,.4)}
.btn-sac-p:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(5,150,105,.5);color:#fff}
.btn-sac-o{padding:14px 32px;background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.35);border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;transition:.3s;backdrop-filter:blur(8px)}
.btn-sac-o:hover{background:rgba(255,255,255,.2);transform:translateY(-3px);color:#fff}

/* ── HERO IMAGE ── */
.sac-img-wrap{position:relative;padding:20px}
.sac-img-card{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15)}
.sac-img-card img{width:100%;display:block}
.sac-img-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,150,105,.2),rgba(13,148,136,.1));z-index:1}
.sac-chip{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-radius:16px;padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.2);z-index:10;animation:chipBob 3s ease-in-out infinite}
.sac-chip-1{top:18%;left:-30px;animation-delay:0s}
.sac-chip-2{bottom:18%;right:-20px;animation-delay:1.5s}
@keyframes chipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.sac-chip i{font-size:1.4rem;color:var(--g1)}
.sac-chip .cl{display:flex;flex-direction:column}
.sac-chip .cv{font-size:.85rem;font-weight:800;color:#1f2937}
.sac-chip .ct{font-size:.7rem;color:#6b7280}

/* ── WAVE ── */
.sac-wave{position:absolute;bottom:0;left:0;width:100%;line-height:0;z-index:2}
.sac-wave svg{display:block;width:100%}

/* ── BODY ── */
.sac-body{padding:80px 0;background:#f8fafc}
.sac-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
@media(max-width:991.98px){.sac-layout{grid-template-columns:1fr}}

/* ── SECTION LABEL ── */
.sec-label-g{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(5,150,105,.1),rgba(13,148,136,.1));border:1px solid rgba(5,150,105,.25);border-radius:50px;padding:6px 18px;font-size:.75rem;font-weight:700;color:var(--g1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.sec-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#1f2937;line-height:1.25;margin-bottom:12px}
.sec-sub{color:#6b7280;font-size:1rem;line-height:1.7;margin-bottom:40px}

/* ── 3 PILLARS ── */
.pillar3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
@media(max-width:767.98px){.pillar3{grid-template-columns:1fr}}
.p3-card{background:#fff;border-radius:20px;padding:28px 24px;border:1px solid #e5e7eb;transition:.35s;position:relative;overflow:hidden;text-align:center}
.p3-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--pg)}
.p3-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.1)}
.p3-card .pico{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 16px;background:var(--ibg)}
.p3-card h4{font-size:1.05rem;font-weight:700;color:#1f2937;margin-bottom:8px}
.p3-card p{font-size:.85rem;color:#6b7280;line-height:1.6}
.p3-card .p3-tag{display:inline-block;margin-top:12px;padding:4px 12px;border-radius:50px;font-size:.72rem;font-weight:700;color:#fff;background:var(--tbg)}

/* ── CAPABILITIES ── */
.cap-list{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.cap-row{background:#fff;border-radius:16px;padding:22px 24px;border:1px solid #e5e7eb;display:flex;align-items:flex-start;gap:18px;transition:.3s}
.cap-row:hover{border-color:var(--g3);box-shadow:0 8px 32px rgba(5,150,105,.1);transform:translateX(6px)}
.cap-ico{width:44px;height:44px;min-width:44px;border-radius:12px;background:linear-gradient(135deg,var(--g1),var(--g2));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem}
.cap-body h5{font-size:.95rem;font-weight:700;color:#1f2937;margin-bottom:4px}
.cap-body p{font-size:.85rem;color:#6b7280;line-height:1.5}
.cap-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cap-tags span{background:rgba(5,150,105,.08);color:var(--g1);border-radius:50px;padding:3px 10px;font-size:.72rem;font-weight:600}

/* ── SAC SERVICES 2x3 ── */
.sac-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:48px}
@media(max-width:575.98px){.sac-svc-grid{grid-template-columns:1fr}}
.sac-svc-card{background:#fff;border-radius:16px;padding:22px 20px;border:1px solid #e5e7eb;transition:.35s}
.sac-svc-card:hover{border-color:var(--g1);background:linear-gradient(135deg,rgba(5,150,105,.04),rgba(13,148,136,.04));transform:translateY(-4px);box-shadow:0 12px 40px rgba(5,150,105,.12)}
.sac-svc-card i{font-size:1.8rem;color:var(--g1);margin-bottom:10px;display:block}
.sac-svc-card h5{font-size:.9rem;font-weight:700;color:#1f2937;margin-bottom:6px}
.sac-svc-card p{font-size:.82rem;color:#6b7280;line-height:1.5}

/* ── PLANNING USE CASES ── */
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
@media(max-width:767.98px){.use-grid{grid-template-columns:1fr}}
.use-card{background:#fff;border-radius:16px;padding:22px 18px;border:1px solid #e5e7eb;transition:.35s;text-align:center}
.use-card:hover{border-color:var(--g2);transform:translateY(-4px);box-shadow:0 12px 32px rgba(13,148,136,.12)}
.use-card .num{font-size:2.2rem;font-weight:900;background:linear-gradient(135deg,var(--g1),var(--g2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:8px}
.use-card h5{font-size:.88rem;font-weight:700;color:#1f2937;margin-bottom:4px}
.use-card p{font-size:.78rem;color:#6b7280;line-height:1.5}

/* ── DEMO BANNER ── */
.demo-banner{background:linear-gradient(135deg,#064e3b 0%,#065f46 100%);border-radius:24px;padding:48px;margin-bottom:48px;position:relative;overflow:hidden;display:flex;align-items:center;gap:40px}
@media(max-width:767.98px){.demo-banner{flex-direction:column;text-align:center;padding:32px 24px}}
.demo-banner::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(52,211,153,.1)}
.demo-banner .di{width:80px;height:80px;min-width:80px;border-radius:20px;background:rgba(110,231,183,.15);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#6ee7b7}
.demo-banner .dt h3{font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:8px}
.demo-banner .dt p{color:rgba(255,255,255,.75);font-size:.9rem;line-height:1.6}
.demo-banner .da{margin-left:auto}
@media(max-width:767.98px){.demo-banner .da{margin:0 auto}}
.demo-banner .da a{display:inline-block;padding:12px 28px;background:linear-gradient(135deg,var(--g3),var(--g2));color:#fff;border-radius:12px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.3s}
.demo-banner .da a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(5,150,105,.4)}

/* ── CTA ── */
.sac-cta{background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 100%);border-radius:24px;padding:56px 48px;text-align:center;position:relative;overflow:hidden}
.sac-cta::before{content:'';position:absolute;top:-80px;left:-80px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.08)}
.sac-cta::after{content:'';position:absolute;bottom:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
.sac-cta h2{font-size:2rem;font-weight:800;color:#fff;margin-bottom:12px;position:relative;z-index:1}
.sac-cta p{color:rgba(255,255,255,.85);margin-bottom:32px;font-size:1rem;position:relative;z-index:1}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta-btns .cb-w{padding:14px 32px;background:#fff;color:var(--g1);border-radius:12px;font-weight:700;text-decoration:none;transition:.3s;font-size:.95rem}
.cta-btns .cb-w:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.cta-btns .cb-t{padding:14px 32px;background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;font-weight:600;text-decoration:none;transition:.3s;font-size:.95rem}
.cta-btns .cb-t:hover{background:rgba(255,255,255,.25);transform:translateY(-3px)}

/* ── SIDEBAR ── */
.sac-sidebar{display:flex;flex-direction:column;gap:20px}
.sb-card{background:#fff;border-radius:20px;padding:24px;border:1px solid #e5e7eb;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.sb-card h5{font-size:.9rem;font-weight:700;color:#1f2937;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f3f4f6}
.sb-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#6b7280;font-size:.875rem;text-decoration:none;transition:.25s;margin-bottom:4px}
.sb-nav a:hover,.sb-nav a.active{background:linear-gradient(135deg,rgba(5,150,105,.1),rgba(13,148,136,.08));color:var(--g1);font-weight:600}
.sb-nav a.active{border-left:3px solid var(--g1);padding-left:9px}
.sb-nav a i{font-size:1rem;width:20px;text-align:center}
.sb-stat{display:flex;flex-direction:column;gap:14px}
.sb-stat-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f3f4f6}
.sb-stat-item:last-child{border-bottom:none}
.sb-stat-item .sl{font-size:.82rem;color:#6b7280}
.sb-stat-item .sv{font-size:1rem;font-weight:800;color:var(--g1)}
.sb-contact a{display:flex;align-items:center;gap:10px;color:#374151;font-size:.85rem;text-decoration:none;margin-bottom:12px;transition:.2s}
.sb-contact a:hover{color:var(--g1)}
.sb-contact i{font-size:1.1rem;color:var(--g1)}
.sb-dl a{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:10px;color:#374151;font-size:.85rem;text-decoration:none;transition:.25s;margin-bottom:8px}
.sb-dl a:hover{border-color:var(--g1);color:var(--g1);background:rgba(5,150,105,.04)}
.sb-dl i{color:var(--g1);font-size:1rem}
.sb-cta-card{background:linear-gradient(135deg,var(--g1),var(--g2));border-radius:20px;padding:28px 24px;text-align:center;color:#fff}
.sb-cta-card i{font-size:2.5rem;margin-bottom:12px;display:block}
.sb-cta-card h5{font-size:1rem;font-weight:700;margin-bottom:8px;color:#fff}
.sb-cta-card p{font-size:.82rem;color:rgba(255,255,255,.8);margin-bottom:16px;line-height:1.5}
.sb-cta-card a{display:inline-block;padding:10px 24px;background:#fff;color:var(--g1);border-radius:10px;font-weight:700;font-size:.85rem;text-decoration:none;transition:.25s}
.sb-cta-card a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}

@media(min-width:992px){.sac-sidebar{position:sticky;top:96px}}
@media(max-width:767.98px){
  .sac-hero{min-height:auto;padding:120px 0 80px}
  .sac-img-wrap{display:none}
  .sac-chip{display:none}
  .demo-banner{padding:32px 24px}
  .sac-cta{padding:40px 24px}
}


/* ===================================================================
   Sap Joule Ai - Centralized Styles
   =================================================================== */

:root{--v1:#6d28d9;--v2:#db2777;--v3:#a78bfa;--vh:#2e1065}
*{box-sizing:border-box;margin:0;padding:0}

/* ════════════════════════════════════════════════════════════════
   SAP JOULE & AI v2 — Premium Enterprise AI Landing Page
   ════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root{
  --jv-p1:#7C3AED;--jv-p2:#9333EA;--jv-p3:#A855F7;
  --jv-pink:#EC4899;--jv-cyan:#06B6D4;--jv-violet:#8B5CF6;
  --jv-dark:#0F172A;--jv-dark2:#111827;--jv-bg:#F8FAFC;
  --jv-ease:cubic-bezier(.4,0,.2,1);--jv-tr:.3s var(--jv-ease);
}

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes jvOrbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.08)}66%{transform:translate(-20px,20px) scale(.94)}}
@keyframes jvPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.55)}60%{box-shadow:0 0 0 10px rgba(124,58,237,0)}}
@keyframes jvChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes jvGradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes jvSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes jvFillProg{from{width:0}to{width:94%}}
@keyframes jvLivePulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes jvRingDraw{from{stroke-dashoffset:213.6}to{stroke-dashoffset:var(--ring-to)}}
@keyframes jvImplIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes jvAurora{0%,100%{opacity:.6;transform:translate(0,0) scale(1)}33%{opacity:.8;transform:translate(40px,-30px) scale(1.1)}66%{opacity:.5;transform:translate(-25px,20px) scale(.9)}}

/* ═══════════════════════════
   HERO
   ═══════════════════════════ */
.jv2-hero{position:relative;min-height:96vh;display:flex;align-items:center;background:linear-gradient(135deg,#050714 0%,#0F172A 30%,#1e0a4a 60%,#2d0f6b 85%,#3b0764 100%);overflow:hidden;padding:110px 0 60px}
.jv2-aurora{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 20% 40%,rgba(124,58,237,.18),transparent),radial-gradient(ellipse 60% 40% at 80% 60%,rgba(236,72,153,.12),transparent),radial-gradient(ellipse 40% 30% at 50% 20%,rgba(6,182,212,.1),transparent);animation:jvAurora 12s ease-in-out infinite;z-index:0}
.jv2-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;z-index:0}
.jv2-orb{position:absolute;border-radius:50%;filter:blur(100px);animation:jvOrbFloat 10s ease-in-out infinite;z-index:0}
.jv2-orb-1{width:500px;height:500px;background:rgba(124,58,237,.25);top:-150px;right:-100px;animation-delay:0s}
.jv2-orb-2{width:350px;height:350px;background:rgba(236,72,153,.2);bottom:-100px;left:5%;animation-delay:4s}
.jv2-orb-3{width:250px;height:250px;background:rgba(6,182,212,.12);top:35%;left:38%;animation-delay:7s}
.jv2-hero-row{position:relative;z-index:2}

/* Badge */
.jv2-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:8px 20px;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.jv2-badge-dot{width:8px;height:8px;border-radius:50%;background:#c4b5fd;animation:jvPulse 2.2s infinite}

/* Heading */
.jv2-h1{font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:900;color:#fff;line-height:1.08;margin-bottom:22px;letter-spacing:-.02em}
.jv2-grad-text{background:linear-gradient(135deg,#c4b5fd 0%,#f9a8d4 40%,#67e8f9 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:jvGradFlow 4s linear infinite}

/* Lead */
.jv2-hero-lead{color:rgba(255,255,255,.78);font-size:1.1rem;line-height:1.8;max-width:520px;margin-bottom:36px}

/* Buttons */
.jv2-hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.jv2-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,#7C3AED,#9333EA);color:#fff;border-radius:14px;font-weight:700;font-size:.95rem;text-decoration:none;transition:var(--jv-tr);box-shadow:0 8px 28px rgba(124,58,237,.5)}
.jv2-btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(124,58,237,.65);color:#fff;background:linear-gradient(135deg,#6d28d9,#7C3AED)}
.jv2-btn-glass{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.3);border-radius:14px;font-weight:600;font-size:.95rem;text-decoration:none;transition:var(--jv-tr);backdrop-filter:blur(10px)}
.jv2-btn-glass:hover{background:rgba(255,255,255,.18);transform:translateY(-3px);color:#fff}

/* Trust badges */
.jv2-trust-row{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:32px}
.jv2-trust-row span{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.65);font-size:.82rem;font-weight:500}
.jv2-trust-row i{color:#a78bfa;font-size:.9rem}

/* Stats */
.jv2-stats-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.jv2-stat{text-align:center}
.jv2-stat-num{font-size:1.8rem;font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em}
.jv2-stat-lbl{display:block;font-size:.75rem;color:rgba(255,255,255,.55);font-weight:500;margin-top:4px}
.jv2-stat-div{width:1px;height:36px;background:rgba(255,255,255,.2)}

/* ── Hero Visual (right) ── */
.jv2-visual-wrap{position:relative;padding:20px 20px 20px 40px}
.jv2-glow-ring{position:absolute;top:50%;left:50%;width:380px;height:380px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(124,58,237,.3),transparent,rgba(236,72,153,.2),transparent);animation:jvSpin 8s linear infinite;z-index:0;filter:blur(2px)}

/* Dashboard card */
.jv2-dashboard{position:relative;z-index:2;background:rgba(15,23,42,.8);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1);transition:var(--jv-tr)}
.jv2-dashboard:hover{transform:translateY(-4px);box-shadow:0 50px 120px rgba(0,0,0,.8),0 0 60px rgba(124,58,237,.15)}
.jv2-dash-header{display:flex;align-items:center;gap:10px;padding:14px 18px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.jv2-dash-dots{display:flex;gap:6px}
.jv2-dash-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.jv2-dash-dots span:first-child{background:#ef4444}
.jv2-dash-dots span:nth-child(2){background:#f59e0b}
.jv2-dash-dots span:last-child{background:#22c55e}
.jv2-dash-title{flex:1;text-align:center;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;gap:6px}
.jv2-dash-title i{color:#a78bfa}
.jv2-dash-live{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:#4ade80;letter-spacing:.04em}
.jv2-live-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:jvLivePulse 1.5s infinite}
.jv2-dash-body{padding:18px}

/* Chat messages */
.jv2-chat-msg{display:flex;margin-bottom:12px}
.jv2-chat-user{justify-content:flex-end}
.jv2-chat-user span{background:linear-gradient(135deg,rgba(124,58,237,.6),rgba(147,51,234,.5));color:rgba(255,255,255,.9);padding:9px 14px;border-radius:16px 16px 4px 16px;font-size:.8rem;max-width:80%;line-height:1.5}
.jv2-chat-ai{gap:10px;align-items:flex-start}
.jv2-ai-avatar{width:30px;height:30px;min-width:30px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#EC4899);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff}
.jv2-ai-reply{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:4px 16px 16px 16px;padding:9px 14px;font-size:.8rem;color:rgba(255,255,255,.85);line-height:1.5;max-width:80%}
.jv2-ai-name{display:block;font-size:.68rem;font-weight:700;color:#a78bfa;margin-bottom:3px}

/* Metric mini cards */
.jv2-dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.jv2-dm-card{border-radius:12px;padding:10px 8px;text-align:center}
.jv2-dm-purple{background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.3)}
.jv2-dm-pink{background:rgba(236,72,153,.2);border:1px solid rgba(236,72,153,.3)}
.jv2-dm-cyan{background:rgba(6,182,212,.2);border:1px solid rgba(6,182,212,.3)}
.jv2-dm-v{display:block;font-size:.95rem;font-weight:800;color:#fff;line-height:1}
.jv2-dm-l{display:block;font-size:.67rem;color:rgba(255,255,255,.55);margin-top:2px}

/* Progress bar */
.jv2-dash-prog{margin-top:14px}
.jv2-dp-label{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.55);margin-bottom:5px}
.jv2-dp-bar{height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.jv2-dp-fill{height:100%;width:0;background:linear-gradient(90deg,#7C3AED,#EC4899);border-radius:2px;animation:jvFillProg 1.8s ease-out .8s forwards}

/* Floating chips */
.jv2-float-chip{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-radius:16px;padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:10}
.jv2-chip-tl{top:10%;left:-30px;animation:jvChipFloat 3.5s ease-in-out infinite}
.jv2-chip-br{bottom:12%;right:-20px;animation:jvChipFloat 3.5s ease-in-out 1.8s infinite}
.jv2-float-chip i{font-size:1.4rem;color:#7C3AED}
.jv2-float-chip div{display:flex;flex-direction:column}
.jv2-fc-v{font-size:.83rem;font-weight:800;color:#111827;line-height:1.2}
.jv2-fc-l{font-size:.7rem;color:#6b7280}

/* Wave divider */
.jv2-hero-wave{position:absolute;bottom:0;left:0;width:100%;line-height:0;z-index:3}
.jv2-hero-wave svg{display:block;width:100%}

/* ═══════════════════════════
   BODY / LAYOUT
   ═══════════════════════════ */
.jv2-body{padding:80px 0 100px;background:#f8fafc}
.jv2-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
@media(max-width:991.98px){.jv2-layout{grid-template-columns:1fr}}

/* Section header shared */
.jv2-sec-hdr{margin-bottom:36px}
.jv2-sec-label{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(147,51,234,.06));border:1px solid rgba(124,58,237,.2);border-radius:50px;padding:6px 16px;font-size:.73rem;font-weight:700;color:#7C3AED;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.jv2-sec-label-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.85)}
.jv2-sec-title{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:900;color:#0F172A;line-height:1.2;margin-bottom:12px;letter-spacing:-.02em}
.jv2-sec-sub{color:#64748b;font-size:1rem;line-height:1.75;margin-bottom:0;max-width:580px}

/* ═══════════════════════════
   WHAT IS JOULE
   ═══════════════════════════ */
.jv2-what{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:center;background:#fff;border-radius:28px;padding:48px;border:1px solid #e2e8f0;margin-bottom:64px;box-shadow:0 4px 24px rgba(0,0,0,.05);overflow:hidden;position:relative}
.jv2-what::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(124,58,237,.06),transparent);border-radius:50%}
@media(max-width:767.98px){.jv2-what{grid-template-columns:1fr;gap:28px;padding:28px}}

.jv2-what-visual{position:relative;width:180px;height:180px;margin:0 auto}
.jv2-what-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}
.jv2-what-ico{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#7C3AED,#9333EA);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;box-shadow:0 12px 32px rgba(124,58,237,.4)}
.jv2-what-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px solid rgba(124,58,237,.2);transform:translate(-50%,-50%)}
.jv2-wr-1{width:110px;height:110px;animation:jvSpin 12s linear infinite}
.jv2-wr-2{width:155px;height:155px;border-style:dashed;animation:jvSpin 20s linear reverse infinite;border-color:rgba(236,72,153,.15)}
.jv2-what-node{position:absolute;width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 4px 12px rgba(0,0,0,.1);color:#7C3AED}
.jv2-wn-1{top:0;left:50%;transform:translateX(-50%)}
.jv2-wn-2{right:0;top:50%;transform:translateY(-50%)}
.jv2-wn-3{bottom:0;left:50%;transform:translateX(-50%)}
.jv2-wn-4{left:0;top:50%;transform:translateY(-50%)}

.jv2-what-content h2{margin-bottom:12px}
.jv2-what-content p{color:#475569;font-size:.95rem;line-height:1.8;margin-bottom:14px}

/* Feature pills */
.jv2-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.jv2-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:50px;font-size:.78rem;font-weight:700;background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(147,51,234,.06));color:#7C3AED;border:1px solid rgba(124,58,237,.18);transition:var(--jv-tr);cursor:default}
.jv2-pill:hover{background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(147,51,234,.12));transform:translateY(-2px);box-shadow:0 4px 12px rgba(124,58,237,.15)}
.jv2-pill i{font-size:.8rem}

/* ═══════════════════════════
   CAPABILITY CARDS
   ═══════════════════════════ */
.jv2-cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:64px}
@media(max-width:575.98px){.jv2-cap-grid{grid-template-columns:1fr}}

.jv2-cap-card{position:relative;background:#fff;border-radius:24px;padding:32px;border:1px solid #e2e8f0;transition:var(--jv-tr);overflow:hidden;cursor:default}
.jv2-cap-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.1)}
.jv2-cap-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;filter:blur(40px);opacity:0;transition:var(--jv-tr)}
.jv2-cap-card:hover .jv2-cap-glow{opacity:1}

.jv2-c-purple .jv2-cap-glow{background:rgba(124,58,237,.25)}
.jv2-c-pink .jv2-cap-glow{background:rgba(236,72,153,.25)}
.jv2-c-cyan .jv2-cap-glow{background:rgba(6,182,212,.25)}
.jv2-c-violet .jv2-cap-glow{background:rgba(139,92,246,.25)}

.jv2-cap-ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px;transition:var(--jv-tr)}
.jv2-c-purple .jv2-cap-ico{background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(147,51,234,.08));color:#7C3AED}
.jv2-c-pink .jv2-cap-ico{background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(244,114,182,.08));color:#EC4899}
.jv2-c-cyan .jv2-cap-ico{background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(34,211,238,.08));color:#06B6D4}
.jv2-c-violet .jv2-cap-ico{background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(167,139,250,.08));color:#8B5CF6}
.jv2-cap-card:hover .jv2-cap-ico{transform:scale(1.1)}
.jv2-c-purple:hover .jv2-cap-ico{background:linear-gradient(135deg,#7C3AED,#9333EA);color:#fff;box-shadow:0 8px 24px rgba(124,58,237,.4)}
.jv2-c-pink:hover .jv2-cap-ico{background:linear-gradient(135deg,#EC4899,#f472b6);color:#fff;box-shadow:0 8px 24px rgba(236,72,153,.4)}
.jv2-c-cyan:hover .jv2-cap-ico{background:linear-gradient(135deg,#06B6D4,#22d3ee);color:#fff;box-shadow:0 8px 24px rgba(6,182,212,.4)}
.jv2-c-violet:hover .jv2-cap-ico{background:linear-gradient(135deg,#8B5CF6,#a78bfa);color:#fff;box-shadow:0 8px 24px rgba(139,92,246,.4)}

.jv2-cap-card h4{font-size:1.05rem;font-weight:800;color:#0F172A;margin-bottom:10px}
.jv2-cap-card p{font-size:.88rem;color:#64748b;line-height:1.65;margin-bottom:14px}
.jv2-cap-tag{display:inline-block;padding:4px 12px;border-radius:50px;font-size:.72rem;font-weight:700;background:#f1f5f9;color:#475569}
.jv2-cap-arrow{position:absolute;bottom:20px;right:20px;width:32px;height:32px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#94a3b8;transition:var(--jv-tr)}
.jv2-cap-card:hover .jv2-cap-arrow{background:linear-gradient(135deg,#7C3AED,#9333EA);color:#fff;border-color:transparent;transform:translate(2px,-2px)}

/* ═══════════════════════════
   ECO GRID
   ═══════════════════════════ */
.jv2-eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:64px}
@media(max-width:767.98px){.jv2-eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.jv2-eco-grid{grid-template-columns:1fr}}

.jv2-eco-card{position:relative;background:#fff;border-radius:20px;padding:24px 18px;border:1px solid #e2e8f0;text-align:center;transition:var(--jv-tr);overflow:hidden}
.jv2-eco-card:hover{border-color:rgba(124,58,237,.35);transform:translateY(-6px);box-shadow:0 16px 48px rgba(124,58,237,.12)}
.jv2-eco-featured{border:1.5px solid rgba(124,58,237,.4);background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(147,51,234,.02));grid-column:span 1}
.jv2-eco-glow{position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:100px;height:100px;border-radius:50%;background:rgba(124,58,237,.2);filter:blur(30px)}
.jv2-eco-ico{width:52px;height:52px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(147,51,234,.08));color:#7C3AED;transition:var(--jv-tr)}
.jv2-eco-card:hover .jv2-eco-ico{background:linear-gradient(135deg,#7C3AED,#9333EA);color:#fff;box-shadow:0 8px 20px rgba(124,58,237,.35)}
.jv2-eco-featured .jv2-eco-ico{background:linear-gradient(135deg,#7C3AED,#9333EA);color:#fff;box-shadow:0 8px 20px rgba(124,58,237,.35)}
.jv2-eco-name{display:block;font-size:.85rem;font-weight:800;color:#0F172A;margin-bottom:4px}
.jv2-eco-desc{display:block;font-size:.74rem;color:#94a3b8}
.jv2-eco-badge{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:50px;font-size:.68rem;font-weight:700;background:linear-gradient(135deg,#7C3AED,#9333EA);color:#fff}

/* ═══════════════════════════
   IMPACT / METRICS
   ═══════════════════════════ */
.jv2-impact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:64px}
@media(max-width:575.98px){.jv2-impact-grid{grid-template-columns:1fr}}

.jv2-impact-card{background:#fff;border-radius:24px;padding:28px;border:1px solid #e2e8f0;display:flex;gap:20px;align-items:flex-start;transition:var(--jv-tr)}
.jv2-impact-card:hover{border-color:rgba(124,58,237,.25);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.08)}
.jv2-impact-ring-wrap{position:relative;width:80px;height:80px;min-width:80px}
.jv2-ring-svg{transform:rotate(-90deg);overflow:visible}
.jv2-ring-bg{fill:none;stroke:#f1f5f9;stroke-width:6}
.jv2-ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.2s ease}
.jv2-rf-purple{stroke:url(#jvGradPurple)}
.jv2-rf-pink{stroke:#EC4899}
.jv2-rf-cyan{stroke:#06B6D4}
.jv2-rf-violet{stroke:#8B5CF6}
.jv2-ring-val{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.78rem;font-weight:900;color:#0F172A;white-space:nowrap}
.jv2-impact-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:12px}
.jv2-ii-purple{background:rgba(124,58,237,.1);color:#7C3AED}
.jv2-ii-pink{background:rgba(236,72,153,.1);color:#EC4899}
.jv2-ii-cyan{background:rgba(6,182,212,.1);color:#06B6D4}
.jv2-ii-violet{background:rgba(139,92,246,.1);color:#8B5CF6}
.jv2-impact-info h5{font-size:.92rem;font-weight:800;color:#0F172A;margin-bottom:6px}
.jv2-impact-info p{font-size:.82rem;color:#64748b;line-height:1.6;margin:0}

/* SVG gradient defs (inlined via CSS won't work — handled by card fallback stroke colors above) */

/* ═══════════════════════════
   IMPLEMENTATION CARDS
   ═══════════════════════════ */
.jv2-impl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:64px}
@media(max-width:575.98px){.jv2-impl-grid{grid-template-columns:1fr}}

.jv2-impl-card{position:relative;background:#fff;border-radius:20px;padding:28px 24px 24px;border:1px solid #e2e8f0;transition:var(--jv-tr);overflow:hidden;opacity:0;transform:translateY(20px)}
.jv2-impl-visible{opacity:1;transform:translateY(0)}
.jv2-impl-card:hover{border-color:rgba(124,58,237,.3);transform:translateY(-6px);box-shadow:0 20px 56px rgba(124,58,237,.1)}
.jv2-impl-glow{position:absolute;bottom:-40px;right:-40px;width:100px;height:100px;border-radius:50%;background:rgba(124,58,237,.08);filter:blur(30px);transition:var(--jv-tr)}
.jv2-impl-card:hover .jv2-impl-glow{opacity:2;width:140px;height:140px}
.jv2-impl-step{font-size:2.5rem;font-weight:900;line-height:1;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(147,51,234,.06));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px;letter-spacing:-.04em}
.jv2-impl-ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#7C3AED,#9333EA);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;margin-bottom:14px;box-shadow:0 6px 18px rgba(124,58,237,.3);transition:var(--jv-tr)}
.jv2-impl-card:hover .jv2-impl-ico{transform:scale(1.1) rotate(-5deg)}
.jv2-impl-card h5{font-size:.92rem;font-weight:800;color:#0F172A;margin-bottom:8px}
.jv2-impl-card p{font-size:.83rem;color:#64748b;line-height:1.65;margin:0}

/* ═══════════════════════════
   ENTERPRISE HORIZON
   ═══════════════════════════ */
.jv2-horizon{position:relative;border-radius:28px;overflow:hidden;margin-bottom:48px;padding:0}
.jv2-hor-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:jvOrbFloat 10s ease-in-out infinite}
.jv2-ho-1{width:300px;height:300px;background:rgba(124,58,237,.3);top:-80px;right:-60px;animation-delay:0s}
.jv2-ho-2{width:220px;height:220px;background:rgba(236,72,153,.25);bottom:-60px;left:-40px;animation-delay:5s}
.jv2-hor-grid-bg{position:absolute;inset:0;background:linear-gradient(135deg,#050714 0%,#0F172A 40%,#1e0a4a 100%);background-image:linear-gradient(135deg,#050714 0%,#0F172A 40%,#1e0a4a 100%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 100%,44px 44px,44px 44px}
.jv2-hor-inner{position:relative;z-index:2;padding:52px 44px}
@media(max-width:767.98px){.jv2-hor-inner{padding:36px 24px}}
.jv2-hor-title{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.jv2-hor-sub{color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.7;margin-bottom:36px}

.jv2-hor-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:767.98px){.jv2-hor-cards{grid-template-columns:1fr}}
.jv2-hor-card{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;text-align:center;transition:var(--jv-tr);overflow:hidden;backdrop-filter:blur(8px)}
.jv2-hor-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.jv2-hor-card-glow{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:80px;height:80px;border-radius:50%;background:rgba(124,58,237,.3);filter:blur(30px);opacity:0;transition:var(--jv-tr)}
.jv2-hor-card:hover .jv2-hor-card-glow{opacity:1}
.jv2-hor-ico{width:52px;height:52px;border-radius:14px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:rgba(124,58,237,.25);color:#c4b5fd;border:1px solid rgba(124,58,237,.4)}
.jv2-hor-card h6{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:8px}
.jv2-hor-card p{font-size:.8rem;color:rgba(255,255,255,.58);line-height:1.6;margin:0}

/* ═══════════════════════════
   CTA
   ═══════════════════════════ */
.jv2-cta{position:relative;border-radius:28px;overflow:hidden;margin-bottom:0}
.jv2-cta-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:jvOrbFloat 8s ease-in-out infinite}
.jv2-co-1{width:300px;height:300px;background:rgba(236,72,153,.35);top:-80px;right:-60px;animation-delay:0s}
.jv2-co-2{width:220px;height:220px;background:rgba(124,58,237,.3);bottom:-60px;left:-40px;animation-delay:4s}
.jv2-cta-inner{position:relative;z-index:2;background:linear-gradient(135deg,#7C3AED 0%,#9333EA 50%,#EC4899 100%);border-radius:28px;padding:64px 56px;text-align:center}
@media(max-width:767.98px){.jv2-cta-inner{padding:40px 28px}}
.jv2-cta-badge{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;margin:0 auto 24px;backdrop-filter:blur(8px)}
.jv2-cta-inner h2{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:900;color:#fff;margin-bottom:14px;letter-spacing:-.02em}
.jv2-cta-inner p{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.7;margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto}
.jv2-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.jv2-cta-btn-w{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:#fff;color:#7C3AED;border-radius:14px;font-weight:800;font-size:.95rem;text-decoration:none;transition:var(--jv-tr);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.jv2-cta-btn-w:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.3);color:#6d28d9}
.jv2-cta-btn-g{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;font-weight:700;font-size:.95rem;text-decoration:none;transition:var(--jv-tr);backdrop-filter:blur(8px)}
.jv2-cta-btn-g:hover{background:rgba(255,255,255,.25);transform:translateY(-3px);color:#fff}

/* ═══════════════════════════
   SIDEBAR
   ═══════════════════════════ */
.jv2-sidebar{display:flex;flex-direction:column;gap:20px}
@media(min-width:992px){.jv2-sidebar{position:sticky;top:96px}}

.jv2-sb-card{background:#fff;border-radius:22px;padding:24px;border:1px solid #e2e8f0;box-shadow:0 4px 20px rgba(0,0,0,.05);transition:var(--jv-tr)}
.jv2-sb-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.08)}
.jv2-sb-hdr{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #f1f5f9}
.jv2-sb-ico{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(147,51,234,.06));display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#7C3AED}
.jv2-sb-hdr h5{font-size:.9rem;font-weight:800;color:#0F172A;margin:0}

/* Nav */
.jv2-sb-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:#64748b;font-size:.85rem;text-decoration:none;transition:var(--jv-tr);margin-bottom:3px;font-weight:500}
.jv2-sb-nav a i{font-size:.9rem;width:18px;text-align:center;flex-shrink:0}
.jv2-sb-nav a:hover{background:#f8fafc;color:#7C3AED;font-weight:600}
.jv2-sb-nav a.active{background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(147,51,234,.06));color:#7C3AED;font-weight:700;border-left:3px solid #7C3AED;padding-left:9px}

/* Metrics */
.jv2-met-list{display:flex;flex-direction:column;gap:14px}
.jv2-met-item{display:flex;flex-direction:column;gap:6px}
.jv2-met-row{display:flex;justify-content:space-between;align-items:center}
.jv2-met-lbl{font-size:.8rem;color:#64748b;font-weight:500}
.jv2-met-val{font-size:.9rem;font-weight:800;background:linear-gradient(135deg,#7C3AED,#9333EA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jv2-met-bar{height:5px;background:#f1f5f9;border-radius:3px;overflow:hidden}
.jv2-met-fill{height:100%;background:linear-gradient(90deg,#7C3AED,#9333EA);border-radius:3px;transition:width 1.2s var(--jv-ease)}
.jv2-mf-pink{background:linear-gradient(90deg,#EC4899,#f472b6)}
.jv2-mf-cyan{background:linear-gradient(90deg,#06B6D4,#22d3ee)}
.jv2-mf-violet{background:linear-gradient(90deg,#8B5CF6,#a78bfa)}

/* Contact */
.jv2-sb-contact{display:flex;flex-direction:column;gap:10px}
.jv2-sb-contact a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;transition:var(--jv-tr);border:1px solid transparent}
.jv2-sb-contact a:hover{background:#f8fafc;border-color:#e2e8f0}
.jv2-sbc-ico{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(147,51,234,.06));display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#7C3AED;flex-shrink:0}
.jv2-sb-contact span{font-size:.83rem;color:#374151;font-weight:500}

/* Downloads */
.jv2-sb-dl{display:flex;flex-direction:column;gap:10px}
.jv2-sb-dl a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:14px;text-decoration:none;transition:var(--jv-tr)}
.jv2-sb-dl a:hover{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.03);transform:translateX(3px)}
.jv2-dl-ico{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(147,51,234,.06));display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#7C3AED;flex-shrink:0}
.jv2-dl-info{flex:1}
.jv2-dl-name{display:block;font-size:.82rem;font-weight:700;color:#0F172A;line-height:1.3}
.jv2-dl-type{display:block;font-size:.72rem;color:#94a3b8;margin-top:1px}
.jv2-dl-arrow{font-size:1rem;color:#cbd5e1;transition:var(--jv-tr)}
.jv2-sb-dl a:hover .jv2-dl-arrow{color:#7C3AED;transform:translateY(-2px)}

/* CTA Card */
.jv2-sb-cta{position:relative;border-radius:22px;overflow:hidden;padding:28px 22px;text-align:center;background:linear-gradient(135deg,#7C3AED,#9333EA,#EC4899)}
.jv2-sb-cta-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.15);filter:blur(30px)}
.jv2-sb-cta-ico{position:relative;z-index:1;font-size:2.2rem;color:#fff;display:block;margin-bottom:12px}
.jv2-sb-cta h5{position:relative;z-index:1;font-size:1rem;font-weight:800;color:#fff;margin-bottom:8px}
.jv2-sb-cta p{position:relative;z-index:1;font-size:.8rem;color:rgba(255,255,255,.8);line-height:1.55;margin-bottom:18px}
.jv2-sb-cta-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:10px 22px;background:#fff;color:#7C3AED;border-radius:12px;font-weight:800;font-size:.85rem;text-decoration:none;transition:var(--jv-tr)}
.jv2-sb-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25);color:#6d28d9}

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */
@media(max-width:767.98px){
  .jv2-hero{min-height:auto;padding:110px 0 80px}
  .jv2-visual-wrap{display:none}
  .jv2-h1{font-size:2.2rem}
  .jv2-stats-row{gap:12px}
  .jv2-stat-num{font-size:1.4rem}
  .jv2-cta-inner{padding:36px 22px}
  .jv2-hor-inner{padding:32px 20px}
  .jv2-what{padding:24px}
  .jv2-impact-card{flex-direction:column}
}
@media(max-width:575.98px){
  .jv2-trust-row{gap:8px}
  .jv2-hero-btns{flex-direction:column}
  .jv2-hero-btns a{text-align:center;justify-content:center}
}


/* ===================================================================
   SAP S/4HANA — Premium Enterprise Design v2
   All styles scoped to s4h- prefix; sidebar reuses shared classes.
   =================================================================== */

:root{
  --s1:#1e3a8a;--s2:#0ea5e9;--s3:#60a5fa;
  --g-main:linear-gradient(135deg,#1e3a8a,#0ea5e9);
  --g-alt:linear-gradient(135deg,#1d4ed8,#60a5fa);
  --g-green:linear-gradient(135deg,#00b09b,#38ef7d);
  --g-orange:linear-gradient(135deg,#f7971e,#ffd200);
  --g-purple:linear-gradient(135deg,#7c3aed,#a78bfa);
  --g-navy:linear-gradient(135deg,#0f172a,#1e293b);
  --t1:#0f172a;--t2:#334155;--t3:#64748b;
  --bg1:#f8fafc;--bg2:#fff;--ln:#e2e8f0;
  --r:18px;--rsm:12px;--ease:cubic-bezier(.4,0,.2,1);--tr:.3s var(--ease);
  --sh-sm:0 1px 4px rgba(0,0,0,.06);--sh-md:0 4px 20px rgba(0,0,0,.09);--sh-lg:0 12px 48px rgba(0,0,0,.13);--sh-xl:0 24px 80px rgba(0,0,0,.16);
}

/* ── HERO ── */
.s4h-hero{position:relative;background:linear-gradient(135deg,#04091a 0%,#081630 22%,#0d2060 55%,#0a3468 80%,#0b4078 100%);padding:100px 0 0;overflow:hidden;color:#fff}
.s4h-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.s4h-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.s4h-orb-a{width:560px;height:560px;background:radial-gradient(circle,rgba(30,58,138,.55) 0%,transparent 70%);top:-180px;right:5%}
.s4h-orb-b{width:320px;height:320px;background:radial-gradient(circle,rgba(14,165,233,.38) 0%,transparent 70%);bottom:5%;left:2%}
.s4h-hero-wrap{position:relative;z-index:3;padding-bottom:24px}

/* breadcrumb */
.s4h-bc{display:flex;align-items:center;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 28px}
.s4h-bc li{font-size:12.5px;color:rgba(255,255,255,.52);display:flex;align-items:center;gap:6px}
.s4h-bc li::after{content:'/';opacity:.38}.s4h-bc li:last-child::after{display:none}
.s4h-bc a{color:rgba(255,255,255,.78);text-decoration:none;transition:.2s}.s4h-bc a:hover{color:#fff}

/* eyebrow badge */
.s4h-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:8px 20px;font-size:13px;font-weight:700;color:#fff;margin-bottom:24px;letter-spacing:.02em}
.s4h-dot{width:8px;height:8px;border-radius:50%;background:#7dd3fc;box-shadow:0 0 0 3px rgba(125,211,252,.3);animation:s4hPulse 2.2s infinite;flex-shrink:0}
@keyframes s4hPulse{0%,100%{box-shadow:0 0 0 3px rgba(125,211,252,.3)}50%{box-shadow:0 0 0 9px rgba(125,211,252,.06)}}

/* headline */
.s4h-h1{font-size:clamp(32px,5.5vw,60px);font-weight:900;line-height:1.07;letter-spacing:-.028em;color:#fff;margin-bottom:22px}
.s4h-hl{background:linear-gradient(100deg,#93c5fd,#38bdf8,#bae6fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.s4h-lead{font-size:17px;color:rgba(255,255,255,.74);line-height:1.75;max-width:520px;margin-bottom:36px}

/* CTA buttons */
.s4h-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:46px}
.s4h-btn-p{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;background:#fff;color:#1e3a8a;font-size:15px;font-weight:700;border-radius:50px;text-decoration:none;box-shadow:0 8px 30px rgba(0,0,0,.26);transition:.3s}
.s4h-btn-p:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.34);color:#1e3a8a}
.s4h-btn-g{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.26);color:#fff;font-size:15px;font-weight:600;border-radius:50px;text-decoration:none;transition:.3s}
.s4h-btn-g:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.42)}

/* trust bar */
.s4h-trust-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.s4h-tb-item{display:flex;flex-direction:column;padding:0 20px;text-align:center}
.s4h-tb-item:first-child{padding-left:0}
.s4h-tb-item strong{display:block;font-size:22px;font-weight:900;color:#fff;line-height:1;margin-bottom:3px}
.s4h-tb-item span{font-size:11px;color:rgba(255,255,255,.52);font-weight:500;white-space:nowrap}
.s4h-tb-sep{width:1px;height:34px;background:rgba(255,255,255,.18);flex-shrink:0}

/* ── RIGHT PANEL (dashboard mockup) ── */
.s4h-panel{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:360px}
.s4h-dash-card{background:rgba(255,255,255,.07);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);border-radius:20px 20px 0 0;overflow:hidden;width:100%;max-width:450px;box-shadow:var(--sh-xl);animation:s4hRise 1s cubic-bezier(.4,0,.2,1) both}
@keyframes s4hRise{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
.s4h-dash-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.1)}
.s4h-dash-dots{display:flex;gap:6px}
.s4h-dash-dots span{width:10px;height:10px;border-radius:50%}
.s4h-dash-dots span:nth-child(1){background:#ff5f57}
.s4h-dash-dots span:nth-child(2){background:#febc2e}
.s4h-dash-dots span:nth-child(3){background:#28c840}
.s4h-dash-title{flex:1;font-size:12px;color:rgba(255,255,255,.62);font-weight:600;text-align:center}
.s4h-live-badge{font-size:10px;font-weight:700;color:#86efac;background:rgba(134,239,172,.14);border:1px solid rgba(134,239,172,.28);padding:3px 10px;border-radius:50px;white-space:nowrap}
.s4h-dash-img{padding:18px 18px 0}
.s4h-dash-img img{width:100%;display:block;border-radius:8px 8px 0 0;animation:s4hFloat 5.5s ease-in-out infinite}
@keyframes s4hFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* floating widgets */
.s4h-fw{position:absolute;z-index:6;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-radius:14px;padding:12px 18px;box-shadow:0 14px 40px rgba(0,0,0,.18);display:flex;align-items:center;gap:12px;animation:s4hBob 4s ease-in-out infinite}
.s4h-fw-1{top:10%;right:0%;animation-delay:.5s}
.s4h-fw-2{bottom:30%;left:-2%;animation-delay:1.3s}
.s4h-fw-3{top:50%;right:-2%;animation-delay:2s}
@keyframes s4hBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.s4h-fw strong{display:block;font-size:14px;font-weight:800;color:#0f172a;line-height:1.1}
.s4h-fw span{font-size:11px;color:#64748b}
.s4h-fwi{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;flex-shrink:0}
.s4h-fwi-b{background:linear-gradient(135deg,#1e3a8a,#0ea5e9)}
.s4h-fwi-g{background:linear-gradient(135deg,#00b09b,#38ef7d)}
.s4h-fwi-p{background:linear-gradient(135deg,#7c3aed,#a78bfa)}

/* wave divider */
.s4h-wave{position:relative;z-index:4;line-height:0;margin-top:22px}
.s4h-wave svg{display:block;width:100%}

/* ── BODY ── */
.s4h-body{padding:80px 0;background:#f0f4fa}
.s4-sb{position:sticky;top:96px}

/* ── CONTENT CARDS ── */
.s4h-card{background:#fff;border:1px solid rgba(226,232,240,.9);border-radius:20px;padding:38px;margin-bottom:28px;box-shadow:0 2px 10px rgba(15,23,42,.05);transition:.3s;position:relative;overflow:hidden}
.s4h-card:hover{box-shadow:0 10px 32px rgba(15,23,42,.1);transform:translateY(-2px)}

/* top accent bar */
.s4h-ca{position:absolute;top:0;left:0;width:100%;height:4px;border-radius:20px 20px 0 0}
.s4h-ca-blue{background:linear-gradient(90deg,#1e3a8a,#0ea5e9)}
.s4h-ca-sky{background:linear-gradient(90deg,#0284c7,#38bdf8)}
.s4h-ca-green{background:linear-gradient(90deg,#00b09b,#38ef7d)}
.s4h-ca-orange{background:linear-gradient(90deg,#f7971e,#ffd200)}
.s4h-ca-purple{background:linear-gradient(90deg,#7c3aed,#a78bfa)}

/* icon */
.s4h-ci{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin-bottom:20px}
.s4h-ci-blue{background:linear-gradient(135deg,#1e3a8a,#0ea5e9);box-shadow:0 8px 24px rgba(30,58,138,.28)}

/* section label */
.s4h-lbl{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;padding:5px 14px;border-radius:50px;margin-bottom:14px}
.s4h-lbl-blue{background:rgba(30,58,138,.1);color:#1e3a8a}
.s4h-lbl-sky{background:rgba(2,132,199,.1);color:#0284c7}
.s4h-lbl-green{background:rgba(0,176,155,.1);color:#00b09b}
.s4h-lbl-orange{background:rgba(247,151,30,.1);color:#f7971e}
.s4h-lbl-purple{background:rgba(124,58,237,.1);color:#7c3aed}

.s4h-card h2{font-size:clamp(20px,2.8vw,26px);font-weight:800;color:#0f172a;margin-bottom:14px;line-height:1.2}
.s4h-card h3{font-size:clamp(17px,2.3vw,22px);font-weight:700;color:#0f172a;margin-bottom:14px}
.s4h-card>p{font-size:15px;color:#334155;line-height:1.8;margin:0}
.s4h-sub{font-size:14.5px;color:#475569;line-height:1.75;margin-bottom:22px!important}

/* ── BENTO GRID (Why Migrate) ── */
.s4h-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:6px}
.s4h-bcard{border-radius:16px;padding:26px 22px;position:relative;overflow:hidden;border:1.5px solid transparent;transition:.3s;cursor:default}
.s4h-bcard:hover{transform:translateY(-5px)}
.s4h-bglow{position:absolute;inset:0;border-radius:16px;opacity:0;transition:.3s;pointer-events:none}
.s4h-bcard:hover .s4h-bglow{opacity:1}

.s4h-bcard-blue{background:linear-gradient(135deg,rgba(30,58,138,.06),rgba(14,165,233,.03));border-color:rgba(14,165,233,.22)}
.s4h-bcard-blue:hover{border-color:rgba(14,165,233,.5);box-shadow:0 12px 36px rgba(14,165,233,.12)}
.s4h-bcard-blue .s4h-bglow{background:radial-gradient(ellipse at 0% 0%,rgba(14,165,233,.14),transparent 60%)}
.s4h-bcard-green{background:linear-gradient(135deg,rgba(0,176,155,.06),rgba(56,239,125,.03));border-color:rgba(0,176,155,.22)}
.s4h-bcard-green:hover{border-color:rgba(0,176,155,.5);box-shadow:0 12px 36px rgba(0,176,155,.12)}
.s4h-bcard-green .s4h-bglow{background:radial-gradient(ellipse at 0% 0%,rgba(0,176,155,.14),transparent 60%)}
.s4h-bcard-orange{background:linear-gradient(135deg,rgba(247,151,30,.06),rgba(255,210,0,.03));border-color:rgba(247,151,30,.22)}
.s4h-bcard-orange:hover{border-color:rgba(247,151,30,.5);box-shadow:0 12px 36px rgba(247,151,30,.12)}
.s4h-bcard-orange .s4h-bglow{background:radial-gradient(ellipse at 0% 0%,rgba(247,151,30,.14),transparent 60%)}
.s4h-bcard-purple{background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(167,139,250,.03));border-color:rgba(124,58,237,.22)}
.s4h-bcard-purple:hover{border-color:rgba(124,58,237,.5);box-shadow:0 12px 36px rgba(124,58,237,.12)}
.s4h-bcard-purple .s4h-bglow{background:radial-gradient(ellipse at 0% 0%,rgba(124,58,237,.14),transparent 60%)}

.s4h-bico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px;transition:.3s;color:#fff}
.s4h-bcard-blue .s4h-bico{background:linear-gradient(135deg,#1e3a8a,#0ea5e9);box-shadow:0 6px 18px rgba(14,165,233,.3)}
.s4h-bcard-green .s4h-bico{background:linear-gradient(135deg,#00b09b,#38ef7d);box-shadow:0 6px 18px rgba(0,176,155,.3)}
.s4h-bcard-orange .s4h-bico{background:linear-gradient(135deg,#f7971e,#ffd200);box-shadow:0 6px 18px rgba(247,151,30,.3)}
.s4h-bcard-purple .s4h-bico{background:linear-gradient(135deg,#7c3aed,#a78bfa);box-shadow:0 6px 18px rgba(124,58,237,.3)}
.s4h-bcard:hover .s4h-bico{transform:scale(1.1) rotate(-5deg)}
.s4h-bcard h4{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:8px}
.s4h-bcard p{font-size:13px;color:#475569;line-height:1.65;margin:0 0 14px}
.s4h-bchip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:3px 12px;border-radius:50px;letter-spacing:.05em}
.s4h-bcard-blue .s4h-bchip{background:rgba(14,165,233,.12);color:#0284c7}
.s4h-bcard-green .s4h-bchip{background:rgba(0,176,155,.12);color:#00b09b}
.s4h-bcard-orange .s4h-bchip{background:rgba(247,151,30,.12);color:#f7971e}
.s4h-bcard-purple .s4h-bchip{background:rgba(124,58,237,.12);color:#7c3aed}

/* ── SERVICES LIST ── */
.s4h-svc-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.s4h-svc{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;transition:.3s;cursor:default}
.s4h-svc:hover{border-color:rgba(14,165,233,.4);box-shadow:0 0 0 4px rgba(14,165,233,.07),0 4px 16px rgba(14,165,233,.08);transform:translateX(6px)}
.s4h-svc-i{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex-shrink:0;transition:.3s}
.s4h-svc:hover .s4h-svc-i{transform:scale(1.08)}
.s4h-svc-ib{background:linear-gradient(135deg,#1e3a8a,#0ea5e9)}
.s4h-svc-ig{background:linear-gradient(135deg,#00b09b,#38ef7d)}
.s4h-svc-ip{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.s4h-svc-io{background:linear-gradient(135deg,#f7971e,#ffd200)}
.s4h-svc-b{flex:1}
.s4h-svc-b h5{font-size:14.5px;font-weight:700;color:#0f172a;margin:0 0 4px}
.s4h-svc-b p{font-size:13px;color:#64748b;margin:0;line-height:1.55}
.s4h-svc-a{font-size:20px;color:#cbd5e1;transition:.3s;flex-shrink:0}
.s4h-svc:hover .s4h-svc-a{color:#0ea5e9;transform:translateX(4px)}

/* ── MODULES GRID ── */
.s4h-mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.s4h-mod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 10px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;transition:.3s;cursor:default;position:relative;overflow:hidden}
.s4h-mod::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#1e3a8a,#0ea5e9);opacity:0;transition:.3s;border-radius:14px}
.s4h-mod:hover::before{opacity:1}
.s4h-mod:hover{border-color:transparent;box-shadow:0 10px 28px rgba(30,58,138,.3);transform:translateY(-5px)}
.s4h-mod-icon{width:48px;height:48px;border-radius:12px;background:rgba(30,58,138,.08);display:flex;align-items:center;justify-content:center;font-size:22px;color:#1e3a8a;transition:.3s;position:relative;z-index:1}
.s4h-mod:hover .s4h-mod-icon{background:rgba(255,255,255,.2);color:#fff}
.s4h-mod strong{font-size:11.5px;font-weight:700;color:#0f172a;position:relative;z-index:1;transition:.3s}
.s4h-mod span{font-size:10px;color:#64748b;font-weight:600;letter-spacing:.06em;position:relative;z-index:1;transition:.3s}
.s4h-mod:hover strong,.s4h-mod:hover span{color:#fff}

/* ── MIGRATION GRID ── */
.s4h-mig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.s4h-mig{background:#fff;border:1.5px solid #e2e8f0;border-radius:16px;padding:28px 20px;text-align:center;position:relative;overflow:hidden;transition:.3s}
.s4h-mig::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1e3a8a,#0ea5e9);transform:scaleX(0);transform-origin:left;transition:.35s}
.s4h-mig:hover{box-shadow:0 12px 40px rgba(15,23,42,.1);transform:translateY(-5px);border-color:rgba(14,165,233,.35)}
.s4h-mig:hover::after{transform:scaleX(1)}
.s4h-mig-num{font-size:40px;font-weight:900;background:linear-gradient(135deg,#1e3a8a,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:12px}
.s4h-mig-icon{width:52px;height:52px;border-radius:14px;background:rgba(30,58,138,.08);display:flex;align-items:center;justify-content:center;font-size:24px;color:#1e3a8a;margin:0 auto 14px;transition:.3s}
.s4h-mig:hover .s4h-mig-icon{background:linear-gradient(135deg,#1e3a8a,#0ea5e9);color:#fff;transform:scale(1.1) rotate(-5deg)}
.s4h-mig h5{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:8px}
.s4h-mig p{font-size:12.5px;color:#64748b;line-height:1.6;margin:0 0 14px}
.s4h-mig-tag{display:inline-flex;font-size:10.5px;font-weight:700;padding:3px 12px;border-radius:50px;background:rgba(30,58,138,.1);color:#1e3a8a;letter-spacing:.05em}

/* sidebar shared styles already in ai-enablement block; just sticky position here */
.s4-sb{position:sticky;top:96px}

/* ── CTA SECTION ── */
.s4h-cta{position:relative;background:linear-gradient(135deg,#04091a 0%,#081840 30%,#0d266a 58%,#0a3875 100%);padding:90px 0;overflow:hidden}
.s4h-cta-orb{position:absolute;border-radius:50%;filter:blur(85px);pointer-events:none}
.s4h-cta-orb-a{width:500px;height:500px;background:radial-gradient(circle,rgba(30,58,138,.55),transparent 70%);top:-180px;right:3%}
.s4h-cta-orb-b{width:300px;height:300px;background:radial-gradient(circle,rgba(14,165,233,.42),transparent 70%);bottom:-60px;left:8%}
.s4h-cta-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.s4h-cta-inner{position:relative;z-index:3}
.s4h-cta-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.11);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:7px 18px;font-size:12.5px;font-weight:700;color:#fff;margin-bottom:20px}
.s4h-cta h2{font-size:clamp(26px,4.5vw,44px);font-weight:900;color:#fff;margin-bottom:14px;line-height:1.1}
.s4h-cta p{font-size:16px;color:rgba(255,255,255,.74);line-height:1.72;max-width:540px;margin:0}
.s4h-cta-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.s4h-cta-bp{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;background:#fff;color:#1e3a8a;font-size:15px;font-weight:700;border-radius:50px;text-decoration:none;box-shadow:0 6px 28px rgba(0,0,0,.22);transition:.3s}
.s4h-cta-bp:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.3);color:#1e3a8a}
.s4h-cta-bg{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:15px;font-weight:600;border-radius:50px;text-decoration:none;transition:.3s}
.s4h-cta-bg:hover{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.46)}
.s4h-cta-stack{display:flex;flex-direction:column;gap:14px;max-width:340px;margin-left:auto}
.s4h-cta-mc{background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.17);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;transition:.3s;animation:s4hSlide .8s cubic-bezier(.4,0,.2,1) both}
.s4h-cta-mc:nth-child(2){animation-delay:.15s;margin-left:24px}
.s4h-cta-mc:nth-child(3){animation-delay:.3s;margin-left:12px}
@keyframes s4hSlide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.s4h-cta-mc:hover{background:rgba(255,255,255,.16);transform:translateX(-4px)}
.s4h-cta-mci{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex-shrink:0}
.s4h-cta-mc strong{display:block;font-size:14px;font-weight:700;color:#fff}
.s4h-cta-mc span{font-size:12px;color:rgba(255,255,255,.66)}

/* ── RESPONSIVE ── */
@media(max-width:991.98px){
  .s4h-hero{padding:80px 0 0}
  .s4-sb{position:static;margin-top:32px}
  .s4h-cta-stack{display:none}
}
@media(max-width:767.98px){
  .s4h-hero{padding:70px 0 0}
  .s4h-h1{font-size:30px}
  .s4h-trust-bar{gap:0}
  .s4h-body{padding:52px 0}
  .s4h-card{padding:26px 22px}
  .s4h-bento{grid-template-columns:1fr;gap:12px}
  .s4h-mod-grid{grid-template-columns:repeat(2,1fr)}
  .s4h-mig-grid{grid-template-columns:1fr}
  .s4h-cta{padding:60px 0}
  .s4h-cta-btns{flex-direction:column}
  .s4h-cta-bp,.s4h-cta-bg{justify-content:center}
}
@media(max-width:575.98px){
  .s4h-hero-btns{flex-direction:column}
  .s4h-btn-p,.s4h-btn-g{justify-content:center}
  .s4h-tb-item{padding:0 10px}
  .s4h-tb-item strong{font-size:18px}
}


/* ===================================================================
   Workforce Solutions - Centralized Styles
   =================================================================== */

:root{
  --i1:#4f46e5;--i2:#06b6d4;--i3:#818cf8;
  --g-main:linear-gradient(135deg,#4f46e5,#06b6d4);
  --g-alt:linear-gradient(135deg,#3730a3,#818cf8);
  --g-green:linear-gradient(135deg,#00b09b,#38ef7d);
  --g-orange:linear-gradient(135deg,#f7971e,#ffd200);
  --g-blue:linear-gradient(135deg,#0070f3,#00b4d8);
  --g-navy:linear-gradient(135deg,#0f172a,#1e293b);
  --t1:#0f172a;--t2:#334155;--t3:#64748b;
  --bg1:#f8fafc;--bg2:#fff;--ln:#e2e8f0;
  --r:18px;--rsm:12px;--ease:cubic-bezier(.4,0,.2,1);--tr:.3s var(--ease);
  --sh-sm:0 1px 4px rgba(0,0,0,.06);--sh-md:0 4px 20px rgba(0,0,0,.09);--sh-lg:0 12px 48px rgba(0,0,0,.13);--sh-xl:0 24px 80px rgba(0,0,0,.16);
}
.wf-hero{position:relative;background:linear-gradient(135deg,#0f172a,#4f46e5,#06b6d4);padding:90px 0 0;overflow:hidden;color:#fff;}
.wf-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(129,140,248,.28) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 15% 80%,rgba(6,182,212,.2) 0%,transparent 60%);pointer-events:none;}
.wf-hero::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
.wf-hero-in{position:relative;z-index:3;}
.wf-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:7px 18px;font-size:13px;font-weight:700;color:#fff;margin-bottom:22px;}
.wf-badge .dot{width:8px;height:8px;border-radius:50%;background:#a5f3fc;box-shadow:0 0 0 3px rgba(165,243,252,.35);animation:wf-pulse 2s infinite;}
@keyframes wf-pulse{0%,100%{box-shadow:0 0 0 3px rgba(165,243,252,.35);}50%{box-shadow:0 0 0 7px rgba(165,243,252,.1);}}
.wf-hero h1{font-size:clamp(30px,5.5vw,54px);font-weight:900;color:#fff;margin-bottom:20px;line-height:1.08;letter-spacing:-.02em;}
.wf-hero h1 .hi{background:linear-gradient(90deg,#a5f3fc,#c7d2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.wf-hero p.sub{font-size:17px;color:rgba(255,255,255,.78);line-height:1.7;max-width:520px;margin-bottom:36px;}
.wf-bc{display:flex;align-items:center;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 28px;}
.wf-bc li{font-size:13px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px;}
.wf-bc li::after{content:'/';opacity:.45;}.wf-bc li:last-child::after{display:none;}
.wf-bc a{color:rgba(255,255,255,.85);text-decoration:none;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px;}
.btn-h-main{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;background:#fff;color:var(--i1);font-size:15px;font-weight:700;border-radius:50px;text-decoration:none;box-shadow:0 4px 24px rgba(0,0,0,.22);transition:var(--tr);}
.btn-h-main:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.28);color:var(--i1);}
.btn-h-ghost{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:15px;font-weight:600;border-radius:50px;text-decoration:none;transition:var(--tr);}
.btn-h-ghost:hover{background:rgba(255,255,255,.18);color:#fff;}
.hero-img-panel{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;}
.hero-img-panel .img-card{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:24px 24px 0 0;padding:28px 28px 0;box-shadow:var(--sh-xl);overflow:hidden;animation:h-rise .9s var(--ease) both;max-width:420px;width:100%;}
@keyframes h-rise{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
.hero-img-panel .img-card img{width:100%;display:block;filter:drop-shadow(0 -10px 30px rgba(0,0,0,.2));animation:h-float 5s ease-in-out infinite;}
@keyframes h-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.fchip{position:absolute;z-index:5;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:14px;padding:10px 16px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;animation:fc-bob 4s ease-in-out infinite;}
.fchip.c1{top:12%;right:-4%;animation-delay:.6s;}.fchip.c2{bottom:30%;left:-6%;animation-delay:1.2s;}
@keyframes fc-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.fchip .ci{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;}
.fchip .ct strong{display:block;font-size:16px;font-weight:800;color:var(--t1);line-height:1;}
.fchip .ct span{font-size:11px;color:var(--t3);}
.hero-wave{position:relative;z-index:4;line-height:0;margin-top:20px;}
.hero-wave svg{display:block;width:100%;}
/* body */
.wf-body{padding:80px 0;background:var(--bg1);}
.slbl{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;padding:5px 14px;border-radius:50px;margin-bottom:14px;}
.slbl.indigo{background:rgba(79,70,229,.1);color:var(--i1);}.slbl.cyan{background:rgba(6,182,212,.1);color:var(--i2);}
.slbl.green{background:rgba(0,176,155,.1);color:#00b09b;}.slbl.orange{background:rgba(247,151,30,.1);color:#f7971e;}
.pc{background:var(--bg2);border:1px solid var(--ln);border-radius:var(--r);padding:36px;margin-bottom:28px;box-shadow:var(--sh-sm);transition:var(--tr);position:relative;overflow:hidden;}
.pc:hover{box-shadow:var(--sh-md);transform:translateY(-3px);}
.pc .ab{position:absolute;top:0;left:0;width:100%;height:4px;border-radius:var(--r) var(--r) 0 0;}
.pc .ab.indigo{background:var(--g-main);}.pc .ab.green{background:var(--g-green);}.pc .ab.orange{background:var(--g-orange);}
.pc h2{font-size:clamp(21px,3vw,28px);font-weight:800;color:var(--t1);margin-bottom:14px;line-height:1.2;}
.pc h3{font-size:clamp(18px,2.5vw,22px);font-weight:700;color:var(--t1);margin-bottom:14px;}
.pc p{font-size:15px;color:var(--t2);line-height:1.78;margin:0;}
.licon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;margin-bottom:20px;}
.licon.indigo{background:var(--g-main);box-shadow:0 6px 20px rgba(79,70,229,.3);}
.fg2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:12px;}
.fgc{border-radius:var(--rsm);border:1.5px solid var(--ln);padding:24px 20px;background:var(--bg2);transition:var(--tr);position:relative;overflow:hidden;}
.fgc:hover{border-color:transparent;box-shadow:var(--sh-md);}
.fgc.fi{border-top:3px solid var(--i1);}.fgc.fi:hover{background:linear-gradient(135deg,rgba(79,70,229,.04),rgba(129,140,248,.03));}
.fgc.fc{border-top:3px solid var(--i2);}.fgc.fc:hover{background:linear-gradient(135deg,rgba(6,182,212,.04),rgba(103,232,249,.03));}
.fgc.fo{border-top:3px solid #f7971e;}.fgc.fo:hover{background:linear-gradient(135deg,rgba(247,151,30,.04),rgba(255,210,0,.03));}
.fgc.fg{border-top:3px solid #00b09b;}.fgc.fg:hover{background:linear-gradient(135deg,rgba(0,176,155,.04),rgba(56,239,125,.03));}
.fgi{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;background:var(--bg1);transition:var(--tr);}
.fgc.fi .fgi{color:var(--i1);}.fgc.fc .fgi{color:var(--i2);}.fgc.fo .fgi{color:#f7971e;}.fgc.fg .fgi{color:#00b09b;}
.fgc:hover .fgi{transform:scale(1.1) rotate(-4deg);}
.fgc h4{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:8px;}
.fgc p{font-size:13px;color:var(--t3);line-height:1.6;margin:0;}
/* talent list */
.tl-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.tl-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--rsm);border:1px solid var(--ln);background:var(--bg2);transition:var(--tr);}
.tl-row:hover{border-color:var(--i2);box-shadow:0 0 0 3px rgba(6,182,212,.1);transform:translateX(5px);}
.tl-row .tli{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;flex-shrink:0;transition:var(--tr);}
.tl-row:hover .tli{transform:scale(1.1);}
.tl-row .tlb{flex:1;}
.tl-row .tlb h5{font-size:14px;font-weight:700;color:var(--t1);margin:0 0 3px;}
.tl-row .tlb p{font-size:13px;color:var(--t3);margin:0;line-height:1.5;}
.tl-row .tla{font-size:20px;color:var(--ln);transition:var(--tr);}
.tl-row:hover .tla{color:var(--i1);}
/* metrics */
.mc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.mc{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 12px;border-radius:var(--rsm);border:1px solid var(--ln);background:var(--bg2);transition:var(--tr);position:relative;overflow:hidden;}
.mc::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--g-main);transform:scaleX(0);transition:var(--tr);transform-origin:left;}
.mc:hover::before{transform:scaleX(1);}.mc:hover{box-shadow:var(--sh-md);transform:translateY(-3px);}
.mc i{font-size:26px;color:var(--i1);margin-bottom:8px;}
.mc strong{font-size:22px;font-weight:900;color:var(--t1);display:block;line-height:1;margin-bottom:4px;}
.mc span{font-size:12px;color:var(--t3);font-weight:600;}
/* sidebar */
.wf-sb{position:sticky;top:96px;}
.sc{background:var(--bg2);border-radius:var(--r);border:1px solid var(--ln);overflow:hidden;margin-bottom:20px;box-shadow:var(--sh-sm);transition:var(--tr);}
.sc:hover{box-shadow:var(--sh-md);}
.sc .sh{padding:18px 22px;display:flex;align-items:center;gap:12px;color:#fff;}
.sc .sh i{font-size:22px;}.sc .sh h4{margin:0;font-size:16px;font-weight:700;color:#fff;}
.sc .sb2{padding:18px;}
.sh.hm{background:var(--g-main);}.sh.hn{background:var(--g-navy);}.sh.hg{background:var(--g-green);}.sh.ho{background:var(--g-orange);}
.smenu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.smenu a{text-decoration:none;display:block;}
.srow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--rsm);background:var(--bg1);border:1.5px solid transparent;transition:var(--tr);font-size:13px;font-weight:600;color:var(--t1);}
.srow .sri{width:34px;height:34px;border-radius:9px;background:#e8edf5;display:flex;align-items:center;justify-content:center;font-size:17px;color:#5a6ad4;flex-shrink:0;}
.srow span{flex:1;}.srow .sra{font-size:18px;color:var(--ln);transition:var(--tr);}
.srow:hover{background:var(--bg2);border-color:var(--ln);box-shadow:var(--sh-sm);}.srow:hover .sra{color:var(--i1);transform:translateX(3px);}
.smenu li.cur .srow{background:var(--g-main);color:#fff;border-color:transparent;box-shadow:0 4px 18px rgba(79,70,229,.3);}
.smenu li.cur .sri{background:rgba(255,255,255,.25);color:#fff;}.smenu li.cur .sra{color:rgba(255,255,255,.8);}.smenu li.cur .srow span{color:#fff;}
.sstat-list{display:flex;flex-direction:column;gap:10px;}
.sstat{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--rsm);background:var(--bg1);border:1px solid transparent;transition:var(--tr);}
.sstat:hover{background:var(--bg2);border-color:var(--ln);box-shadow:var(--sh-sm);}
.sstat .si2{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;flex-shrink:0;}
.sstat strong{display:block;font-size:22px;font-weight:900;color:var(--t1);line-height:1;margin-bottom:2px;}
.sstat span{font-size:12px;color:var(--t3);}
.scon{text-align:center;}
.scon .scc{width:70px;height:70px;border-radius:50%;background:var(--g-green);display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;margin:0 auto 16px;box-shadow:0 6px 20px rgba(0,176,155,.3);}
.scon h5{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:14px;}
.plink{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:var(--rsm);background:var(--bg1);border:1px solid var(--ln);color:var(--t1);text-decoration:none;font-size:13px;font-weight:600;margin-bottom:8px;transition:var(--tr);}
.plink:last-of-type{margin-bottom:0;}.plink i{color:#00b09b;font-size:16px;}
.plink:hover{background:var(--g-green);color:#fff;border-color:transparent;}.plink:hover i{color:#fff;}
.sdl{display:flex;flex-direction:column;gap:10px;}
.dlr{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg2);border:1.5px solid var(--ln);border-radius:var(--rsm);text-decoration:none;color:var(--t1);transition:var(--tr);}
.dlr:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.dlr.pdf:hover{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);border-color:transparent;color:#fff;}
.dlr.doc:hover{background:var(--g-main);border-color:transparent;color:#fff;}
.dlr .di2{width:44px;height:44px;border-radius:11px;background:var(--bg1);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.dlr.pdf .di2{color:#ee5a6f;}.dlr.doc .di2{color:var(--i1);}
.dlr:hover .di2{background:rgba(255,255,255,.2);color:#fff;}
.dlr .dt{flex:1;}.dlr .dt strong{display:block;font-size:13px;font-weight:700;}.dlr .dt span{font-size:11px;opacity:.65;}
.dlr .da2{font-size:20px;}
/* CTA */
.wf-cta{background:linear-gradient(135deg,#0f172a,#4f46e5,#06b6d4);padding:90px 0;position:relative;overflow:hidden;}
.wf-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 80% 50%,rgba(129,140,248,.22) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 10% 60%,rgba(6,182,212,.18) 0%,transparent 60%);pointer-events:none;}
.wf-cta::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
.wf-cta-in{position:relative;z-index:3;}
.cta-badge2{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:6px 16px;font-size:12px;font-weight:700;color:#fff;margin-bottom:18px;}
.wf-cta h2{font-size:clamp(24px,4.5vw,42px);font-weight:900;color:#fff;margin-bottom:14px;line-height:1.1;}
.wf-cta p{font-size:16px;color:rgba(255,255,255,.78);line-height:1.7;max-width:540px;margin:0;}
.cta-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
.btn-cw{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;background:#fff;color:var(--i1);font-size:15px;font-weight:700;border-radius:50px;text-decoration:none;box-shadow:0 4px 24px rgba(0,0,0,.2);transition:var(--tr);}
.btn-cw:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(0,0,0,.28);color:var(--i1);}
.btn-cg{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:15px;font-weight:600;border-radius:50px;text-decoration:none;transition:var(--tr);}
.btn-cg:hover{background:rgba(255,255,255,.2);color:#fff;}
.cta-stack{display:flex;flex-direction:column;gap:14px;max-width:340px;margin-left:auto;}
.cta-mc{background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:var(--rsm);padding:16px 20px;display:flex;align-items:center;gap:14px;animation:cslide .8s var(--ease) both;}
.cta-mc:nth-child(2){animation-delay:.15s;margin-left:24px;}.cta-mc:nth-child(3){animation-delay:.3s;margin-left:12px;}
@keyframes cslide{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}
.cta-mc .cmci{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex-shrink:0;}
.cta-mc .cmct strong{display:block;font-size:14px;font-weight:700;color:#fff;}
.cta-mc .cmct span{font-size:12px;color:rgba(255,255,255,.7);}
@media(max-width:991.98px){.wf-sb{position:static;margin-top:34px;}.fg2{grid-template-columns:repeat(2,1fr);}.wf-hero{padding:70px 0 0;}.hero-img-panel{display:none;}.cta-stack{display:none;}}
@media(max-width:767.98px){.wf-body{padding:52px 0;}.pc{padding:24px 20px;}.fg2{grid-template-columns:1fr;}.mc-grid{grid-template-columns:repeat(2,1fr);}.wf-cta{padding:60px 0;}.cta-btns{flex-direction:column;}.btn-cw,.btn-cg{justify-content:center;}}
@media(max-width:575.98px){.wf-hero h1{font-size:28px;}.mc-grid{grid-template-columns:repeat(2,1fr);}.hero-ctas{flex-direction:column;}.btn-h-main,.btn-h-ghost{justify-content:center;}}


/* ===================================================================
   Sap Consulting - Centralized Styles
   =================================================================== */

/* ============================================================
   SAP CONSULTING — PREMIUM DESIGN
   ============================================================ */
:root {
    --blue-1: #0070f3;
    --blue-2: #00b4d8;
    --navy:   #0a2540;
    --teal-1: #0f766e;
    --teal-2: #14b8a6;
    --green-1:#00b09b;
    --green-2:#38ef7d;
    --purple-1:#7c3aed;
    --purple-2:#a78bfa;
    --orange-1:#f7971e;
    --orange-2:#ffd200;
    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --bg-1:   #f8fafc;
    --bg-2:   #ffffff;
    --line:   #e2e8f0;
    --r:      18px;
    --r-sm:   12px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --t:      0.32s var(--ease);
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.09);
    --sh-lg: 0 12px 48px rgba(0,0,0,.13);
    --sh-xl: 0 24px 80px rgba(0,0,0,.16);
    --g-blue:   linear-gradient(135deg,#0070f3,#00b4d8);
    --g-teal:   linear-gradient(135deg,#0f766e,#14b8a6);
    --g-green:  linear-gradient(135deg,#00b09b,#38ef7d);
    --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
    --g-orange: linear-gradient(135deg,#f7971e,#ffd200);
    --g-navy:   linear-gradient(135deg,#0a2540,#203a43,#2c5364);
    --g-dark:   linear-gradient(135deg,#0a2540,#1565c0,#00b4d8);
}

/* ── HERO ──────────────────────────────────────────────── */
.sc-hero {
    position:relative;
    background:var(--g-dark);
    padding:90px 0 0;
    overflow:hidden; color:#fff;
}
.sc-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,180,216,.28) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-hero::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
    background-size:28px 28px;
    pointer-events:none;
}
.sc-hero-inner { position:relative; z-index:3; }

.sc-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22); border-radius:50px;
    padding:7px 18px; font-size:13px; font-weight:700; color:#fff;
    margin-bottom:22px; letter-spacing:.4px;
}
.sc-badge span.dot {
    width:8px; height:8px; border-radius:50%;
    background:#7dd3fc;
    box-shadow:0 0 0 3px rgba(125,211,252,.35);
    animation:sc-pulse 2s ease-in-out infinite;
}
@keyframes sc-pulse {
    0%,100%{box-shadow:0 0 0 3px rgba(125,211,252,.35);}
    50%    {box-shadow:0 0 0 7px rgba(125,211,252,.1);}
}
.sc-hero h1 {
    font-size:clamp(30px,5.5vw,58px); font-weight:900;
    color:#fff; margin-bottom:20px; line-height:1.08;
    letter-spacing:-.02em;
}
.sc-hero h1 .hi {
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.sc-hero p.sub {
    font-size:17px; color:rgba(255,255,255,.78);
    line-height:1.7; max-width:520px; margin-bottom:36px;
}
.sc-breadcrumb {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    list-style:none; padding:0; margin:0 0 30px;
}
.sc-breadcrumb li {
    font-size:13px; color:rgba(255,255,255,.6);
    display:flex; align-items:center; gap:6px;
}
.sc-breadcrumb li::after { content:'/'; opacity:.45; }
.sc-breadcrumb li:last-child::after { display:none; }
.sc-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
.sc-breadcrumb a:hover { color:#fff; }

.sc-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }
.btn-hero-main {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.22);
    transition:var(--t);
}
.btn-hero-main:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-hero-ghost {
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 28px; background:rgba(255,255,255,.1);
    backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.28);
    color:#fff; font-size:15px; font-weight:600;
    border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.18); color:#fff; }

/* floating image panel */
.sc-hero-img-panel {
    position:relative; display:flex;
    align-items:flex-end; justify-content:center; height:100%;
}
.sc-hero-img-panel .img-card {
    background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px 24px 0 0; padding:28px 28px 0;
    box-shadow:var(--sh-xl); overflow:hidden;
    animation:sc-rise .9s var(--ease) both;
    max-width:420px; width:100%;
}
@keyframes sc-rise {
    from{opacity:0;transform:translateY(40px);}
    to  {opacity:1;transform:translateY(0);}
}
.sc-hero-img-panel .img-card img {
    width:100%; display:block;
    filter:drop-shadow(0 -10px 30px rgba(0,0,0,.2));
    animation:sc-float 5s ease-in-out infinite;
}
@keyframes sc-float {
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-10px);}
}
.float-chip {
    position:absolute; z-index:5;
    background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
    border-radius:14px; padding:10px 16px; box-shadow:var(--sh-lg);
    display:flex; align-items:center; gap:10px;
    animation:sc-bob 4s ease-in-out infinite;
}
.float-chip.c1 { top:12%; right:-4%; animation-delay:.6s; }
.float-chip.c2 { bottom:30%; left:-6%; animation-delay:1.2s; }
@keyframes sc-bob {
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-6px);}
}
.float-chip .chip-icon {
    width:36px;height:36px; border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px; color:#fff; flex-shrink:0;
}
.float-chip .chip-text strong { display:block; font-size:16px; font-weight:800; color:var(--text-1); line-height:1; }
.float-chip .chip-text span   { font-size:11px; color:var(--text-3); }

.sc-hero-wave { position:relative; z-index:4; line-height:0; margin-top:20px; }
.sc-hero-wave svg { display:block; width:100%; }

/* ── BODY ──────────────────────────────────────────────── */
.sc-body { padding:80px 0; background:var(--bg-1); }

/* labels */
.sec-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:1.4px;
    padding:5px 14px; border-radius:50px; margin-bottom:14px;
}
.sec-label.blue   { background:rgba(0,112,243,.1);  color:var(--blue-1); }
.sec-label.teal   { background:rgba(15,118,110,.1); color:var(--teal-1); }
.sec-label.green  { background:rgba(0,176,155,.1);  color:var(--green-1); }
.sec-label.purple { background:rgba(124,58,237,.1); color:var(--purple-1); }
.sec-label.orange { background:rgba(247,151,30,.1); color:var(--orange-1); }

/* premium card */
.pc {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:36px; margin-bottom:28px;
    box-shadow:var(--sh-sm); transition:var(--t);
    position:relative; overflow:hidden;
}
.pc:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.pc .acc-bar {
    position:absolute; top:0; left:0;
    width:100%; height:4px;
    border-radius:var(--r) var(--r) 0 0;
}
.pc .acc-bar.blue   { background:var(--g-blue); }
.pc .acc-bar.teal   { background:var(--g-teal); }
.pc .acc-bar.green  { background:var(--g-green); }
.pc .acc-bar.purple { background:var(--g-purple); }
.pc .acc-bar.orange { background:var(--g-orange); }
.pc h2 { font-size:clamp(21px,3vw,28px); font-weight:800; color:var(--text-1); margin-bottom:14px; line-height:1.2; }
.pc h3 { font-size:clamp(18px,2.5vw,22px); font-weight:700; color:var(--text-1); margin-bottom:14px; }
.pc p  { font-size:15px; color:var(--text-2); line-height:1.78; margin:0; }
.licon {
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:30px; color:#fff; margin-bottom:20px; flex-shrink:0;
}
.licon.blue   { background:var(--g-blue); box-shadow:0 6px 20px rgba(0,112,243,.3); }
.licon.purple { background:var(--g-purple); box-shadow:0 6px 20px rgba(124,58,237,.3); }
.licon.green  { background:var(--g-green); box-shadow:0 6px 20px rgba(0,176,155,.3); }

/* ── PROCESS STEPS (vertical timeline) ──────────────────── */
.vsteps { display:flex; flex-direction:column; gap:0; margin-top:16px; }
.vs-item {
    display:flex; gap:20px;
    position:relative; padding-bottom:28px;
}
.vs-item:last-child { padding-bottom:0; }
.vs-num-col { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.vs-num {
    width:46px; height:46px; border-radius:50%;
    background:var(--g-blue); color:#fff;
    font-size:17px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,112,243,.3);
    flex-shrink:0; position:relative; z-index:2;
}
.vs-line {
    flex:1; width:2px; min-height:28px;
    background:linear-gradient(to bottom,rgba(0,112,243,.5),rgba(0,112,243,.08));
    margin-top:4px; border-radius:2px;
}
.vs-body { padding-top:10px; flex:1; }
.vs-body h5 { font-size:15px; font-weight:700; color:var(--text-1); margin:0 0 6px; }
.vs-body p  { font-size:13.5px; color:var(--text-3); line-height:1.65; margin:0; }

/* ── FEATURES 2x2 ───────────────────────────────────────── */
.feat-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:12px; }
.fg-card {
    border-radius:var(--r-sm); border:1.5px solid var(--line);
    padding:24px 20px; background:var(--bg-2);
    transition:var(--t); position:relative; overflow:hidden;
}
.fg-card .glow-bg {
    position:absolute; bottom:-20px; right:-20px;
    width:80px; height:80px; border-radius:50%;
    opacity:.08; transition:var(--t);
}
.fg-card:hover .glow-bg { opacity:.18; transform:scale(1.5); }
.fg-card:hover { border-color:transparent; box-shadow:var(--sh-md); }
.fg-card.fb { border-top:3px solid var(--blue-1); }
.fg-card.fg { border-top:3px solid var(--green-1); }
.fg-card.fo { border-top:3px solid var(--orange-1); }
.fg-card.fp { border-top:3px solid var(--purple-1); }
.fg-card.fb:hover { background:linear-gradient(135deg,rgba(0,112,243,.04),rgba(0,180,216,.03)); }
.fg-card.fg:hover { background:linear-gradient(135deg,rgba(0,176,155,.04),rgba(56,239,125,.03)); }
.fg-card.fo:hover { background:linear-gradient(135deg,rgba(247,151,30,.04),rgba(255,210,0,.03)); }
.fg-card.fp:hover { background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(167,139,250,.03)); }
.fg-icon {
    width:50px;height:50px; border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px; margin-bottom:14px; background:var(--bg-1); transition:var(--t);
}
.fg-card.fb .fg-icon { color:var(--blue-1); }
.fg-card.fg .fg-icon { color:var(--green-1); }
.fg-card.fo .fg-icon { color:var(--orange-1); }
.fg-card.fp .fg-icon { color:var(--purple-1); }
.fg-card:hover .fg-icon { transform:scale(1.12) rotate(-4deg); }
.fg-card h4 { font-size:15px; font-weight:700; color:var(--text-1); margin-bottom:8px; }
.fg-card p  { font-size:13px; color:var(--text-3); line-height:1.6; margin:0; }

/* ── WHY CHOOSE LIST ─────────────────────────────────────── */
.why-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.wl-row {
    display:flex; align-items:center; gap:16px;
    padding:16px 20px; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--bg-2);
    transition:var(--t);
}
.wl-row:hover { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(0,180,216,.1); transform:translateX(5px); }
.wl-row .wl-ico {
    width:46px;height:46px; border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:21px; color:#fff; flex-shrink:0; transition:var(--t);
}
.wl-row:hover .wl-ico { transform:scale(1.1); }
.wl-row .wl-txt { flex:1; }
.wl-row .wl-txt h5 { font-size:14px; font-weight:700; color:var(--text-1); margin:0 0 3px; }
.wl-row .wl-txt p  { font-size:13px; color:var(--text-3); margin:0; line-height:1.5; }
.wl-row .wl-check { font-size:20px; color:var(--line); transition:var(--t); }
.wl-row:hover .wl-check { color:var(--blue-1); }

/* ── DELIVERABLES ────────────────────────────────────────── */
.del-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px; }
.del-tile {
    display:flex; align-items:center; gap:13px;
    padding:18px 16px; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--bg-2);
    font-size:13px; font-weight:600; color:var(--text-2);
    cursor:default; transition:var(--t);
}
.del-tile i { font-size:24px; flex-shrink:0; }
.del-tile:hover { border-color:transparent; box-shadow:var(--sh-md); transform:translateY(-3px); }
.del-tile.d1 i { color:var(--blue-1); }
.del-tile.d2 i { color:var(--purple-1); }
.del-tile.d3 i { color:var(--green-1); }
.del-tile.d4 i { color:var(--orange-1); }
.del-tile.d1:hover { background:linear-gradient(135deg,rgba(0,112,243,.06),rgba(0,180,216,.04)); }
.del-tile.d2:hover { background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(167,139,250,.04)); }
.del-tile.d3:hover { background:linear-gradient(135deg,rgba(0,176,155,.06),rgba(56,239,125,.04)); }
.del-tile.d4:hover { background:linear-gradient(135deg,rgba(247,151,30,.06),rgba(255,210,0,.04)); }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sc-sidebar { position:sticky; top:96px; }
.s-card {
    background:var(--bg-2); border-radius:var(--r);
    border:1px solid var(--line); overflow:hidden;
    margin-bottom:20px; box-shadow:var(--sh-sm); transition:var(--t);
}
.s-card:hover { box-shadow:var(--sh-md); }
.s-card .s-head { padding:18px 22px; display:flex; align-items:center; gap:12px; color:#fff; }
.s-card .s-head i  { font-size:22px; }
.s-card .s-head h4 { margin:0; font-size:16px; font-weight:700; color:#fff; }
.s-head.h-blue   { background:var(--g-blue); }
.s-head.h-navy   { background:var(--g-navy); }
.s-head.h-green  { background:var(--g-green); }
.s-head.h-orange { background:var(--g-orange); }
.s-card .s-body  { padding:18px; }

.s-menu { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.s-menu a { text-decoration:none; display:block; }
.s-menu-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1.5px solid transparent;
    transition:var(--t); font-size:13px; font-weight:600; color:var(--text-1);
}
.s-menu-row .mr-icon {
    width:34px;height:34px; border-radius:9px;
    background:#e8edf5; display:flex;align-items:center;justify-content:center;
    font-size:17px; color:#5a6ad4; flex-shrink:0; transition:var(--t);
}
.s-menu-row span { flex:1; }
.s-menu-row .mr-arr { font-size:18px; color:var(--line); transition:var(--t); }
.s-menu-row:hover { background:var(--bg-2); border-color:var(--line); box-shadow:var(--sh-sm); }
.s-menu-row:hover .mr-arr { color:var(--blue-1); transform:translateX(3px); }
.s-menu li.cur .s-menu-row {
    background:var(--g-blue); color:#fff; border-color:transparent;
    box-shadow:0 4px 18px rgba(0,112,243,.3);
}
.s-menu li.cur .mr-icon { background:rgba(255,255,255,.25); color:#fff; }
.s-menu li.cur .mr-arr  { color:rgba(255,255,255,.8); }
.s-menu li.cur .s-menu-row span { color:#fff; }

.s-stats { display:flex; flex-direction:column; gap:10px; }
.s-stat {
    display:flex; align-items:center; gap:14px;
    padding:14px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1px solid transparent; transition:var(--t);
}
.s-stat:hover { background:var(--bg-2); border-color:var(--line); box-shadow:var(--sh-sm); }
.s-stat .ss-icon {
    width:46px;height:46px; border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:21px; color:#fff; flex-shrink:0;
}
.s-stat strong { display:block; font-size:22px; font-weight:900; color:var(--text-1); line-height:1; margin-bottom:2px; }
.s-stat span   { font-size:12px; color:var(--text-3); }

.s-contact { text-align:center; }
.s-contact .sc-circle {
    width:70px;height:70px; border-radius:50%;
    background:var(--g-green); display:flex;align-items:center;justify-content:center;
    font-size:32px; color:#fff; margin:0 auto 16px;
    box-shadow:0 6px 20px rgba(0,176,155,.3);
}
.s-contact h5 { font-size:16px; font-weight:700; color:var(--text-1); margin-bottom:14px; }
.sc-link {
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 18px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1px solid var(--line);
    color:var(--text-1); text-decoration:none;
    font-size:13px; font-weight:600;
    margin-bottom:8px; transition:var(--t);
}
.sc-link:last-of-type { margin-bottom:0; }
.sc-link i { color:var(--green-1); font-size:16px; transition:var(--t); }
.sc-link:hover { background:var(--g-green); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(0,176,155,.3); }
.sc-link:hover i { color:#fff; }

.s-dl { display:flex; flex-direction:column; gap:10px; }
.dl-row {
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; background:var(--bg-2);
    border:1.5px solid var(--line); border-radius:var(--r-sm);
    text-decoration:none; color:var(--text-1); transition:var(--t);
}
.dl-row:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.dl-row.pdf:hover { background:linear-gradient(135deg,#ff6b6b,#ee5a6f); border-color:transparent; color:#fff; }
.dl-row.doc:hover { background:var(--g-blue); border-color:transparent; color:#fff; }
.dl-row .dr-ico {
    width:44px;height:44px; border-radius:11px;
    background:var(--bg-1); display:flex;align-items:center;justify-content:center;
    font-size:22px; flex-shrink:0; transition:var(--t);
}
.dl-row.pdf .dr-ico { color:#ee5a6f; }
.dl-row.doc .dr-ico { color:var(--blue-1); }
.dl-row:hover .dr-ico { background:rgba(255,255,255,.2); color:#fff; }
.dl-row .dr-txt { flex:1; }
.dl-row .dr-txt strong { display:block; font-size:13px; font-weight:700; }
.dl-row .dr-txt span   { font-size:11px; opacity:.65; }
.dl-row .dr-arr { font-size:20px; flex-shrink:0; }

/* ── CTA ─────────────────────────────────────────────────── */
.sc-cta {
    background:var(--g-dark);
    padding:90px 0; position:relative; overflow:hidden;
}
.sc-cta::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-cta::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.sc-cta-inner { position:relative; z-index:3; }
.sc-cta-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2); border-radius:50px;
    padding:6px 16px; font-size:12px; font-weight:700;
    color:#fff; margin-bottom:18px; letter-spacing:.4px;
}
.sc-cta h2 {
    font-size:clamp(24px,4.5vw,42px); font-weight:900;
    color:#fff; margin-bottom:14px; line-height:1.1;
}
.sc-cta p { font-size:16px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin:0; }
.cta-btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn-cta-w {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.2); transition:var(--t);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-cta-g {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.28); color:#fff;
    font-size:15px; font-weight:600; border-radius:50px;
    text-decoration:none; transition:var(--t);
}
.btn-cta-g:hover { background:rgba(255,255,255,.2); color:#fff; }

.cta-card-stack { display:flex; flex-direction:column; gap:14px; max-width:340px; margin-left:auto; }
.cta-mini-card {
    background:rgba(255,255,255,.1); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.18); border-radius:var(--r-sm);
    padding:16px 20px; display:flex; align-items:center; gap:14px;
    animation:cta-slide .8s var(--ease) both;
}
.cta-mini-card:nth-child(2) { animation-delay:.15s; margin-left:24px; }
.cta-mini-card:nth-child(3) { animation-delay:.3s; margin-left:12px; }
@keyframes cta-slide {
    from{opacity:0;transform:translateX(30px);}
    to  {opacity:1;transform:translateX(0);}
}
.cta-mini-card .cmc-icon {
    width:42px;height:42px; border-radius:11px;
    background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:20px; color:#fff; flex-shrink:0;
}
.cta-mini-card .cmc-text strong { display:block; font-size:14px; font-weight:700; color:#fff; }
.cta-mini-card .cmc-text span   { font-size:12px; color:rgba(255,255,255,.7); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:991.98px){
    .sc-sidebar { position:static; margin-top:34px; }
    .sc-hero { padding:70px 0 0; }
    .sc-hero-img-panel { display:none; }
    .cta-card-stack { display:none; }
    .feat-grid-2 { grid-template-columns:repeat(2,1fr); }
    .del-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:767.98px){
    .sc-body { padding:52px 0; }
    .pc { padding:24px 20px; }
    .feat-grid-2 { grid-template-columns:1fr; gap:12px; }
    .del-grid { grid-template-columns:1fr; }
    .sc-cta { padding:60px 0; }
    .cta-btns { flex-direction:column; }
    .btn-cta-w, .btn-cta-g { justify-content:center; }
}
@media(max-width:575.98px){
    .sc-hero h1 { font-size:28px; }
    .pc h2 { font-size:20px; }
    .pc h3 { font-size:17px; }
    .sc-hero-ctas { flex-direction:column; }
    .btn-hero-main, .btn-hero-ghost { justify-content:center; }
}


/* ===================================================================
   Sap Implementation - Centralized Styles
   =================================================================== */

/* ============================================================
   SAP IMPLEMENTATION — PREMIUM DESIGN
   ============================================================ */
:root {
    --teal-1: #0f766e;
    --teal-2: #14b8a6;
    --teal-3: #5eead4;
    --navy:   #0f2027;
    --blue-1: #0070f3;
    --blue-2: #00b4d8;
    --green-1:#00b09b;
    --green-2:#38ef7d;
    --purple-1:#7c3aed;
    --purple-2:#a78bfa;
    --orange-1:#f7971e;
    --orange-2:#ffd200;
    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --bg-1:   #f8fafc;
    --bg-2:   #ffffff;
    --line:   #e2e8f0;
    --r:      18px;
    --r-sm:   12px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --t:      0.32s var(--ease);
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.09);
    --sh-lg: 0 12px 48px rgba(0,0,0,.13);
    --sh-xl: 0 24px 80px rgba(0,0,0,.16);
    --g-teal:   linear-gradient(135deg,#0f766e,#14b8a6);
    --g-blue:   linear-gradient(135deg,#0070f3,#00b4d8);
    --g-green:  linear-gradient(135deg,#00b09b,#38ef7d);
    --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
    --g-orange: linear-gradient(135deg,#f7971e,#ffd200);
    --g-navy:   linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    --g-dark:   linear-gradient(135deg,#0f2027,#0f766e,#14b8a6);
}

/* ── HERO ──────────────────────────────────────────────── */
.si-hero {
    position: relative;
    background: var(--g-dark);
    padding: 90px 0 0;
    overflow: hidden;
    color: #fff;
}
/* mesh overlay */
.si-hero::before {
    content:'';
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(20,184,166,.28) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(0,112,243,.20) 0%, transparent 60%);
    pointer-events:none;
}
/* grid dots */
.si-hero::after {
    content:'';
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events:none;
}
.si-hero-inner { position:relative; z-index:3; }

/* badge */
.si-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22);
    border-radius:50px; padding:7px 18px;
    font-size:13px; font-weight:700; color:#fff;
    margin-bottom:22px; letter-spacing:.4px;
}
.si-badge span.dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--teal-3);
    box-shadow:0 0 0 3px rgba(94,234,212,.35);
    animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,100%{box-shadow:0 0 0 3px rgba(94,234,212,.35);}
    50%    {box-shadow:0 0 0 7px rgba(94,234,212,.1);}
}

.si-hero h1 {
    font-size: clamp(30px, 5.5vw, 58px);
    font-weight: 900; line-height: 1.08;
    color: #fff; margin-bottom: 20px;
    letter-spacing: -.02em;
}
.si-hero h1 .hi { /* highlight word */
    background: linear-gradient(90deg,#5eead4,#7dd3fc);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.si-hero p.sub {
    font-size: 17px; color: rgba(255,255,255,.78);
    line-height: 1.7; max-width: 520px; margin-bottom: 36px;
}
.si-breadcrumb {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    list-style:none; padding:0; margin:0 0 30px;
}
.si-breadcrumb li {
    font-size:13px; color:rgba(255,255,255,.6);
    display:flex; align-items:center; gap:6px;
}
.si-breadcrumb li::after { content:'/'; opacity:.45; }
.si-breadcrumb li:last-child::after { display:none; }
.si-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
.si-breadcrumb a:hover { color:#fff; }

/* hero CTA pills */
.si-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }
.btn-hero-main {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px; background:#fff; color:var(--teal-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.22);
    transition:var(--t);
}
.btn-hero-main:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.28); color:var(--teal-1); }
.btn-hero-ghost {
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 28px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(6px);
    border:1.5px solid rgba(255,255,255,.28);
    color:#fff; font-size:15px; font-weight:600;
    border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.18); color:#fff; }

/* floating image panel */
.si-hero-img-panel {
    position:relative; display:flex;
    align-items:flex-end; justify-content:center;
    height:100%;
}
.si-hero-img-panel .img-card {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px 24px 0 0;
    padding: 28px 28px 0;
    box-shadow: var(--sh-xl);
    overflow: hidden;
    animation: hero-rise .9s var(--ease) both;
    max-width: 420px;
    width: 100%;
}
@keyframes hero-rise {
    from { opacity:0; transform:translateY(40px); }
    to   { opacity:1; transform:translateY(0); }
}
.si-hero-img-panel .img-card img {
    width: 100%; display:block;
    filter: drop-shadow(0 -10px 30px rgba(0,0,0,.2));
    animation: float-img 5s ease-in-out infinite;
}
@keyframes float-img {
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-10px);}
}

/* floating stats chips */
.float-chip {
    position:absolute; z-index:5;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    border-radius:14px; padding:10px 16px;
    box-shadow:var(--sh-lg);
    display:flex; align-items:center; gap:10px;
    animation: chip-bob 4s ease-in-out infinite;
}
.float-chip.c1 { top:12%; right:-4%; animation-delay:.6s; }
.float-chip.c2 { bottom:30%; left:-6%; animation-delay:1.2s; }
@keyframes chip-bob {
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-6px);}
}
.float-chip .chip-icon {
    width:36px;height:36px; border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:#fff; flex-shrink:0;
}
.float-chip .chip-text strong { display:block; font-size:16px; font-weight:800; color:var(--text-1); line-height:1; }
.float-chip .chip-text span   { font-size:11px; color:var(--text-3); }

/* hero wave bottom */
.si-hero-wave {
    position:relative; z-index:4;
    line-height:0; margin-top:20px;
}
.si-hero-wave svg { display:block; width:100%; }

/* ── BODY AREA ──────────────────────────────────────────── */
.si-body { padding:80px 0; background:var(--bg-1); }

/* ── SECTION LABEL ──────────────────────────────────────── */
.sec-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:1.4px;
    padding:5px 14px; border-radius:50px;
    margin-bottom:14px;
}
.sec-label.teal   { background:rgba(15,118,110,.1); color:var(--teal-1); }
.sec-label.blue   { background:rgba(0,112,243,.1);  color:var(--blue-1); }
.sec-label.green  { background:rgba(0,176,155,.1);  color:var(--green-1); }
.sec-label.purple { background:rgba(124,58,237,.1); color:var(--purple-1); }
.sec-label.orange { background:rgba(247,151,30,.1); color:var(--orange-1); }

/* ── PREMIUM CARD ───────────────────────────────────────── */
.pc {
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:36px;
    margin-bottom:28px;
    box-shadow:var(--sh-sm);
    transition:var(--t);
    position:relative;
    overflow:hidden;
}
.pc:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }

/* accent bar */
.pc .acc-bar {
    position:absolute; top:0; left:0;
    width:100%; height:4px;
    border-radius:var(--r) var(--r) 0 0;
}
.pc .acc-bar.teal   { background:var(--g-teal); }
.pc .acc-bar.blue   { background:var(--g-blue); }
.pc .acc-bar.green  { background:var(--g-green); }
.pc .acc-bar.purple { background:var(--g-purple); }
.pc .acc-bar.orange { background:var(--g-orange); }

.pc h2 {
    font-size:clamp(21px,3vw,28px); font-weight:800;
    color:var(--text-1); margin-bottom:14px; line-height:1.2;
}
.pc h3 {
    font-size:clamp(18px,2.5vw,22px); font-weight:700;
    color:var(--text-1); margin-bottom:14px;
}
.pc p { font-size:15px; color:var(--text-2); line-height:1.78; margin:0; }

/* large icon */
.licon {
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:30px; color:#fff; margin-bottom:20px; flex-shrink:0;
}
.licon.teal   { background:var(--g-teal); box-shadow:0 6px 20px rgba(15,118,110,.3); }
.licon.blue   { background:var(--g-blue); box-shadow:0 6px 20px rgba(0,112,243,.3); }
.licon.purple { background:var(--g-purple); box-shadow:0 6px 20px rgba(124,58,237,.3); }
.licon.orange { background:var(--g-orange); box-shadow:0 6px 20px rgba(247,151,30,.3); }

/* ── SAP ACTIVATE TIMELINE ──────────────────────────────── */
.activate-timeline {
    display:flex; gap:0;
    background:var(--bg-1);
    border-radius:var(--r-sm);
    overflow:hidden;
    border:1px solid var(--line);
    margin-top:16px;
}
.at-phase {
    flex:1; display:flex; flex-direction:column;
    align-items:center; text-align:center;
    padding:20px 10px 18px;
    position:relative;
    border-right:1px solid var(--line);
    transition:var(--t);
    cursor:default;
}
.at-phase:last-child { border-right:none; }
.at-phase:hover { background:var(--g-teal); }
.at-phase:hover .atp-num { background:rgba(255,255,255,.25); color:#fff; }
.at-phase:hover .atp-icon { color:#fff; }
.at-phase:hover .atp-label { color:#fff; }
.at-phase:hover .atp-sub   { color:rgba(255,255,255,.75); }

/* connector arrow */
.at-phase::after {
    content:'';
    position:absolute; right:-8px; top:50%;
    transform:translateY(-50%);
    width:0; height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:8px solid var(--line);
    z-index:2;
}
.at-phase:last-child::after { display:none; }
.at-phase:hover::after { border-left-color:transparent; }

.atp-num {
    width:26px; height:26px; border-radius:50%;
    background:var(--g-teal); color:#fff;
    font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 10px; transition:var(--t);
}
.atp-icon { font-size:26px; color:var(--teal-1); margin-bottom:8px; transition:var(--t); }
.atp-label { font-size:12px; font-weight:800; color:var(--text-1); transition:var(--t); margin:0 0 3px; }
.atp-sub   { font-size:10px; color:var(--text-3); transition:var(--t); margin:0; }

/* ── FEATURES 2x2 ───────────────────────────────────────── */
.feat-grid-2 {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:16px; margin-top:12px;
}
.fg-card {
    border-radius:var(--r-sm);
    border:1.5px solid var(--line);
    padding:24px 20px;
    background:var(--bg-2);
    transition:var(--t);
    position:relative;
    overflow:hidden;
}
.fg-card .glow-bg {
    position:absolute; bottom:-20px; right:-20px;
    width:80px; height:80px; border-radius:50%;
    opacity:.08; transition:var(--t);
}
.fg-card:hover .glow-bg { opacity:.18; transform:scale(1.5); }
.fg-card:hover { border-color:transparent; box-shadow:var(--sh-md); }
.fg-card.ft { border-top:3px solid var(--teal-1); }
.fg-card.fg { border-top:3px solid var(--green-1); }
.fg-card.fo { border-top:3px solid var(--orange-1); }
.fg-card.fp { border-top:3px solid var(--purple-1); }
.fg-card.ft:hover { background:linear-gradient(135deg,rgba(15,118,110,.04),rgba(20,184,166,.03)); }
.fg-card.fg:hover { background:linear-gradient(135deg,rgba(0,176,155,.04),rgba(56,239,125,.03)); }
.fg-card.fo:hover { background:linear-gradient(135deg,rgba(247,151,30,.04),rgba(255,210,0,.03)); }
.fg-card.fp:hover { background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(167,139,250,.03)); }
.fg-icon {
    width:50px;height:50px; border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px; margin-bottom:14px; background:var(--bg-1);
    transition:var(--t);
}
.fg-card.ft .fg-icon { color:var(--teal-1); }
.fg-card.fg .fg-icon { color:var(--green-1); }
.fg-card.fo .fg-icon { color:var(--orange-1); }
.fg-card.fp .fg-icon { color:var(--purple-1); }
.fg-card:hover .fg-icon { transform:scale(1.12) rotate(-4deg); }
.fg-card h4 { font-size:15px; font-weight:700; color:var(--text-1); margin-bottom:8px; }
.fg-card p  { font-size:13px; color:var(--text-3); line-height:1.6; margin:0; }

/* ── IMPLEMENTATION TYPES ───────────────────────────────── */
.impl-type-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.it-row {
    display:flex; align-items:center; gap:16px;
    padding:16px 20px;
    border-radius:var(--r-sm);
    border:1px solid var(--line);
    background:var(--bg-2);
    transition:var(--t);
    text-decoration:none;
}
.it-row:hover { border-color:var(--teal-2); box-shadow:0 0 0 3px rgba(20,184,166,.12); transform:translateX(5px); }
.it-row .it-num {
    width:34px; height:34px; border-radius:9px;
    background:var(--bg-1); border:1.5px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    font-size:13px; font-weight:800; color:var(--teal-1);
    flex-shrink:0; transition:var(--t);
}
.it-row:hover .it-num { background:var(--g-teal); color:#fff; border-color:transparent; }
.it-row .it-ico {
    width:44px;height:44px; border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    font-size:21px; flex-shrink:0; transition:var(--t);
}
.it-row:hover .it-ico { transform:scale(1.1); }
.it-row .it-body { flex:1; }
.it-row .it-body h5 { font-size:14px; font-weight:700; color:var(--text-1); margin:0 0 3px; }
.it-row .it-body p  { font-size:13px; color:var(--text-3); margin:0; line-height:1.5; }
.it-row .it-arr { font-size:20px; color:var(--line); transition:var(--t); }
.it-row:hover .it-arr { color:var(--teal-1); }

/* ── INDUSTRY GRID ──────────────────────────────────────── */
.ind-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:10px; margin-top:14px;
}
.ind-tile {
    display:flex; flex-direction:column; align-items:center;
    text-align:center; gap:9px;
    padding:18px 8px; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--bg-2);
    transition:var(--t); cursor:default;
    font-size:12px; font-weight:700; color:var(--text-2);
}
.ind-tile .it-circle {
    width:46px;height:46px; border-radius:50%;
    background:var(--bg-1);
    display:flex;align-items:center;justify-content:center;
    font-size:21px; color:var(--teal-1); transition:var(--t);
}
.ind-tile:hover { background:var(--g-teal); border-color:transparent; color:#fff; box-shadow:0 6px 24px rgba(15,118,110,.25); transform:translateY(-4px); }
.ind-tile:hover .it-circle { background:rgba(255,255,255,.22); color:#fff; }

/* ── METRICS ────────────────────────────────────────────── */
.metrics-row {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:14px; margin-top:14px;
}
.mc {
    display:flex; flex-direction:column; align-items:center;
    text-align:center; padding:22px 12px;
    border-radius:var(--r-sm); border:1px solid var(--line);
    background:var(--bg-2); transition:var(--t); position:relative; overflow:hidden;
}
.mc::before {
    content:''; position:absolute;
    bottom:0;left:0;right:0;height:3px;
    background:var(--g-teal); transform:scaleX(0);
    transition:var(--t); transform-origin:left;
}
.mc:hover::before { transform:scaleX(1); }
.mc:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.mc .mc-ico { font-size:28px; color:var(--teal-1); margin-bottom:10px; }
.mc strong { font-size:26px; font-weight:900; color:var(--text-1); line-height:1; display:block; margin-bottom:5px; }
.mc span   { font-size:12px; color:var(--text-3); font-weight:600; }

/* ── SIDEBAR ────────────────────────────────────────────── */
.si-sidebar { position:sticky; top:96px; }
.s-card {
    background:var(--bg-2); border-radius:var(--r);
    border:1px solid var(--line); overflow:hidden;
    margin-bottom:20px; box-shadow:var(--sh-sm);
    transition:var(--t);
}
.s-card:hover { box-shadow:var(--sh-md); }
.s-card .s-head {
    padding:18px 22px; display:flex; align-items:center; gap:12px;
    color:#fff;
}
.s-card .s-head i  { font-size:22px; }
.s-card .s-head h4 { margin:0; font-size:16px; font-weight:700; color:#fff; }
.s-head.h-teal   { background:var(--g-teal); }
.s-head.h-navy   { background:var(--g-navy); }
.s-head.h-green  { background:var(--g-green); }
.s-head.h-orange { background:var(--g-orange); }
.s-card .s-body  { padding:18px; }

/* service menu */
.s-menu { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.s-menu a { text-decoration:none; display:block; }
.s-menu-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1.5px solid transparent;
    transition:var(--t); font-size:13px; font-weight:600; color:var(--text-1);
}
.s-menu-row .mr-icon {
    width:34px;height:34px; border-radius:9px;
    background:#e8edf5; display:flex;align-items:center;justify-content:center;
    font-size:17px; color:#5a6ad4; flex-shrink:0; transition:var(--t);
}
.s-menu-row span { flex:1; }
.s-menu-row .mr-arr { font-size:18px; color:var(--line); transition:var(--t); }
.s-menu-row:hover { background:var(--bg-2); border-color:var(--line); box-shadow:var(--sh-sm); }
.s-menu-row:hover .mr-arr { color:var(--teal-1); transform:translateX(3px); }
.s-menu li.cur .s-menu-row {
    background:var(--g-teal); color:#fff; border-color:transparent;
    box-shadow:0 4px 18px rgba(15,118,110,.3);
}
.s-menu li.cur .mr-icon { background:rgba(255,255,255,.25); color:#fff; }
.s-menu li.cur .mr-arr  { color:rgba(255,255,255,.8); }
.s-menu li.cur .s-menu-row span { color:#fff; }

/* stat rows */
.s-stats { display:flex; flex-direction:column; gap:10px; }
.s-stat {
    display:flex; align-items:center; gap:14px;
    padding:14px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1px solid transparent;
    transition:var(--t);
}
.s-stat:hover { background:var(--bg-2); border-color:var(--line); box-shadow:var(--sh-sm); }
.s-stat .ss-icon {
    width:46px;height:46px; border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:21px; color:#fff; flex-shrink:0;
}
.s-stat strong { display:block; font-size:22px; font-weight:900; color:var(--text-1); line-height:1; margin-bottom:2px; }
.s-stat span   { font-size:12px; color:var(--text-3); }

/* contact */
.s-contact { text-align:center; }
.s-contact .sc-circle {
    width:70px;height:70px; border-radius:50%;
    background:var(--g-green);
    display:flex;align-items:center;justify-content:center;
    font-size:32px; color:#fff; margin:0 auto 16px;
    box-shadow:0 6px 20px rgba(0,176,155,.3);
}
.s-contact h5 { font-size:16px; font-weight:700; color:var(--text-1); margin-bottom:14px; }
.sc-link {
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 18px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1px solid var(--line);
    color:var(--text-1); text-decoration:none;
    font-size:13px; font-weight:600;
    margin-bottom:8px; transition:var(--t);
}
.sc-link:last-of-type { margin-bottom:0; }
.sc-link i { color:var(--green-1); font-size:16px; transition:var(--t); }
.sc-link:hover { background:var(--g-green); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(0,176,155,.3); }
.sc-link:hover i { color:#fff; }

/* download */
.s-dl { display:flex; flex-direction:column; gap:10px; }
.dl-row {
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; background:var(--bg-2);
    border:1.5px solid var(--line); border-radius:var(--r-sm);
    text-decoration:none; color:var(--text-1);
    transition:var(--t);
}
.dl-row:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.dl-row.pdf:hover { background:linear-gradient(135deg,#ff6b6b,#ee5a6f); border-color:transparent; color:#fff; }
.dl-row.doc:hover { background:var(--g-teal); border-color:transparent; color:#fff; }
.dl-row .dr-ico {
    width:44px;height:44px; border-radius:11px;
    background:var(--bg-1); display:flex;align-items:center;justify-content:center;
    font-size:22px; flex-shrink:0; transition:var(--t);
}
.dl-row.pdf .dr-ico { color:#ee5a6f; }
.dl-row.doc .dr-ico { color:var(--teal-1); }
.dl-row:hover .dr-ico { background:rgba(255,255,255,.2); color:#fff; }
.dl-row .dr-txt { flex:1; }
.dl-row .dr-txt strong { display:block; font-size:13px; font-weight:700; }
.dl-row .dr-txt span   { font-size:11px; opacity:.65; }
.dl-row .dr-arr { font-size:20px; flex-shrink:0; }

/* ── PREMIUM CTA ────────────────────────────────────────── */
.si-cta {
    background:var(--g-dark);
    padding:90px 0; position:relative; overflow:hidden;
}
.si-cta::before {
    content:'';
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse 70% 70% at 80% 50%, rgba(20,184,166,.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 10% 60%, rgba(0,112,243,.18) 0%, transparent 60%);
    pointer-events:none;
}
.si-cta::after {
    content:'';
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
    background-size:28px 28px;
    pointer-events:none;
}
.si-cta-inner { position:relative; z-index:3; }
.si-cta-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2); border-radius:50px;
    padding:6px 16px; font-size:12px; font-weight:700;
    color:#fff; margin-bottom:18px; letter-spacing:.4px;
}
.si-cta h2 {
    font-size:clamp(24px,4.5vw,42px); font-weight:900;
    color:#fff; margin-bottom:14px; line-height:1.1;
}
.si-cta p { font-size:16px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin:0; }
.cta-btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn-cta-w {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px; background:#fff; color:var(--teal-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.2);
    transition:var(--t);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:var(--teal-1); }
.btn-cta-g {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px;
    background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.28); color:#fff;
    font-size:15px; font-weight:600; border-radius:50px;
    text-decoration:none; transition:var(--t);
}
.btn-cta-g:hover { background:rgba(255,255,255,.2); color:#fff; }

/* CTA right side illustration */
.cta-right { position:relative; }
.cta-card-stack {
    display:flex; flex-direction:column; gap:14px;
    max-width:340px; margin-left:auto;
}
.cta-mini-card {
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--r-sm); padding:16px 20px;
    display:flex; align-items:center; gap:14px;
    animation:card-slide .8s var(--ease) both;
}
.cta-mini-card:nth-child(2) { animation-delay:.15s; margin-left:24px; }
.cta-mini-card:nth-child(3) { animation-delay:.3s; margin-left:12px; }
@keyframes card-slide {
    from { opacity:0; transform:translateX(30px); }
    to   { opacity:1; transform:translateX(0); }
}
.cta-mini-card .cmc-icon {
    width:42px;height:42px; border-radius:11px;
    background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:20px; color:#fff; flex-shrink:0;
}
.cta-mini-card .cmc-text strong { display:block; font-size:14px; font-weight:700; color:#fff; }
.cta-mini-card .cmc-text span   { font-size:12px; color:rgba(255,255,255,.7); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:991.98px){
    .si-sidebar { position:static; margin-top:34px; }
    .activate-timeline { flex-wrap:wrap; }
    .at-phase { flex:1 1 30%; border-bottom:1px solid var(--line); }
    .at-phase::after { display:none; }
    .ind-grid { grid-template-columns:repeat(4,1fr); }
    .metrics-row { grid-template-columns:repeat(3,1fr); }
    .si-hero { padding:70px 0 0; }
    .si-hero-img-panel { display:none; }
    .cta-card-stack { display:none; }
    .feat-grid-2 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:767.98px){
    .si-body { padding:52px 0; }
    .pc { padding:24px 20px; }
    .feat-grid-2 { grid-template-columns:1fr; gap:12px; }
    .ind-grid { grid-template-columns:repeat(4,1fr); }
    .metrics-row { grid-template-columns:repeat(2,1fr); }
    .si-cta { padding:60px 0; }
    .cta-btns { flex-direction:column; }
    .btn-cta-w, .btn-cta-g { justify-content:center; }
}
@media(max-width:575.98px){
    .si-hero h1 { font-size:28px; }
    .pc h2 { font-size:20px; }
    .pc h3 { font-size:17px; }
    .ind-grid { grid-template-columns:repeat(2,1fr); }
    .metrics-row { grid-template-columns:repeat(2,1fr); }
    .at-phase { flex:1 1 45%; }
    .si-hero-ctas { flex-direction:column; }
    .btn-hero-main, .btn-hero-ghost { justify-content:center; }
}


/* ===================================================================
   Legal Page - Centralized Styles
   =================================================================== */

    .legal-page-content {
        padding: 60px 0;
        background: #fff;
    }

    .legal-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .legal-page-content h1 {
        font-size: 36px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
        border-bottom: 3px solid #667eea;
        padding-bottom: 15px;
    }

    .legal-page-content .last-updated {
        color: #666;
        font-size: 14px;
        font-style: italic;
        margin-bottom: 30px;
        display: block;
    }

    .legal-page-content h2 {
        font-size: 26px;
        font-weight: 600;
        color: #444;
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .legal-page-content h3 {
        font-size: 20px;
        font-weight: 600;
        color: #555;
        margin-top: 30px;
        margin-bottom: 12px;
    }

    .legal-page-content p {
        font-size: 16px;
        line-height: 1.8;
        color: #555;
        margin-bottom: 15px;
    }

    .legal-page-content ul,
    .legal-page-content ol {
        font-size: 16px;
        line-height: 1.8;
        color: #555;
        margin-bottom: 20px;
        padding-left: 30px;
    }

    .legal-page-content ul li,
    .legal-page-content ol li {
        margin-bottom: 10px;
    }

    .legal-page-content a {
        color: #667eea;
        text-decoration: underline;
    }

    .legal-page-content a:hover {
        color: #764ba2;
    }

    .back-button {
        display: inline-block;
        margin-bottom: 30px;
        padding: 10px 20px;
        background: #f0f0f0;
        color: #333;
        text-decoration: none;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .back-button:hover {
        background: #667eea;
        color: #fff;
    }

    .back-button i {
        margin-right: 5px;
    }


/* ===================================================================
   Contact Us - Centralized Styles
   =================================================================== */

/* ============================================================
   CONTACT US — PREMIUM DESIGN
   ============================================================ */
:root {
    --blue-1: #0070f3;
    --blue-2: #00b4d8;
    --navy:   #0a2540;
    --teal-1: #0f766e;
    --green-1:#00b09b;
    --purple-1:#7c3aed;
    --orange-1:#f7971e;
    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --bg-1:   #f8fafc;
    --bg-2:   #ffffff;
    --line:   #e2e8f0;
    --r:      18px;
    --r-sm:   12px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --t:      0.32s var(--ease);
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.09);
    --sh-lg: 0 12px 48px rgba(0,0,0,.13);
    --g-blue:   linear-gradient(135deg,#0070f3,#00b4d8);
    --g-teal:   linear-gradient(135deg,#0f766e,#14b8a6);
    --g-green:  linear-gradient(135deg,#00b09b,#38ef7d);
    --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
    --g-orange: linear-gradient(135deg,#f7971e,#ffd200);
    --g-navy:   linear-gradient(135deg,#0a2540,#203a43,#2c5364);
    --g-dark:   linear-gradient(135deg,#0a2540,#1565c0,#00b4d8);
}

/* ── HERO ─────────────────────────────────── */
.sc-hero {
    position:relative; background:var(--g-dark);
    padding:90px 0 0; overflow:hidden; color:#fff;
}
.sc-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,180,216,.28) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-hero::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.sc-hero-inner { position:relative; z-index:3; }
.sc-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22); border-radius:50px;
    padding:7px 18px; font-size:13px; font-weight:700; color:#fff;
    margin-bottom:22px; letter-spacing:.4px;
}
.sc-badge span.dot {
    width:8px; height:8px; border-radius:50%; background:#7dd3fc;
    box-shadow:0 0 0 3px rgba(125,211,252,.35);
    animation:sc-pulse 2s ease-in-out infinite;
}
@keyframes sc-pulse {
    0%,100%{box-shadow:0 0 0 3px rgba(125,211,252,.35);}
    50%    {box-shadow:0 0 0 7px rgba(125,211,252,.1);}
}
.sc-hero h1 {
    font-size:clamp(30px,5.5vw,58px); font-weight:900;
    color:#fff; margin-bottom:20px; line-height:1.08; letter-spacing:-.02em;
}
.sc-hero h1 .hi {
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sc-hero p.sub { font-size:17px; color:rgba(255,255,255,.78); line-height:1.7; max-width:520px; margin-bottom:36px; }
.sc-breadcrumb {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    list-style:none; padding:0; margin:0 0 30px;
}
.sc-breadcrumb li { font-size:13px; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:6px; }
.sc-breadcrumb li::after { content:'/'; opacity:.45; }
.sc-breadcrumb li:last-child::after { display:none; }
.sc-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
.sc-breadcrumb a:hover { color:#fff; }
.sc-hero-wave { position:relative; z-index:4; line-height:0; margin-top:20px; }
.sc-hero-wave svg { display:block; width:100%; }

/* ── BODY ─────────────────────────────────────────────── */
.sc-body { padding:80px 0; background:var(--bg-1); }
.sec-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px;
    padding:5px 14px; border-radius:50px; margin-bottom:14px;
}
.sec-label.blue   { background:rgba(0,112,243,.1);  color:var(--blue-1); }
.sec-label.green  { background:rgba(0,176,155,.1);  color:var(--green-1); }
.sec-label.purple { background:rgba(124,58,237,.1); color:var(--purple-1); }
.sec-label.orange { background:rgba(247,151,30,.1); color:var(--orange-1); }

/* premium card */
.pc {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:36px; margin-bottom:28px;
    box-shadow:var(--sh-sm); transition:var(--t); position:relative; overflow:hidden;
}
.pc .acc-bar {
    position:absolute; top:0; left:0; width:100%; height:4px;
    border-radius:var(--r) var(--r) 0 0;
}
.pc .acc-bar.blue   { background:var(--g-blue); }
.pc .acc-bar.green  { background:var(--g-green); }
.pc .acc-bar.purple { background:var(--g-purple); }
.pc .acc-bar.orange { background:var(--g-orange); }
.pc h2 { font-size:clamp(21px,3vw,28px); font-weight:800; color:var(--text-1); margin-bottom:14px; line-height:1.2; }
.pc h3 { font-size:clamp(18px,2.5vw,22px); font-weight:700; color:var(--text-1); margin-bottom:14px; }
.pc p  { font-size:15px; color:var(--text-2); line-height:1.78; margin:0; }

/* ── CONTACT INFO CARDS ─────────────────────────────────── */
.contact-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px; }
@media(max-width:767px){ .contact-cards-grid { grid-template-columns:1fr; } }
@media(max-width:991px) and (min-width:768px){ .contact-cards-grid { grid-template-columns:repeat(2,1fr); } }

.cinfo-card {
    border-radius:var(--r-sm); border:1.5px solid var(--line);
    padding:28px 22px; background:var(--bg-2);
    text-align:center; transition:var(--t);
}
.cinfo-card:hover { border-color:transparent; box-shadow:var(--sh-md); transform:translateY(-4px); }
.cinfo-icon {
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff; margin:0 auto 18px;
}
.cinfo-icon.ci-blue   { background:var(--g-blue);   box-shadow:0 6px 20px rgba(0,112,243,.3); }
.cinfo-icon.ci-green  { background:var(--g-green);  box-shadow:0 6px 20px rgba(0,176,155,.3); }
.cinfo-icon.ci-purple { background:var(--g-purple); box-shadow:0 6px 20px rgba(124,58,237,.3); }
.cinfo-card h4 { font-size:15px; font-weight:800; color:var(--text-1); margin-bottom:12px; text-transform:uppercase; letter-spacing:.5px; }
.cinfo-card a,
.cinfo-card span {
    display:block; font-size:14px; color:var(--text-2);
    text-decoration:none; margin-bottom:4px; transition:color var(--t); line-height:1.6;
}
.cinfo-card a:hover { color:var(--blue-1); }

/* ── CONTACT FORM ───────────────────────────────────────── */
.cf-field { margin-bottom:18px; }
.cf-field input,
.cf-field textarea,
.cf-field select {
    width:100%; padding:13px 16px;
    border:1.5px solid var(--line); border-radius:var(--r-sm);
    font-size:14.5px; color:var(--text-1); background:var(--bg-1);
    outline:none; transition:border-color var(--t); font-family:inherit;
}
.cf-field input:focus,
.cf-field textarea:focus,
.cf-field select:focus {
    border-color:var(--blue-1); background:var(--bg-2);
    box-shadow:0 0 0 3px rgba(0,112,243,.08);
}
.cf-field textarea { min-height:140px; resize:vertical; }
.cf-check-row {
    display:flex; align-items:center; gap:10px; margin-bottom:24px;
}
.cf-check-row input[type="checkbox"] {
    width:18px; height:18px; cursor:pointer;
    accent-color:var(--blue-1); flex-shrink:0;
}
.cf-check-row label { font-size:13px; color:var(--text-2); cursor:pointer; margin:0; }
.cf-check-row a { color:var(--blue-1); text-decoration:none; }
.cf-check-row a:hover { text-decoration:underline; }
.btn-submit {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 36px; background:var(--g-blue); color:#fff;
    font-size:15px; font-weight:700; border:none; border-radius:50px;
    cursor:pointer; transition:var(--t);
}
.btn-submit:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,112,243,.35); }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sc-sidebar { position:sticky; top:96px; }
.s-card {
    background:var(--bg-2); border-radius:var(--r);
    border:1px solid var(--line); overflow:hidden;
    margin-bottom:20px; box-shadow:var(--sh-sm); transition:var(--t);
}
.s-card:hover { box-shadow:var(--sh-md); }
.s-card .s-head { padding:18px 22px; display:flex; align-items:center; gap:12px; }
.s-card .s-head i  { font-size:22px; color:#fff; }
.s-card .s-head h4 { margin:0; font-size:16px; font-weight:700; color:#fff; }
.s-head.h-blue   { background:var(--g-blue); }
.s-head.h-navy   { background:var(--g-navy); }
.s-head.h-green  { background:var(--g-green); }
.s-card .s-body  { padding:18px; }

/* service links in sidebar */
.s-menu { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.s-menu a { text-decoration:none; display:block; }
.s-menu-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1.5px solid transparent;
    transition:var(--t); font-size:13px; font-weight:600; color:var(--text-1);
}
.s-menu-row .mr-icon {
    width:34px; height:34px; border-radius:9px;
    background:#e8edf5; display:flex; align-items:center; justify-content:center;
    font-size:17px; color:#5a6ad4; flex-shrink:0; transition:var(--t);
}
.s-menu-row span { flex:1; }
.s-menu-row .mr-arr { font-size:18px; color:var(--line); transition:var(--t); }
.s-menu-row:hover { background:var(--bg-2); border-color:var(--line); box-shadow:var(--sh-sm); }
.s-menu-row:hover .mr-arr { color:var(--blue-1); transform:translateX(3px); }

/* quick contact links */
.qc-link {
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 18px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1px solid var(--line);
    color:var(--text-1); text-decoration:none;
    font-size:13px; font-weight:600;
    margin-bottom:8px; transition:var(--t);
}
.qc-link:last-of-type { margin-bottom:0; }
.qc-link i { font-size:16px; transition:var(--t); }
.qc-link.blue i   { color:var(--blue-1); }
.qc-link.green i  { color:var(--green-1); }
.qc-link.purple i { color:var(--purple-1); }
.qc-link:hover { background:var(--g-blue); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(0,112,243,.3); }
.qc-link:hover i { color:#fff; }

/* stats */
.s-stats { display:flex; flex-direction:column; gap:10px; }
.s-stat {
    display:flex; align-items:center; gap:14px;
    padding:14px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1px solid transparent; transition:var(--t);
}
.s-stat:hover { background:var(--bg-2); border-color:var(--line); box-shadow:var(--sh-sm); }
.s-stat .ss-icon {
    width:46px; height:46px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:21px; color:#fff; flex-shrink:0;
}
.s-stat strong { display:block; font-size:22px; font-weight:900; color:var(--text-1); line-height:1; margin-bottom:2px; }
.s-stat span   { font-size:12px; color:var(--text-3); }

/* alert banners */
.alert-success-premium {
    padding:16px 20px; background:rgba(0,176,155,.1);
    border:1px solid rgba(0,176,155,.3); border-radius:var(--r-sm);
    color:var(--teal-1); font-size:14px; font-weight:600;
    display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.alert-error-premium {
    padding:16px 20px; background:rgba(239,68,68,.08);
    border:1px solid rgba(239,68,68,.2); border-radius:var(--r-sm);
    color:#ef4444; font-size:14px; font-weight:600;
    display:flex; align-items:center; gap:10px; margin-bottom:20px;
}

/* ── CTA ──────────────────────────────────────────────── */
.sc-cta {
    background:var(--g-dark); padding:90px 0; position:relative; overflow:hidden;
}
.sc-cta::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-cta::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.sc-cta-inner { position:relative; z-index:3; }
.sc-cta h2 { font-size:clamp(24px,4.5vw,42px); font-weight:900; color:#fff; margin-bottom:14px; line-height:1.1; }
.sc-cta p  { font-size:16px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin:0; }
.cta-btns  { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn-cta-w {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.2); transition:var(--t);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-cta-g {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.28); color:#fff;
    font-size:15px; font-weight:600; border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-cta-g:hover { background:rgba(255,255,255,.2); color:#fff; }

@media(max-width:991.98px){ .sc-sidebar { position:static; margin-top:34px; } .sc-hero { padding:70px 0 0; } }
@media(max-width:767.98px){ .sc-body { padding:52px 0; } .pc { padding:24px 20px; } }
@media(max-width:575.98px){
    .sc-hero h1 { font-size:28px; }
    .contact-cards-grid { grid-template-columns:1fr; }
}


/* ===================================================================
   Blog - Centralized Styles
   =================================================================== */

/* ============================================================
   BLOG PAGE — PREMIUM DESIGN (matches service/technology pages)
   ============================================================ */
:root {
    --blue-1: #0070f3;
    --blue-2: #00b4d8;
    --navy:   #0a2540;
    --teal-1: #0f766e;
    --teal-2: #14b8a6;
    --green-1:#00b09b;
    --green-2:#38ef7d;
    --purple-1:#7c3aed;
    --purple-2:#a78bfa;
    --orange-1:#f7971e;
    --orange-2:#ffd200;
    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --bg-1:   #f8fafc;
    --bg-2:   #ffffff;
    --line:   #e2e8f0;
    --r:      18px;
    --r-sm:   12px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --t:      0.32s var(--ease);
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.09);
    --sh-lg: 0 12px 48px rgba(0,0,0,.13);
    --sh-xl: 0 24px 80px rgba(0,0,0,.16);
    --g-blue:   linear-gradient(135deg,#0070f3,#00b4d8);
    --g-teal:   linear-gradient(135deg,#0f766e,#14b8a6);
    --g-green:  linear-gradient(135deg,#00b09b,#38ef7d);
    --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
    --g-orange: linear-gradient(135deg,#f7971e,#ffd200);
    --g-navy:   linear-gradient(135deg,#0a2540,#203a43,#2c5364);
    --g-dark:   linear-gradient(135deg,#0a2540,#1565c0,#00b4d8);
}

/* ── HERO ──────────────────────────────────────────────── */
.sc-hero {
    position:relative;
    background:var(--g-dark);
    padding:90px 0 0;
    overflow:hidden; color:#fff;
}
.sc-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,180,216,.28) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-hero::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
    background-size:28px 28px;
    pointer-events:none;
}
.sc-hero-inner { position:relative; z-index:3; }
.sc-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22); border-radius:50px;
    padding:7px 18px; font-size:13px; font-weight:700; color:#fff;
    margin-bottom:22px; letter-spacing:.4px;
}
.sc-badge span.dot {
    width:8px; height:8px; border-radius:50%;
    background:#7dd3fc;
    box-shadow:0 0 0 3px rgba(125,211,252,.35);
    animation:sc-pulse 2s ease-in-out infinite;
}
@keyframes sc-pulse {
    0%,100%{box-shadow:0 0 0 3px rgba(125,211,252,.35);}
    50%    {box-shadow:0 0 0 7px rgba(125,211,252,.1);}
}
.sc-hero h1 {
    font-size:clamp(30px,5.5vw,58px); font-weight:900;
    color:#fff; margin-bottom:20px; line-height:1.08;
    letter-spacing:-.02em;
}
.sc-hero h1 .hi {
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.sc-hero p.sub {
    font-size:17px; color:rgba(255,255,255,.78);
    line-height:1.7; max-width:520px; margin-bottom:36px;
}
.sc-breadcrumb {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    list-style:none; padding:0; margin:0 0 30px;
}
.sc-breadcrumb li {
    font-size:13px; color:rgba(255,255,255,.6);
    display:flex; align-items:center; gap:6px;
}
.sc-breadcrumb li::after { content:'/'; opacity:.45; }
.sc-breadcrumb li:last-child::after { display:none; }
.sc-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
.sc-breadcrumb a:hover { color:#fff; }
.sc-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }
.btn-hero-main {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.22);
    transition:var(--t);
}
.btn-hero-main:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-hero-ghost {
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 28px; background:rgba(255,255,255,.1);
    backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.28);
    color:#fff; font-size:15px; font-weight:600;
    border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.18); color:#fff; }

/* hero stats row */
.hero-stats {
    display:flex; flex-wrap:wrap; gap:28px; margin-bottom:0;
}
.hero-stat strong { display:block; font-size:26px; font-weight:900; color:#fff; line-height:1; }
.hero-stat span   { font-size:12px; color:rgba(255,255,255,.65); }

.sc-hero-wave { position:relative; z-index:4; line-height:0; margin-top:20px; }
.sc-hero-wave svg { display:block; width:100%; }

/* ── BODY ──────────────────────────────────────────────── */
.sc-body { padding:80px 0; background:var(--bg-1); }

.sec-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:1.4px;
    padding:5px 14px; border-radius:50px; margin-bottom:14px;
}
.sec-label.blue   { background:rgba(0,112,243,.1);  color:var(--blue-1); }
.sec-label.teal   { background:rgba(15,118,110,.1); color:var(--teal-1); }
.sec-label.green  { background:rgba(0,176,155,.1);  color:var(--green-1); }
.sec-label.purple { background:rgba(124,58,237,.1); color:var(--purple-1); }
.sec-label.orange { background:rgba(247,151,30,.1); color:var(--orange-1); }

/* premium card */
.pc {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:36px; margin-bottom:28px;
    box-shadow:var(--sh-sm); transition:var(--t);
    position:relative; overflow:hidden;
}
.pc .acc-bar {
    position:absolute; top:0; left:0;
    width:100%; height:4px;
    border-radius:var(--r) var(--r) 0 0;
}
.pc .acc-bar.blue   { background:var(--g-blue); }
.pc .acc-bar.teal   { background:var(--g-teal); }
.pc .acc-bar.green  { background:var(--g-green); }
.pc .acc-bar.purple { background:var(--g-purple); }
.pc .acc-bar.orange { background:var(--g-orange); }
.pc h2 { font-size:clamp(21px,3vw,28px); font-weight:800; color:var(--text-1); margin-bottom:14px; line-height:1.2; }
.pc h3 { font-size:clamp(18px,2.5vw,22px); font-weight:700; color:var(--text-1); margin-bottom:14px; }
.pc p  { font-size:15px; color:var(--text-2); line-height:1.78; margin:0; }

/* ── BLOG CARDS ─────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:991px){ .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:575px){ .blog-grid { grid-template-columns:1fr; } }

.b-card {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); overflow:hidden;
    box-shadow:var(--sh-sm); transition:var(--t);
    display:flex; flex-direction:column;
}
.b-card:hover { box-shadow:var(--sh-md); transform:translateY(-4px); }
.b-card-img {
    position:relative; overflow:hidden;
    aspect-ratio:16/9;
}
.b-card-img img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s var(--ease);
}
.b-card:hover .b-card-img img { transform:scale(1.06); }
.b-card-cat {
    position:absolute; top:14px; left:14px;
    background:var(--g-blue); color:#fff;
    font-size:11px; font-weight:700; letter-spacing:.5px;
    padding:4px 12px; border-radius:50px;
    text-transform:uppercase;
}
.b-card-body { padding:22px; flex:1; display:flex; flex-direction:column; }
.b-card-meta {
    display:flex; flex-wrap:wrap; align-items:center; gap:14px;
    margin-bottom:12px;
}
.b-card-meta span {
    font-size:12px; color:var(--text-3);
    display:flex; align-items:center; gap:5px;
}
.b-card-meta span i { font-size:13px; }
.b-card-body h3 {
    font-size:16px; font-weight:700; color:var(--text-1);
    margin-bottom:10px; line-height:1.4;
}
.b-card-body h3 a { color:inherit; text-decoration:none; transition:color var(--t); }
.b-card-body h3 a:hover { color:var(--blue-1); }
.b-card-body p {
    font-size:13.5px; color:var(--text-3); line-height:1.65;
    margin-bottom:18px; flex:1;
}
.b-card-foot {
    border-top:1px solid var(--line); padding-top:14px; margin-top:auto;
    display:flex; align-items:center; justify-content:space-between;
}
.b-read-more {
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:700; color:var(--blue-1);
    text-decoration:none; transition:gap var(--t);
}
.b-read-more:hover { gap:10px; color:var(--blue-1); }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sc-sidebar { position:sticky; top:96px; }
.s-card {
    background:var(--bg-2); border-radius:var(--r);
    border:1px solid var(--line); overflow:hidden;
    margin-bottom:20px; box-shadow:var(--sh-sm); transition:var(--t);
}
.s-card:hover { box-shadow:var(--sh-md); }
.s-card .s-head { padding:18px 22px; display:flex; align-items:center; gap:12px; color:#fff; }
.s-card .s-head i  { font-size:22px; }
.s-card .s-head h4 { margin:0; font-size:16px; font-weight:700; color:#fff; }
.s-head.h-blue   { background:var(--g-blue); }
.s-head.h-navy   { background:var(--g-navy); }
.s-head.h-green  { background:var(--g-green); }
.s-head.h-purple { background:var(--g-purple); }
.s-card .s-body  { padding:18px; }

/* category filter pills */
.cat-pills { display:flex; flex-direction:column; gap:8px; }
.cat-pill {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1.5px solid var(--line);
    text-decoration:none; color:var(--text-1);
    font-size:13px; font-weight:600; transition:var(--t);
}
.cat-pill:hover, .cat-pill.active {
    background:var(--g-blue); color:#fff; border-color:transparent;
    box-shadow:0 4px 14px rgba(0,112,243,.25);
}
.cat-pill i { font-size:16px; transition:var(--t); }
.cat-pill:hover i { transform:translateX(3px); }

/* recent posts in sidebar */
.recent-post-item {
    display:flex; gap:12px; align-items:flex-start;
    padding:10px 0; border-bottom:1px solid var(--line);
}
.recent-post-item:last-child { border-bottom:none; padding-bottom:0; }
.rp-thumb {
    width:64px; height:64px; border-radius:10px; overflow:hidden; flex-shrink:0;
}
.rp-thumb img { width:100%; height:100%; object-fit:cover; }
.rp-info { flex:1; }
.rp-info time { font-size:11px; color:var(--text-3); display:block; margin-bottom:4px; }
.rp-info h5 { font-size:13px; font-weight:700; color:var(--text-1); margin:0; line-height:1.4; }
.rp-info h5 a { color:inherit; text-decoration:none; }
.rp-info h5 a:hover { color:var(--blue-1); }

/* newsletter in sidebar */
.nl-box { text-align:center; }
.nl-box .nl-icon {
    width:60px; height:60px; border-radius:50%;
    background:var(--g-blue); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; margin:0 auto 14px;
    box-shadow:0 6px 20px rgba(0,112,243,.3);
}
.nl-box p { font-size:13px; color:var(--text-3); margin-bottom:14px; line-height:1.6; }
.nl-input-wrap { display:flex; flex-direction:column; gap:8px; }
.nl-input-wrap input {
    width:100%; padding:11px 14px; border:1.5px solid var(--line);
    border-radius:var(--r-sm); font-size:13px; color:var(--text-1);
    background:var(--bg-1); outline:none; transition:border-color var(--t);
}
.nl-input-wrap input:focus { border-color:var(--blue-1); }
.nl-submit-btn {
    width:100%; padding:11px; background:var(--g-blue); color:#fff;
    border:none; border-radius:var(--r-sm); font-size:14px; font-weight:700;
    cursor:pointer; transition:var(--t); display:flex; align-items:center; justify-content:center; gap:8px;
}
.nl-submit-btn:hover { opacity:.88; transform:translateY(-2px); }

/* ── PAGINATION ─────────────────────────────────────────── */
.pag-wrap { display:flex; justify-content:center; margin-top:36px; }
.pag-wrap .pagination .page-link {
    border-radius:var(--r-sm); margin:0 3px;
    border:1.5px solid var(--line); color:var(--text-1);
    font-weight:600; padding:8px 14px; transition:var(--t);
}
.pag-wrap .pagination .page-item.active .page-link,
.pag-wrap .pagination .page-link:hover {
    background:var(--g-blue); border-color:transparent; color:#fff;
    box-shadow:0 4px 14px rgba(0,112,243,.3);
}

/* ── CTA ─────────────────────────────────────────────────── */
.sc-cta {
    background:var(--g-dark);
    padding:90px 0; position:relative; overflow:hidden;
}
.sc-cta::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-cta::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.sc-cta-inner { position:relative; z-index:3; }
.sc-cta h2 {
    font-size:clamp(24px,4.5vw,42px); font-weight:900;
    color:#fff; margin-bottom:14px; line-height:1.1;
}
.sc-cta p { font-size:16px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin:0; }
.cta-btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn-cta-w {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.2); transition:var(--t);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-cta-g {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.28); color:#fff;
    font-size:15px; font-weight:600; border-radius:50px;
    text-decoration:none; transition:var(--t);
}
.btn-cta-g:hover { background:rgba(255,255,255,.2); color:#fff; }

/* no posts */
.no-posts-box {
    text-align:center; padding:60px 20px;
    border:2px dashed var(--line); border-radius:var(--r);
    background:var(--bg-2);
}
.no-posts-box i { font-size:48px; color:var(--line); margin-bottom:16px; display:block; }
.no-posts-box h3 { font-size:20px; color:var(--text-1); margin-bottom:8px; }
.no-posts-box p { color:var(--text-3); margin:0; }

/* responsive */
@media(max-width:991.98px){
    .sc-sidebar { position:static; margin-top:34px; }
    .sc-hero { padding:70px 0 0; }
}
@media(max-width:767.98px){
    .sc-body { padding:52px 0; }
    .pc { padding:24px 20px; }
    .sc-cta { padding:60px 0; }
}
@media(max-width:575.98px){
    .sc-hero h1 { font-size:28px; }
    .sc-hero-ctas { flex-direction:column; }
    .btn-hero-main, .btn-hero-ghost { justify-content:center; }
}


/* ===================================================================
   Blog Details - Centralized Styles
   =================================================================== */

/* ============================================================
   BLOG DETAILS — PREMIUM DESIGN
   ============================================================ */
:root {
    --blue-1: #0070f3;
    --blue-2: #00b4d8;
    --navy:   #0a2540;
    --teal-1: #0f766e;
    --green-1:#00b09b;
    --green-2:#38ef7d;
    --purple-1:#7c3aed;
    --orange-1:#f7971e;
    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --bg-1:   #f8fafc;
    --bg-2:   #ffffff;
    --line:   #e2e8f0;
    --r:      18px;
    --r-sm:   12px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --t:      0.32s var(--ease);
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.09);
    --sh-lg: 0 12px 48px rgba(0,0,0,.13);
    --g-blue:   linear-gradient(135deg,#0070f3,#00b4d8);
    --g-teal:   linear-gradient(135deg,#0f766e,#14b8a6);
    --g-green:  linear-gradient(135deg,#00b09b,#38ef7d);
    --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
    --g-orange: linear-gradient(135deg,#f7971e,#ffd200);
    --g-navy:   linear-gradient(135deg,#0a2540,#203a43,#2c5364);
    --g-dark:   linear-gradient(135deg,#0a2540,#1565c0,#00b4d8);
}

/* ── HERO ──────────────────────────────────────────────── */
.sc-hero {
    position:relative; background:var(--g-dark);
    padding:90px 0 0; overflow:hidden; color:#fff;
}
.sc-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,180,216,.28) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-hero::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.sc-hero-inner { position:relative; z-index:3; }
.sc-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22); border-radius:50px;
    padding:7px 18px; font-size:13px; font-weight:700; color:#fff;
    margin-bottom:22px; letter-spacing:.4px;
}
.sc-badge span.dot {
    width:8px; height:8px; border-radius:50%; background:#7dd3fc;
    box-shadow:0 0 0 3px rgba(125,211,252,.35);
    animation:sc-pulse 2s ease-in-out infinite;
}
@keyframes sc-pulse {
    0%,100%{box-shadow:0 0 0 3px rgba(125,211,252,.35);}
    50%    {box-shadow:0 0 0 7px rgba(125,211,252,.1);}
}
.sc-hero h1 {
    font-size:clamp(24px,4vw,44px); font-weight:900;
    color:#fff; margin-bottom:20px; line-height:1.15; letter-spacing:-.02em;
}
.sc-breadcrumb {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    list-style:none; padding:0; margin:0 0 24px;
}
.sc-breadcrumb li { font-size:13px; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:6px; }
.sc-breadcrumb li::after { content:'/'; opacity:.45; }
.sc-breadcrumb li:last-child::after { display:none; }
.sc-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
.sc-breadcrumb a:hover { color:#fff; }
.hero-meta {
    display:flex; flex-wrap:wrap; gap:20px; margin-bottom:40px;
}
.hero-meta span {
    display:flex; align-items:center; gap:6px;
    font-size:13px; color:rgba(255,255,255,.75);
}
.hero-meta span i { font-size:15px; }
.sc-hero-wave { position:relative; z-index:4; line-height:0; margin-top:20px; }
.sc-hero-wave svg { display:block; width:100%; }

/* ── BODY ──────────────────────────────────────────────── */
.sc-body { padding:80px 0; background:var(--bg-1); }
.sec-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px;
    padding:5px 14px; border-radius:50px; margin-bottom:14px;
}
.sec-label.blue   { background:rgba(0,112,243,.1);  color:var(--blue-1); }
.sec-label.green  { background:rgba(0,176,155,.1);  color:var(--green-1); }
.sec-label.purple { background:rgba(124,58,237,.1); color:var(--purple-1); }
.sec-label.orange { background:rgba(247,151,30,.1); color:var(--orange-1); }

/* premium card */
.pc {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:36px; margin-bottom:28px;
    box-shadow:var(--sh-sm); transition:var(--t); position:relative; overflow:hidden;
}
.pc .acc-bar {
    position:absolute; top:0; left:0; width:100%; height:4px;
    border-radius:var(--r) var(--r) 0 0;
}
.pc .acc-bar.blue   { background:var(--g-blue); }
.pc .acc-bar.green  { background:var(--g-green); }
.pc .acc-bar.purple { background:var(--g-purple); }
.pc .acc-bar.orange { background:var(--g-orange); }
.pc h2 { font-size:clamp(21px,3vw,28px); font-weight:800; color:var(--text-1); margin-bottom:14px; line-height:1.2; }
.pc h3 { font-size:clamp(18px,2.5vw,22px); font-weight:700; color:var(--text-1); margin-bottom:14px; }

/* featured image */
.post-featured-img {
    width:100%; border-radius:var(--r); overflow:hidden;
    margin-bottom:28px; box-shadow:var(--sh-md);
    aspect-ratio:16/7;
}
.post-featured-img img { width:100%; height:100%; object-fit:cover; }

/* post content */
.blog-full-content {
    font-size:15.5px; color:var(--text-2); line-height:1.85;
}
.blog-full-content h1,.blog-full-content h2,.blog-full-content h3,
.blog-full-content h4,.blog-full-content h5 {
    color:var(--text-1); font-weight:700; margin-top:28px; margin-bottom:12px;
}
.blog-full-content p { margin-bottom:16px; }
.blog-full-content img { max-width:100%; border-radius:var(--r-sm); margin:16px 0; }
.blog-full-content a { color:var(--blue-1); text-decoration:underline; }
.blog-full-content ul,.blog-full-content ol { padding-left:24px; margin-bottom:16px; }
.blog-full-content li { margin-bottom:6px; }
.blog-full-content blockquote {
    border-left:4px solid var(--blue-1); margin:20px 0;
    padding:14px 20px; background:rgba(0,112,243,.05);
    border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--text-2);
    font-style:italic;
}

/* related posts */
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
@media(max-width:575px){ .related-grid { grid-template-columns:1fr; } }
.rel-card {
    border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
    transition:var(--t); background:var(--bg-2);
}
.rel-card:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.rel-card-img { aspect-ratio:16/9; overflow:hidden; }
.rel-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.rel-card:hover .rel-card-img img { transform:scale(1.06); }
.rel-card-body { padding:14px; }
.rel-card-meta { font-size:11px; color:var(--text-3); display:flex; gap:12px; margin-bottom:6px; }
.rel-card-body h4 { font-size:14px; font-weight:700; color:var(--text-1); margin:0; line-height:1.4; }
.rel-card-body h4 a { color:inherit; text-decoration:none; }
.rel-card-body h4 a:hover { color:var(--blue-1); }

/* comments */
.comment-item {
    display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
}
.comment-item:last-child { border-bottom:none; }
.comment-avatar {
    width:46px; height:46px; border-radius:50%;
    background:var(--g-blue); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:800; flex-shrink:0;
}
.comment-body { flex:1; }
.comment-body .c-meta {
    display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:6px;
}
.comment-body .c-name { font-size:14px; font-weight:700; color:var(--text-1); }
.comment-body .c-date { font-size:12px; color:var(--text-3); }
.comment-body .c-location { font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:3px; }
.comment-body p { font-size:14px; color:var(--text-2); margin:0; line-height:1.7; }

/* comment form */
.cf-field {
    margin-bottom:16px;
}
.cf-field input, .cf-field textarea {
    width:100%; padding:12px 16px;
    border:1.5px solid var(--line); border-radius:var(--r-sm);
    font-size:14px; color:var(--text-1); background:var(--bg-1);
    outline:none; transition:border-color var(--t); font-family:inherit;
}
.cf-field input:focus, .cf-field textarea:focus {
    border-color:var(--blue-1); background:var(--bg-2);
}
.cf-field textarea { min-height:130px; resize:vertical; }
.cf-hint { font-size:12px; color:var(--text-3); margin-top:4px; }
.cf-error { font-size:12px; color:#ef4444; margin-top:4px; }
.btn-submit {
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 30px; background:var(--g-blue); color:#fff;
    font-size:15px; font-weight:700; border:none; border-radius:50px;
    cursor:pointer; transition:var(--t);
}
.btn-submit:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,112,243,.35); }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sc-sidebar { position:sticky; top:96px; }
.s-card {
    background:var(--bg-2); border-radius:var(--r);
    border:1px solid var(--line); overflow:hidden;
    margin-bottom:20px; box-shadow:var(--sh-sm); transition:var(--t);
}
.s-card:hover { box-shadow:var(--sh-md); }
.s-card .s-head { padding:18px 22px; display:flex; align-items:center; gap:12px; }
.s-card .s-head i  { font-size:22px; color:#fff; }
.s-card .s-head h4 { margin:0; font-size:16px; font-weight:700; color:#fff; }
.s-head.h-blue   { background:var(--g-blue); }
.s-head.h-navy   { background:var(--g-navy); }
.s-head.h-green  { background:var(--g-green); }
.s-head.h-purple { background:var(--g-purple); }
.s-card .s-body  { padding:18px; }

.cat-pills { display:flex; flex-direction:column; gap:8px; }
.cat-pill {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-radius:var(--r-sm);
    background:var(--bg-1); border:1.5px solid var(--line);
    text-decoration:none; color:var(--text-1);
    font-size:13px; font-weight:600; transition:var(--t);
}
.cat-pill:hover {
    background:var(--g-blue); color:#fff; border-color:transparent;
    box-shadow:0 4px 14px rgba(0,112,243,.25);
}

.recent-post-item {
    display:flex; gap:12px; align-items:flex-start;
    padding:10px 0; border-bottom:1px solid var(--line);
}
.recent-post-item:last-child { border-bottom:none; }
.rp-thumb { width:64px; height:64px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.rp-thumb img { width:100%; height:100%; object-fit:cover; }
.rp-info { flex:1; }
.rp-info time { font-size:11px; color:var(--text-3); display:block; margin-bottom:4px; }
.rp-info h5 { font-size:13px; font-weight:700; color:var(--text-1); margin:0; line-height:1.4; }
.rp-info h5 a { color:inherit; text-decoration:none; }
.rp-info h5 a:hover { color:var(--blue-1); }

.tag-cloud-items { display:flex; flex-wrap:wrap; gap:8px; }
.tag-item {
    padding:6px 14px; border-radius:50px;
    border:1.5px solid var(--line); background:var(--bg-1);
    font-size:12px; font-weight:600; color:var(--text-2);
    text-decoration:none; transition:var(--t);
}
.tag-item:hover {
    background:var(--g-blue); color:#fff; border-color:transparent;
}

/* newsletter sidebar */
.nl-box { text-align:center; }
.nl-box .nl-icon {
    width:60px; height:60px; border-radius:50%;
    background:var(--g-green); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; margin:0 auto 14px;
    box-shadow:0 6px 20px rgba(0,176,155,.3);
}
.nl-box p { font-size:13px; color:var(--text-3); margin-bottom:14px; line-height:1.6; }
.nl-input-wrap { display:flex; flex-direction:column; gap:8px; }
.nl-input-wrap input {
    width:100%; padding:11px 14px; border:1.5px solid var(--line);
    border-radius:var(--r-sm); font-size:13px; color:var(--text-1);
    background:var(--bg-1); outline:none; transition:border-color var(--t);
}
.nl-input-wrap input:focus { border-color:var(--blue-1); }
.nl-submit-btn {
    width:100%; padding:11px; background:var(--g-green); color:#fff;
    border:none; border-radius:var(--r-sm); font-size:14px; font-weight:700;
    cursor:pointer; transition:var(--t); display:flex; align-items:center; justify-content:center; gap:8px;
}
.nl-submit-btn:hover { opacity:.88; }

/* ── CTA ──────────────────────────────────────────────── */
.sc-cta {
    background:var(--g-dark); padding:90px 0; position:relative; overflow:hidden;
}
.sc-cta::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-cta::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.sc-cta-inner { position:relative; z-index:3; }
.sc-cta h2 { font-size:clamp(24px,4.5vw,42px); font-weight:900; color:#fff; margin-bottom:14px; line-height:1.1; }
.sc-cta p  { font-size:16px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin:0; }
.cta-btns  { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn-cta-w {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.2); transition:var(--t);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-cta-g {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.28); color:#fff;
    font-size:15px; font-weight:600; border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-cta-g:hover { background:rgba(255,255,255,.2); color:#fff; }

/* no-comment alert */
.no-comment-box {
    text-align:center; padding:28px; border:2px dashed var(--line);
    border-radius:var(--r-sm);
}
.no-comment-box i { font-size:32px; color:var(--line); display:block; margin-bottom:10px; }
.no-comment-box p { color:var(--text-3); margin:0; font-size:14px; }

@media(max-width:991.98px){
    .sc-sidebar { position:static; margin-top:34px; }
    .sc-hero { padding:70px 0 0; }
}
@media(max-width:767.98px){
    .sc-body { padding:52px 0; }
    .pc { padding:24px 20px; }
}
@media(max-width:575.98px){
    .sc-hero h1 { font-size:22px; }
}


/* ===================================================================
   Careers - Centralized Styles
   =================================================================== */

/* ============================================================
   CAREERS PAGE — PREMIUM DESIGN
   ============================================================ */
:root {
    --blue-1: #0070f3;
    --blue-2: #00b4d8;
    --navy:   #0a2540;
    --teal-1: #0f766e;
    --green-1:#00b09b;
    --purple-1:#7c3aed;
    --purple-2:#a78bfa;
    --orange-1:#f7971e;
    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --bg-1:   #f8fafc;
    --bg-2:   #ffffff;
    --line:   #e2e8f0;
    --r:      18px;
    --r-sm:   12px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --t:      0.32s var(--ease);
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.09);
    --sh-lg: 0 12px 48px rgba(0,0,0,.13);
    --g-blue:   linear-gradient(135deg,#0070f3,#00b4d8);
    --g-teal:   linear-gradient(135deg,#0f766e,#14b8a6);
    --g-green:  linear-gradient(135deg,#00b09b,#38ef7d);
    --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
    --g-orange: linear-gradient(135deg,#f7971e,#ffd200);
    --g-navy:   linear-gradient(135deg,#0a2540,#203a43,#2c5364);
    --g-dark:   linear-gradient(135deg,#0a2540,#1565c0,#00b4d8);
}

/* ── HERO ─────────────────────────────────── */
.sc-hero {
    position:relative; background:var(--g-dark);
    padding:90px 0 0; overflow:hidden; color:#fff;
}
.sc-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,180,216,.28) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-hero::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.sc-hero-inner { position:relative; z-index:3; }
.sc-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22); border-radius:50px;
    padding:7px 18px; font-size:13px; font-weight:700; color:#fff;
    margin-bottom:22px; letter-spacing:.4px;
}
.sc-badge span.dot {
    width:8px; height:8px; border-radius:50%; background:#7dd3fc;
    box-shadow:0 0 0 3px rgba(125,211,252,.35);
    animation:sc-pulse 2s ease-in-out infinite;
}
@keyframes sc-pulse {
    0%,100%{box-shadow:0 0 0 3px rgba(125,211,252,.35);}
    50%    {box-shadow:0 0 0 7px rgba(125,211,252,.1);}
}
.sc-hero h1 {
    font-size:clamp(30px,5.5vw,58px); font-weight:900;
    color:#fff; margin-bottom:20px; line-height:1.08; letter-spacing:-.02em;
}
.sc-hero h1 .hi {
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sc-hero p.sub { font-size:17px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin-bottom:36px; }
.sc-breadcrumb {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    list-style:none; padding:0; margin:0 0 30px;
}
.sc-breadcrumb li { font-size:13px; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:6px; }
.sc-breadcrumb li::after { content:'/'; opacity:.45; }
.sc-breadcrumb li:last-child::after { display:none; }
.sc-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
.sc-breadcrumb a:hover { color:#fff; }
.sc-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }
.btn-hero-main {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.22); transition:var(--t);
}
.btn-hero-main:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-hero-ghost {
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 28px; background:rgba(255,255,255,.1);
    backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.28);
    color:#fff; font-size:15px; font-weight:600; border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.18); color:#fff; }
.sc-hero-wave { position:relative; z-index:4; line-height:0; margin-top:20px; }
.sc-hero-wave svg { display:block; width:100%; }

/* ── BODY ──────────────────────────────────────────────── */
.sc-body { padding:80px 0; background:var(--bg-1); }
.sec-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px;
    padding:5px 14px; border-radius:50px; margin-bottom:14px;
}
.sec-label.blue   { background:rgba(0,112,243,.1);  color:var(--blue-1); }
.sec-label.green  { background:rgba(0,176,155,.1);  color:var(--green-1); }
.sec-label.purple { background:rgba(124,58,237,.1); color:var(--purple-1); }
.sec-label.orange { background:rgba(247,151,30,.1); color:var(--orange-1); }
.sec-label.teal   { background:rgba(15,118,110,.1); color:var(--teal-1); }

/* premium card */
.pc {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:36px; margin-bottom:28px;
    box-shadow:var(--sh-sm); transition:var(--t); position:relative; overflow:hidden;
}
.pc .acc-bar {
    position:absolute; top:0; left:0; width:100%; height:4px;
    border-radius:var(--r) var(--r) 0 0;
}
.pc .acc-bar.blue   { background:var(--g-blue); }
.pc .acc-bar.green  { background:var(--g-green); }
.pc .acc-bar.purple { background:var(--g-purple); }
.pc .acc-bar.orange { background:var(--g-orange); }
.pc .acc-bar.teal   { background:var(--g-teal); }
.pc h2 { font-size:clamp(21px,3vw,28px); font-weight:800; color:var(--text-1); margin-bottom:14px; line-height:1.2; }
.pc h3 { font-size:clamp(18px,2.5vw,22px); font-weight:700; color:var(--text-1); margin-bottom:14px; }

/* ── VALUE CARDS (3-up grid) ───────────────────────────── */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px; }
@media(max-width:767px){ .values-grid { grid-template-columns:1fr; } }
@media(max-width:991px) and (min-width:768px){ .values-grid { grid-template-columns:repeat(2,1fr); } }

.val-card {
    border-radius:var(--r-sm); border:1.5px solid var(--line);
    padding:28px 22px; background:var(--bg-2);
    text-align:center; transition:var(--t); position:relative; overflow:hidden;
}
.val-card:hover { border-color:transparent; box-shadow:var(--sh-md); transform:translateY(-4px); }
.val-card.vc-blue  { border-top:3px solid var(--blue-1); }
.val-card.vc-green { border-top:3px solid var(--green-1); }
.val-card.vc-purple{ border-top:3px solid var(--purple-1); }
.val-card:hover.vc-blue  { background:linear-gradient(135deg,rgba(0,112,243,.04),rgba(0,180,216,.02)); }
.val-card:hover.vc-green { background:linear-gradient(135deg,rgba(0,176,155,.04),rgba(56,239,125,.02)); }
.val-card:hover.vc-purple{ background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(167,139,250,.02)); }
.val-icon {
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff; margin:0 auto 18px;
}
.val-icon.vi-blue   { background:var(--g-blue);   box-shadow:0 6px 20px rgba(0,112,243,.3); }
.val-icon.vi-green  { background:var(--g-green);  box-shadow:0 6px 20px rgba(0,176,155,.3); }
.val-icon.vi-purple { background:var(--g-purple); box-shadow:0 6px 20px rgba(124,58,237,.3); }
.val-card h4 { font-size:17px; font-weight:700; color:var(--text-1); margin-bottom:10px; }
.val-card p  { font-size:13.5px; color:var(--text-3); line-height:1.65; margin:0; }

/* ── BENEFITS LIST ──────────────────────────────────────── */
.why-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.wl-row {
    display:flex; align-items:center; gap:16px;
    padding:16px 20px; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--bg-2); transition:var(--t);
}
.wl-row:hover { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(0,180,216,.1); transform:translateX(5px); }
.wl-row .wl-ico {
    width:46px; height:46px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:21px; color:#fff; flex-shrink:0; transition:var(--t);
}
.wl-row:hover .wl-ico { transform:scale(1.1); }
.wl-row .wl-txt { flex:1; }
.wl-row .wl-txt h5 { font-size:14px; font-weight:700; color:var(--text-1); margin:0 0 3px; }
.wl-row .wl-txt p  { font-size:13px; color:var(--text-3); margin:0; line-height:1.5; }
.wl-row .wl-check  { font-size:20px; color:var(--line); transition:var(--t); }
.wl-row:hover .wl-check { color:var(--blue-1); }

/* ── JOB CARDS ──────────────────────────────────────────── */
.job-item {
    background:var(--bg-2); border:1.5px solid var(--line);
    border-radius:var(--r-sm); padding:24px 26px; margin-bottom:16px;
    transition:var(--t); position:relative; overflow:hidden;
}
.job-item::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:4px; background:var(--g-blue); border-radius:3px 0 0 3px;
}
.job-item:hover { border-color:rgba(0,112,243,.3); box-shadow:var(--sh-md); transform:translateX(4px); }
.job-item-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:16px; flex-wrap:wrap; margin-bottom:12px;
}
.job-item-header h3 { font-size:18px; font-weight:800; color:var(--text-1); margin:0 0 8px; }
.job-meta-row { display:flex; flex-wrap:wrap; gap:14px; }
.job-meta-row span {
    font-size:12.5px; color:var(--text-3);
    display:flex; align-items:center; gap:5px;
}
.job-meta-row span i { color:var(--blue-1); font-size:14px; }
.job-body p { font-size:14px; color:var(--text-2); line-height:1.65; margin-bottom:10px; }
.job-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.btn-apply {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 24px; background:var(--g-blue); color:#fff;
    font-size:14px; font-weight:700; border:none; border-radius:50px;
    cursor:pointer; text-decoration:none; transition:var(--t);
}
.btn-apply:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,112,243,.35); color:#fff; }
.btn-details {
    display:inline-flex; align-items:center; gap:6px;
    font-size:13.5px; font-weight:600; color:var(--blue-1);
    text-decoration:none; transition:var(--t);
}
.btn-details:hover { gap:10px; color:var(--blue-1); }

.no-jobs-box {
    text-align:center; padding:48px 24px; border:2px dashed var(--line);
    border-radius:var(--r-sm); background:var(--bg-1);
}
.no-jobs-box i { font-size:40px; color:var(--line); display:block; margin-bottom:12px; }
.no-jobs-box p { color:var(--text-3); margin:0; }

/* ── PROCESS TIMELINE ──────────────────────────────────── */
.vsteps { display:flex; flex-direction:column; gap:0; margin-top:16px; }
.vs-item { display:flex; gap:20px; position:relative; padding-bottom:28px; }
.vs-item:last-child { padding-bottom:0; }
.vs-num-col { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.vs-num {
    width:46px; height:46px; border-radius:50%;
    background:var(--g-blue); color:#fff;
    font-size:17px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,112,243,.3); flex-shrink:0; position:relative; z-index:2;
}
.vs-line {
    flex:1; width:2px; min-height:28px;
    background:linear-gradient(to bottom,rgba(0,112,243,.5),rgba(0,112,243,.08));
    margin-top:4px; border-radius:2px;
}
.vs-body { padding-top:10px; flex:1; }
.vs-body h5 { font-size:15px; font-weight:700; color:var(--text-1); margin:0 0 6px; }
.vs-body p  { font-size:13.5px; color:var(--text-3); line-height:1.65; margin:0; }

/* ── CTA BANNER ─────────────────────────────────────────── */
.career-cta-banner {
    background:var(--g-dark); border-radius:var(--r);
    padding:40px 36px; position:relative; overflow:hidden; margin-bottom:28px;
}
.career-cta-banner::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 60% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%);
    pointer-events:none;
}
.career-cta-banner::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:24px 24px; pointer-events:none;
}
.career-cta-banner .inner { position:relative; z-index:2; }
.career-cta-banner h3 { font-size:clamp(20px,3vw,28px); font-weight:800; color:#fff; margin-bottom:10px; }
.career-cta-banner p  { font-size:15px; color:rgba(255,255,255,.78); margin-bottom:24px; line-height:1.6; }

/* ── SECTION HEADER ─────────────────────────────────────── */
.sec-heading { text-align:center; margin-bottom:32px; }
.sec-heading h2 { font-size:clamp(24px,4vw,36px); font-weight:800; color:var(--text-1); margin-bottom:12px; }
.sec-heading p  { font-size:15px; color:var(--text-3); max-width:560px; margin:0 auto; line-height:1.7; }

/* ── MODAL STYLES ───────────────────────────────────────── */
.application-modal {
    display:none; position:fixed; z-index:10000;
    inset:0; background:rgba(10,37,64,.7); overflow-y:auto;
    backdrop-filter:blur(4px);
}
.application-modal.active { display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-content {
    background:var(--bg-2); border-radius:var(--r);
    padding:40px; width:100%; max-width:700px;
    max-height:90vh; overflow-y:auto;
    box-shadow:var(--sh-xl);
}
.modal-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:28px; border-bottom:1px solid var(--line); padding-bottom:16px;
}
.modal-header h2 { margin:0; font-size:22px; font-weight:800; color:var(--text-1); }
.modal-close {
    background:none; border:none; font-size:26px; color:var(--text-3);
    cursor:pointer; transition:var(--t); padding:4px; border-radius:8px; line-height:1;
}
.modal-close:hover { color:var(--text-1); background:var(--bg-1); }
.modal-section-title {
    font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
    color:var(--blue-1); margin:24px 0 14px; padding-bottom:8px;
    border-bottom:2px solid var(--line);
}
.mf-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.mf-row.full { grid-template-columns:1fr; }
.mf-group { display:flex; flex-direction:column; }
.mf-group label { font-size:13px; font-weight:700; color:var(--text-1); margin-bottom:7px; }
.mf-group label .req { color:#ef4444; }
.mf-group input,
.mf-group textarea,
.mf-group select {
    padding:11px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm);
    font-size:14px; color:var(--text-1); background:var(--bg-1); font-family:inherit;
    outline:none; transition:border-color var(--t);
}
.mf-group input:focus,
.mf-group textarea:focus,
.mf-group select:focus { border-color:var(--blue-1); background:var(--bg-2); }
.mf-group textarea { resize:vertical; min-height:90px; }
.file-drop-area {
    border:2px dashed var(--blue-1); border-radius:var(--r-sm);
    padding:24px; text-align:center; cursor:pointer;
    background:rgba(0,112,243,.04); transition:var(--t);
}
.file-drop-area:hover { background:rgba(0,112,243,.08); }
.file-drop-area i { font-size:32px; color:var(--blue-1); display:block; margin-bottom:8px; }
.file-drop-area span { font-size:13px; color:var(--blue-1); font-weight:600; }
.file-name-display { font-size:12px; color:var(--text-3); margin-top:8px; }
.modal-submit-btn {
    width:100%; padding:14px; background:var(--g-blue); color:#fff;
    border:none; border-radius:var(--r-sm); font-size:16px; font-weight:700;
    cursor:pointer; transition:var(--t); margin-top:20px;
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.modal-submit-btn:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,112,243,.35); }
.modal-submit-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.modal-alert {
    padding:14px 16px; border-radius:var(--r-sm);
    font-size:14px; font-weight:600; margin-bottom:18px;
    display:none;
}
.modal-alert.success { background:rgba(0,176,155,.1); border:1px solid rgba(0,176,155,.3); color:var(--teal-1); }
.modal-alert.error   { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:#ef4444; }

/* ── CTA SECTION ────────────────────────────────────────── */
.sc-cta {
    background:var(--g-dark); padding:90px 0; position:relative; overflow:hidden;
}
.sc-cta::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.sc-cta::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.sc-cta-inner { position:relative; z-index:3; }
.sc-cta h2 { font-size:clamp(24px,4.5vw,42px); font-weight:900; color:#fff; margin-bottom:14px; line-height:1.1; }
.sc-cta p  { font-size:16px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin:0; }
.cta-btns  { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn-cta-w {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.2); transition:var(--t);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-cta-g {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.28); color:#fff;
    font-size:15px; font-weight:600; border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-cta-g:hover { background:rgba(255,255,255,.2); color:#fff; }

@media(max-width:991.98px){ .sc-hero { padding:70px 0 0; } }
@media(max-width:767.98px){
    .sc-body { padding:52px 0; }
    .pc { padding:24px 20px; }
    .career-cta-banner { padding:28px 22px; }
    .modal-content { padding:24px; }
    .mf-row { grid-template-columns:1fr; }
}
@media(max-width:575.98px){
    .sc-hero h1 { font-size:28px; }
    .sc-hero-ctas { flex-direction:column; }
    .btn-hero-main, .btn-hero-ghost { justify-content:center; }
    .job-item-header { flex-direction:column; }
}


/* ===================================================================
   Job Detail - Centralized Styles
   =================================================================== */

.job-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.meta-item i {
    font-size: 20px;
    color: #667eea;
}
.detail-section {
    margin-bottom: 40px;
}
.detail-section h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
.detail-text {
    color: #555;
    line-height: 1.8;
    font-size: 15px;
}
.detail-text p {
    margin-bottom: 15px;
}
.detail-text ul, .detail-text ol {
    margin-left: 20px;
    margin-bottom: 15px;
}
.detail-text li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.info-list {
    list-style: none;
    padding: 0;
}
.info-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.info-list li:last-child {
    border-bottom: none;
}
.info-list strong {
    color: #667eea;
    flex-shrink: 0;
    margin-right: 15px;
}
.info-list span {
    color: #555;
    text-align: right;
}

.apply-section {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 15px;
    margin-top: 40px;
}

.apply-btn-large {
    padding: 16px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.apply-btn-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

/* Modal Styles from careers page */
.application-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow-y: auto;
}
.application-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: white;
    border-radius: 15px;
    padding: 40px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 15px 50px rgba(0,0,0,0.3);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}
.modal-header h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
}
.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}
.modal-close:hover {
    color: #333;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.form-row.full {
    grid-template-columns: 1fr;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}
.form-group label .required {
    color: #ff0000;
}
.form-group input,
.form-group textarea,
.form-group select {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.checkbox-group label {
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    color: #555;
}
.file-input-wrapper {
    position: relative;
    overflow: hidden;
}
.file-input-wrapper input[type="file"] {
    position: absolute;
    left: -9999px;
}
.file-input-label {
    display: block;
    padding: 12px 15px;
    border: 2px dashed #667eea;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    background: #f8f9ff;
    transition: all 0.3s;
    font-size: 14px;
    color: #667eea;
}
.file-input-label:hover {
    background: #f0f2ff;
    border-color: #764ba2;
}
.file-name {
    padding: 8px 0;
    font-size: 13px;
    color: #666;
}
.submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}
.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}
.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}
.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.alert-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

@media (max-width: 991px) {
    .job-detail-meta {
        flex-direction: row;
    }
    .meta-item {
        flex: 1;
    }
}

@media (max-width: 576px) {
    .modal-content {
        padding: 20px;
        width: 95%;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .modal-header h2 {
        font-size: 18px;
    }
}


/* ===================================================================
   About Us - Centralized Styles
   =================================================================== */

/* ============================================================
   ABOUT US — PREMIUM DESIGN
   ============================================================ */
:root {
    --blue-1: #0070f3;
    --blue-2: #00b4d8;
    --navy:   #0a2540;
    --teal-1: #0f766e;
    --teal-2: #14b8a6;
    --green-1:#00b09b;
    --green-2:#38ef7d;
    --purple-1:#7c3aed;
    --purple-2:#a78bfa;
    --orange-1:#f7971e;
    --orange-2:#ffd200;
    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --bg-1:   #f8fafc;
    --bg-2:   #ffffff;
    --line:   #e2e8f0;
    --r:      18px;
    --r-sm:   12px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --t:      0.32s var(--ease);
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.09);
    --sh-lg: 0 12px 48px rgba(0,0,0,.13);
    --sh-xl: 0 24px 80px rgba(0,0,0,.16);
    --g-blue:   linear-gradient(135deg,#0070f3,#00b4d8);
    --g-teal:   linear-gradient(135deg,#0f766e,#14b8a6);
    --g-green:  linear-gradient(135deg,#00b09b,#38ef7d);
    --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
    --g-orange: linear-gradient(135deg,#f7971e,#ffd200);
    --g-navy:   linear-gradient(135deg,#0a2540,#203a43,#2c5364);
    --g-dark:   linear-gradient(135deg,#0a2540,#1565c0,#00b4d8);
}

/* ── HERO ───────────────────────────────────────────────── */
.ab-hero {
    position:relative;
    background:var(--g-dark);
    padding:90px 0 0;
    overflow:hidden; color:#fff;
}
.ab-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,180,216,.28) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.ab-hero::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
    background-size:28px 28px;
    pointer-events:none;
}
.ab-hero-inner { position:relative; z-index:3; }

.ab-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22); border-radius:50px;
    padding:7px 18px; font-size:13px; font-weight:700; color:#fff;
    margin-bottom:22px; letter-spacing:.4px;
}
.ab-badge span.dot {
    width:8px; height:8px; border-radius:50%;
    background:#7dd3fc;
    box-shadow:0 0 0 3px rgba(125,211,252,.35);
    animation:ab-pulse 2s ease-in-out infinite;
}
@keyframes ab-pulse {
    0%,100%{box-shadow:0 0 0 3px rgba(125,211,252,.35);}
    50%    {box-shadow:0 0 0 7px rgba(125,211,252,.1);}
}
.ab-hero h1 {
    font-size:clamp(30px,5.5vw,58px); font-weight:900;
    color:#fff; margin-bottom:20px; line-height:1.08;
    letter-spacing:-.02em;
}
.ab-hero h1 .hi {
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.ab-hero p.sub {
    font-size:17px; color:rgba(255,255,255,.78);
    line-height:1.7; max-width:540px; margin-bottom:36px;
}
.ab-breadcrumb {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    list-style:none; padding:0; margin:0 0 30px;
}
.ab-breadcrumb li {
    font-size:13px; color:rgba(255,255,255,.6);
    display:flex; align-items:center; gap:6px;
}
.ab-breadcrumb li::after { content:'/'; opacity:.45; }
.ab-breadcrumb li:last-child::after { display:none; }
.ab-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
.ab-breadcrumb a:hover { color:#fff; }

.ab-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }
.btn-hero-main {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.22);
    transition:var(--t);
}
.btn-hero-main:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-hero-ghost {
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 28px; background:rgba(255,255,255,.1);
    backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.28);
    color:#fff; font-size:15px; font-weight:600;
    border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.18); color:#fff; }

.ab-hero-img-panel {
    position:relative; display:flex;
    align-items:flex-end; justify-content:center; height:100%;
}
.ab-hero-img-panel .img-card {
    background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px 24px 0 0; padding:28px 28px 0;
    box-shadow:var(--sh-xl); overflow:hidden;
    animation:ab-rise .9s var(--ease) both;
    max-width:420px; width:100%;
}
@keyframes ab-rise {
    from{opacity:0;transform:translateY(40px);}
    to  {opacity:1;transform:translateY(0);}
}
.ab-hero-img-panel .img-card img {
    width:100%; display:block;
    filter:drop-shadow(0 -10px 30px rgba(0,0,0,.2));
    animation:ab-float 5s ease-in-out infinite;
}
@keyframes ab-float {
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-10px);}
}
.float-chip {
    position:absolute; z-index:5;
    background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
    border-radius:14px; padding:10px 16px; box-shadow:var(--sh-lg);
    display:flex; align-items:center; gap:10px;
    animation:ab-bob 4s ease-in-out infinite;
}
.float-chip.c1 { top:12%; right:-4%; animation-delay:.6s; }
.float-chip.c2 { bottom:30%; left:-6%; animation-delay:1.2s; }
@keyframes ab-bob {
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-6px);}
}
.float-chip .chip-icon {
    width:36px;height:36px; border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px; color:#fff; flex-shrink:0;
}
.float-chip .chip-text strong { display:block; font-size:16px; font-weight:800; color:var(--text-1); line-height:1; }
.float-chip .chip-text span   { font-size:11px; color:var(--text-3); }

.ab-hero-wave { position:relative; z-index:4; line-height:0; margin-top:20px; }
.ab-hero-wave svg { display:block; width:100%; }

/* ── BODY ───────────────────────────────────────────────── */
.ab-body { padding:80px 0; background:var(--bg-1); }

/* labels */
.sec-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:1.4px;
    padding:5px 14px; border-radius:50px; margin-bottom:14px;
}
.sec-label.blue   { background:rgba(0,112,243,.1);  color:var(--blue-1); }
.sec-label.teal   { background:rgba(15,118,110,.1); color:var(--teal-1); }
.sec-label.green  { background:rgba(0,176,155,.1);  color:var(--green-1); }
.sec-label.purple { background:rgba(124,58,237,.1); color:var(--purple-1); }
.sec-label.orange { background:rgba(247,151,30,.1); color:var(--orange-1); }
.sec-label.white  { background:rgba(255,255,255,.15); color:#fff; }

/* premium card */
.pc {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:36px; margin-bottom:28px;
    box-shadow:var(--sh-sm); transition:var(--t);
    position:relative; overflow:hidden;
}
.pc:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.pc .acc-bar {
    position:absolute; top:0; left:0;
    width:100%; height:4px;
    border-radius:var(--r) var(--r) 0 0;
}
.pc .acc-bar.blue   { background:var(--g-blue); }
.pc .acc-bar.teal   { background:var(--g-teal); }
.pc .acc-bar.green  { background:var(--g-green); }
.pc .acc-bar.purple { background:var(--g-purple); }
.pc .acc-bar.orange { background:var(--g-orange); }
.pc h2 { font-size:clamp(21px,3vw,28px); font-weight:800; color:var(--text-1); margin-bottom:14px; line-height:1.2; }
.pc h3 { font-size:clamp(18px,2.5vw,22px); font-weight:700; color:var(--text-1); margin-bottom:14px; }
.pc p  { font-size:15px; color:var(--text-2); line-height:1.78; margin:0; }
.licon {
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:30px; color:#fff; margin-bottom:20px; flex-shrink:0;
}
.licon.blue   { background:var(--g-blue);   box-shadow:0 6px 20px rgba(0,112,243,.3); }
.licon.teal   { background:var(--g-teal);   box-shadow:0 6px 20px rgba(15,118,110,.3); }
.licon.green  { background:var(--g-green);  box-shadow:0 6px 20px rgba(0,176,155,.3); }
.licon.purple { background:var(--g-purple); box-shadow:0 6px 20px rgba(124,58,237,.3); }
.licon.orange { background:var(--g-orange); box-shadow:0 6px 20px rgba(247,151,30,.3); }

/* ── FEATURE GRID 2x2 ───────────────────────────────────── */
.feat-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:12px; }
.fg-card {
    border-radius:var(--r-sm); border:1.5px solid var(--line);
    padding:24px 20px; background:var(--bg-2);
    transition:var(--t); position:relative; overflow:hidden;
}
.fg-card .glow-bg {
    position:absolute; bottom:-20px; right:-20px;
    width:80px; height:80px; border-radius:50%;
    opacity:.08; transition:var(--t);
}
.fg-card:hover .glow-bg { opacity:.18; transform:scale(1.5); }
.fg-card:hover { border-color:transparent; box-shadow:var(--sh-md); }
.fg-card.fb { border-top:3px solid var(--blue-1); }
.fg-card.fg { border-top:3px solid var(--green-1); }
.fg-card.fo { border-top:3px solid var(--orange-1); }
.fg-card.fp { border-top:3px solid var(--purple-1); }
.fg-card.ft { border-top:3px solid var(--teal-1); }
.fg-card.fb:hover { background:linear-gradient(135deg,rgba(0,112,243,.04),rgba(0,180,216,.03)); }
.fg-card.fg:hover { background:linear-gradient(135deg,rgba(0,176,155,.04),rgba(56,239,125,.03)); }
.fg-card.fo:hover { background:linear-gradient(135deg,rgba(247,151,30,.04),rgba(255,210,0,.03)); }
.fg-card.fp:hover { background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(167,139,250,.03)); }
.fg-card.ft:hover { background:linear-gradient(135deg,rgba(15,118,110,.04),rgba(20,184,166,.03)); }
.fg-icon {
    width:50px;height:50px; border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px; margin-bottom:14px; background:var(--bg-1); transition:var(--t);
}
.fg-card.fb .fg-icon { color:var(--blue-1); }
.fg-card.fg .fg-icon { color:var(--green-1); }
.fg-card.fo .fg-icon { color:var(--orange-1); }
.fg-card.fp .fg-icon { color:var(--purple-1); }
.fg-card.ft .fg-icon { color:var(--teal-1); }
.fg-card:hover .fg-icon { transform:scale(1.12) rotate(-4deg); }
.fg-card h4 { font-size:15px; font-weight:700; color:var(--text-1); margin-bottom:8px; }
.fg-card p  { font-size:13px; color:var(--text-3); line-height:1.6; margin:0; }

/* ── WHY CHOOSE LIST ─────────────────────────────────────── */
.why-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.wl-row {
    display:flex; align-items:center; gap:16px;
    padding:16px 20px; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--bg-2);
    transition:var(--t);
}
.wl-row:hover { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(0,180,216,.1); transform:translateX(5px); }
.wl-row .wl-ico {
    width:46px;height:46px; border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:21px; color:#fff; flex-shrink:0; transition:var(--t);
}
.wl-row:hover .wl-ico { transform:scale(1.1); }
.wl-row .wl-txt { flex:1; }
.wl-row .wl-txt h5 { font-size:14px; font-weight:700; color:var(--text-1); margin:0 0 3px; }
.wl-row .wl-txt p  { font-size:13px; color:var(--text-3); margin:0; line-height:1.5; }
.wl-row .wl-check { font-size:20px; color:var(--line); transition:var(--t); }
.wl-row:hover .wl-check { color:var(--blue-1); }

/* ── STATS ──────────────────────────────────────────────── */
.ab-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.ab-stat-card {
    background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-sm);
    padding:24px 20px; text-align:center; transition:var(--t);
}
.ab-stat-card:hover { background:var(--bg-2); box-shadow:var(--sh-md); transform:translateY(-3px); }
.ab-stat-card .sc-icon {
    width:52px;height:52px; border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px; color:#fff; margin:0 auto 14px;
}
.ab-stat-card strong { display:block; font-size:32px; font-weight:900; color:var(--text-1); line-height:1; margin-bottom:6px; }
.ab-stat-card span   { font-size:13px; color:var(--text-3); }

/* ── ENGAGEMENT MODEL CARDS ─────────────────────────────── */
.em-card {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:34px; margin-bottom:20px;
    box-shadow:var(--sh-sm); transition:var(--t);
    position:relative; overflow:hidden; display:flex; gap:22px; align-items:flex-start;
}
.em-card:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.em-card .em-num {
    font-size:48px; font-weight:900; opacity:.06; color:var(--text-1);
    position:absolute; right:18px; top:8px; line-height:1; font-family:monospace;
}
.em-card .em-icon {
    width:56px;height:56px; border-radius:16px; flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:26px; color:#fff;
}
.em-card .em-body { flex:1; }
.em-card .em-tag {
    display:inline-block; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px;
    padding:3px 10px; border-radius:50px; margin-bottom:10px;
}
.em-card h4 { font-size:18px; font-weight:800; color:var(--text-1); margin-bottom:8px; }
.em-card p  { font-size:14px; color:var(--text-3); line-height:1.75; margin:0; }

/* ── TEAM CARDS ─────────────────────────────────────────── */
.ab-team-card {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); overflow:hidden;
    box-shadow:var(--sh-sm); transition:var(--t);
}
.ab-team-card:hover { box-shadow:var(--sh-lg); transform:translateY(-6px); }
.ab-team-card .tc-img-wrap { position:relative; overflow:hidden; }
.ab-team-card .tc-img-wrap img { width:100%; height:280px; object-fit:cover; display:block; transition:var(--t); }
.ab-team-card:hover .tc-img-wrap img { transform:scale(1.05); }
.ab-team-card .tc-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(10,37,64,.8) 0%, transparent 55%);
    opacity:0; transition:var(--t);
    display:flex; align-items:flex-end; justify-content:center; padding-bottom:20px;
}
.ab-team-card:hover .tc-overlay { opacity:1; }
.ab-team-card .tc-socials { display:flex; gap:8px; }
.ab-team-card .tc-socials a {
    width:36px;height:36px; border-radius:50%;
    background:rgba(255,255,255,.2); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.3);
    display:flex;align-items:center;justify-content:center;
    color:#fff; font-size:16px; text-decoration:none; transition:var(--t);
}
.ab-team-card .tc-socials a:hover { background:var(--blue-1); border-color:var(--blue-1); }
.ab-team-card .tc-body { padding:20px 22px; }
.ab-team-card .tc-body h4 { font-size:17px; font-weight:800; color:var(--text-1); margin-bottom:4px; }
.ab-team-card .tc-body span { font-size:13px; color:var(--text-3); }

/* ── REVIEW CARDS ───────────────────────────────────────── */
.ab-review-card {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:30px; position:relative;
    box-shadow:var(--sh-sm); transition:var(--t); height:100%;
    display:flex; flex-direction:column;
}
.ab-review-card:hover { box-shadow:var(--sh-md); transform:translateY(-4px); }
.ab-review-card .rc-quote {
    position:absolute; top:20px; right:22px;
    font-size:40px; color:var(--line); line-height:1;
    font-family:Georgia,serif;
}
.ab-review-card .rc-stars { display:flex; gap:4px; color:#f59e0b; font-size:14px; margin-bottom:14px; }
.ab-review-card .rc-text {
    font-size:14px; color:var(--text-2); line-height:1.8;
    font-style:italic; flex:1; margin-bottom:20px;
}
.ab-review-card .rc-author { display:flex; align-items:center; gap:12px; margin-top:auto; }
.ab-review-card .rc-author img { width:48px;height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.ab-review-card .rc-author h5 { font-size:14px; font-weight:700; color:var(--text-1); margin:0 0 2px; }
.ab-review-card .rc-author span { font-size:12px; color:var(--text-3); }


/* ── AI ENABLEMENT CARDS (dark) ─────────────────────────── */
.ab-ai-section {
    background:var(--g-dark); padding:90px 0; position:relative; overflow:hidden;
}
.ab-ai-section::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
               radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.ab-ai-section::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.ab-ai-inner { position:relative; z-index:3; }
.ab-ai-card {
    background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15); border-radius:var(--r);
    padding:30px; transition:var(--t); height:100%;
}
.ab-ai-card:hover { background:rgba(255,255,255,.14); transform:translateY(-4px); }
.ab-ai-card .ai-icon {
    width:56px;height:56px; border-radius:16px;
    background:rgba(255,255,255,.15); backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    font-size:26px; color:#fff; margin-bottom:18px;
}
.ab-ai-card h4 { font-size:16px; font-weight:700; color:#fff; margin-bottom:10px; }
.ab-ai-card p  { font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.7; margin:0; }

/* ── NEWSLETTER ─────────────────────────────────────────── */
.ab-newsletter { padding:80px 0; background:var(--bg-2); }
.ab-nl-card {
    background:var(--g-dark); border-radius:24px;
    padding:60px 52px; position:relative; overflow:hidden; color:#fff;
}
.ab-nl-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 60% at 90% 50%, rgba(0,180,216,.25) 0%, transparent 60%),
               radial-gradient(ellipse 40% 50% at 5% 50%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.ab-nl-card::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:24px 24px; pointer-events:none;
}
.ab-nl-inner { position:relative; z-index:2; }
.ab-nl-card h2 { font-size:clamp(22px,3.5vw,36px); font-weight:900; color:#fff; margin-bottom:12px; }
.ab-nl-card p  { font-size:15px; color:rgba(255,255,255,.75); line-height:1.7; margin-bottom:30px; max-width:480px; }
.ab-nl-form { display:flex; gap:12px; flex-wrap:wrap; }
.ab-nl-form input {
    flex:1; min-width:200px; padding:14px 20px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.25); border-radius:50px;
    color:#fff; font-size:14px; outline:none; transition:var(--t);
}
.ab-nl-form input::placeholder { color:rgba(255,255,255,.5); }
.ab-nl-form input:focus { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.18); }
.ab-nl-form button {
    padding:14px 32px; background:#fff; color:var(--blue-1);
    font-size:14px; font-weight:700; border:none; border-radius:50px;
    cursor:pointer; transition:var(--t); white-space:nowrap;
}
.ab-nl-form button:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
.form-result { margin-top:12px; font-size:13px; }
.form-result.success { color:#4ade80; }
.form-result.error   { color:#f87171; }

/* ── CTA ─────────────────────────────────────────────────── */
.ab-cta {
    background:var(--g-dark);
    padding:90px 0; position:relative; overflow:hidden;
}
.ab-cta::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
               radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.ab-cta::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.ab-cta-inner { position:relative; z-index:3; }
.ab-cta h2 { font-size:clamp(24px,4.5vw,44px); font-weight:900; color:#fff; margin-bottom:16px; line-height:1.1; }
.ab-cta p  { font-size:16px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin:0; }
.cta-btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn-cta-w {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.2); transition:var(--t);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-cta-g {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.28); color:#fff;
    font-size:15px; font-weight:600; border-radius:50px;
    text-decoration:none; transition:var(--t);
}
.btn-cta-g:hover { background:rgba(255,255,255,.2); color:#fff; }

.cta-card-stack { display:flex; flex-direction:column; gap:14px; max-width:340px; margin-left:auto; }
.cta-mini-card {
    background:rgba(255,255,255,.1); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.18); border-radius:var(--r-sm);
    padding:16px 20px; display:flex; align-items:center; gap:14px;
    animation:cta-slide .8s var(--ease) both;
}
.cta-mini-card:nth-child(2) { animation-delay:.15s; margin-left:24px; }
.cta-mini-card:nth-child(3) { animation-delay:.30s; margin-left:12px; }
@keyframes cta-slide {
    from{opacity:0;transform:translateX(30px);}
    to  {opacity:1;transform:translateX(0);}
}
.cta-mini-card .cmc-icon {
    width:42px;height:42px; border-radius:11px;
    background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:20px; color:#fff; flex-shrink:0;
}
.cta-mini-card .cmc-text strong { display:block; font-size:14px; font-weight:700; color:#fff; }
.cta-mini-card .cmc-text span   { font-size:12px; color:rgba(255,255,255,.7); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:991.98px){
    .ab-hero { padding:70px 0 0; }
    .ab-hero-img-panel { display:none; }
    .cta-card-stack { display:none; }
    .ab-stats-grid { grid-template-columns:repeat(3,1fr); }
    .ab-nl-card { padding:36px 28px; }
}
@media(max-width:767.98px){
    .ab-body { padding:52px 0; }
    .pc { padding:24px 20px; }
    .feat-grid-2 { grid-template-columns:1fr; gap:12px; }
    .ab-stats-grid { grid-template-columns:repeat(2,1fr); }
    .ab-hero-ctas { flex-direction:column; }
    .btn-hero-main, .btn-hero-ghost { justify-content:center; }
    .ab-cta { padding:60px 0; }
    .cta-btns { flex-direction:column; }
    .btn-cta-w, .btn-cta-g { justify-content:center; }
.ab-nl-form { flex-direction:column; }
    .ab-nl-form input, .ab-nl-form button { width:100%; }
    .em-card { flex-direction:column; gap:14px; }
}
@media(max-width:575.98px){
    .ab-hero h1 { font-size:28px; }
    .pc h2 { font-size:20px; }
    .ab-stats-grid { grid-template-columns:1fr 1fr; }
}


/* ===================================================================
   Welcome Message - Centralized Styles
   =================================================================== */

/* ============================================================
   HOME PAGE — PREMIUM DESIGN
   ============================================================ */
:root {
    --blue-1: #0070f3;
    --blue-2: #00b4d8;
    --navy:   #0a2540;
    --teal-1: #0f766e;
    --teal-2: #14b8a6;
    --green-1:#00b09b;
    --green-2:#38ef7d;
    --purple-1:#7c3aed;
    --purple-2:#a78bfa;
    --orange-1:#f7971e;
    --orange-2:#ffd200;
    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --bg-1:   #f8fafc;
    --bg-2:   #ffffff;
    --line:   #e2e8f0;
    --r:      18px;
    --r-sm:   12px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --t:      0.32s var(--ease);
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.09);
    --sh-lg: 0 12px 48px rgba(0,0,0,.13);
    --sh-xl: 0 24px 80px rgba(0,0,0,.16);
    --g-blue:   linear-gradient(135deg,#0070f3,#00b4d8);
    --g-teal:   linear-gradient(135deg,#0f766e,#14b8a6);
    --g-green:  linear-gradient(135deg,#00b09b,#38ef7d);
    --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
    --g-orange: linear-gradient(135deg,#f7971e,#ffd200);
    --g-navy:   linear-gradient(135deg,#0a2540,#203a43,#2c5364);
    --g-dark:   linear-gradient(135deg,#0a2540,#1565c0,#00b4d8);
}

/* ── HERO ───────────────────────────────────────────────── */
.hp-hero {
    position:relative;
    background:var(--g-dark);
    padding:100px 0 0;
    overflow:visible; color:#fff;
    min-height:92vh; display:flex; flex-direction:column; justify-content:flex-end;
}
.hp-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(0,180,216,.30) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 10% 80%, rgba(124,58,237,.20) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 85% 85%, rgba(0,112,243,.18) 0%, transparent 55%);
    pointer-events:none;
}
.hp-hero::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
    background-size:28px 28px;
    pointer-events:none;
}
.hp-hero-inner { position:relative; z-index:3; flex:1; display:flex; align-items:center; }

.hp-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22); border-radius:50px;
    padding:7px 18px; font-size:13px; font-weight:700; color:#fff;
    margin-bottom:24px; letter-spacing:.4px;
}
.hp-badge span.dot {
    width:8px; height:8px; border-radius:50%;
    background:#7dd3fc;
    box-shadow:0 0 0 3px rgba(125,211,252,.35);
    animation:hp-pulse 2s ease-in-out infinite;
}
@keyframes hp-pulse {
    0%,100%{box-shadow:0 0 0 3px rgba(125,211,252,.35);}
    50%    {box-shadow:0 0 0 8px rgba(125,211,252,.08);}
}
.hp-hero h1 {
    font-size:clamp(34px,6vw,68px); font-weight:900;
    color:#fff; margin-bottom:22px; line-height:1.06;
    letter-spacing:-.025em;
}
.hp-hero h1 .hi {
    background:linear-gradient(90deg,#7dd3fc,#93c5fd,#c4b5fd);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hp-hero p.sub {
    font-size:17px; color:rgba(255,255,255,.80);
    line-height:1.75; max-width:540px; margin-bottom:40px;
}
.hp-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }
.btn-hp-main {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 28px rgba(0,0,0,.22);
    transition:var(--t);
}
.btn-hp-main:hover { transform:translateY(-3px); box-shadow:0 8px 36px rgba(0,0,0,.30); color:var(--blue-1); }
.btn-hp-ghost {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; background:rgba(255,255,255,.1);
    backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.28);
    color:#fff; font-size:15px; font-weight:600;
    border-radius:50px; text-decoration:none; transition:var(--t);
}
.btn-hp-ghost:hover { background:rgba(255,255,255,.18); color:#fff; }

/* hero stats row */
.hp-hero-stats {
    display:flex; flex-wrap:wrap; gap:32px; margin-bottom:56px;
}
.hp-stat-item { display:flex; flex-direction:column; }
.hp-stat-item strong { font-size:28px; font-weight:900; color:#fff; line-height:1; }
.hp-stat-item span { font-size:12px; color:rgba(255,255,255,.65); margin-top:4px; letter-spacing:.3px; }
.hp-stat-divider { width:1px; background:rgba(255,255,255,.2); align-self:stretch; }

/* hero image panel */
.hp-hero-img-panel {
    position:relative; display:flex;
    align-items:flex-end; justify-content:center; height:100%;
}
.hp-hero-img-panel .img-card {
    background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px 24px 0 0; padding:28px 28px 0;
    box-shadow:var(--sh-xl); overflow:hidden;
    animation:hp-rise .9s var(--ease) both;
    max-width:440px; width:100%;
}
@keyframes hp-rise {
    from{opacity:0;transform:translateY(40px);}
    to  {opacity:1;transform:translateY(0);}
}
.hp-hero-img-panel .img-card img {
    width:100%; display:block;
    filter:drop-shadow(0 -10px 30px rgba(0,0,0,.2));
    animation:hp-float 5s ease-in-out infinite;
}
@keyframes hp-float {
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-10px);}
}
.float-chip {
    position:absolute; z-index:5;
    background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
    border-radius:14px; padding:10px 16px; box-shadow:var(--sh-lg);
    display:flex; align-items:center; gap:10px;
    animation:hp-bob 4s ease-in-out infinite;
}
.float-chip.c1 { top:12%; right:-4%; animation-delay:.5s; }
.float-chip.c2 { top:42%; left:-6%; animation-delay:1.2s; }
.float-chip.c3 { bottom:28%; right:2%; animation-delay:.8s; }
@keyframes hp-bob {
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-8px);}
}
.float-chip .chip-icon {
    width:36px;height:36px; border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px; color:#fff; flex-shrink:0;
}
.float-chip .chip-text strong { display:block; font-size:15px; font-weight:800; color:var(--text-1); line-height:1; }
.float-chip .chip-text span   { font-size:11px; color:var(--text-3); }

.hp-hero-wave { position:relative; z-index:4; line-height:0; margin-top:20px; }
.hp-hero-wave svg { display:block; width:100%; }

/* ── PARTNERS ───────────────────────────────────────────── */
.hp-partners { padding:44px 0; background:var(--bg-2); border-bottom:1px solid var(--line); }
.hp-partners-label {
    font-size:12px; font-weight:700; color:var(--text-3);
    text-transform:uppercase; letter-spacing:1.5px; text-align:center;
    margin-bottom:32px;
}

/* Infinite marquee */
.partner-marquee-wrap {
    overflow: hidden;
    max-width: 100%;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.partner-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: partner-scroll 28s linear infinite;
}
.partner-marquee-wrap:hover .partner-track { animation-play-state: paused; }
@keyframes partner-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Individual logo item */
.parner-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 36px;
    flex-shrink: 0;
    cursor: default;
}
.parner-logo a { display: flex; align-items: center; justify-content: center; }
.parner-logo img {
    height: 52px;
    max-width: 150px;
    object-fit: contain;
    filter: grayscale(1) opacity(0.55);
    transition: filter .35s ease, transform .35s ease;
    display: block;
}
.parner-logo:hover img {
    filter: grayscale(0) opacity(1);
    transform: scale(1.08);
}

/* Company name — always in layout, fully invisible until hover */
.parner-name-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: transparent;
    white-space: nowrap;
    text-align: center;
    background: transparent;
    padding: 4px 14px;
    border-radius: 50px;
    transition: color .25s ease, background .25s ease;
    pointer-events: none;
    line-height: 1.4;
}
.parner-logo:hover .parner-name-tag {
    color: #fff;
    background: #0F172A;
}

/* ── SECTIONS SHARED ────────────────────────────────────── */
.hp-section { padding:90px 0; background:var(--bg-1); }
.hp-section.white { background:var(--bg-2); }
.hp-section.dark {
    background:var(--g-dark); position:relative; overflow:hidden; color:#fff;
    padding:90px 0;
}
.hp-section.dark::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
               radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.hp-section.dark::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.hp-section-inner { position:relative; z-index:3; }

/* section labels */
.sec-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:1.4px;
    padding:5px 14px; border-radius:50px; margin-bottom:14px;
}
.sec-label.blue   { background:rgba(0,112,243,.1);  color:var(--blue-1); }
.sec-label.teal   { background:rgba(15,118,110,.1); color:var(--teal-1); }
.sec-label.green  { background:rgba(0,176,155,.1);  color:var(--green-1); }
.sec-label.purple { background:rgba(124,58,237,.1); color:var(--purple-1); }
.sec-label.orange { background:rgba(247,151,30,.1); color:var(--orange-1); }
.sec-label.white  { background:rgba(255,255,255,.15); color:#fff; }

/* section heading */
.sec-head { text-align:center; margin-bottom:52px; }
.sec-head h2 { font-size:clamp(24px,4vw,40px); font-weight:900; color:var(--text-1); margin-bottom:14px; line-height:1.15; }
.sec-head h2.light { color:#fff; }
.sec-head p { font-size:16px; color:var(--text-3); line-height:1.75; max-width:600px; margin:0 auto; }
.sec-head p.light { color:rgba(255,255,255,.75); }
.sec-head .hi { background:linear-gradient(90deg,#0070f3,#00b4d8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── PREMIUM CARD ───────────────────────────────────────── */
.pc {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:36px; margin-bottom:28px;
    box-shadow:var(--sh-sm); transition:var(--t);
    position:relative; overflow:hidden;
}
.pc:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.pc .acc-bar {
    position:absolute; top:0; left:0;
    width:100%; height:4px;
    border-radius:var(--r) var(--r) 0 0;
}
.pc .acc-bar.blue   { background:var(--g-blue); }
.pc .acc-bar.teal   { background:var(--g-teal); }
.pc .acc-bar.green  { background:var(--g-green); }
.pc .acc-bar.purple { background:var(--g-purple); }
.pc .acc-bar.orange { background:var(--g-orange); }
.pc h2 { font-size:clamp(21px,3vw,28px); font-weight:800; color:var(--text-1); margin-bottom:14px; line-height:1.2; }
.pc h3 { font-size:clamp(18px,2.5vw,22px); font-weight:700; color:var(--text-1); margin-bottom:14px; }
.pc p  { font-size:15px; color:var(--text-2); line-height:1.78; margin:0; }
.licon {
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:30px; color:#fff; margin-bottom:20px; flex-shrink:0;
}
.licon.blue   { background:var(--g-blue);   box-shadow:0 6px 20px rgba(0,112,243,.3); }
.licon.teal   { background:var(--g-teal);   box-shadow:0 6px 20px rgba(15,118,110,.3); }
.licon.green  { background:var(--g-green);  box-shadow:0 6px 20px rgba(0,176,155,.3); }
.licon.purple { background:var(--g-purple); box-shadow:0 6px 20px rgba(124,58,237,.3); }
.licon.orange { background:var(--g-orange); box-shadow:0 6px 20px rgba(247,151,30,.3); }

/* ── ABOUT SECTION ──────────────────────────────────────── */
.hp-about-img { position:relative; }
.hp-about-img img { width:100%; border-radius:var(--r); box-shadow:var(--sh-lg); display:block; }
.hp-about-badge {
    position:absolute; bottom:-18px; right:-18px;
    background:#fff; border-radius:var(--r-sm); padding:18px 22px;
    box-shadow:var(--sh-lg); text-align:center; min-width:130px;
}
.hp-about-badge strong { display:block; font-size:28px; font-weight:900; color:var(--blue-1); line-height:1; }
.hp-about-badge span { font-size:12px; color:var(--text-3); margin-top:4px; display:block; }
.hp-feat-list { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.hp-feat-item {
    display:flex; align-items:center; gap:14px;
    padding:14px 18px; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--bg-1); transition:var(--t);
}
.hp-feat-item:hover { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(0,180,216,.08); transform:translateX(4px); }
.hp-feat-item .fi-ico {
    width:42px; height:42px; border-radius:11px; flex-shrink:0;
    background:var(--g-blue); display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#fff;
}
.hp-feat-item h5 { font-size:14px; font-weight:700; color:var(--text-1); margin:0 0 2px; }
.hp-feat-item p { font-size:12.5px; color:var(--text-3); margin:0; }

/* ── ENGAGEMENT MODELS ──────────────────────────────────── */
.hp-model-card {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:38px 32px;
    box-shadow:var(--sh-sm); transition:var(--t);
    position:relative; overflow:hidden; height:100%;
    display:flex; flex-direction:column;
}
.hp-model-card:hover { box-shadow:var(--sh-lg); transform:translateY(-6px); }
.hp-model-card .mc-accent {
    position:absolute; top:0; left:0; right:0; height:5px;
    border-radius:var(--r) var(--r) 0 0;
}
.hp-model-card .mc-num {
    font-size:60px; font-weight:900; opacity:.07; color:var(--text-1);
    position:absolute; right:20px; top:12px; line-height:1;
    font-family:monospace;
}
.hp-model-card .mc-icon {
    width:60px; height:60px; border-radius:16px; margin-bottom:22px;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff;
}
.hp-model-card h3 { font-size:20px; font-weight:800; color:var(--text-1); margin-bottom:10px; }
.hp-model-card .mc-tag {
    display:inline-block; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px;
    padding:3px 10px; border-radius:50px; margin-bottom:14px;
}
.hp-model-card p { font-size:14px; color:var(--text-3); line-height:1.75; flex:1; }
.hp-model-card a.mc-link {
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; text-decoration:none;
    margin-top:20px; transition:var(--t);
}
.hp-model-card a.mc-link i { transition:var(--t); }
.hp-model-card:hover a.mc-link i { transform:translateX(4px); }

/* ── FEATURES GRID ──────────────────────────────────────── */
.feat-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:12px; }
.fg-card {
    border-radius:var(--r-sm); border:1.5px solid var(--line);
    padding:24px 20px; background:var(--bg-2);
    transition:var(--t); position:relative; overflow:hidden;
}
.fg-card .glow-bg {
    position:absolute; bottom:-20px; right:-20px;
    width:80px; height:80px; border-radius:50%;
    opacity:.08; transition:var(--t);
}
.fg-card:hover .glow-bg { opacity:.18; transform:scale(1.5); }
.fg-card:hover { border-color:transparent; box-shadow:var(--sh-md); }
.fg-card.fb { border-top:3px solid var(--blue-1); }
.fg-card.fg { border-top:3px solid var(--green-1); }
.fg-card.fo { border-top:3px solid var(--orange-1); }
.fg-card.fp { border-top:3px solid var(--purple-1); }
.fg-card.ft { border-top:3px solid var(--teal-1); }
.fg-card.fb:hover { background:linear-gradient(135deg,rgba(0,112,243,.04),rgba(0,180,216,.03)); }
.fg-card.fg:hover { background:linear-gradient(135deg,rgba(0,176,155,.04),rgba(56,239,125,.03)); }
.fg-card.fo:hover { background:linear-gradient(135deg,rgba(247,151,30,.04),rgba(255,210,0,.03)); }
.fg-card.fp:hover { background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(167,139,250,.03)); }
.fg-card.ft:hover { background:linear-gradient(135deg,rgba(15,118,110,.04),rgba(20,184,166,.03)); }
.fg-icon {
    width:50px; height:50px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-bottom:14px; background:var(--bg-1); transition:var(--t);
}
.fg-card.fb .fg-icon { color:var(--blue-1); }
.fg-card.fg .fg-icon { color:var(--green-1); }
.fg-card.fo .fg-icon { color:var(--orange-1); }
.fg-card.fp .fg-icon { color:var(--purple-1); }
.fg-card.ft .fg-icon { color:var(--teal-1); }
.fg-card:hover .fg-icon { transform:scale(1.12) rotate(-4deg); }
.fg-card h4 { font-size:15px; font-weight:700; color:var(--text-1); margin-bottom:8px; }
.fg-card p  { font-size:13px; color:var(--text-3); line-height:1.6; margin:0; }

/* ── STATS SECTION ──────────────────────────────────────── */
.hp-stats-section { padding:70px 0; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hp-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.hp-stat-card {
    padding:30px 20px; text-align:center;
    border-right:1px solid var(--line); transition:var(--t);
}
.hp-stat-card:last-child { border-right:none; }
.hp-stat-card:hover { background:var(--bg-1); }
.hp-stat-card .stat-icon {
    width:54px; height:54px; border-radius:14px;
    margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#fff;
}
.hp-stat-card strong { display:block; font-size:36px; font-weight:900; color:var(--text-1); line-height:1; margin-bottom:8px; }
.hp-stat-card span { font-size:13px; color:var(--text-3); }

/* ── TECHNOLOGY PILLS ───────────────────────────────────── */
.tech-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.tp {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 16px; border-radius:50px;
    border:1.5px solid var(--line); background:var(--bg-2);
    font-size:13px; font-weight:600; color:var(--text-2);
    transition:var(--t); text-decoration:none;
}
.tp:hover { border-color:var(--blue-1); color:var(--blue-1); background:rgba(0,112,243,.04); transform:translateY(-2px); }
.tp i { font-size:15px; }

/* ── LEADERSHIP / TEAM CARDS ────────────────────────────── */
.hp-team-card {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); overflow:hidden;
    box-shadow:var(--sh-sm); transition:var(--t);
}
.hp-team-card:hover { box-shadow:var(--sh-lg); transform:translateY(-6px); }
.hp-team-card .tc-img-wrap { position:relative; overflow:hidden; }
.hp-team-card .tc-img-wrap img { width:100%; height:280px; object-fit:cover; display:block; transition:var(--t); }
.hp-team-card:hover .tc-img-wrap img { transform:scale(1.05); }
.hp-team-card .tc-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(10,37,64,.8) 0%, transparent 50%);
    opacity:0; transition:var(--t);
    display:flex; align-items:flex-end; justify-content:center; padding-bottom:20px;
}
.hp-team-card:hover .tc-overlay { opacity:1; }
.hp-team-card .tc-socials { display:flex; gap:8px; }
.hp-team-card .tc-socials a {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.2); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:16px; text-decoration:none; transition:var(--t);
}
.hp-team-card .tc-socials a:hover { background:var(--blue-1); border-color:var(--blue-1); }
.hp-team-card .tc-body { padding:20px 22px; }
.hp-team-card .tc-body h4 { font-size:17px; font-weight:800; color:var(--text-1); margin-bottom:4px; }
.hp-team-card .tc-body span { font-size:13px; color:var(--text-3); }

/* ── TESTIMONIAL CARDS ──────────────────────────────────── */
.hp-review-card {
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:var(--r); padding:30px; position:relative;
    box-shadow:var(--sh-sm); transition:var(--t); height:100%;
    display:flex; flex-direction:column;
}
.hp-review-card:hover { box-shadow:var(--sh-md); transform:translateY(-4px); }
.hp-review-card .rc-stars { display:flex; gap:4px; color:#f59e0b; font-size:14px; margin-bottom:14px; }
.hp-review-card .rc-text {
    font-size:14px; color:var(--text-2); line-height:1.8;
    font-style:italic; flex:1; margin-bottom:20px;
}
.hp-review-card .rc-author { display:flex; align-items:center; gap:12px; margin-top:auto; }
.hp-review-card .rc-author img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.hp-review-card .rc-author h5 { font-size:14px; font-weight:700; color:var(--text-1); margin:0 0 2px; }
.hp-review-card .rc-author span { font-size:12px; color:var(--text-3); }
.hp-review-card .rc-quote {
    position:absolute; top:20px; right:22px;
    font-size:40px; color:var(--line); line-height:1;
    font-family:Georgia,serif; font-style:normal;
}
.hp-read-more {
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:700; color:var(--blue-1);
    background:none; border:none; cursor:pointer; padding:0; margin-top:8px;
    text-decoration:none; transition:var(--t);
}
.hp-read-more:hover { color:var(--navy); }
.hp-read-more i { transition:var(--t); }
.hp-read-more:hover i { transform:translateX(3px); }

/* ── AI ENABLEMENT SECTION ──────────────────────────────── */
.hp-ai-card {
    background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15); border-radius:var(--r);
    padding:30px; transition:var(--t); height:100%;
}
.hp-ai-card:hover { background:rgba(255,255,255,.14); transform:translateY(-4px); }
.hp-ai-card .ai-icon {
    width:56px; height:56px; border-radius:16px;
    background:rgba(255,255,255,.15); backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#fff; margin-bottom:18px;
}
.hp-ai-card h4 { font-size:16px; font-weight:700; color:#fff; margin-bottom:10px; }
.hp-ai-card p  { font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.7; margin:0; }
.hp-ai-cta {
    position:relative; z-index:4;
    display:flex; justify-content:center;
    margin-top:52px !important;
}
.hp-ai-cta .btn-cta-w {
    min-width:320px; justify-content:center;
    padding:18px 38px; border-radius:999px;
    box-shadow:0 16px 42px rgba(15,23,42,.22);
}
.hp-ai-cta .btn-cta-w i { transition:var(--t); }
.hp-ai-cta .btn-cta-w:hover i { transform:translateX(4px); }

@media (max-width:575.98px) {
    .hp-ai-cta { margin-top:34px !important; }
    .hp-ai-cta .btn-cta-w {
        width:100%; min-width:0;
        padding:15px 22px;
    }
}

/* ── NEWSLETTER ─────────────────────────────────────────── */
.hp-newsletter {
    padding:80px 0; background:var(--bg-2);
    border-top:1px solid var(--line);
}
.hp-nl-card {
    background:var(--g-dark); border-radius:24px;
    padding:60px 52px; position:relative; overflow:hidden;
    color:#fff;
}
.hp-nl-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 60% at 90% 50%, rgba(0,180,216,.25) 0%, transparent 60%),
               radial-gradient(ellipse 40% 50% at 5% 50%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.hp-nl-card::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:24px 24px; pointer-events:none;
}
.hp-nl-inner { position:relative; z-index:2; }
.hp-nl-card h2 { font-size:clamp(22px,3.5vw,36px); font-weight:900; color:#fff; margin-bottom:12px; }
.hp-nl-card p  { font-size:15px; color:rgba(255,255,255,.75); line-height:1.7; margin-bottom:30px; max-width:480px; }
.hp-nl-form { display:flex; gap:12px; flex-wrap:wrap; }
.hp-nl-form input {
    flex:1; min-width:200px; padding:14px 20px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.25); border-radius:50px;
    color:#fff; font-size:14px; outline:none; transition:var(--t);
}
.hp-nl-form input::placeholder { color:rgba(255,255,255,.5); }
.hp-nl-form input:focus { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.18); }
.hp-nl-form button {
    padding:14px 32px; background:#fff; color:var(--blue-1);
    font-size:14px; font-weight:700; border:none; border-radius:50px;
    cursor:pointer; transition:var(--t); white-space:nowrap;
}
.hp-nl-form button:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
.form-result { margin-top:12px; font-size:13px; }
.form-result.success { color:#4ade80; }
.form-result.error   { color:#f87171; }
.hp-nl-images { display:flex; gap:16px; align-items:center; justify-content:center; }
.hp-nl-images img { width:80px; height:80px; object-fit:contain; border-radius:var(--r-sm); }

/* ── CTA ─────────────────────────────────────────────────── */
.hp-cta {
    background:var(--g-dark);
    padding:90px 0; position:relative; overflow:hidden;
}
.hp-cta::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 70% at 80% 50%, rgba(0,180,216,.22) 0%, transparent 60%),
               radial-gradient(ellipse 40% 50% at 10% 60%, rgba(124,58,237,.18) 0%, transparent 60%);
    pointer-events:none;
}
.hp-cta::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:28px 28px; pointer-events:none;
}
.hp-cta-inner { position:relative; z-index:3; }
.hp-cta h2 { font-size:clamp(26px,4.5vw,46px); font-weight:900; color:#fff; margin-bottom:16px; line-height:1.1; }
.hp-cta p  { font-size:17px; color:rgba(255,255,255,.78); line-height:1.7; max-width:540px; margin:0; }
.cta-btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn-cta-w {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 36px; background:#fff; color:var(--blue-1);
    font-size:15px; font-weight:700; border-radius:50px;
    text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.2); transition:var(--t);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:var(--blue-1); }
.btn-cta-g {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.28); color:#fff;
    font-size:15px; font-weight:600; border-radius:50px;
    text-decoration:none; transition:var(--t);
}
.btn-cta-g:hover { background:rgba(255,255,255,.20); color:#fff; }

.cta-card-stack { display:flex; flex-direction:column; gap:14px; max-width:340px; margin-left:auto; }
.cta-mini-card {
    background:rgba(255,255,255,.1); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.18); border-radius:var(--r-sm);
    padding:16px 20px; display:flex; align-items:center; gap:14px;
    animation:cta-slide .8s var(--ease) both;
}
.cta-mini-card:nth-child(2) { animation-delay:.15s; margin-left:24px; }
.cta-mini-card:nth-child(3) { animation-delay:.30s; margin-left:12px; }
@keyframes cta-slide {
    from{opacity:0;transform:translateX(30px);}
    to  {opacity:1;transform:translateX(0);}
}
.cta-mini-card .cmc-icon {
    width:42px; height:42px; border-radius:11px;
    background:rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#fff; flex-shrink:0;
}
.cta-mini-card .cmc-text strong { display:block; font-size:14px; font-weight:700; color:#fff; }
.cta-mini-card .cmc-text span   { font-size:12px; color:rgba(255,255,255,.7); }

/* ── STATEMENT MODAL ────────────────────────────────────── */
.statement-modal {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
    align-items:center; justify-content:center; padding:20px;
}
.statement-modal.active { display:flex; }
.statement-modal-content {
    background:var(--bg-2); border-radius:var(--r);
    padding:40px; max-width:520px; width:100%;
    position:relative; box-shadow:var(--sh-xl);
    animation:modal-in .3s var(--ease);
}
@keyframes modal-in {
    from{opacity:0;transform:scale(.92) translateY(20px);}
    to  {opacity:1;transform:scale(1) translateY(0);}
}
.statement-modal-close {
    position:absolute; top:16px; right:20px; font-size:24px;
    cursor:pointer; color:var(--text-3); transition:var(--t); line-height:1;
}
.statement-modal-close:hover { color:var(--text-1); }
.statement-modal-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.statement-modal-header img { width:60px; height:60px; border-radius:50%; object-fit:cover; border:3px solid var(--line); }
.statement-modal-header h3 { font-size:17px; font-weight:700; color:var(--text-1); margin:0 0 4px; }
.statement-modal-header span { font-size:13px; color:var(--text-3); }
.statement-modal-body .quote-mark { font-size:52px; color:var(--blue-1); line-height:1; display:block; margin-bottom:8px; font-family:Georgia,serif; }
.statement-modal-body p { font-size:15px; color:var(--text-2); line-height:1.8; font-style:italic; }


/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:991.98px){
    .hp-hero { min-height:auto; padding:80px 0 0; }
    .hp-hero-img-panel { display:none; }
    .hp-stats-grid { grid-template-columns:repeat(2,1fr); }
    .hp-stat-card:nth-child(2) { border-right:none; }
    .hp-stat-card { border-bottom:1px solid var(--line); }
    .hp-stat-card:nth-child(3), .hp-stat-card:nth-child(4) { border-bottom:none; }
    .cta-card-stack { display:none; }
    .hp-nl-card { padding:36px 28px; }
}
@media(max-width:767.98px){
    .hp-hero h1 { font-size:32px; }
    .hp-hero-ctas { flex-direction:column; }
    .btn-hp-main, .btn-hp-ghost { justify-content:center; }
    .hp-hero-stats { gap:16px; }
    .hp-stat-divider { display:none; }
    .feat-grid-2 { grid-template-columns:1fr; gap:12px; }
    .hp-nl-form { flex-direction:column; }
    .hp-nl-form input, .hp-nl-form button { width:100%; }
    .hp-nl-images { display:none; }
    .cta-btns { flex-direction:column; }
    .btn-cta-w, .btn-cta-g { justify-content:center; }

}
@media(max-width:575.98px){
    .hp-stats-grid { grid-template-columns:1fr 1fr; }
    .hp-stat-card:nth-child(2) { border-right:1px solid var(--line); }
    .hp-stat-card { border-bottom:1px solid var(--line); }
    .hp-stat-card:nth-child(3), .hp-stat-card:nth-child(4) { border-bottom:none; }
}


/* ===================================================================
   UTILITY CLASSES — Centralized from inline styles
   =================================================================== */

/* Gradient Background Utilities */
.u-bg-blue   { background: var(--g-blue) !important; }
.u-bg-green  { background: var(--g-green) !important; }
.u-bg-teal   { background: var(--g-teal) !important; }
.u-bg-orange { background: var(--g-orange) !important; }
.u-bg-purple { background: var(--g-purple) !important; }
.u-bg-main   { background: var(--g-main) !important; }
.u-bg-navy   { background: var(--g-navy) !important; }

/* Text Gradient Utilities */
.u-txt-g-blue   { background: var(--g-blue);   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.u-txt-g-green  { background: var(--g-green);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.u-txt-g-teal   { background: var(--g-teal);   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.u-txt-g-orange { background: var(--g-orange); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.u-txt-g-purple { background: var(--g-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.u-txt-g-main   { background: var(--g-main);   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Tag / Badge Color Variants */
.u-tag-blue   { background: rgba(0,112,243,.1);  color: var(--blue-1); }
.u-tag-teal   { background: rgba(15,118,110,.1); color: var(--teal-1); }
.u-tag-purple { background: rgba(124,58,237,.1); color: var(--purple-1); }
.u-tag-orange { background: rgba(234,88,12,.1);  color: var(--orange-1); }
.u-tag-green  { background: rgba(22,163,74,.1);  color: var(--green-1); }

/* Icon Color Utilities */
.u-clr-v1     { color: var(--v1); }
.u-clr-g1     { color: var(--g1); }
.u-clr-o1     { color: var(--o1); }
.u-clr-blue   { color: var(--blue-1); }
.u-clr-teal   { color: var(--teal-1); }
.u-clr-purple { color: var(--purple-1); }
.u-clr-orange { color: var(--orange-1); }
.u-clr-green  { color: var(--green-1); }

/* Direct hex color utilities (icon accents in SAP pages) */
.u-clr-orange-d { color: #ea580c; }
.u-clr-purple-d { color: #7c3aed; }
.u-clr-sky-d    { color: #0ea5e9; }
.u-clr-green-d  { color: #059669; }
.u-clr-pink-d   { color: #db2777; }
.u-clr-teal-d   { color: #0d9488; }

/* Spacing Utilities */
.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-8  { margin-bottom: 8px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-mb-18 { margin-bottom: 18px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-mb-22 { margin-bottom: 22px !important; }
.u-mb-24 { margin-bottom: 24px !important; }
.u-mb-28 { margin-bottom: 28px !important; }
.u-mb-30 { margin-bottom: 30px !important; }
.u-mt-8  { margin-top: 8px !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-mt-44 { margin-top: 44px !important; }

/* Layout Utilities */
.u-rel-z3   { position: relative; z-index: 3; }
.u-min-80vh { min-height: 80vh; }

/* Image Utilities */
.u-img-r    { width: 100%; border-radius: var(--r); box-shadow: var(--sh-lg); }
.u-img-r-xl { width: 100%; border-radius: var(--r); box-shadow: var(--sh-xl); }

/* ── About Us ─────────────────────────────────────────────── */
.ab-sec-bg1  { padding: 80px 0; background: var(--bg-1); }
.ab-sec-bg2  { padding: 80px 0; background: var(--bg-2); }
.ab-sec-hd   { text-align: center; margin-bottom: 52px; }
.ab-h2       { font-size: clamp(24px,4vw,40px); font-weight: 900; color: var(--text-1); margin-bottom: 14px; }
.ab-h2-sm    { font-size: clamp(24px,3.5vw,38px); font-weight: 900; color: var(--text-1); margin-bottom: 16px; line-height: 1.15; }
.ab-p-sub    { font-size: 16px; color: var(--text-3); max-width: 560px; margin: 0 auto; line-height: 1.75; }
.ab-p-body   { font-size: 16px; color: var(--text-3); line-height: 1.8; }

/* About Us Sidebar Widgets */
.ab-sw-sticky { position: sticky; top: 96px; }
.ab-sw {
    background: var(--bg-2);
    border-radius: var(--r);
    border: 1px solid var(--line);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--sh-sm);
}
.ab-sw-hd {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}
.ab-sw-hd.green  { background: var(--g-green); }
.ab-sw-hd.navy   { background: var(--g-navy); }
.ab-sw-hd.blue   { background: var(--g-blue); }
.ab-sw-hd i      { font-size: 22px; }
.ab-sw-hd h4     { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.ab-sw-bd        { padding: 22px; }
.ab-sw-bd-sm     { padding: 14px; }
.ab-expert-av {
    width: 70px; height: 70px;
    border-radius: 50%;
    background: var(--g-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: #fff;
    margin: 0 auto 16px;
    box-shadow: 0 6px 20px rgba(0,176,155,.3);
}
.ab-sw-desc {
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 18px;
    line-height: 1.6;
}
.ab-sw-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 9px; padding: 13px 18px;
    border-radius: var(--r-sm);
    background: var(--bg-1);
    border: 1px solid var(--line);
    color: var(--text-1);
    text-decoration: none;
    font-size: 13px; font-weight: 600;
    margin-bottom: 8px;
    transition: var(--t);
}
.ab-sw-cta:last-child { margin-bottom: 0; }
.ab-sw-cta:hover { background: var(--g-green); color: #fff; }
.ab-sw-cta i { font-size: 16px; color: var(--green-1); transition: var(--t); }
.ab-sw-cta:hover i { color: #fff; }
.ab-sw-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-sw-ml {
    display: flex; align-items: center;
    gap: 12px; padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--bg-1);
    border: 1.5px solid transparent;
    text-decoration: none;
    font-size: 13px; font-weight: 600;
    color: var(--text-1);
    transition: var(--t);
}
.ab-sw-ml:hover { background: #fff; border-color: var(--line); color: var(--text-1); }
.ab-sw-ml-ico {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: #e8edf5;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: #5a6ad4;
    flex-shrink: 0;
}
.ab-sw-ml .ab-sw-lbl { flex: 1; }
.ab-sw-ml .ab-sw-arr { font-size: 18px; color: var(--line); }

/* ── Welcome Message (home) specific ─────────────────────── */
.hp-h2     { font-size: clamp(24px,3.5vw,38px); font-weight: 900; color: var(--text-1); margin-bottom: 16px; line-height: 1.15; }
.hp-p-body { font-size: 16px; color: var(--text-3); line-height: 1.8; margin-bottom: 28px; }
.hp-p-sub  { font-size: 15px; color: var(--text-3); line-height: 1.8; margin-bottom: 30px; }

/* ── SAP BTP – Pillar card color variants ────────────────── */
.pillar-card-orange { --grad: linear-gradient(90deg,#ea580c,#f97316); --ibg: rgba(234,88,12,.1); }
.pillar-card-purple { --grad: linear-gradient(90deg,#7c3aed,#a855f7); --ibg: rgba(124,58,237,.1); }
.pillar-card-sky    { --grad: linear-gradient(90deg,#0ea5e9,#38bdf8); --ibg: rgba(14,165,233,.1); }
.pillar-card-green  { --grad: linear-gradient(90deg,#059669,#10b981); --ibg: rgba(5,150,105,.1); }

/* ── SAP Joule AI – Cap4 card color variants ─────────────── */
.cap4-card-purple { --cg: linear-gradient(90deg,#6d28d9,#a855f7); --ca: #6d28d9; --cib: rgba(109,40,217,.1); }
.cap4-card-pink   { --cg: linear-gradient(90deg,#db2777,#f472b6); --ca: #db2777; --cib: rgba(219,39,119,.1); }
.cap4-card-orange { --cg: linear-gradient(90deg,#ea580c,#f97316); --ca: #ea580c; --cib: rgba(234,88,12,.1); }
.cap4-card-teal   { --cg: linear-gradient(90deg,#0d9488,#2dd4bf); --ca: #0d9488; --cib: rgba(13,148,136,.1); }

/* ── SAP Analytics Cloud – P3 card color variants ─────────── */
.p3-card-green  { --pg: linear-gradient(90deg,#059669,#34d399); --ibg: rgba(5,150,105,.1); --tbg: #059669; }
.p3-card-teal   { --pg: linear-gradient(90deg,#0d9488,#2dd4bf); --ibg: rgba(13,148,136,.1); --tbg: #0d9488; }
.p3-card-purple { --pg: linear-gradient(90deg,#7c3aed,#a855f7); --ibg: rgba(124,58,237,.1); --tbg: #7c3aed; }

/* ── Cap4 tag color utilities ─────────────────────────────── */
.ctag-purple { --ctc: #6d28d9; --ctb: rgba(109,40,217,.1); }
.ctag-pink   { --ctc: #db2777; --ctb: rgba(219,39,119,.1); }
.ctag-orange { --ctc: #ea580c; --ctb: rgba(234,88,12,.1); }
.ctag-teal   { --ctc: #0d9488; --ctb: rgba(13,148,136,.1); }
/* ── Additional Utilities (pass 2) ─────────────────────────── */
.u-mt-10  { margin-top: 10px !important; }
.u-mt-28  { margin-top: 28px !important; }
.u-mb-28  { margin-bottom: 28px !important; }
.u-clr-white { color: #fff !important; }
.u-clr-w75   { color: rgba(255,255,255,.75) !important; }
.u-bg-alt    { background: var(--g-alt) !important; }

/* Footer specific */
.pf-meta-note { font-size: .78rem; color: rgba(255,255,255,.35); margin-top: 2px; }
.pf-nl-hd {
    font-size: .82rem; font-weight: 700; color: #fff;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 10px; padding-bottom: 0; border-bottom: none;
}
.pf-nl-hd-icon { color: #0070f3; margin-right: 6px; }

/* Icon size utilities */
.u-ico-20 { font-size: 20px; }
.u-ico-24 { font-size: 24px; display: block; margin-bottom: 5px; }
.u-ico-clr-indigo { color: #6d28d9; }

/* Job detail specific */
.jd-section-h { margin: 20px 0 15px; color: #333; font-size: 16px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.jd-row-full  { grid-template-columns: 1fr; }
.jd-gc-1      { grid-column: 1; }
.jd-apply-btn-full { width: 100%; margin-top: 20px; }
.jd-upload-ico { font-size: 24px; display: block; margin-bottom: 5px; }

/* Careers specific */
.careers-file-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.u-file-hidden { display: none; }


/* It-ico color variants (sap_implementation) */
.it-ico-green  { background: rgba(0,176,155,.1);  color: var(--green-1); }
.it-ico-orange { background: rgba(247,151,30,.1); color: var(--orange-1); }

/* visually hidden (for honeypot fields) */
.u-visually-hidden { position: absolute; left: -9999px; opacity: 0; }\n/* Blog detail quote-style excerpt */\n.bd-excerpt {\n    font-size: 16px; color: var(--text-2); line-height: 1.8;\n    margin-bottom: 24px; font-style: italic;\n    border-left: 4px solid var(--blue-1); padding-left: 16px;\n}\n

/* ===================================================================
   Sap S4hana New - Centralized Styles
   =================================================================== */

/* Modern Technology Page Styles */
.page-header-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 15px;
    font-weight: 500;
}

.modern-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 30px;
    height: 400px;
}

.modern-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.modern-image-card:hover img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-image-card:hover .image-overlay {
    opacity: 1;
}

.overlay-content {
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.overlay-content i {
    font-size: 24px;
}

.content-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    font-size: 30px;
    color: white;
    margin-bottom: 20px;
}

.card-icon.blue {
    background: linear-gradient(135deg, #0066ff, #0099ff);
}

.card-icon.green {
    background: linear-gradient(135deg, #00b386, #00d9a3);
}

.card-icon.orange {
    background: linear-gradient(135deg, #ff9500, #ffc107);
}

.card-icon.purple {
    background: linear-gradient(135deg, #9966ff, #cc99ff);
}

.gradient-heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.blue-gradient {
    background: linear-gradient(135deg, #0066ff, #0099ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.green-gradient {
    background: linear-gradient(135deg, #00b386, #00d9a3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.orange-gradient {
    background: linear-gradient(135deg, #ff9500, #ffc107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.purple-gradient {
    background: linear-gradient(135deg, #9966ff, #cc99ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lead-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.header-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.blue-header .header-icon {
    color: #0066ff;
}

.green-header .header-icon {
    color: #00b386;
}

.orange-header .header-icon {
    color: #ff9500;
}

.purple-header .header-icon {
    color: #9966ff;
}

.modern-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.feature-card {
    padding: 25px;
    border-radius: 12px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.blue-card {
    background: linear-gradient(135deg, #0066ff, #0099ff);
}

.green-card {
    background: linear-gradient(135deg, #00b386, #00d9a3);
}

.orange-card {
    background: linear-gradient(135deg, #ff9500, #ffc107);
}

.purple-card {
    background: linear-gradient(135deg, #9966ff, #cc99ff);
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.feature-card h4 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.feature-card p {
    font-size: 14px;
    margin: 0;
}

.card-corner {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.1;
    background: white;
}

.modern-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.list-item {
    display: flex;
    gap: 15px;
}

.item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    flex-shrink: 0;
    font-size: 20px;
}

.blue-bg {
    background: linear-gradient(135deg, #0066ff, #0099ff);
}

.green-bg {
    background: linear-gradient(135deg, #00b386, #00d9a3);
}

.orange-bg {
    background: linear-gradient(135deg, #ff9500, #ffc107);
}

.purple-bg {
    background: linear-gradient(135deg, #9966ff, #cc99ff);
}

.item-content h5 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.item-content p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.module-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.module-tag i {
    color: #0066ff;
    font-weight: bold;
}

.modern-checklist {
    list-style: none;
    padding: 0;
}

.modern-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    color: #555;
}

.modern-checklist li:last-child {
    border-bottom: none;
}

.modern-checklist i {
    font-size: 20px;
    color: #0066ff;
    flex-shrink: 0;
}

.sidebar-widgets {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.widget-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    padding: 20px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.card-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.card-header.blue-header {
    background: linear-gradient(135deg, #0066ff, #0099ff);
    border-bottom: none;
}

.card-header.blue-header h4 {
    color: white;
}

.card-body,
.card-body {
    padding: 20px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item .label {
    font-weight: 600;
    color: #333;
}

.info-item .value {
    color: #666;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.percent-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066ff, #0099ff);
    color: white;
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
}

.cta-widget .cta-content {
    padding: 25px;
    text-align: center;
}

.cta-widget i {
    font-size: 40px;
    color: #0066ff;
    margin-bottom: 15px;
}

.cta-widget h4 {
    color: #333;
    margin-bottom: 10px;
}

.cta-widget p {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
}

.timeline-section {
    padding: 80px 0;
}

.timeline-wrapper {
    position: relative;
    padding: 20px 0;
}

.timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #0066ff, #00b386, #ff9500, #9966ff);
}

.timeline-item {
    margin-bottom: 40px;
    position: relative;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: 0;
    margin-right: auto;
    width: 45%;
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-left: auto;
    margin-right: 0;
    width: 45%;
    text-align: left;
}

.timeline-marker {
    position: absolute;
    left: 50%;
    top: 0;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    border: 3px solid white;
}

.timeline-marker.blue {
    background: #0066ff;
}

.timeline-marker.green {
    background: #00b386;
}

.timeline-marker.orange {
    background: #ff9500;
}

.timeline-marker.purple {
    background: #9966ff;
}

.timeline-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-content h4 {
    margin-top: 0;
    color: #333;
}

.timeline-content p {
    margin-bottom: 0;
    color: #666;
    font-size: 14px;
}

.cta-banner {
    padding: 60px 0;
}

.cta-box {
    background: linear-gradient(135deg, #0066ff, #0099ff);
    padding: 40px;
    border-radius: 12px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.cta-content h3 {
    margin: 0 0 10px 0;
    font-size: 24px;
}

.cta-content p {
    margin: 0;
    font-size: 15px;
    opacity: 0.9;
}

.cta-actions {
    flex-shrink: 0;
}

.btn-secondary {
    background: white;
    color: #0066ff;
    padding: 12px 25px;
}

.btn-secondary:hover {
    background: #f0f0f0;
}

@media (max-width: 768px) {
    .timeline-wrapper::before {
        left: 20px;
    }
    
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        width: calc(100% - 50px);
        margin-left: 50px;
        margin-right: 0;
        text-align: left;
    }
    
    .timeline-marker {
        left: 20px;
    }
    
    .cta-box {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-actions {
        width: 100%;
    }
    
    .cta-actions .btn {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════
   SAP SUCCESSFACTORS — Premium Enterprise HR Transformation Page
   ════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root{
  --sf-b1:#2563EB;--sf-b2:#0EA5E9;--sf-b3:#06B6D4;
  --sf-violet:#8B5CF6;--sf-teal:#14B8A6;
  --sf-dark:#0F172A;--sf-bg:#F8FAFC;
  --sf-ease:cubic-bezier(.4,0,.2,1);--sf-tr:.3s var(--sf-ease);
}

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes sfOrbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-25px) scale(1.06)}66%{transform:translate(-18px,18px) scale(.95)}}
@keyframes sfPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.55)}60%{box-shadow:0 0 0 10px rgba(37,99,235,0)}}
@keyframes sfChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sfGradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes sfSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes sfLivePulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sfBarGrow{from{height:0}to{height:var(--h)}}
@keyframes sfStageGrow{from{width:0}to{width:var(--w)}}
@keyframes sfAurora{0%,100%{opacity:.5;transform:translate(0,0) scale(1)}33%{opacity:.7;transform:translate(35px,-28px) scale(1.1)}66%{opacity:.4;transform:translate(-22px,18px) scale(.92)}}
@keyframes sfTlIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

/* ═══════════════════════════
   HERO
   ═══════════════════════════ */
.sf2-hero{position:relative;min-height:94vh;display:flex;align-items:center;background:linear-gradient(135deg,#03091a 0%,#0F172A 28%,#0c2049 55%,#1a3070 80%,#0e4f7a 100%);overflow:hidden;padding:110px 0 60px}
.sf2-hero-aurora{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 15% 40%,rgba(37,99,235,.2),transparent),radial-gradient(ellipse 60% 40% at 85% 65%,rgba(6,182,212,.14),transparent),radial-gradient(ellipse 40% 30% at 55% 20%,rgba(139,92,246,.1),transparent);animation:sfAurora 14s ease-in-out infinite;z-index:0}
.sf2-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:50px 50px;z-index:0}
.sf2-hero-orb{position:absolute;border-radius:50%;filter:blur(100px);animation:sfOrbFloat 11s ease-in-out infinite;z-index:0}
.sf2-ho-1{width:520px;height:520px;background:rgba(37,99,235,.22);top:-180px;right:-120px;animation-delay:0s}
.sf2-ho-2{width:360px;height:360px;background:rgba(6,182,212,.18);bottom:-120px;left:3%;animation-delay:5s}
.sf2-ho-3{width:240px;height:240px;background:rgba(139,92,246,.12);top:30%;left:35%;animation-delay:8s}
.sf2-hero-row{position:relative;z-index:2}

/* Badge */
.sf2-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:8px 20px;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.sf2-badge-dot{width:8px;height:8px;border-radius:50%;background:#93c5fd;animation:sfPulse 2.4s infinite}

/* Heading */
.sf2-h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:900;color:#fff;line-height:1.1;margin-bottom:22px;letter-spacing:-.025em}
.sf2-grad-text{background:linear-gradient(135deg,#93c5fd 0%,#67e8f9 40%,#5eead4 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sfGradFlow 4s linear infinite}

/* Lead */
.sf2-hero-lead{color:rgba(255,255,255,.75);font-size:1.05rem;line-height:1.8;max-width:520px;margin-bottom:36px}

/* Buttons */
.sf2-hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.sf2-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;border-radius:14px;font-weight:700;font-size:.95rem;text-decoration:none;transition:var(--sf-tr);box-shadow:0 8px 28px rgba(37,99,235,.5)}
.sf2-btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(37,99,235,.65);color:#fff;background:linear-gradient(135deg,#1d4ed8,#2563EB)}
.sf2-btn-glass{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.28);border-radius:14px;font-weight:600;font-size:.95rem;text-decoration:none;transition:var(--sf-tr);backdrop-filter:blur(10px)}
.sf2-btn-glass:hover{background:rgba(255,255,255,.18);transform:translateY(-3px);color:#fff}

/* Trust badges */
.sf2-trust-row{display:flex;flex-wrap:wrap;gap:10px 24px}
.sf2-trust-row span{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.62);font-size:.82rem;font-weight:500}
.sf2-trust-row i{color:#93c5fd;font-size:.9rem}

/* ── Hero Visual ── */
.sf2-visual-wrap{position:relative;padding:20px 10px 20px 40px}
.sf2-glow-ring{position:absolute;top:50%;left:50%;width:380px;height:380px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(37,99,235,.25),transparent,rgba(6,182,212,.18),transparent);animation:sfSpin 10s linear infinite;z-index:0;filter:blur(2px)}

/* HR Dashboard */
.sf2-dashboard{position:relative;z-index:2;background:rgba(15,23,42,.85);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);transition:var(--sf-tr)}
.sf2-dashboard:hover{transform:translateY(-4px);box-shadow:0 50px 120px rgba(0,0,0,.75),0 0 60px rgba(37,99,235,.12)}
.sf2-dash-header{display:flex;align-items:center;gap:10px;padding:14px 18px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.07)}
.sf2-dash-dots{display:flex;gap:6px}
.sf2-dash-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.sf2-dash-dots span:first-child{background:#ef4444}
.sf2-dash-dots span:nth-child(2){background:#f59e0b}
.sf2-dash-dots span:last-child{background:#22c55e}
.sf2-dash-title{flex:1;text-align:center;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;gap:6px}
.sf2-dash-title i{color:#93c5fd}
.sf2-dash-live{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:#4ade80;letter-spacing:.04em}
.sf2-live-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:sfLivePulse 1.5s infinite}
.sf2-dash-body{padding:18px}

/* Metric mini cards */
.sf2-dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.sf2-dm-card{border-radius:12px;padding:10px 8px;text-align:center}
.sf2-dm-blue{background:rgba(37,99,235,.22);border:1px solid rgba(37,99,235,.35)}
.sf2-dm-teal{background:rgba(20,184,166,.22);border:1px solid rgba(20,184,166,.35)}
.sf2-dm-violet{background:rgba(139,92,246,.22);border:1px solid rgba(139,92,246,.35)}
.sf2-dm-v{display:block;font-size:.95rem;font-weight:800;color:#fff;line-height:1}
.sf2-dm-l{display:block;font-size:.67rem;color:rgba(255,255,255,.52);margin-top:2px}

/* Pipeline */
.sf2-pipeline{margin-bottom:14px}
.sf2-pl-label{display:flex;justify-content:space-between;font-size:.74rem;color:rgba(255,255,255,.55);margin-bottom:8px}
.sf2-pl-count{font-weight:700;color:#93c5fd}
.sf2-pl-stages{display:flex;flex-direction:column;gap:5px}
.sf2-pl-stage{display:flex;align-items:center;gap:8px}
.sf2-pl-stage::before{content:'';display:block;height:8px;width:var(--w);background:var(--c);border-radius:4px;animation:sfStageGrow .8s var(--sf-ease) forwards}
.sf2-pl-stage span{font-size:.7rem;color:rgba(255,255,255,.5);min-width:55px}
.sf2-pl-stage em{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.75);font-style:normal;margin-left:auto}

/* Dept bars */
.sf2-dept-row{display:flex;align-items:flex-end;gap:8px;height:60px}
.sf2-dept-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.sf2-dept-bar{width:100%;height:var(--h);background:var(--c);border-radius:4px 4px 0 0;opacity:.75;animation:sfBarGrow .8s var(--sf-ease) forwards;transition:opacity .2s}
.sf2-dept-bar:hover{opacity:1}
.sf2-dept-item span{font-size:.62rem;color:rgba(255,255,255,.45);white-space:nowrap}

/* Floating chips */
.sf2-float-chip{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-radius:16px;padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.25);z-index:10}
.sf2-chip-tl{top:8%;left:-28px;animation:sfChipFloat 3.5s ease-in-out infinite}
.sf2-chip-br{bottom:10%;right:-18px;animation:sfChipFloat 3.5s ease-in-out 1.8s infinite}
.sf2-float-chip i{font-size:1.3rem;color:#2563EB}
.sf2-float-chip div{display:flex;flex-direction:column}
.sf2-fc-v{font-size:.82rem;font-weight:800;color:#111827;line-height:1.2}
.sf2-fc-l{font-size:.7rem;color:#6b7280}

/* Wave */
.sf2-hero-wave{position:absolute;bottom:0;left:0;width:100%;line-height:0;z-index:3}
.sf2-hero-wave svg{display:block;width:100%}

/* ═══════════════════════════
   BODY / LAYOUT
   ═══════════════════════════ */
.sf2-body{padding:80px 0 100px;background:#f8fafc}
.sf2-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
@media(max-width:991.98px){.sf2-layout{grid-template-columns:1fr}}

.sf2-sec-hdr{margin-bottom:36px}
.sf2-sec-label{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(14,165,233,.06));border:1px solid rgba(37,99,235,.18);border-radius:50px;padding:6px 16px;font-size:.73rem;font-weight:700;color:#2563EB;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.sf2-sec-label-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.85)}
.sf2-sec-title{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:900;color:#0F172A;line-height:1.2;margin-bottom:12px;letter-spacing:-.02em}
.sf2-sec-sub{color:#64748b;font-size:1rem;line-height:1.75;margin-bottom:0;max-width:580px}

/* ═══════════════════════════
   WHAT IS SF
   ═══════════════════════════ */
.sf2-what{display:grid;grid-template-columns:190px 1fr;gap:48px;align-items:center;background:#fff;border-radius:28px;padding:48px;border:1px solid #e2e8f0;margin-bottom:64px;box-shadow:0 4px 24px rgba(0,0,0,.05);overflow:hidden;position:relative}
.sf2-what::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(37,99,235,.05),transparent);border-radius:50%}
@media(max-width:767.98px){.sf2-what{grid-template-columns:1fr;gap:28px;padding:28px}}

.sf2-what-visual{position:relative;width:170px;height:170px;margin:0 auto}
.sf2-what-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}
.sf2-what-ico{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,#2563EB,#0EA5E9);display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#fff;box-shadow:0 12px 32px rgba(37,99,235,.4)}
.sf2-what-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px solid;transform:translate(-50%,-50%)}
.sf2-wr-1{width:105px;height:105px;border-color:rgba(37,99,235,.2);animation:sfSpin 12s linear infinite}
.sf2-wr-2{width:152px;height:152px;border-color:rgba(6,182,212,.15);border-style:dashed;animation:sfSpin 20s linear reverse infinite}
.sf2-what-node{position:absolute;width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:.9rem;box-shadow:0 4px 12px rgba(0,0,0,.09);color:#2563EB}
.sf2-wn-1{top:0;left:50%;transform:translateX(-50%)}
.sf2-wn-2{right:0;top:50%;transform:translateY(-50%)}
.sf2-wn-3{bottom:0;left:50%;transform:translateX(-50%)}
.sf2-wn-4{left:0;top:50%;transform:translateY(-50%)}

.sf2-what-content h2{margin-bottom:12px}
.sf2-what-content p{color:#475569;font-size:.95rem;line-height:1.8;margin-bottom:14px}

.sf2-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sf2-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:50px;font-size:.78rem;font-weight:700;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(14,165,233,.05));color:#2563EB;border:1px solid rgba(37,99,235,.16);transition:var(--sf-tr);cursor:default}
.sf2-pill:hover{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(14,165,233,.12));transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.14)}
.sf2-pill i{font-size:.78rem}

/* ═══════════════════════════
   CORE MODULES
   ═══════════════════════════ */
.sf2-mod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:64px}
@media(max-width:575.98px){.sf2-mod-grid{grid-template-columns:1fr}}

.sf2-mod-card{position:relative;background:#fff;border-radius:22px;padding:28px;border:1px solid #e2e8f0;transition:var(--sf-tr);overflow:hidden;display:flex;flex-direction:column}
.sf2-mod-card:hover{transform:translateY(-7px)}
.sf2-mod-glow{position:absolute;top:-40px;right:-40px;width:110px;height:110px;border-radius:50%;filter:blur(40px);opacity:0;transition:var(--sf-tr)}
.sf2-mod-card:hover .sf2-mod-glow{opacity:1}
.sf2-mc-blue:hover{box-shadow:0 20px 60px rgba(37,99,235,.14);border-color:rgba(37,99,235,.3)}.sf2-mc-blue .sf2-mod-glow{background:rgba(37,99,235,.3)}.sf2-mc-blue .sf2-mod-ico{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(37,99,235,.06));color:#2563EB}.sf2-mc-blue:hover .sf2-mod-ico{background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.4)}
.sf2-mc-sky:hover{box-shadow:0 20px 60px rgba(14,165,233,.14);border-color:rgba(14,165,233,.3)}.sf2-mc-sky .sf2-mod-glow{background:rgba(14,165,233,.3)}.sf2-mc-sky .sf2-mod-ico{background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(14,165,233,.06));color:#0EA5E9}.sf2-mc-sky:hover .sf2-mod-ico{background:linear-gradient(135deg,#0EA5E9,#38bdf8);color:#fff;box-shadow:0 8px 20px rgba(14,165,233,.4)}
.sf2-mc-violet:hover{box-shadow:0 20px 60px rgba(139,92,246,.14);border-color:rgba(139,92,246,.3)}.sf2-mc-violet .sf2-mod-glow{background:rgba(139,92,246,.3)}.sf2-mc-violet .sf2-mod-ico{background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(139,92,246,.06));color:#8B5CF6}.sf2-mc-violet:hover .sf2-mod-ico{background:linear-gradient(135deg,#8B5CF6,#a78bfa);color:#fff;box-shadow:0 8px 20px rgba(139,92,246,.4)}
.sf2-mc-teal:hover{box-shadow:0 20px 60px rgba(20,184,166,.14);border-color:rgba(20,184,166,.3)}.sf2-mc-teal .sf2-mod-glow{background:rgba(20,184,166,.3)}.sf2-mc-teal .sf2-mod-ico{background:linear-gradient(135deg,rgba(20,184,166,.12),rgba(20,184,166,.06));color:#14B8A6}.sf2-mc-teal:hover .sf2-mod-ico{background:linear-gradient(135deg,#14B8A6,#2dd4bf);color:#fff;box-shadow:0 8px 20px rgba(20,184,166,.4)}
.sf2-mc-indigo:hover{box-shadow:0 20px 60px rgba(99,102,241,.14);border-color:rgba(99,102,241,.3)}.sf2-mc-indigo .sf2-mod-glow{background:rgba(99,102,241,.3)}.sf2-mc-indigo .sf2-mod-ico{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(99,102,241,.06));color:#6366f1}.sf2-mc-indigo:hover .sf2-mod-ico{background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;box-shadow:0 8px 20px rgba(99,102,241,.4)}
.sf2-mc-cyan:hover{box-shadow:0 20px 60px rgba(6,182,212,.14);border-color:rgba(6,182,212,.3)}.sf2-mc-cyan .sf2-mod-glow{background:rgba(6,182,212,.3)}.sf2-mc-cyan .sf2-mod-ico{background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(6,182,212,.06));color:#06B6D4}.sf2-mc-cyan:hover .sf2-mod-ico{background:linear-gradient(135deg,#06B6D4,#22d3ee);color:#fff;box-shadow:0 8px 20px rgba(6,182,212,.4)}
.sf2-mc-purple:hover{box-shadow:0 20px 60px rgba(147,51,234,.14);border-color:rgba(147,51,234,.3)}.sf2-mc-purple .sf2-mod-glow{background:rgba(147,51,234,.3)}.sf2-mc-purple .sf2-mod-ico{background:linear-gradient(135deg,rgba(147,51,234,.12),rgba(147,51,234,.06));color:#9333ea}.sf2-mc-purple:hover .sf2-mod-ico{background:linear-gradient(135deg,#9333ea,#a855f7);color:#fff;box-shadow:0 8px 20px rgba(147,51,234,.4)}
.sf2-mc-emerald:hover{box-shadow:0 20px 60px rgba(16,185,129,.14);border-color:rgba(16,185,129,.3)}.sf2-mc-emerald .sf2-mod-glow{background:rgba(16,185,129,.3)}.sf2-mc-emerald .sf2-mod-ico{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.06));color:#10b981}.sf2-mc-emerald:hover .sf2-mod-ico{background:linear-gradient(135deg,#10b981,#34d399);color:#fff;box-shadow:0 8px 20px rgba(16,185,129,.4)}

.sf2-mod-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:16px;transition:var(--sf-tr)}
.sf2-mod-card h4{font-size:1rem;font-weight:800;color:#0F172A;margin-bottom:8px}
.sf2-mod-card p{font-size:.86rem;color:#64748b;line-height:1.65;margin-bottom:14px;flex:1}
.sf2-mod-tag{display:inline-block;padding:4px 12px;border-radius:50px;font-size:.72rem;font-weight:700;background:#f1f5f9;color:#475569;margin-top:auto}
.sf2-mod-arrow{position:absolute;bottom:18px;right:18px;width:30px;height:30px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#94a3b8;transition:var(--sf-tr)}
.sf2-mod-card:hover .sf2-mod-arrow{background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;border-color:transparent;transform:translate(2px,-2px)}

/* ═══════════════════════════
   WHY SUCCESSFACTORS
   ═══════════════════════════ */
.sf2-why{display:grid;grid-template-columns:1fr 220px;gap:48px;align-items:start;margin-bottom:64px}
@media(max-width:991.98px){.sf2-why{grid-template-columns:1fr}}
.sf2-why-lead{color:#64748b;font-size:1rem;line-height:1.75;margin-bottom:28px}
.sf2-why-benefits{display:flex;flex-direction:column;gap:16px}
.sf2-why-item{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:14px;border:1px solid transparent;transition:var(--sf-tr)}
.sf2-why-item:hover{background:#fff;border-color:#e2e8f0;transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,.05)}
.sf2-why-ico{width:40px;height:40px;min-width:40px;border-radius:11px;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(14,165,233,.07));display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:#2563EB;transition:var(--sf-tr)}
.sf2-why-item:hover .sf2-why-ico{background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.sf2-why-item h6{font-size:.9rem;font-weight:800;color:#0F172A;margin-bottom:3px}
.sf2-why-item p{font-size:.82rem;color:#64748b;line-height:1.6;margin:0}

/* Stat grid */
.sf2-why-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:991.98px){.sf2-why-stat-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:575.98px){.sf2-why-stat-grid{grid-template-columns:repeat(2,1fr)}}
.sf2-wstat{background:#fff;border-radius:18px;padding:20px 14px;text-align:center;border:1px solid #e2e8f0;box-shadow:0 4px 16px rgba(0,0,0,.05);transition:var(--sf-tr)}
.sf2-wstat:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(37,99,235,.12);border-color:rgba(37,99,235,.2)}
.sf2-wstat-alt{background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(6,182,212,.04));border-color:rgba(37,99,235,.12)}
.sf2-wstat-ico{font-size:1.4rem;color:#2563EB;margin-bottom:8px}
.sf2-wstat-num{font-size:2rem;font-weight:900;color:#0F172A;line-height:1;letter-spacing:-.03em}
.sf2-wstat-suf{font-size:.75rem;font-weight:700;color:#2563EB;display:block;margin-top:2px}
.sf2-wstat-lbl{font-size:.72rem;color:#94a3b8;display:block;margin-top:4px;line-height:1.3}

/* ═══════════════════════════
   AI SECTION
   ═══════════════════════════ */
.sf2-ai-section{position:relative;border-radius:28px;overflow:hidden;margin-bottom:64px}
.sf2-ai-orb{position:absolute;border-radius:50%;filter:blur(90px);animation:sfOrbFloat 10s ease-in-out infinite}
.sf2-aio-1{width:300px;height:300px;background:rgba(37,99,235,.3);top:-80px;right:-60px;animation-delay:0s}
.sf2-aio-2{width:220px;height:220px;background:rgba(20,184,166,.25);bottom:-60px;left:-40px;animation-delay:5s}
.sf2-ai-grid-bg{position:absolute;inset:0;background:linear-gradient(135deg,#050d1a 0%,#0F172A 40%,#0a1e38 100%)}
.sf2-ai-inner{position:relative;z-index:2;padding:52px 44px}
@media(max-width:767.98px){.sf2-ai-inner{padding:36px 22px}}
.sf2-ai-header{text-align:center;margin-bottom:40px}
.sf2-ai-title{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:900;color:#fff;margin-bottom:12px;letter-spacing:-.02em}
.sf2-ai-sub{color:rgba(255,255,255,.6);font-size:.95rem;line-height:1.7;max-width:540px;margin:0 auto}

.sf2-ai-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1199.98px){.sf2-ai-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:575.98px){.sf2-ai-cards{grid-template-columns:1fr}}

.sf2-ai-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 18px;text-align:center;transition:var(--sf-tr);position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.sf2-ai-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.sf2-ai-card-featured{border:1.5px solid rgba(37,99,235,.5);background:rgba(37,99,235,.12)}
.sf2-ai-card-glow{position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:100px;height:100px;border-radius:50%;background:rgba(37,99,235,.3);filter:blur(30px)}
.sf2-ai-card-ico{width:48px;height:48px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:rgba(37,99,235,.2);color:#93c5fd;border:1px solid rgba(37,99,235,.35)}
.sf2-ai-card h5{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:7px}
.sf2-ai-card p{font-size:.78rem;color:rgba(255,255,255,.58);line-height:1.6;margin-bottom:12px}
.sf2-ai-card-tag{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.68rem;font-weight:700;background:rgba(37,99,235,.3);color:#93c5fd;border:1px solid rgba(37,99,235,.4)}

/* ═══════════════════════════
   IMPLEMENTATION TIMELINE
   ═══════════════════════════ */
.sf2-timeline{position:relative;margin-bottom:64px}
.sf2-tl-line{position:absolute;left:24px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,#2563EB,#0EA5E9,#06B6D4,#14B8A6);border-radius:2px;z-index:0}
@media(max-width:575.98px){.sf2-tl-line{left:18px}}
.sf2-tl-item{position:relative;display:grid;grid-template-columns:50px 1fr;gap:20px;margin-bottom:20px;align-items:center}
@media(max-width:575.98px){.sf2-tl-item{grid-template-columns:38px 1fr;gap:14px}}

.sf2-tl-step{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;font-size:.8rem;font-weight:900;display:flex;align-items:center;justify-content:center;border:3px solid #f8fafc;box-shadow:0 0 0 3px rgba(37,99,235,.3);z-index:1;position:relative;flex-shrink:0;letter-spacing:-.02em}
@media(max-width:575.98px){.sf2-tl-step{width:38px;height:38px;font-size:.72rem}}

.sf2-tl-card{background:#fff;border-radius:18px;padding:22px 24px;border:1px solid #e2e8f0;display:flex;align-items:flex-start;gap:14px;transition:var(--sf-tr);opacity:0;transform:translateX(-20px)}
.sf2-tl-visible{opacity:1;transform:translateX(0);transition:opacity .5s var(--sf-ease),transform .5s var(--sf-ease)}
.sf2-tl-card:hover{border-color:rgba(37,99,235,.25);box-shadow:0 8px 32px rgba(37,99,235,.1);transform:translateX(4px)}
.sf2-tl-ico{width:40px;height:40px;min-width:40px;border-radius:11px;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(14,165,233,.06));display:flex;align-items:center;justify-content:center;font-size:1rem;color:#2563EB;transition:var(--sf-tr)}
.sf2-tl-card:hover .sf2-tl-ico{background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.sf2-tl-card h5{font-size:.92rem;font-weight:800;color:#0F172A;margin-bottom:4px}
.sf2-tl-card p{font-size:.83rem;color:#64748b;line-height:1.65;margin:0}

/* ═══════════════════════════
   INDUSTRIES
   ═══════════════════════════ */
.sf2-ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:64px}
@media(max-width:767.98px){.sf2-ind-grid{grid-template-columns:repeat(2,1fr)}}

.sf2-ind-card{position:relative;background:#fff;border-radius:18px;padding:20px 14px;border:1px solid #e2e8f0;text-align:center;transition:var(--sf-tr);overflow:hidden;cursor:default}
.sf2-ind-card::before{content:'';position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.18),transparent);top:var(--my,50%);left:var(--mx,50%);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .3s}
.sf2-ind-card:hover::before{opacity:1}
.sf2-ind-card:hover{border-color:rgba(37,99,235,.3);transform:translateY(-5px);box-shadow:0 14px 40px rgba(37,99,235,.1)}
.sf2-ind-ico{width:52px;height:52px;border-radius:14px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(14,165,233,.06));color:#2563EB;transition:var(--sf-tr)}
.sf2-ind-card:hover .sf2-ind-ico{background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.35)}
.sf2-ind-card span{display:block;font-size:.82rem;font-weight:700;color:#0F172A}

/* ═══════════════════════════
   TESTIMONIALS
   ═══════════════════════════ */
.sf2-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:64px}
@media(max-width:991.98px){.sf2-testi-grid{grid-template-columns:1fr}}

.sf2-testi-card{position:relative;background:#fff;border-radius:22px;padding:28px;border:1px solid #e2e8f0;transition:var(--sf-tr);overflow:hidden}
.sf2-testi-card:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.09)}
.sf2-testi-featured{border:1.5px solid rgba(37,99,235,.3);background:linear-gradient(135deg,rgba(37,99,235,.03),rgba(14,165,233,.02))}
.sf2-testi-glow{position:absolute;top:-50px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(37,99,235,.1);filter:blur(35px)}
.sf2-testi-stars{display:flex;gap:3px;margin-bottom:14px;color:#f59e0b;font-size:.9rem}
.sf2-testi-text{font-size:.88rem;color:#475569;line-height:1.75;margin-bottom:20px;font-style:italic}
.sf2-testi-author{display:flex;align-items:center;gap:12px}
.sf2-testi-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:#fff;flex-shrink:0}
.sf2-av-blue{background:linear-gradient(135deg,#2563EB,#0EA5E9)}
.sf2-av-teal{background:linear-gradient(135deg,#14B8A6,#2dd4bf)}
.sf2-av-violet{background:linear-gradient(135deg,#8B5CF6,#a78bfa)}
.sf2-testi-name{display:block;font-size:.85rem;font-weight:800;color:#0F172A}
.sf2-testi-role{display:block;font-size:.75rem;color:#94a3b8;margin-top:1px}

/* ═══════════════════════════
   CTA
   ═══════════════════════════ */
.sf2-cta{position:relative;border-radius:28px;overflow:hidden;margin-bottom:0}
.sf2-cta-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:sfOrbFloat 8s ease-in-out infinite}
.sf2-co-1{width:300px;height:300px;background:rgba(6,182,212,.35);top:-80px;right:-60px;animation-delay:0s}
.sf2-co-2{width:220px;height:220px;background:rgba(37,99,235,.3);bottom:-60px;left:-40px;animation-delay:4s}
.sf2-cta-inner{position:relative;z-index:2;background:linear-gradient(135deg,#1d4ed8 0%,#2563EB 40%,#0EA5E9 80%,#06B6D4 100%);border-radius:28px;padding:60px 52px;text-align:center}
@media(max-width:767.98px){.sf2-cta-inner{padding:40px 24px}}
.sf2-cta-badge{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;margin:0 auto 24px;backdrop-filter:blur(8px)}
.sf2-cta-inner h2{font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:900;color:#fff;margin-bottom:14px;letter-spacing:-.02em}
.sf2-cta-inner p{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.7;margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto}
.sf2-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.sf2-cta-btn-w{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;background:#fff;color:#2563EB;border-radius:14px;font-weight:800;font-size:.95rem;text-decoration:none;transition:var(--sf-tr);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.sf2-cta-btn-w:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.3);color:#1d4ed8}
.sf2-cta-btn-g{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.38);border-radius:14px;font-weight:700;font-size:.95rem;text-decoration:none;transition:var(--sf-tr);backdrop-filter:blur(8px)}
.sf2-cta-btn-g:hover{background:rgba(255,255,255,.24);transform:translateY(-3px);color:#fff}

/* ═══════════════════════════
   SIDEBAR
   ═══════════════════════════ */
.sf2-sidebar{display:flex;flex-direction:column;gap:20px}
@media(min-width:992px){.sf2-sidebar{position:sticky;top:96px}}

.sf2-sb-card{background:#fff;border-radius:22px;padding:24px;border:1px solid #e2e8f0;box-shadow:0 4px 20px rgba(0,0,0,.05);transition:var(--sf-tr)}
.sf2-sb-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.08)}
.sf2-sb-hdr{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #f1f5f9}
.sf2-sb-ico{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(14,165,233,.06));display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#2563EB}
.sf2-sb-hdr h5{font-size:.9rem;font-weight:800;color:#0F172A;margin:0}

.sf2-sb-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:#64748b;font-size:.85rem;text-decoration:none;transition:var(--sf-tr);margin-bottom:3px;font-weight:500}
.sf2-sb-nav a i{font-size:.9rem;width:18px;text-align:center;flex-shrink:0}
.sf2-sb-nav a:hover{background:#f8fafc;color:#2563EB;font-weight:600}
.sf2-sb-nav a.active{background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(14,165,233,.06));color:#2563EB;font-weight:700;border-left:3px solid #2563EB;padding-left:9px}

.sf2-met-list{display:flex;flex-direction:column;gap:14px}
.sf2-met-item{display:flex;flex-direction:column;gap:6px}
.sf2-met-row{display:flex;justify-content:space-between;align-items:center}
.sf2-met-lbl{font-size:.8rem;color:#64748b;font-weight:500}
.sf2-met-val{font-size:.9rem;font-weight:800;background:linear-gradient(135deg,#2563EB,#0EA5E9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sf2-met-bar{height:5px;background:#f1f5f9;border-radius:3px;overflow:hidden}
.sf2-met-fill{height:100%;background:linear-gradient(90deg,#2563EB,#0EA5E9);border-radius:3px}
.sf2-mf-sky{background:linear-gradient(90deg,#0EA5E9,#38bdf8)}
.sf2-mf-teal{background:linear-gradient(90deg,#14B8A6,#2dd4bf)}
.sf2-mf-violet{background:linear-gradient(90deg,#8B5CF6,#a78bfa)}

.sf2-sb-contact{display:flex;flex-direction:column;gap:10px}
.sf2-sb-contact a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;transition:var(--sf-tr);border:1px solid transparent}
.sf2-sb-contact a:hover{background:#f8fafc;border-color:#e2e8f0}
.sf2-sbc-ico{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(14,165,233,.06));display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#2563EB;flex-shrink:0}
.sf2-sb-contact span{font-size:.83rem;color:#374151;font-weight:500}

.sf2-sb-dl{display:flex;flex-direction:column;gap:10px}
.sf2-sb-dl a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:14px;text-decoration:none;transition:var(--sf-tr)}
.sf2-sb-dl a:hover{border-color:rgba(37,99,235,.3);background:rgba(37,99,235,.03);transform:translateX(3px)}
.sf2-dl-ico{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(14,165,233,.06));display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#2563EB;flex-shrink:0}
.sf2-dl-info{flex:1}
.sf2-dl-name{display:block;font-size:.82rem;font-weight:700;color:#0F172A;line-height:1.3}
.sf2-dl-type{display:block;font-size:.72rem;color:#94a3b8;margin-top:1px}
.sf2-dl-arrow{font-size:1rem;color:#cbd5e1;transition:var(--sf-tr)}
.sf2-sb-dl a:hover .sf2-dl-arrow{color:#2563EB;transform:translateY(-2px)}

.sf2-sb-cta{position:relative;border-radius:22px;overflow:hidden;padding:28px 22px;text-align:center;background:linear-gradient(135deg,#1d4ed8,#2563EB,#0EA5E9)}
.sf2-sb-cta-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.15);filter:blur(30px)}
.sf2-sb-cta-ico{position:relative;z-index:1;font-size:2.2rem;color:#fff;display:block;margin-bottom:12px}
.sf2-sb-cta h5{position:relative;z-index:1;font-size:.95rem;font-weight:800;color:#fff;margin-bottom:8px}
.sf2-sb-cta p{position:relative;z-index:1;font-size:.79rem;color:rgba(255,255,255,.8);line-height:1.55;margin-bottom:18px}
.sf2-sb-cta-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:10px 22px;background:#fff;color:#2563EB;border-radius:12px;font-weight:800;font-size:.85rem;text-decoration:none;transition:var(--sf-tr)}
.sf2-sb-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22);color:#1d4ed8}

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */
@media(max-width:767.98px){
  .sf2-hero{min-height:auto;padding:110px 0 80px}
  .sf2-visual-wrap{display:none}
  .sf2-h1{font-size:2rem}
  .sf2-hero-btns{flex-direction:column}
  .sf2-hero-btns a{text-align:center;justify-content:center}
  .sf2-trust-row{gap:8px}
  .sf2-ai-cards{grid-template-columns:1fr 1fr}
  .sf2-cta-inner{padding:36px 20px}
}
@media(max-width:575.98px){
  .sf2-ind-grid{grid-template-columns:repeat(2,1fr)}
  .sf2-ai-cards{grid-template-columns:1fr}
  .sf2-testi-grid{grid-template-columns:1fr}
  .sf2-tl-card{padding:16px 18px}
}

/* ═══════════════════════════════════════════════════════════
   SAP ARIBA — Premium Enterprise Procurement Page (ar2-)
   Color system: teal #14B8A6 · blue #2563EB · emerald #10B981
   ═══════════════════════════════════════════════════════════ */
:root{
  --ar-b1:#2563EB;--ar-b2:#0EA5E9;--ar-t1:#14B8A6;
  --ar-e1:#10B981;--ar-c1:#06B6D4;--ar-v1:#8B5CF6;
  --ar-dark:#0F172A;--ar-dark2:#111827;--ar-bg:#F8FAFC;
  --ar-ease:cubic-bezier(.4,0,.2,1);--ar-tr:.3s var(--ar-ease);
}

/* ── KEYFRAMES ── */
@keyframes arOrbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.06)}}
@keyframes arPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes arChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes arAurora{0%,100%{opacity:.55;transform:translate(0,0) scale(1)}33%{opacity:.8;transform:translate(3%,2%) scale(1.04)}66%{opacity:.65;transform:translate(-2%,3%) scale(.97)}}
@keyframes arSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes arSpinRev{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes arLivePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(20,184,166,.5)}70%{opacity:.7;box-shadow:0 0 0 5px rgba(20,184,166,0)}}
@keyframes arBarGrow{from{width:0}to{width:var(--w)}}
@keyframes arTlIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes arNodePulse{0%,100%{transform:translateX(-50%) translateY(-50%) scale(1)}50%{transform:translateX(-50%) translateY(-50%) scale(1.15)}}
@keyframes arGlow{0%,100%{opacity:.4}50%{opacity:.9}}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.ar2-hero{position:relative;min-height:96vh;display:flex;align-items:center;background:linear-gradient(135deg,#03071e 0%,#050a2a 25%,#0a1a3a 50%,#092e3a 75%,#063a35 100%);overflow:hidden;padding:120px 0 80px}
.ar2-hero-aurora{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -20%,rgba(20,184,166,.25) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 50%,rgba(37,99,235,.2) 0%,transparent 55%),radial-gradient(ellipse 50% 40% at 20% 70%,rgba(16,185,129,.15) 0%,transparent 50%);animation:arAurora 12s ease-in-out infinite}
.ar2-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(20,184,166,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,.06) 1px,transparent 1px);background-size:48px 48px}
.ar2-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;animation:arOrbFloat 8s ease-in-out infinite}
.ar2-orb-1{width:400px;height:400px;top:-120px;right:-80px;background:rgba(20,184,166,.18);animation-delay:0s}
.ar2-orb-2{width:320px;height:320px;bottom:-80px;left:-60px;background:rgba(37,99,235,.15);animation-delay:-3s}
.ar2-orb-3{width:220px;height:220px;top:40%;left:45%;background:rgba(16,185,129,.12);animation-delay:-5.5s}
.ar2-hero-row{min-height:calc(96vh - 200px)}

/* Badge */
.ar2-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;background:rgba(20,184,166,.12);border:1px solid rgba(20,184,166,.3);border-radius:999px;color:rgba(255,255,255,.9);font-size:.8rem;font-weight:600;letter-spacing:.04em;margin-bottom:24px;backdrop-filter:blur(8px)}
.ar2-badge-dot{width:7px;height:7px;border-radius:50%;background:#14B8A6;animation:arLivePulse 2s infinite}

/* Heading */
.ar2-h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;line-height:1.05;color:#fff;letter-spacing:-.03em;margin-bottom:20px}
.ar2-grad-text{background:linear-gradient(135deg,#14B8A6,#06B6D4,#0EA5E9,#2563EB);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Lead / buttons / trust */
.ar2-hero-lead{font-size:1.05rem;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:28px;max-width:520px}
.ar2-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.ar2-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:linear-gradient(135deg,#14B8A6,#0EA5E9);color:#fff;border-radius:14px;font-weight:700;font-size:.92rem;text-decoration:none;transition:var(--ar-tr);box-shadow:0 8px 24px rgba(20,184,166,.4)}
.ar2-btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(20,184,166,.55);color:#fff}
.ar2-btn-glass{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9);border-radius:14px;font-weight:600;font-size:.92rem;text-decoration:none;backdrop-filter:blur(8px);transition:var(--ar-tr)}
.ar2-btn-glass:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-2px)}
.ar2-trust-row{display:flex;flex-wrap:wrap;gap:16px}
.ar2-trust-row span{display:flex;align-items:center;gap:6px;font-size:.78rem;color:rgba(255,255,255,.55);font-weight:500}
.ar2-trust-row i{color:var(--ar-t1)}

/* Dashboard visual */
.ar2-visual-wrap{position:relative;padding:20px}
.ar2-glow-ring{position:absolute;inset:-20px;border-radius:30px;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(20,184,166,.12),transparent 70%);pointer-events:none}
.ar2-dashboard{background:rgba(10,26,58,.75);border:1px solid rgba(20,184,166,.2);border-radius:24px;overflow:hidden;backdrop-filter:blur(16px);box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 0 1px rgba(20,184,166,.08)}
.ar2-dash-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(20,184,166,.06);border-bottom:1px solid rgba(20,184,166,.12)}
.ar2-dash-dots{display:flex;gap:5px}
.ar2-dash-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.ar2-dash-dots span:nth-child(1){background:rgba(255,100,100,.7)}
.ar2-dash-dots span:nth-child(2){background:rgba(255,200,50,.7)}
.ar2-dash-dots span:nth-child(3){background:rgba(50,200,100,.7)}
.ar2-dash-title{flex:1;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:6px}
.ar2-dash-title i{color:var(--ar-t1)}
.ar2-dash-live{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--ar-t1);font-weight:600}
.ar2-live-dot{width:6px;height:6px;border-radius:50%;background:#14B8A6;animation:arLivePulse 2s infinite}
.ar2-dash-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}

/* Dashboard metric cards */
.ar2-dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ar2-dm-card{padding:10px;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,.06)}
.ar2-dm-teal{background:rgba(20,184,166,.12);border-color:rgba(20,184,166,.2)}
.ar2-dm-blue{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.2)}
.ar2-dm-emerald{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.2)}
.ar2-dm-v{display:block;font-size:.95rem;font-weight:800;color:#fff}
.ar2-dm-l{display:block;font-size:.65rem;color:rgba(255,255,255,.5);margin-top:2px}

/* Spend bars */
.ar2-spend-section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px}
.ar2-spend-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.73rem;color:rgba(255,255,255,.6)}
.ar2-spend-label i{color:var(--ar-t1)}
.ar2-spend-total{color:var(--ar-t1);font-weight:700}
.ar2-spend-bars{display:flex;flex-direction:column;gap:6px}
.ar2-spend-bar{display:grid;grid-template-columns:80px 1fr 32px;align-items:center;gap:8px}
.ar2-sb-cat{font-size:.68rem;color:rgba(255,255,255,.55);white-space:nowrap}
.ar2-sb-track{height:6px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden}
.ar2-sb-fill{height:100%;border-radius:6px;background:var(--c,rgba(20,184,166,.75));width:var(--w,0);animation:arBarGrow .9s var(--ar-ease) both}
.ar2-sb-pct{font-size:.68rem;color:rgba(255,255,255,.45);text-align:right}

/* Workflow */
.ar2-workflow{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px}
.ar2-wf-label{font-size:.72rem;color:rgba(255,255,255,.5);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ar2-wf-label i{color:var(--ar-t1)}
.ar2-wf-steps{display:flex;align-items:center;gap:4px;overflow-x:auto}
.ar2-wf-step{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.62rem;color:rgba(255,255,255,.45);white-space:nowrap;flex-shrink:0}
.ar2-wf-step i{font-size:.9rem}
.ar2-wf-done{background:rgba(20,184,166,.12);border-color:rgba(20,184,166,.3);color:#14B8A6}
.ar2-wf-active{background:rgba(37,99,235,.15);border-color:rgba(37,99,235,.4);color:#60a5fa;animation:arPulse 2s infinite}
.ar2-wf-connector{width:18px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;flex-shrink:0}
.ar2-wfc-done{background:rgba(20,184,166,.4)}

/* Floating chips */
.ar2-float-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(10,26,58,.85);border:1px solid rgba(20,184,166,.25);border-radius:14px;backdrop-filter:blur(12px);animation:arChipFloat 4s ease-in-out infinite;z-index:5}
.ar2-float-chip i{font-size:1.1rem;color:#14B8A6}
.ar2-chip-tl{top:10px;left:-24px;animation-delay:0s}
.ar2-chip-br{bottom:20px;right:-18px;animation-delay:-2s}
.ar2-fc-v{display:block;font-size:.75rem;font-weight:700;color:#fff}
.ar2-fc-l{display:block;font-size:.62rem;color:rgba(255,255,255,.5)}

/* Hero wave */
.ar2-hero-wave{position:absolute;bottom:-1px;left:0;right:0;line-height:0}
.ar2-hero-wave svg{width:100%;height:60px;display:block}

/* ══════════════════════════════════════════════════════════
   BODY / LAYOUT
   ══════════════════════════════════════════════════════════ */
.ar2-body{background:var(--ar-bg);padding:72px 0 80px}
.ar2-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.ar2-main-col{min-width:0}

/* Section common */
.ar2-sec-hdr{margin-bottom:36px}
.ar2-sec-label{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ar-t1);margin-bottom:12px}
.ar2-sec-label i{font-size:1rem}
.ar2-sec-label-light{color:rgba(255,255,255,.6)}
.ar2-sec-title{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:900;color:#0f172a;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
.ar2-sec-sub{font-size:.95rem;color:#64748b;line-height:1.65;max-width:620px}

/* ── WHAT IS ARIBA ── */
.ar2-what{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:center;padding:48px 0;border-bottom:1px solid rgba(20,184,166,.1);margin-bottom:56px}
.ar2-what-visual{position:relative;width:220px;height:220px;flex-shrink:0;background:radial-gradient(circle at 50% 50%,rgba(20,184,166,.1) 0%,rgba(14,165,233,.04) 60%,transparent 75%)}
.ar2-what-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.ar2-what-ico{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#14B8A6,#0EA5E9);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;box-shadow:0 0 32px rgba(20,184,166,.55),0 0 0 8px rgba(20,184,166,.12);z-index:2;position:relative}
.ar2-what-ring{position:absolute;top:50%;left:50%;border-radius:50%}
.ar2-wr-1{width:110px;height:110px;margin:-55px 0 0 -55px;border:1.5px solid rgba(20,184,166,.45);animation:arSpin 12s linear infinite}
.ar2-wr-2{width:170px;height:170px;margin:-85px 0 0 -85px;border:1.5px dashed rgba(37,99,235,.35);animation:arSpinRev 20s linear infinite}
.ar2-what-node{position:absolute;width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid rgba(20,184,166,.35);display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#14B8A6;box-shadow:0 4px 14px rgba(20,184,166,.22),0 2px 6px rgba(0,0,0,.07);z-index:3}
.ar2-wn-1{top:6px;left:91px}
.ar2-wn-2{top:91px;left:176px}
.ar2-wn-3{top:176px;left:91px}
.ar2-wn-4{top:91px;left:6px}
.ar2-what-content .ar2-sec-title{color:#0f172a}
.ar2-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ar2-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:#f0fdf9;border:1px solid rgba(20,184,166,.2);border-radius:999px;font-size:.76rem;font-weight:600;color:#0f766e}
.ar2-pill i{color:var(--ar-t1);font-size:.85rem}

/* ── SOLUTIONS GRID ── */
.ar2-sol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:56px}
.ar2-sol-card{position:relative;padding:26px;border-radius:22px;border:1px solid rgba(255,255,255,.6);background:#fff;overflow:hidden;transition:var(--ar-tr);box-shadow:0 4px 16px rgba(0,0,0,.04)}
.ar2-sol-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(0,0,0,.1)}
.ar2-sol-glow{position:absolute;top:-40px;right:-30px;width:120px;height:120px;border-radius:50%;opacity:.18;filter:blur(30px);pointer-events:none;transition:opacity .4s}
.ar2-sol-card:hover .ar2-sol-glow{opacity:.35}
.ar2-sc-teal .ar2-sol-glow{background:#14B8A6}
.ar2-sc-blue .ar2-sol-glow{background:#2563EB}
.ar2-sc-violet .ar2-sol-glow{background:#8B5CF6}
.ar2-sc-emerald .ar2-sol-glow{background:#10B981}
.ar2-sc-cyan .ar2-sol-glow{background:#06B6D4}
.ar2-sc-indigo .ar2-sol-glow{background:#4F46E5}
.ar2-sc-rose .ar2-sol-glow{background:#F43F5E}
.ar2-sc-sky .ar2-sol-glow{background:#0EA5E9}
.ar2-sol-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:14px}
.ar2-sc-teal .ar2-sol-ico{background:#f0fdf9;color:#14B8A6;border:1px solid rgba(20,184,166,.2)}
.ar2-sc-blue .ar2-sol-ico{background:#eff6ff;color:#2563EB;border:1px solid rgba(37,99,235,.15)}
.ar2-sc-violet .ar2-sol-ico{background:#f5f3ff;color:#8B5CF6;border:1px solid rgba(139,92,246,.15)}
.ar2-sc-emerald .ar2-sol-ico{background:#f0fdf4;color:#10B981;border:1px solid rgba(16,185,129,.15)}
.ar2-sc-cyan .ar2-sol-ico{background:#ecfeff;color:#06B6D4;border:1px solid rgba(6,182,212,.15)}
.ar2-sc-indigo .ar2-sol-ico{background:#eef2ff;color:#4F46E5;border:1px solid rgba(79,70,229,.15)}
.ar2-sc-rose .ar2-sol-ico{background:#fff1f2;color:#F43F5E;border:1px solid rgba(244,63,94,.15)}
.ar2-sc-sky .ar2-sol-ico{background:#f0f9ff;color:#0EA5E9;border:1px solid rgba(14,165,233,.15)}
.ar2-sol-card h4{font-size:.95rem;font-weight:800;color:#0f172a;margin-bottom:8px}
.ar2-sol-card p{font-size:.82rem;color:#64748b;line-height:1.6;margin-bottom:12px}
.ar2-sol-tag{display:inline-block;padding:3px 10px;border-radius:8px;font-size:.7rem;font-weight:700;background:#f1f5f9;color:#475569}
.ar2-sol-arrow{position:absolute;bottom:20px;right:20px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;background:#f1f5f9;color:#94a3b8;transition:var(--ar-tr)}
.ar2-sol-card:hover .ar2-sol-arrow{background:linear-gradient(135deg,#14B8A6,#0EA5E9);color:#fff;transform:rotate(45deg)}

/* ── WHY ARIBA ── */
.ar2-why{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start;padding:48px 0;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;margin-bottom:56px}
.ar2-why-lead{font-size:.95rem;color:#64748b;line-height:1.65;margin-bottom:24px}
.ar2-why-list{display:flex;flex-direction:column;gap:18px}
.ar2-why-item{display:flex;gap:14px;align-items:flex-start}
.ar2-why-ico{width:38px;height:38px;border-radius:12px;background:#f0fdf9;border:1px solid rgba(20,184,166,.2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--ar-t1);flex-shrink:0;margin-top:2px}
.ar2-why-item h6{font-size:.85rem;font-weight:700;color:#0f172a;margin-bottom:3px}
.ar2-why-item p{font-size:.79rem;color:#64748b;line-height:1.55;margin:0}

/* Why stats grid */
.ar2-wstat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ar2-wstat{padding:20px 16px;border-radius:18px;background:#fff;border:1px solid #e2e8f0;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.ar2-wstat-alt{background:linear-gradient(135deg,#f0fdf9,#ecfeff);border-color:rgba(20,184,166,.2)}
.ar2-wstat-ico{font-size:1.4rem;color:var(--ar-t1);margin-bottom:6px}
.ar2-wstat-num{font-size:1.9rem;font-weight:900;color:#0f172a;line-height:1}
.ar2-wstat-suf{font-size:.75rem;font-weight:700;color:var(--ar-t1)}
.ar2-wstat-lbl{font-size:.72rem;color:#94a3b8;margin-top:4px}

/* ── AI SECTION ── */
.ar2-ai-section{position:relative;border-radius:28px;overflow:hidden;padding:56px 40px;margin-bottom:56px;isolation:isolate}
.ar2-ai-bg{position:absolute;inset:0;background:linear-gradient(135deg,#03071e 0%,#050a2a 40%,#062a25 70%,#063a35 100%);z-index:0}
.ar2-ai-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:1}
.ar2-aio-1{width:300px;height:300px;top:-80px;right:-60px;background:rgba(20,184,166,.2);animation:arOrbFloat 9s ease-in-out infinite}
.ar2-aio-2{width:200px;height:200px;bottom:-50px;left:-40px;background:rgba(37,99,235,.15);animation:arOrbFloat 7s ease-in-out infinite;animation-delay:-4s}
.ar2-ai-inner{position:relative;z-index:2}
.ar2-ai-hdr{text-align:center;margin-bottom:40px}
.ar2-ai-title{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:12px}
.ar2-ai-sub{font-size:.92rem;color:rgba(255,255,255,.6);line-height:1.65;max-width:560px;margin:0 auto}
.ar2-ai-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ar2-ai-card{padding:24px 20px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);transition:var(--ar-tr);position:relative;overflow:hidden}
.ar2-ai-card:hover{background:rgba(255,255,255,.09);border-color:rgba(20,184,166,.3);transform:translateY(-4px)}
.ar2-ai-featured{background:rgba(20,184,166,.12);border-color:rgba(20,184,166,.3);transform:scale(1.04)}
.ar2-ai-featured:hover{transform:scale(1.04) translateY(-4px)}
.ar2-ai-glow{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;background:rgba(20,184,166,.25);filter:blur(30px);pointer-events:none}
.ar2-ai-ico{width:44px;height:44px;border-radius:14px;background:rgba(20,184,166,.15);border:1px solid rgba(20,184,166,.25);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#14B8A6;margin-bottom:14px;position:relative;z-index:1}
.ar2-ai-card h5{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:8px;position:relative;z-index:1}
.ar2-ai-card p{font-size:.79rem;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:12px;position:relative;z-index:1}
.ar2-ai-tag{display:inline-block;padding:3px 10px;border-radius:8px;font-size:.68rem;font-weight:700;background:rgba(20,184,166,.15);color:#14B8A6;position:relative;z-index:1}

/* ── TIMELINE ── */
.ar2-timeline{position:relative;padding-left:24px;margin-bottom:56px}
.ar2-tl-line{position:absolute;left:0;top:12px;bottom:12px;width:2px;background:linear-gradient(to bottom,#14B8A6,#0EA5E9,#2563EB)}
.ar2-tl-item{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;margin-bottom:16px;padding-left:8px}
.ar2-tl-step{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#14B8A6,#0EA5E9);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;color:#fff;box-shadow:0 4px 12px rgba(20,184,166,.4);flex-shrink:0}
.ar2-tl-card{padding:20px 22px;border-radius:18px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 4px 16px rgba(0,0,0,.04);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ar-ease),transform .5s var(--ar-ease)}
.ar2-tl-card.ar2-tl-visible{opacity:1;transform:none}
.ar2-tl-ico{width:34px;height:34px;border-radius:10px;background:#f0fdf9;border:1px solid rgba(20,184,166,.15);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--ar-t1);margin-bottom:10px}
.ar2-tl-card h5{font-size:.88rem;font-weight:800;color:#0f172a;margin-bottom:4px}
.ar2-tl-card p{font-size:.79rem;color:#64748b;line-height:1.55;margin:0}

/* ── SUPPLIER NETWORK ── */
.ar2-network{border-radius:28px;background:linear-gradient(135deg,#eff6ff 0%,#f0fdf9 100%);border:1px solid rgba(20,184,166,.15);overflow:hidden;margin-bottom:56px}
.ar2-net-inner{display:grid;grid-template-columns:1fr 300px;gap:0}
.ar2-net-content{padding:48px 40px}
.ar2-net-content .ar2-sec-title{color:#0f172a}
.ar2-net-content p{font-size:.9rem;color:#64748b;line-height:1.65;margin-bottom:24px}
.ar2-net-stats{display:flex;gap:24px}
.ar2-net-stat{text-align:center}
.ar2-ns-v{display:block;font-size:1.4rem;font-weight:900;color:#0f172a}
.ar2-ns-l{display:block;font-size:.72rem;color:#94a3b8;font-weight:500;margin-top:2px}
.ar2-net-visual{background:linear-gradient(135deg,#052037,#063a35);display:flex;align-items:center;justify-content:center;padding:40px 20px;min-height:280px}
.ar2-node-wrap{position:relative;width:220px;height:220px}
.ar2-net-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#14B8A6,#0EA5E9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;font-size:1.2rem;color:#fff;box-shadow:0 0 24px rgba(20,184,166,.5)}
.ar2-net-center span{font-size:.45rem;font-weight:700;color:rgba(255,255,255,.8);margin-top:1px}
.ar2-net-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(20,184,166,.2)}
.ar2-nr-1{width:120px;height:120px;margin:-60px 0 0 -60px;animation:arSpin 20s linear infinite}
.ar2-nr-2{width:200px;height:200px;margin:-100px 0 0 -100px;border-color:rgba(14,165,233,.15);animation:arSpinRev 30s linear infinite}
.ar2-net-node{position:absolute;width:38px;height:38px;border-radius:50%;background:rgba(10,40,60,.9);border:1.5px solid rgba(20,184,166,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7rem;color:#14B8A6;transform:translateX(-50%) translateY(-50%);animation:arNodePulse 3s ease-in-out infinite}
.ar2-net-node span{font-size:.35rem;color:rgba(255,255,255,.5);margin-top:1px}
.ar2-nn-1{top:0;left:50%}
.ar2-nn-2{top:15%;left:90%}
.ar2-nn-3{top:80%;left:88%}
.ar2-nn-4{top:100%;left:50%}
.ar2-nn-5{top:80%;left:10%}
.ar2-nn-6{top:15%;left:8%}

/* ── INDUSTRIES ── */
.ar2-ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:56px}
.ar2-ind-card{position:relative;padding:24px 16px;border-radius:18px;background:#fff;border:1px solid #e2e8f0;text-align:center;cursor:default;overflow:hidden;transition:var(--ar-tr);box-shadow:0 2px 8px rgba(0,0,0,.03)}
.ar2-ind-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(20,184,166,.12),transparent 60%);opacity:0;transition:opacity .3s}
.ar2-ind-card:hover::before{opacity:1}
.ar2-ind-card:hover{border-color:rgba(20,184,166,.25);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.ar2-ind-ico{width:46px;height:46px;border-radius:14px;background:#f0fdf9;border:1px solid rgba(20,184,166,.15);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--ar-t1);margin:0 auto 10px}
.ar2-ind-card span{display:block;font-size:.8rem;font-weight:700;color:#334155}

/* ── TESTIMONIALS ── */
.ar2-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:56px}
.ar2-testi-card{padding:26px;border-radius:22px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.ar2-testi-feat{background:linear-gradient(135deg,#062a25,#052037);border-color:rgba(20,184,166,.25);position:relative;overflow:hidden}
.ar2-testi-glow{position:absolute;top:-40px;right:-20px;width:120px;height:120px;border-radius:50%;background:rgba(20,184,166,.15);filter:blur(30px)}
.ar2-testi-stars{display:flex;gap:3px;margin-bottom:12px}
.ar2-testi-stars i{color:#f59e0b;font-size:.9rem}
.ar2-testi-feat .ar2-testi-stars i{color:#fbbf24}
.ar2-testi-text{font-size:.83rem;color:#334155;line-height:1.65;margin-bottom:16px;font-style:italic}
.ar2-testi-feat .ar2-testi-text{color:rgba(255,255,255,.75)}
.ar2-testi-author{display:flex;align-items:center;gap:10px}
.ar2-testi-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#fff;flex-shrink:0}
.ar2-av-teal{background:linear-gradient(135deg,#14B8A6,#0EA5E9)}
.ar2-av-blue{background:linear-gradient(135deg,#2563EB,#0EA5E9)}
.ar2-av-emerald{background:linear-gradient(135deg,#10B981,#14B8A6)}
.ar2-testi-name{display:block;font-size:.82rem;font-weight:700;color:#0f172a}
.ar2-testi-feat .ar2-testi-name{color:#fff}
.ar2-testi-role{display:block;font-size:.72rem;color:#94a3b8}
.ar2-testi-feat .ar2-testi-role{color:rgba(255,255,255,.5)}

/* ── CTA ── */
.ar2-cta{position:relative;border-radius:28px;overflow:hidden;padding:56px 40px;text-align:center;margin-bottom:0}
.ar2-cta-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.ar2-co-1{width:300px;height:300px;top:-80px;left:-60px;background:rgba(20,184,166,.35)}
.ar2-co-2{width:200px;height:200px;bottom:-50px;right:-40px;background:rgba(37,99,235,.3)}
.ar2-cta-inner{position:relative;z-index:1;background:linear-gradient(135deg,#14B8A6,#0EA5E9,#2563EB);border-radius:24px;padding:48px 40px}
.ar2-cta-badge{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;margin:0 auto 18px;backdrop-filter:blur(8px)}
.ar2-cta h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:12px}
.ar2-cta p{font-size:.92rem;color:rgba(255,255,255,.75);line-height:1.65;max-width:500px;margin:0 auto 28px}
.ar2-cta-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.ar2-cta-btn-w{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:#fff;color:#0f766e;border-radius:14px;font-weight:800;font-size:.92rem;text-decoration:none;transition:var(--ar-tr)}
.ar2-cta-btn-w:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.2);color:#0f766e}
.ar2-cta-btn-g{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:14px;font-weight:700;font-size:.92rem;text-decoration:none;backdrop-filter:blur(8px);transition:var(--ar-tr)}
.ar2-cta-btn-g:hover{background:rgba(255,255,255,.2);color:#fff;transform:translateY(-2px)}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.ar2-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.ar2-sb-card{background:#fff;border-radius:22px;border:1px solid #e2e8f0;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.ar2-sb-hdr{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #f1f5f9}
.ar2-sb-ico{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#14B8A6,#0EA5E9);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;flex-shrink:0}
.ar2-sb-hdr h5{font-size:.9rem;font-weight:800;color:#0f172a;margin:0}

/* Sidebar nav */
.ar2-sb-nav{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ar2-sb-nav a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;font-size:.82rem;font-weight:600;color:#475569;text-decoration:none;transition:var(--ar-tr)}
.ar2-sb-nav a i{font-size:1rem;width:18px;color:#94a3b8}
.ar2-sb-nav a:hover{background:#f0fdf9;color:#0f766e}
.ar2-sb-nav a:hover i{color:#14B8A6}
.ar2-sb-nav a.active{background:linear-gradient(135deg,#f0fdf9,#ecfeff);color:#0f766e;border-left:3px solid #14B8A6;font-weight:800}
.ar2-sb-nav a.active i{color:#14B8A6}

/* Metrics */
.ar2-met-list{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.ar2-met-item{display:flex;flex-direction:column;gap:5px}
.ar2-met-row{display:flex;justify-content:space-between;align-items:center}
.ar2-met-lbl{font-size:.75rem;color:#64748b;font-weight:500}
.ar2-met-val{font-size:.8rem;font-weight:800;color:#0f172a}
.ar2-met-bar{height:5px;background:#f1f5f9;border-radius:5px;overflow:hidden}
.ar2-met-fill{height:100%;background:linear-gradient(90deg,#14B8A6,#0EA5E9);border-radius:5px;transition:width 1s var(--ar-ease)}
.ar2-mf-teal{background:linear-gradient(90deg,#14B8A6,#06B6D4)}
.ar2-mf-emerald{background:linear-gradient(90deg,#10B981,#14B8A6)}
.ar2-mf-violet{background:linear-gradient(90deg,#8B5CF6,#0EA5E9)}

/* Contact */
.ar2-sb-contact{padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.ar2-sb-contact a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;font-size:.81rem;color:#334155;font-weight:600;transition:var(--ar-tr)}
.ar2-sb-contact a:hover{background:#f0fdf9;color:#0f766e}
.ar2-sbc-ico{width:30px;height:30px;border-radius:9px;background:#f0fdf9;border:1px solid rgba(20,184,166,.15);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--ar-t1);flex-shrink:0}

/* Downloads */
.ar2-sb-dl{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.ar2-sb-dl a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;background:#f8fafc;border:1px solid #e2e8f0;transition:var(--ar-tr)}
.ar2-sb-dl a:hover{background:#f0fdf9;border-color:rgba(20,184,166,.2);transform:translateX(3px)}
.ar2-dl-ico{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#14B8A6,#0EA5E9);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;flex-shrink:0}
.ar2-dl-info{flex:1;min-width:0}
.ar2-dl-name{display:block;font-size:.78rem;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar2-dl-type{display:block;font-size:.67rem;color:#94a3b8;margin-top:1px}
.ar2-dl-arrow{font-size:.9rem;color:#cbd5e1;transition:var(--ar-tr)}
.ar2-sb-dl a:hover .ar2-dl-arrow{color:#14B8A6;transform:translateY(-2px)}

/* Sidebar CTA */
.ar2-sb-cta{position:relative;border-radius:22px;overflow:hidden;padding:28px 22px;text-align:center;background:linear-gradient(135deg,#0f766e,#14B8A6,#0EA5E9)}
.ar2-sb-cta-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.15);filter:blur(30px)}
.ar2-sb-cta-ico{position:relative;z-index:1;font-size:2.2rem;color:#fff;display:block;margin-bottom:12px}
.ar2-sb-cta h5{position:relative;z-index:1;font-size:.95rem;font-weight:800;color:#fff;margin-bottom:8px}
.ar2-sb-cta p{position:relative;z-index:1;font-size:.79rem;color:rgba(255,255,255,.8);line-height:1.55;margin-bottom:18px}
.ar2-sb-cta-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:10px 22px;background:#fff;color:#0f766e;border-radius:12px;font-weight:800;font-size:.85rem;text-decoration:none;transition:var(--ar-tr)}
.ar2-sb-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22);color:#065f46}

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */
@media(max-width:991.98px){
  .ar2-layout{grid-template-columns:1fr}
  .ar2-sidebar{position:static}
  .ar2-what{grid-template-columns:1fr}
  .ar2-what-visual{display:none}
  .ar2-why{grid-template-columns:1fr}
  .ar2-net-inner{grid-template-columns:1fr}
  .ar2-net-visual{display:none}
  .ar2-ai-cards{grid-template-columns:1fr 1fr}
  .ar2-ai-featured{transform:none}
  .ar2-ai-featured:hover{transform:translateY(-4px)}
}
@media(max-width:767.98px){
  .ar2-hero{min-height:auto;padding:110px 0 80px}
  .ar2-visual-wrap{display:none}
  .ar2-h1{font-size:2rem}
  .ar2-hero-btns{flex-direction:column}
  .ar2-hero-btns a{text-align:center;justify-content:center}
  .ar2-trust-row{gap:8px}
  .ar2-sol-grid{grid-template-columns:1fr}
  .ar2-testi-grid{grid-template-columns:1fr}
  .ar2-cta-inner{padding:36px 20px}
  .ar2-cta-btns{flex-direction:column;align-items:center}
  .ar2-ai-section{padding:36px 20px}
  .ar2-ai-cards{grid-template-columns:1fr}
  .ar2-net-stats{flex-direction:column;gap:10px}
}
@media(max-width:575.98px){
  .ar2-ind-grid{grid-template-columns:repeat(2,1fr)}
  .ar2-wstat-grid{grid-template-columns:1fr 1fr}
  .ar2-tl-card{padding:16px 18px}
  .ar2-timeline{padding-left:16px}
}

/* ══════════════════════════════════════════════════════
   UNIVERSAL SERVICE SIDEBAR NAVIGATION  (.usb-)
   Single source of truth for ALL service/technology pages.
   One component — zero duplication.
   ══════════════════════════════════════════════════════ */
.usb-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06);margin-bottom:24px}
.usb-head{display:flex;align-items:center;gap:10px;padding:16px 20px;background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 50%,#0ea5e9 100%);color:#fff}
.usb-head>i{font-size:20px;opacity:.85}
.usb-head h4{margin:0;font-size:14.5px;font-weight:700;letter-spacing:.3px}
.usb-list{list-style:none;margin:0;padding:6px 0 8px}
.usb-list li{margin:0}
.usb-group-label{padding:7px 20px 2px}
.usb-group-label span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#9ca3af}
.usb-sep-row{padding:5px 20px 3px}
.usb-sep-row span{display:block;height:1px;background:rgba(0,0,0,.08)}
.usb-link{display:flex;align-items:center;gap:11px;padding:9px 20px 9px 16px;text-decoration:none;color:#374151;transition:background .2s,border-left-color .2s,color .2s;border-left:3px solid transparent}
.usb-link:hover{background:#f0f7ff;border-left-color:#2563eb;color:#1d4ed8;text-decoration:none}
.usb-link:hover .usb-arrow{opacity:1;transform:translateX(3px)}
.usb-link.usb-active{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#0ea5e9 100%);color:#fff!important;border-left-color:transparent}
.usb-link.usb-active .usb-arrow{opacity:.7}
.usb-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border-radius:8px;font-size:16px;transition:background .2s,color .2s}
.usb-icon--blue{background:rgba(37,99,235,.1);color:#2563eb}
.usb-icon--violet{background:rgba(124,58,237,.1);color:#7c3aed}
.usb-icon--cyan{background:rgba(6,182,212,.1);color:#0891b2}
.usb-icon--green{background:rgba(22,163,74,.1);color:#16a34a}
.usb-icon--orange{background:rgba(234,88,12,.1);color:#ea580c}
.usb-icon--rose{background:rgba(225,29,72,.1);color:#e11d48}
.usb-link.usb-active .usb-icon{background:rgba(255,255,255,.2);color:#fff}
.usb-label{flex:1;font-size:13.5px;font-weight:500;line-height:1.3}
.usb-arrow{font-size:18px;opacity:.35;transition:opacity .2s,transform .2s;flex-shrink:0}
/* dark mode */
[data-theme="dark"] .usb-card{background:#1a2234;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .usb-link{color:#cbd5e1}
[data-theme="dark"] .usb-link:hover{background:rgba(37,99,235,.12);border-left-color:#3b82f6;color:#93c5fd}
[data-theme="dark"] .usb-link.usb-active{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#0ea5e9 100%);color:#fff!important}
[data-theme="dark"] .usb-icon--blue{background:rgba(37,99,235,.2)}
[data-theme="dark"] .usb-icon--violet{background:rgba(124,58,237,.2)}
[data-theme="dark"] .usb-icon--cyan{background:rgba(6,182,212,.2)}
[data-theme="dark"] .usb-icon--green{background:rgba(22,163,74,.2)}
[data-theme="dark"] .usb-icon--orange{background:rgba(234,88,12,.2)}
[data-theme="dark"] .usb-icon--rose{background:rgba(225,29,72,.2)}
[data-theme="dark"] .usb-group-label span{color:#64748b}
[data-theme="dark"] .usb-sep-row span{background:rgba(255,255,255,.08)}
@media(max-width:991.98px){.usb-card{margin-top:8px}}