/* Product Page Specific Styles */

/* Hero Section */
.product-hero {
    background: linear-gradient(135deg, #010535 0%, #1a1f4e 50%, #010535 100%);
    padding: 120px 0 100px;
    position: relative;
    overflow: hidden;
}

.product-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 70%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(77, 81, 171, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.product-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(85, 206, 227, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.product-hero .container {
    position: relative;
    z-index: 1;
}

.product-hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.product-hero-text-badge {
    display: inline-block;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    color: #fff;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.product-hero h1 {
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 24px;
}

.product-hero h1 span {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: 40px;
}

.product-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-outline-light {
    display: inline-block;
    padding: 17px 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* Hero Trust Line */
.product-hero-trust-line {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    margin-bottom: 40px;
    letter-spacing: 0.3px;
}

/* ================================================
   PRTG Trust Strip Section
   ================================================ */
.prtg-trust-strip {
    background: linear-gradient(135deg, #0a0f3c 0%, #010535 100%);
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-strip-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.trust-stat {
    text-align: center;
    padding: 20px 50px;
    position: relative;
}

.trust-stat-number {
    font-size: 42px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 8px;
}

.trust-stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.trust-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

@media (max-width: 991px) {
    .trust-strip-wrapper {
        gap: 10px;
    }

    .trust-stat {
        padding: 15px 30px;
    }

    .trust-stat-number {
        font-size: 32px;
    }

    .trust-divider {
        display: none;
    }
}

@media (max-width: 575px) {
    .prtg-trust-strip {
        padding: 30px 0;
    }

    .trust-strip-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .trust-stat {
        padding: 15px;
    }

    .trust-stat-number {
        font-size: 28px;
    }

    .trust-stat-label {
        font-size: 12px;
    }
}

/* ================================================
   PRTG What You Can Monitor Section
   ================================================ */
.prtg-monitor-section {
    padding: 100px 0;
    background: #f8fafc;
    position: relative;
}

.prtg-monitor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.prtg-monitor-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.prtg-monitor-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.prtg-monitor-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.prtg-monitor-item:hover::before {
    transform: scaleX(1);
}

.monitor-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.1), rgba(85, 206, 227, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.monitor-icon i {
    font-size: 28px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prtg-monitor-item:hover .monitor-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}

.prtg-monitor-item:hover .monitor-icon i {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prtg-monitor-item h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.prtg-monitor-item p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

/* Protocol Badges */
.prtg-protocols {
    margin-top: 60px;
    text-align: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.protocol-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 20px;
}

.protocol-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
}

.protocol-badges span {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.08), rgba(85, 206, 227, 0.08));
    border: 1px solid rgba(77, 81, 171, 0.15);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-color);
    transition: all 0.3s ease;
}

.protocol-badges span:hover {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    color: #fff;
    border-color: transparent;
}

@media (max-width: 1199px) {
    .prtg-monitor-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .prtg-monitor-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .prtg-monitor-item {
        padding: 24px 20px;
    }
}

@media (max-width: 575px) {
    .prtg-monitor-section {
        padding: 60px 0;
    }

    .prtg-monitor-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .prtg-protocols {
        padding: 20px;
        margin-top: 40px;
    }

    .protocol-label {
        display: block;
        margin-bottom: 15px;
    }
}

/* ================================================
   PRTG How It Collects Data (Methods) Section
   ================================================ */
.prtg-methods-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #010535 0%, #0a0f3c 100%);
    position: relative;
}

.prtg-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.prtg-method-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
}

.prtg-method-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.method-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.method-icon i {
    font-size: 24px;
    color: #fff;
}

.method-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.method-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 15px;
}

.method-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.method-tags span {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Agentless Callout */
.prtg-agentless-callout {
    margin-top: 50px;
    padding: 30px 40px;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.15), rgba(85, 206, 227, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 25px;
}

.callout-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.callout-icon i {
    font-size: 28px;
    color: #fff;
}

.callout-content h4 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.callout-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1199px) {
    .prtg-methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .prtg-methods-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .prtg-method-card {
        padding: 24px;
    }

    .prtg-agentless-callout {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
}

@media (max-width: 575px) {
    .prtg-methods-section {
        padding: 60px 0;
    }

    .prtg-methods-grid {
        margin-top: 40px;
    }

    .prtg-method-card {
        flex-direction: column;
        text-align: center;
    }

    .method-icon {
        margin: 0 auto;
    }

    .method-tags {
        justify-content: center;
    }
}

/* ================================================
   PRTG Core Capabilities Section - Tabbed Layout
   ================================================ */
.prtg-capabilities-section {
    padding: 100px 0;
    background: #f8fafc;
    position: relative;
}

.prtg-capabilities-split {
    display: flex;
    gap: 0;
    margin-top: 60px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.08);
}

/* Left Navigation */
.capabilities-nav {
    width: 320px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #010535 0%, #0a0f3c 100%);
    padding: 20px 0;
}

.cap-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 24px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.cap-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.cap-nav-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-left-color: var(--accent-secondary-color);
}

.cap-nav-item i {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.cap-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right Content */
.capabilities-content {
    flex: 1;
    padding: 40px;
    min-height: 500px;
}

.cap-panel {
    display: none;
}

.cap-panel.active {
    display: block;
    animation: fadeInPanel 0.3s ease;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cap-panel-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.cap-panel-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cap-panel-icon i {
    font-size: 24px;
    color: #fff;
}

.cap-panel-header h4 {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.cap-panel>p {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 28px;
}

.cap-panel-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cap-panel-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 15px;
    color: #374151;
    line-height: 1.5;
}

.cap-panel-features li:last-child {
    border-bottom: none;
}

.cap-panel-features li i {
    color: var(--accent-color);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.cap-panel-features li strong {
    color: var(--primary-color);
}

/* Nav Number Badges */
.nav-number {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-secondary-color);
    opacity: 0.7;
    width: 22px;
    flex-shrink: 0;
}

.cap-nav-item.active .nav-number {
    opacity: 1;
}

/* Stat Highlight Box */
.cap-stat-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 28px;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.08), rgba(85, 206, 227, 0.08));
    border: 1px solid rgba(77, 81, 171, 0.15);
    border-radius: 12px;
    margin-bottom: 20px;
}

.cap-stat-number {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.cap-stat-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Pro Tip Callout */
.cap-pro-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 146, 60, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
}

.cap-pro-tip i {
    font-size: 18px;
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 2px;
}

.cap-pro-tip span {
    font-size: 14px;
    color: #78350f;
    line-height: 1.5;
}

.cap-pro-tip strong {
    color: #92400e;
}

/* Responsive */
@media (max-width: 991px) {
    .prtg-capabilities-split {
        flex-direction: column;
    }

    .capabilities-nav {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 15px;
        gap: 8px;
    }

    .cap-nav-item {
        width: auto;
        padding: 10px 16px;
        border-radius: 50px;
        border-left: none;
        font-size: 13px;
    }

    .cap-nav-item.active {
        background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
        border-left: none;
    }

    .cap-nav-item i {
        font-size: 14px;
        width: auto;
    }

    .capabilities-content {
        padding: 30px;
        min-height: auto;
    }
}

@media (max-width: 575px) {
    .prtg-capabilities-section {
        padding: 60px 0;
    }

    .prtg-capabilities-split {
        margin-top: 40px;
    }

    .capabilities-nav {
        padding: 12px;
        gap: 6px;
    }

    .cap-nav-item {
        padding: 8px 12px;
        font-size: 12px;
    }

    .cap-nav-item span {
        display: none;
    }

    .cap-nav-item i {
        font-size: 16px;
    }

    .capabilities-content {
        padding: 24px;
    }

    .cap-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .cap-panel-header h4 {
        font-size: 20px;
    }
}

/* ================================================
   PRTG Architecture & Scaling Section
   ================================================ */
.prtg-architecture-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #010535 0%, #0a0f3c 100%);
    position: relative;
}

.prtg-architecture-section .section-title h3,
.prtg-architecture-section .section-title h2,
.prtg-architecture-section .section-title p {
    color: #fff;
}

.prtg-architecture-section .section-title h2 span {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prtg-architecture-section .section-title p {
    color: rgba(255, 255, 255, 0.7);
}

/* Architecture Layout */
.architecture-layout {
    display: flex;
    gap: 40px;
    margin-top: 60px;
}

/* Architecture Diagram */
.architecture-diagram {
    flex: 2;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.arch-central {
    text-align: center;
}

.arch-core-server {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 50px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 16px;
}

.arch-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.arch-icon i {
    font-size: 28px;
    color: #fff;
}

.arch-core-server h5 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px 0;
}

.arch-core-server p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.arch-connections {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

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

.probe-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.probe-icon i {
    font-size: 20px;
    color: var(--accent-secondary-color);
}

.arch-probe span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.arch-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    opacity: 0.5;
}

.arch-endpoints {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.endpoint-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.endpoint-group i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
}

.endpoint-group span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Scaling Options */
.scaling-options {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
}

.scaling-options h4 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scale-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.scale-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.2), rgba(85, 206, 227, 0.2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scale-icon i {
    font-size: 18px;
    color: var(--accent-secondary-color);
}

.scale-content h5 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.scale-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

/* Deployment Models */
.deployment-models {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.deployment-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.deployment-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
}

.deploy-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.deploy-icon i {
    font-size: 26px;
    color: #fff;
}

.deployment-card h5 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
}

.deployment-card>p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px 0;
}

.deployment-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.deployment-card ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 0;
}

.deployment-card ul li i {
    font-size: 12px;
    color: var(--accent-secondary-color);
}

/* Architecture Responsive */
@media (max-width: 991px) {
    .architecture-layout {
        flex-direction: column;
    }

    .deployment-models {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .prtg-architecture-section {
        padding: 60px 0;
    }

    .architecture-diagram {
        padding: 24px;
    }

    .arch-core-server {
        padding: 24px 30px;
    }

    .arch-line {
        display: none;
    }

    .arch-connections {
        gap: 12px;
    }
}

/* ================================================
   PRTG Licensing & Sizing Section
   ================================================ */
.prtg-licensing-section {
    padding: 100px 0;
    background: #f8fafc;
    position: relative;
}

/* Free Tier Highlight */
.licensing-free-tier {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.1));
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    margin-top: 50px;
}

.free-tier-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #10b981, #34d399);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.free-tier-icon i {
    font-size: 26px;
    color: #fff;
}

.free-tier-content {
    flex: 1;
}

.free-tier-content h4 {
    font-size: 20px;
    font-weight: 600;
    color: #065f46;
    margin: 0 0 6px 0;
}

.free-tier-content p {
    font-size: 14px;
    color: #047857;
    margin: 0;
    line-height: 1.5;
}

.free-tier-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, #10b981, #34d399);
    border-radius: 10px;
    flex-shrink: 0;
}

.free-tier-badge span {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.free-tier-badge small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
}

/* Licensing Layout */
.licensing-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.licensing-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.licensing-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.licensing-card-header .card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.1), rgba(85, 206, 227, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.licensing-card-header .card-icon i {
    font-size: 20px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.licensing-card-header h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.licensing-card>p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Sensor Examples */
.sensor-examples {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sensor-example {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 10px;
}

.sensor-example i {
    font-size: 18px;
    color: var(--accent-color);
    width: 24px;
    text-align: center;
}

.sensor-example span {
    flex: 1;
    font-size: 13px;
    color: #4b5563;
}

.sensor-example strong {
    font-size: 13px;
    color: var(--accent-color);
}

/* Sizing Table */
.sizing-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.sizing-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sizing-row:last-child {
    border-bottom: none;
}

.sizing-row.header {
    background: #f3f4f6;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.sizing-row span {
    font-size: 13px;
    color: #4b5563;
}

.sizing-row strong {
    color: var(--primary-color);
}

.sizing-row.highlight {
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.05), rgba(85, 206, 227, 0.05));
}

.sizing-row.highlight strong {
    color: var(--accent-color);
}

.sizing-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    background: #fffbeb;
    border-radius: 8px;
}

.sizing-note i {
    color: #f59e0b;
    font-size: 14px;
}

.sizing-note span {
    font-size: 12px;
    color: #92400e;
}

/* Tier List */
.tier-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tier-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.tier-item:hover {
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.05), rgba(85, 206, 227, 0.05));
}

.tier-sensors {
    width: 56px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.tier-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tier-info strong {
    font-size: 14px;
    color: var(--primary-color);
}

.tier-info span {
    font-size: 12px;
    color: #9ca3af;
}

/* Enterprise Callout */
.enterprise-callout {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 36px;
    background: linear-gradient(135deg, #010535, #0a0f3c);
    border-radius: 16px;
    margin-top: 40px;
}

.enterprise-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.enterprise-icon i {
    font-size: 28px;
    color: #fff;
}

.enterprise-content {
    flex: 1;
}

.enterprise-content h4 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
}

.enterprise-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.6;
}

.enterprise-content strong {
    color: var(--accent-secondary-color);
}

.enterprise-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.enterprise-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(77, 81, 171, 0.3);
}

.enterprise-cta i {
    font-size: 12px;
}

/* Licensing Responsive */
@media (max-width: 991px) {
    .licensing-layout {
        grid-template-columns: 1fr;
    }

    .licensing-free-tier {
        flex-direction: column;
        text-align: center;
    }

    .enterprise-callout {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .prtg-licensing-section {
        padding: 60px 0;
    }

    .licensing-free-tier {
        padding: 20px;
    }

    .licensing-card {
        padding: 24px 20px;
    }

    .enterprise-callout {
        padding: 24px 20px;
    }
}

/* ================================================
   PRTG Installation Timeline Section
   ================================================ */
.prtg-timeline-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #010535 0%, #0a0f3c 100%);
    position: relative;
}

.prtg-timeline-section .section-title h3,
.prtg-timeline-section .section-title h2,
.prtg-timeline-section .section-title p {
    color: #fff;
}

.prtg-timeline-section .section-title h2 span {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prtg-timeline-section .section-title p {
    color: rgba(255, 255, 255, 0.7);
}

/* Timeline Container */
.prtg-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 60px;
    position: relative;
}

/* Timeline Step */
.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 180px;
    position: relative;
}

.step-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.step-icon i {
    font-size: 28px;
    color: #fff;
}

.step-time {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-secondary-color);
    margin-bottom: 14px;
}

.step-content h5 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
}

.step-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

/* Timeline Connector */
.timeline-connector {
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    opacity: 0.3;
    margin-top: 35px;
    max-width: 60px;
    position: relative;
}

.timeline-connector::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--accent-secondary-color);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0.5;
}

/* Total Time Callout */
.timeline-total {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    margin: 50px auto 0;
    display: flex;
    justify-content: center;
}

.total-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.total-icon i {
    font-size: 18px;
    color: #fff;
}

.total-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.total-content span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.total-content strong {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Timeline Responsive */
@media (max-width: 991px) {
    .prtg-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .timeline-step {
        flex-direction: row;
        text-align: left;
        max-width: 100%;
        gap: 20px;
        padding-left: 40px;
    }

    .step-icon {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }

    .step-icon i {
        font-size: 22px;
    }

    .step-content {
        flex: 1;
    }

    .step-time {
        margin-bottom: 0;
        position: absolute;
        left: 0;
        top: 8px;
        padding: 4px 8px;
        font-size: 10px;
        display: none;
    }

    .timeline-connector {
        width: 3px;
        height: 30px;
        margin: 0 0 0 67px;
    }

    .timeline-connector::after {
        display: none;
    }
}

@media (max-width: 575px) {
    .prtg-timeline-section {
        padding: 60px 0;
    }

    .timeline-step {
        padding-left: 0;
    }

    .timeline-connector {
        margin-left: 27px;
    }

    .timeline-total {
        padding: 14px 24px;
    }

    .total-content strong {
        font-size: 18px;
    }
}

/* ================================================
   Vembu Workloads Section - Two Column Split
   ================================================ */
.vembu-workloads {
    padding: 120px 0;
    background: #f8fafc;
    position: relative;
}

/* Split Layout Container */
.workloads-split {
    display: flex;
    gap: 0;
    margin-top: 60px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.08);
}

/* Left Navigation */
.workloads-nav {
    width: 320px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #010535 0%, #0a0f3c 100%);
    padding: 20px 0;
}

.workload-nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 28px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.workload-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.workload-nav-item.active {
    background: rgba(64, 123, 255, 0.15);
    color: #fff;
    border-left-color: #407BFF;
}

.workload-nav-item i {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.workload-nav-item span {
    flex: 1;
}

/* Right Content Area */
.workloads-content {
    flex: 1;
    padding: 50px;
    position: relative;
    min-height: 500px;
}

/* Panel (Initially hidden) */
.workload-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}

.workload-panel.active {
    display: block;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel Header */
.panel-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.panel-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-icon i {
    font-size: 30px;
    color: #fff;
}

.panel-title h4 {
    font-size: 26px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 10px;
}

.panel-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.panel-platforms span {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #407BFF;
    background: rgba(64, 123, 255, 0.08);
    border: 1px solid rgba(64, 123, 255, 0.15);
    padding: 5px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.workload-panel>p {
    font-size: 16px;
    color: #546b81;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Feature Items */
.panel-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: #f0f4ff;
    transform: translateX(4px);
}

.feature-item>i {
    font-size: 18px;
    color: #10b981;
    margin-top: 2px;
}

.feature-item div strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1f36;
    margin-bottom: 4px;
}

.feature-item div span {
    font-size: 13px;
    color: #697386;
    line-height: 1.5;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .workloads-nav {
        width: 280px;
    }

    .workloads-content {
        padding: 40px;
    }

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

@media (max-width: 992px) {
    .vembu-workloads {
        padding: 80px 0;
    }

    .workloads-split {
        flex-direction: column;
        margin-top: 40px;
    }

    .workloads-nav {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        gap: 8px;
    }

    .workload-nav-item {
        flex: 0 0 auto;
        padding: 12px 16px;
        border-radius: 8px;
        border-left: none;
        font-size: 13px;
        gap: 10px;
    }

    .workload-nav-item.active {
        border-left: none;
        background: #407BFF;
    }

    .workload-nav-item i {
        font-size: 16px;
    }

    .workloads-content {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .workloads-content {
        padding: 30px 24px;
    }

    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .panel-icon {
        width: 56px;
        height: 56px;
    }

    .panel-icon i {
        font-size: 24px;
    }

    .panel-title h4 {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .workloads-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .workload-nav-item {
        white-space: nowrap;
    }

    .feature-item {
        padding: 14px;
    }
}

/* ================================================
   Vembu Capabilities Section - Vertical List
   ================================================ */
.vembu-capabilities {
    padding: 120px 0;
    background: linear-gradient(180deg, #010535 0%, #0a0f3c 100%);
    position: relative;
}

.vembu-capabilities .section-title h3 {
    color: rgba(255, 255, 255, 0.7);
}

.vembu-capabilities .section-title h2 {
    color: #fff;
}

.vembu-capabilities .section-title h2 span {
    color: #407BFF;
}

.vembu-capabilities .section-title p {
    color: rgba(255, 255, 255, 0.6);
}

.capabilities-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 60px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.capability-row {
    display: flex;
    align-items: center;
    gap: 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 28px 36px;
    transition: all 0.4s ease;
}

.capability-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(64, 123, 255, 0.3);
    transform: translateX(8px);
}

.capability-row .capability-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.capability-row .capability-icon i {
    font-size: 28px;
    color: #fff;
}

.capability-content {
    flex: 1;
}

.capability-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.capability-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 12px;
}

.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.capability-tags span {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(64, 123, 255, 0.15);
    border: 1px solid rgba(64, 123, 255, 0.25);
    padding: 5px 12px;
    border-radius: 20px;
}

.capability-row .capability-stat {
    text-align: center;
    min-width: 100px;
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.capability-row .capability-stat .stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #407BFF;
    margin-bottom: 4px;
}

.capability-row .capability-stat .stat-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .vembu-capabilities {
        padding: 80px 0;
    }

    .capabilities-list {
        margin-top: 40px;
        gap: 16px;
    }

    .capability-row {
        padding: 24px 28px;
        gap: 24px;
    }

    .capability-row .capability-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .capability-row .capability-icon i {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .capability-row {
        flex-wrap: wrap;
        padding: 24px;
    }

    .capability-row .capability-stat {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 0;
        padding-top: 16px;
        margin-top: 8px;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .capability-row .capability-stat .stat-value {
        font-size: 24px;
        margin-bottom: 0;
    }
}

@media (max-width: 576px) {
    .capability-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .capability-content h4 {
        font-size: 18px;
    }

    .capability-tags span {
        font-size: 10px;
        padding: 4px 10px;
    }
}

/* ================================================
   Vembu Compatibility Section - Tabbed Interface
   ================================================ */
.vembu-compatibility {
    padding: 120px 0;
    background: #f8fafc;
    position: relative;
}

.compat-tabs-wrapper {
    margin-top: 60px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Tab Navigation */
.compat-tabs {
    display: flex;
    background: linear-gradient(180deg, #010535 0%, #0a0f3c 100%);
    padding: 0;
}

.compat-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.compat-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #407BFF, #6c5ce7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.compat-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.compat-tab.active {
    color: #fff;
    background: rgba(64, 123, 255, 0.15);
}

.compat-tab.active::after {
    opacity: 1;
}

.compat-tab i {
    font-size: 28px;
    margin-bottom: 10px;
}

.compat-tab span {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.compat-tab small {
    font-size: 12px;
    opacity: 0.7;
}

/* Tab Panels */
.compat-panels {
    padding: 50px;
}

.compat-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}

.compat-panel.active {
    display: block;
}

.compat-panel-header {
    text-align: center;
    margin-bottom: 40px;
}

.compat-panel-header h4 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 8px;
}

.compat-panel-header p {
    font-size: 15px;
    color: #697386;
}

/* Grid Items */
.compat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.compat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-align: center;
}

.compat-item:hover {
    background: #fff;
    border-color: rgba(64, 123, 255, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.compat-item i {
    font-size: 32px;
    color: #407BFF;
    margin-bottom: 12px;
}

.compat-item span {
    font-size: 13px;
    font-weight: 600;
    color: #1a1f36;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .compat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .vembu-compatibility {
        padding: 80px 0;
    }

    .compat-tabs-wrapper {
        margin-top: 40px;
    }

    .compat-tab {
        padding: 20px 16px;
    }

    .compat-tab i {
        font-size: 24px;
    }

    .compat-tab span {
        font-size: 14px;
    }

    .compat-panels {
        padding: 40px 30px;
    }

    .compat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .compat-tabs {
        flex-wrap: wrap;
    }

    .compat-tab {
        flex: 1 1 33.33%;
        padding: 16px 12px;
    }

    .compat-tab small {
        display: none;
    }

    .compat-panels {
        padding: 30px 24px;
    }

    .compat-panel-header h4 {
        font-size: 20px;
    }

    .compat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .compat-item {
        padding: 18px 12px;
    }

    .compat-item i {
        font-size: 26px;
    }

    .compat-item span {
        font-size: 11px;
    }
}

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

    .compat-panels {
        padding: 24px 20px;
    }
}

/* ================================================
   Key Feature Deep-Dive Section - Premium Design
   ================================================ */
.product-feature-deepdive {
    padding: 120px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.product-feature-deepdive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77, 81, 171, 0.2), transparent);
}

.deepdive-wrapper {
    margin-top: 60px;
}

/* Feature Tabs Navigation */
.deepdive-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 50px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.deepdive-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.deepdive-tab i {
    font-size: 18px;
    color: #697386;
    transition: all 0.3s ease;
}

.deepdive-tab span {
    font-size: 14px;
    font-weight: 600;
    color: #3c4257;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.deepdive-tab:hover {
    background: rgba(64, 123, 255, 0.06);
}

.deepdive-tab:hover i {
    color: #407BFF;
}

.deepdive-tab.active {
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    box-shadow: 0 8px 24px rgba(64, 123, 255, 0.3);
}

.deepdive-tab.active i,
.deepdive-tab.active span {
    color: #fff;
}

/* Feature Content Panels */
.deepdive-content {
    position: relative;
    min-height: 420px;
}

.deepdive-panel {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.deepdive-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.deepdive-panel-inner {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 60px;
    align-items: center;
    background: #ffffff;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Visual Side */
.deepdive-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.deepdive-icon-box {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, rgba(64, 123, 255, 0.08) 0%, rgba(108, 92, 231, 0.08) 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s ease;
}

.deepdive-icon-box::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 34px;
    background: linear-gradient(135deg, #407BFF, #6c5ce7);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.deepdive-panel:hover .deepdive-icon-box::before {
    opacity: 0.15;
}

.deepdive-icon-box i {
    font-size: 56px;
    background: linear-gradient(135deg, #407BFF, #6c5ce7);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(64, 123, 255, 0.2));
}

.deepdive-stats {
    display: flex;
    gap: 24px;
    width: 100%;
}

.deepdive-stat {
    flex: 1;
    text-align: center;
    padding: 20px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.deepdive-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #407BFF, #6c5ce7);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    margin-bottom: 4px;
}

.stat-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #697386;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info Side */
.deepdive-info h3 {
    font-size: 32px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.deepdive-desc {
    font-size: 17px;
    color: #546b81;
    line-height: 1.7;
    margin-bottom: 32px;
}

.deepdive-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(64, 123, 255, 0.04) 0%, rgba(108, 92, 231, 0.04) 100%);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.highlight-item:hover {
    background: linear-gradient(135deg, rgba(64, 123, 255, 0.08) 0%, rgba(108, 92, 231, 0.08) 100%);
    border-color: rgba(64, 123, 255, 0.12);
    transform: translateX(4px);
}

.highlight-item i {
    font-size: 16px;
    color: #10b981;
    margin-top: 2px;
    flex-shrink: 0;
}

.highlight-item span {
    font-size: 14px;
    font-weight: 500;
    color: #3c4257;
    line-height: 1.5;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .deepdive-panel-inner {
        grid-template-columns: 320px 1fr;
        gap: 40px;
        padding: 40px;
    }

    .deepdive-icon-box {
        width: 120px;
        height: 120px;
    }

    .deepdive-icon-box i {
        font-size: 48px;
    }
}

@media (max-width: 992px) {
    .product-feature-deepdive {
        padding: 80px 0;
    }

    .deepdive-tabs {
        gap: 8px;
        padding: 6px;
    }

    .deepdive-tab {
        padding: 12px 16px;
    }

    .deepdive-tab span {
        display: none;
    }

    .deepdive-tab i {
        font-size: 20px;
    }

    .deepdive-panel-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px;
    }

    .deepdive-visual {
        order: -1;
    }

    .deepdive-stats {
        max-width: 320px;
    }

    .deepdive-highlights {
        grid-template-columns: 1fr;
    }

    .deepdive-info h3 {
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .deepdive-wrapper {
        margin-top: 40px;
    }

    .deepdive-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .deepdive-tabs::-webkit-scrollbar {
        display: none;
    }

    .deepdive-icon-box {
        width: 100px;
        height: 100px;
    }

    .deepdive-icon-box i {
        font-size: 40px;
    }

    .deepdive-stats {
        flex-direction: column;
        gap: 12px;
    }

    .stat-value {
        font-size: 24px;
    }

    .deepdive-panel-inner {
        padding: 24px;
    }

    .deepdive-info h3 {
        font-size: 22px;
    }

    .deepdive-desc {
        font-size: 15px;
    }

    .highlight-item {
        padding: 12px 14px;
    }

    .highlight-item span {
        font-size: 13px;
    }
}

/* ================================================
   Platform Tour Section - Gallery Grid Design
   ================================================ */
.product-platform-tour {
    padding: 120px 0;
    background: var(--secondary-color);
    position: relative;
}

/* Gallery Grid */
.platform-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.platform-gallery-item {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.platform-gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.platform-gallery-item a {
    display: block;
    text-decoration: none;
}

/* Gallery Image */
.gallery-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.platform-gallery-item:hover .gallery-image img {
    transform: scale(1.08);
}

/* Gallery Overlay */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(64, 123, 255, 0.9) 0%, rgba(108, 92, 231, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-overlay i {
    font-size: 36px;
    color: #fff;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.platform-gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.platform-gallery-item:hover .gallery-overlay i {
    transform: scale(1);
}

/* Gallery Info */
.gallery-info {
    padding: 24px;
}

.gallery-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.platform-gallery-item:hover .gallery-info h4 {
    color: #407BFF;
}

.gallery-info p {
    font-size: 14px;
    color: #546b81;
    line-height: 1.6;
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .product-platform-tour {
        padding: 80px 0;
    }

    .platform-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .gallery-info {
        padding: 20px;
    }

    .gallery-info h4 {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .platform-gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .gallery-info {
        padding: 18px;
    }

    .gallery-info h4 {
        font-size: 16px;
    }

    .gallery-info p {
        font-size: 13px;
    }
}

/* ================================================
   Core Platform Capabilities (Technical) Section
   ================================================ */
.product-technical {
    padding: 120px 0;
    background: #ffffff;
    position: relative;
}

.technical-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.technical-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 32px 28px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.technical-card:hover {
    background: #ffffff;
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: rgba(64, 123, 255, 0.1);
}

.technical-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.technical-card:hover .technical-icon {
    transform: scale(1.1);
}

.technical-icon i {
    font-size: 24px;
    color: #fff;
}

.technical-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 20px;
}

.technical-specs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.technical-specs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.technical-specs li:last-child {
    border-bottom: none;
}

.spec-label {
    font-size: 13px;
    color: #697386;
    font-weight: 500;
}

.spec-value {
    font-size: 13px;
    color: #1a1f36;
    font-weight: 600;
    text-align: right;
}

/* Technical Highlights Bar */
.technical-highlights {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 60px;
    background: linear-gradient(135deg, #010535 0%, #1a1f4e 100%);
    border-radius: 20px;
    padding: 40px 60px;
}

.highlight-stat {
    flex: 1;
    text-align: center;
    padding: 0 30px;
}

.highlight-number {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #407BFF;
    margin-bottom: 6px;
}

.highlight-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.highlight-divider {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
}

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

    .technical-highlights {
        flex-wrap: wrap;
        gap: 30px;
        padding: 30px 40px;
    }

    .highlight-divider {
        display: none;
    }

    .highlight-stat {
        flex: 0 0 calc(50% - 15px);
    }
}

@media (max-width: 992px) {
    .product-technical {
        padding: 80px 0;
    }

    .technical-grid {
        margin-top: 40px;
        gap: 20px;
    }

    .technical-card {
        padding: 28px 24px;
    }

    .technical-card h4 {
        font-size: 16px;
    }
}

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

    .technical-highlights {
        padding: 24px 20px;
    }

    .highlight-stat {
        flex: 0 0 100%;
        padding: 12px 0;
    }

    .highlight-number {
        font-size: 28px;
    }

    .highlight-label {
        font-size: 13px;
    }
}

/* ================================================
   AppTrana Awards Timeline Section
   ================================================ */
.apptrana-awards-timeline {
    padding: 100px 0;
    background: #f0f7ff;
    position: relative;
}

/* Row 1: Main Recognition */
.awards-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-top: 50px;
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}

.award-block {
    flex: 1;
    text-align: center;
}

/* Rating Block */
.rating-block h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 8px;
}

.rating-block .highlight-text {
    font-size: 16px;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 10px;
}

.stars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.stars-row span {
    font-size: 14px;
    color: #697386;
}

.stars {
    display: flex;
    gap: 3px;
}

.stars i {
    font-size: 14px;
    color: #f59e0b;
}

/* Brand Block */
.brand-block {
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    padding: 0 40px;
}

.brand-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-name {
    font-size: 28px;
    font-weight: 700;
    color: #1a1f36;
    letter-spacing: -0.5px;
}

.brand-sub {
    font-size: 22px;
    font-weight: 300;
    color: #407BFF;
    letter-spacing: 0.5px;
}

/* G2 Badges Block */
.badges-block {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.g2-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, #fff9f0 0%, #fff 100%);
    border: 2px solid #f97316;
    border-radius: 8px;
    min-width: 90px;
}

.badge-year,
.badge-season {
    font-size: 9px;
    font-weight: 700;
    color: #f97316;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1f36;
    margin: 4px 0 2px;
}

.badge-sub {
    font-size: 10px;
    font-weight: 600;
    color: #697386;
    text-transform: uppercase;
}

/* Row 2: Reports */
.awards-row-reports {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 30px;
}

.report-block {
    flex: 1;
    text-align: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.report-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.report-source {
    font-size: 12px;
    font-weight: 700;
    color: #697386;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.report-block h5 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 6px;
}

.report-block p {
    font-size: 13px;
    color: #697386;
    margin: 0;
    line-height: 1.5;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .awards-row-main {
        flex-wrap: wrap;
        gap: 30px;
    }

    .brand-block {
        border: none;
        padding: 20px 0;
        border-top: 1px solid #e5e7eb;
        border-bottom: 1px solid #e5e7eb;
        width: 100%;
        order: -1;
    }

    .rating-block,
    .badges-block {
        flex: 0 0 calc(50% - 15px);
    }
}

@media (max-width: 992px) {
    .apptrana-awards-timeline {
        padding: 80px 0;
    }

    .awards-row-main {
        padding: 30px;
    }

    .awards-row-reports {
        flex-wrap: wrap;
    }

    .report-block {
        flex: 0 0 calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .badges-block {
        flex-wrap: wrap;
        gap: 12px;
    }

    .g2-badge {
        min-width: 80px;
    }
}

@media (max-width: 576px) {
    .awards-row-main {
        padding: 24px 20px;
    }

    .rating-block,
    .badges-block {
        flex: 0 0 100%;
    }

    .report-block {
        flex: 0 0 100%;
    }

    .brand-name {
        font-size: 24px;
    }

    .brand-sub {
        font-size: 18px;
    }
}

/* ================================================
   Security Challenges vs AppTrana Advantage Section
   ================================================ */
.product-challenges {
    padding: 120px 0;
    background: linear-gradient(135deg, #010535 0%, #0a0f3a 50%, #010535 100%);
    position: relative;
    overflow: hidden;
}

.product-challenges::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(64, 123, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.product-challenges::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -20%;
    width: 60%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(108, 92, 231, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.product-challenges .container {
    position: relative;
    z-index: 1;
}

.product-challenges .section-title h2,
.product-challenges .section-title h3 {
    color: #fff;
}

.product-challenges .section-title p {
    color: rgba(255, 255, 255, 0.7);
}

.challenges-grid {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Challenge Row Layout */
.challenge-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.challenge-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Problem Side */
.challenge-problem {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 36px 40px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
    position: relative;
}

.challenge-problem::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ef4444, #dc2626);
    border-radius: 0 4px 4px 0;
}

/* Solution Side */
.challenge-solution {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 36px 40px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(16, 185, 129, 0.08) 100%);
    position: relative;
}

.challenge-solution::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #10b981, #059669);
    border-radius: 4px 0 0 4px;
}

/* Icon Styles */
.challenge-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.challenge-icon.problem {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.challenge-icon.problem i {
    font-size: 24px;
    color: #f87171;
}

.challenge-icon.solution {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.challenge-icon.solution i {
    font-size: 24px;
    color: #34d399;
}

.challenge-row:hover .challenge-icon {
    transform: scale(1.1);
}

/* Content Styles */
.challenge-content {
    flex: 1;
}

.challenge-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.challenge-problem .challenge-label {
    color: #f87171;
}

.challenge-solution .challenge-label {
    color: #34d399;
}

.challenge-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.challenge-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
}

/* Divider */
.challenge-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.02);
}

.divider-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.divider-arrow {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #407BFF, #6c5ce7);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(64, 123, 255, 0.4);
    transition: all 0.3s ease;
}

.divider-arrow i {
    font-size: 16px;
    color: #fff;
}

.challenge-row:hover .divider-arrow {
    transform: scale(1.15);
    box-shadow: 0 6px 30px rgba(64, 123, 255, 0.5);
}

/* Responsive Styles */
@media (max-width: 1200px) {

    .challenge-problem,
    .challenge-solution {
        padding: 30px;
    }

    .challenge-content h4 {
        font-size: 18px;
    }

    .challenge-content p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .product-challenges {
        padding: 80px 0;
    }

    .challenge-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .challenge-problem::before,
    .challenge-solution::after {
        display: none;
    }

    .challenge-problem {
        border-radius: 20px 20px 0 0;
        border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    }

    .challenge-solution {
        border-radius: 0 0 20px 20px;
        border-top: 1px solid rgba(16, 185, 129, 0.2);
    }

    .challenge-divider {
        flex-direction: row;
        padding: 12px 30px;
    }

    .divider-line {
        height: 2px;
        width: auto;
        flex: 1;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    }

    .divider-arrow {
        width: 40px;
        height: 40px;
        margin: 0 16px;
    }

    .divider-arrow i {
        transform: rotate(90deg);
    }
}

@media (max-width: 576px) {
    .challenges-grid {
        margin-top: 40px;
        gap: 20px;
    }

    .challenge-problem,
    .challenge-solution {
        flex-direction: column;
        padding: 24px;
        gap: 16px;
    }

    .challenge-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .challenge-icon i {
        font-size: 20px;
    }

    .challenge-content h4 {
        font-size: 17px;
    }

    .challenge-content p {
        font-size: 13px;
    }

    .divider-arrow {
        width: 36px;
        height: 36px;
    }

    .divider-arrow i {
        font-size: 14px;
    }
}

/* Feature Cards Section */
.product-features {
    padding: 120px 0;
    background: #fcfcfc;
}

/* Master-Detail Layout Styles */
.product-md-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-right: 0;
}

.product-md-item {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.product-md-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.product-md-item.active {
    border-color: #407BFF;
    background: #F4F7FF;
    box-shadow: 0 4px 12px rgba(64, 123, 255, 0.1);
}

.product-md-item i {
    font-size: 20px;
    color: #6c757d;
    margin-right: 12px;
    width: 30px;
    text-align: center;
    transition: color 0.2s ease;
}

.product-md-item.active i {
    color: #407BFF;
}

.product-md-text h4 {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
    color: #1a1f36;
}

.product-md-text p {
    font-size: 12px;
    margin: 2px 0 0;
    color: #697386;
    line-height: 1.3;
}

/* Focus Panel - Premium Redesign */
.product-focus-panel {
    background: #ffffff;
    border-radius: 12px;
    padding: 0;
    height: auto;
    min-height: 500px;
    position: sticky;
    top: 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    text-align: left;
}

/* 1. Visual Header - Square Image */
.product-focus-header {
    position: relative;
    width: 100%;
    background: #F7FAFC;
    display: block;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.product-focus-img {
    width: 100%;
    aspect-ratio: 2 / 1;
    position: relative;
    overflow: hidden;
}

.product-focus-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-focus-panel:hover .product-focus-img img {
    transform: scale(1.05);
}

/* 2. Content Wrapper */
.product-focus-content {
    padding: 40px 50px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-focus-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #407BFF;
    margin-bottom: 12px;
    opacity: 0.9;
}

.product-focus-panel h3 {
    font-size: 32px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.product-focus-desc {
    font-size: 16px;
    color: #4f566b;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 95%;
}

/* Structured Content */
.product-content-group {
    margin-bottom: 24px;
}

.product-content-group h5 {
    font-size: 12px;
    font-weight: 700;
    color: #3c4257;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.product-focus-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 30px;
}

.product-focus-list li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: #546b81;
    font-weight: 500;
}

.product-focus-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    background: #407BFF;
    border-radius: 50%;
}

.product-focus-long-desc {
    font-size: 15px;
    color: #546b81;
    line-height: 1.7;
    margin-bottom: 0;
}

.product-focus-action {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    align-self: flex-start;
    font-weight: 600;
    font-size: 15px;
    color: #407BFF;
    text-decoration: none;
    transition: all 0.2s;
}

.product-focus-action i {
    margin-left: 6px;
    font-size: 12px;
    transition: transform 0.2s;
}

.product-focus-action:hover {
    color: #2c5eff;
    background: transparent;
    transform: none;
}

.product-focus-action:hover i {
    transform: translateX(4px);
}

/* Scrollbar for grid */
.product-md-grid::-webkit-scrollbar {
    width: 4px;
}

.product-md-grid::-webkit-scrollbar-track {
    background: transparent;
}

.product-md-grid::-webkit-scrollbar-thumb {
    background: #e3e8ee;
    border-radius: 10px;
}

.product-feature-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 32px;
    text-align: center;
    position: relative;
    overflow: visible;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    height: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transform-origin: center center;
}

.product-feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.6s ease;
}

.product-feature-icon i {
    font-size: 48px;
    background: linear-gradient(135deg, #407BFF, #6c5ce7);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(64, 123, 255, 0.2));
    transition: all 0.6s ease;
}

.product-feature-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a1f36;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.product-feature-card .product-feature-tagline {
    color: #4f566b;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 24px;
    max-width: 90%;
}

.product-feature-card .product-feature-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
    max-width: 260px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding-top: 20px;
}

.product-feature-card .product-feature-bullets li {
    color: #697386;
    font-size: 13px;
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
    font-weight: 500;
}

.product-feature-card .product-feature-bullets li:last-child {
    margin-bottom: 0;
}

.product-feature-card .product-feature-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e3e8ee;
}

.product-feature-card::before,
.product-feature-tag {
    display: none !important;
}

.product-feature-card p {
    color: var(--text-color);
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.6;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Risk Section */
.product-risks {
    padding: 100px 0;
    background: linear-gradient(135deg, #010535 0%, #0d1240 100%);
    position: relative;
}

.product-risks .section-title h2,
.product-risks .section-title p {
    color: #fff;
}

.product-risk-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.product-risk-intro p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
}

.product-risk-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

@media (max-width: 1200px) {
    .product-risk-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-risk-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .product-risk-grid {
        grid-template-columns: 1fr;
    }
}

.product-risk-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.product-risk-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(85, 206, 227, 0.3);
    transform: translateY(-5px);
}

.product-risk-item i {
    font-size: 32px;
    color: #ff6b6b;
    margin-bottom: 15px;
    display: block;
}

.product-risk-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
}

/* Benefits Section */
.product-benefits {
    padding: 100px 0;
    background: #fff;
}

.product-benefit-card {
    background: var(--secondary-color);
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.product-benefit-card:hover {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}

.product-benefit-card:hover h4,
.product-benefit-card:hover p,
.product-benefit-card:hover i {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

.product-benefit-card i {
    font-size: 40px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    display: block;
    transition: all 0.3s ease;
}

.product-benefit-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.product-benefit-card p {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 0;
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* Solutions Section */
.product-solutions {
    padding: 100px 0;
    background: var(--secondary-color);
}

.product-solution-item {
    background: #fff;
    border-radius: 20px;
    padding: 50px 40px;
    margin-bottom: 30px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
}

.product-solution-item:last-child {
    margin-bottom: 0;
}

.product-solution-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.product-solution-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.product-solution-header h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: var(--primary-color);
}

.product-solution-content p {
    color: var(--text-color);
    margin-bottom: 25px;
    font-size: 16px;
}

.product-solution-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (max-width: 768px) {
    .product-solution-features {
        grid-template-columns: 1fr;
    }
}

.product-solution-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.product-solution-feature i {
    color: var(--accent-secondary-color);
    font-size: 18px;
    margin-top: 3px;
    flex-shrink: 0;
}

.product-solution-feature span {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 15px;
}

/* CTA Section */
.product-cta {
    padding: 100px 0;
    background: #fff;
}

.product-cta-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 992px) {
    .product-cta-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.product-cta-content h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.product-cta-content h2 span {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.product-cta-content p {
    font-size: 17px;
    color: var(--text-color);
    margin-bottom: 25px;
    line-height: 1.7;
}

.product-cta-callback {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.08), rgba(85, 206, 227, 0.08));
    border-radius: 12px;
    margin-top: 30px;
}

.product-cta-callback i {
    font-size: 32px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.product-cta-callback span {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

.product-cta-form {
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 40px;
}

.product-cta-form h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
    text-align: center;
}

.product-cta-form .form-group {
    margin-bottom: 20px;
}

.product-cta-form .form-control {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 16px;
    background: #fff;
    transition: all 0.3s ease;
}

.product-cta-form .form-control:focus {
    outline: none;
    border-color: var(--accent-secondary-color);
    box-shadow: 0 0 0 3px rgba(85, 206, 227, 0.15);
}

.product-cta-form .form-control::placeholder {
    color: #999;
}

.product-cta-form .product-submit-btn {
    width: 100%;
    padding: 18px 30px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-cta-form .product-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(77, 81, 171, 0.3);
}

.product-cta-form .product-form-note {
    font-size: 13px;
    color: var(--text-color);
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
}

/* FAQ Section */
.product-faq {
    padding: 100px 0;
    background: var(--secondary-color);
}

.product-faq .product-faq-accordion {
    margin-top: 20px;
}

.product-faq .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.product-faq .accordion-button {
    padding: 20px 25px;
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-color);
    background: #fff;
    border: none;
    box-shadow: none;
}

.product-faq .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    color: #fff;
}

.product-faq .accordion-button::after {
    background-size: 16px;
    width: 16px;
    height: 16px;
}

.product-faq .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.product-faq .accordion-body {
    padding: 20px 25px;
    background: #fff;
}

.product-faq .accordion-body p {
    margin-bottom: 0;
    color: var(--text-color);
    line-height: 1.8;
}

/* Documentation Section */
.product-docs {
    padding: 100px 0;
    background: #fff;
}

.product-docs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .product-docs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .product-docs-grid {
        grid-template-columns: 1fr;
    }
}

.product-doc-card {
    background: var(--secondary-color);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.product-doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.product-doc-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-doc-icon i {
    font-size: 26px;
    color: #fff;
}

.product-doc-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.product-doc-content p {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.6;
}

.product-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-color);
    transition: all 0.3s ease;
}

.product-doc-link:hover {
    color: var(--accent-secondary-color);
    gap: 12px;
}

.product-doc-link i {
    font-size: 12px;
}

/* Awards Section */
.product-awards {
    padding: 100px 0;
    background: linear-gradient(135deg, #010535 0%, #1a1f4e 50%, #010535 100%);
    color: #fff;
}

.product-awards-content {
    padding-right: 20px;
}

.product-awards-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    color: #ffffff !important;
}

.product-awards-desc {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
}

.product-awards-desc strong {
    color: #fff;
}

/* Award Badges */
.product-award-badges {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.product-award-badge {
    position: relative;
    width: 100px;
    text-align: center;
}

.product-award-content {
    background: #fff;
    color: #333;
    padding: 15px 5px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 120px;
    justify-content: flex-start;
}

.product-award-content .product-badge-year {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.product-award-content i {
    font-size: 24px;
    color: #ff9f43;
    margin-bottom: 8px;
}

.product-award-content .product-badge-title {
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

.product-badge-tail {
    display: none;
}

.product-award-badge:nth-child(2) i {
    color: #ee5253;
}

.product-award-badge:nth-child(3) i {
    color: #f368e0;
}

.product-award-badge:nth-child(4) i {
    color: #10ac84;
}

/* Review Cards Grid */
.product-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.product-review-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-review-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.product-review-logo {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.product-review-logo i {
    font-size: 32px;
    color: #fff;
}

.product-review-logo span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 5px;
}

.product-review-stars {
    color: #fea500;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.product-review-score {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.product-review-score span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

@media (max-width: 992px) {
    .product-reviews-grid {
        margin-top: 40px;
    }
}

@media (max-width: 576px) {
    .product-reviews-grid {
        grid-template-columns: 1fr;
    }

    .product-award-badges {
        justify-content: center;
    }
}

/* Solution Badges */
.product-trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.product-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(77, 81, 171, 0.15);
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-trust-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(77, 81, 171, 0.15);
    border-color: var(--accent-secondary-color);
}

.product-trust-badge i {
    font-size: 18px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.product-trust-badge span {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .product-trust-badges {
        gap: 15px;
    }

    .product-trust-badge {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .product-hero h1 {
        font-size: 42px;
    }

    .product-hero-subtitle {
        font-size: 18px;
    }

    .product-solution-header h3 {
        font-size: 22px;
    }

    .product-cta-content h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .product-hero {
        padding: 80px 0 70px;
    }

    .product-hero h1 {
        font-size: 32px;
    }

    .product-features,
    .product-risks,
    .product-benefits,
    .product-solutions {
        padding: 70px 0;
    }

    .product-solution-item {
        padding: 30px 25px;
    }
}

/* ================================================
   Sumo Logic Feature Cards Grid
   ================================================ */
.sumo-features {
    padding: 120px 0;
    background: #f8fafc;
    position: relative;
}

.sumo-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.sumo-feature-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.sumo-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #407BFF, #6c5ce7);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sumo-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.sumo-feature-card:hover::before {
    opacity: 1;
}

.feature-card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

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

.sumo-feature-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 14px;
}

.sumo-feature-card>p {
    font-size: 15px;
    color: #697386;
    line-height: 1.7;
    margin-bottom: 24px;
}

.feature-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-card-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #1a1f36;
    font-weight: 500;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card-list li:first-child {
    border-top: none;
    padding-top: 0;
}

.feature-card-list li i {
    color: #10b981;
    font-size: 14px;
    flex-shrink: 0;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .sumo-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .sumo-features {
        padding: 80px 0;
    }

    .sumo-features-grid {
        gap: 24px;
        margin-top: 40px;
    }

    .sumo-feature-card {
        padding: 32px 28px;
    }
}

@media (max-width: 768px) {
    .sumo-features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card-icon {
        width: 60px;
        height: 60px;
    }

    .feature-card-icon i {
        font-size: 26px;
    }

    .sumo-feature-card h4 {
        font-size: 20px;
    }
}

/* ================================================
   Sumo Logic Bento Grid (Technical Excellence)
   ================================================ */
.sumo-capabilities {
    padding: 120px 0;
    background: linear-gradient(180deg, #0a0f2e 0%, #151b3d 100%);
    position: relative;
    overflow: hidden;
}

.sumo-capabilities::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.sumo-capabilities .section-title h3,
.sumo-capabilities .section-title h2,
.sumo-capabilities .section-title p {
    color: #fff;
}

.sumo-capabilities .section-title h2 span {
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sumo-capabilities .section-title p {
    color: rgba(255, 255, 255, 0.7);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 20px;
    margin-top: 60px;
}

.bento-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Large Card - Spans 2 columns and 2 rows */
.bento-large {
    grid-column: span 2;
    grid-row: span 2;
    padding: 40px;
}

/* Medium Card - Spans 1 column */
.bento-medium {
    grid-column: span 1;
}

/* Stat Card */
.bento-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 28px 24px;
}

.bento-stat.bento-accent {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-color: rgba(99, 102, 241, 0.3);
}

.bento-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.bento-icon i {
    font-size: 26px;
    color: #fff;
}

.bento-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.bento-card>p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin: 0;
}

.bento-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.bento-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 8px 14px;
    border-radius: 30px;
}

.bento-features span i {
    color: #60a5fa;
    font-size: 11px;
}

.bento-stat-value {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
}

.bento-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.bento-stat p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

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

    .bento-large {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .sumo-capabilities {
        padding: 80px 0;
    }

    .bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bento-large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-card {
        padding: 28px;
    }

    .bento-stat-value {
        font-size: 40px;
    }
}

/* ================================================
   Feature Showcase (Attack Insight)
   ================================================ */
.feature-showcase {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.showcase-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}

.showcase-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #407BFF;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.showcase-dot:hover {
    background: rgba(64, 123, 255, 0.3);
}

.showcase-dot.active {
    background: #407BFF;
    transform: scale(1.2);
}

.showcase-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 60px 80px;
    min-height: 400px;
}

.showcase-slide {
    display: none;
    text-align: center;
    animation: fadeIn 0.5s ease;
}

.showcase-slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.showcase-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    box-shadow: 0 15px 40px rgba(64, 123, 255, 0.3);
}

.showcase-icon i {
    font-size: 42px;
    color: #fff;
}

.showcase-slide h3 {
    font-size: 32px;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 16px;
}

.showcase-slide>p {
    font-size: 18px;
    color: #64748b;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 40px;
}

.showcase-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.showcase-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f5f9;
    padding: 14px 24px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.showcase-feature-item:hover {
    background: #e0e7ff;
    transform: translateY(-2px);
}

.showcase-feature-item i {
    color: #407BFF;
    font-size: 16px;
}

.showcase-feature-item span {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

/* Navigation Arrows */
.showcase-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.showcase-nav:hover {
    background: #407BFF;
    border-color: #407BFF;
    box-shadow: 0 8px 30px rgba(64, 123, 255, 0.3);
}

.showcase-nav:hover i {
    color: #fff;
}

.showcase-nav i {
    font-size: 18px;
    color: #64748b;
    transition: color 0.3s ease;
}

.showcase-prev {
    left: -25px;
}

.showcase-next {
    right: -25px;
}

/* Responsive */
@media (max-width: 1024px) {
    .showcase-container {
        padding: 50px 60px;
        margin: 0 20px;
    }

    .showcase-prev {
        left: 10px;
    }

    .showcase-next {
        right: 10px;
    }
}

@media (max-width: 768px) {
    .feature-showcase {
        padding: 80px 0;
    }

    .showcase-container {
        padding: 40px 30px;
        margin: 0 15px;
        min-height: auto;
    }

    .showcase-icon {
        width: 80px;
        height: 80px;
    }

    .showcase-icon i {
        font-size: 32px;
    }

    .showcase-slide h3 {
        font-size: 24px;
    }

    .showcase-slide>p {
        font-size: 16px;
    }

    .showcase-features {
        flex-direction: column;
        gap: 12px;
    }

    .showcase-feature-item {
        justify-content: center;
    }

    .showcase-nav {
        width: 40px;
        height: 40px;
    }

    .showcase-prev {
        left: 5px;
    }

    .showcase-next {
        right: 5px;
    }
}

/* ================================================
   Feature Showcase Split (Radar + Content)
   ================================================ */
.feature-showcase-split {
    padding: 120px 0;
    background: linear-gradient(180deg, #0a1628 0%, #1a2744 100%);
    position: relative;
    overflow: hidden;
}

.feature-showcase-split .section-title h3 {
    color: #60a5fa;
}

.feature-showcase-split .section-title h2 {
    color: #ffffff;
}

.feature-showcase-split .section-title h2 span {
    color: #60a5fa;
}

.feature-showcase-split .section-title p {
    color: rgba(255, 255, 255, 0.7);
}

.showcase-split-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 60px;
}

/* Radar Column */
.radar-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.radar-container {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(64, 123, 255, 0.1) 0%, transparent 70%);
}

/* Radar Rings */
.radar-ring {
    position: absolute;
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-1 {
    width: 100px;
    height: 100px;
}

.ring-2 {
    width: 180px;
    height: 180px;
}

.ring-3 {
    width: 280px;
    height: 280px;
}

.ring-4 {
    width: 380px;
    height: 380px;
    border-color: rgba(96, 165, 250, 0.15);
}

/* Radar Sweep */
.radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.8), transparent);
    transform-origin: left center;
    animation: radarSweep 4s linear infinite;
}

.radar-sweep::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.15), transparent);
    transform-origin: left center;
}

@keyframes radarSweep {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Radar Center */
.radar-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(64, 123, 255, 0.5);
    z-index: 10;
}

.radar-center i {
    color: #fff;
    font-size: 24px;
}

/* Radar Blips */
.radar-blip {
    position: absolute;
    width: 44px;
    height: 44px;
    background: rgba(30, 41, 59, 0.9);
    border: 2px solid rgba(96, 165, 250, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 5;
}

.radar-blip i {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    transition: all 0.3s ease;
}

.radar-blip:hover,
.radar-blip.active {
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-color: #60a5fa;
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(64, 123, 255, 0.6);
}

.radar-blip:hover i,
.radar-blip.active i {
    color: #fff;
}

/* Blip Positions */
.blip-1 {
    top: 25%;
    left: 15%;
}

.blip-2 {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.blip-3 {
    top: 25%;
    right: 15%;
}

.blip-4 {
    bottom: 25%;
    right: 15%;
}

.blip-5 {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.blip-6 {
    bottom: 25%;
    left: 15%;
}

/* Showcase Column */
.showcase-column {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
}

.showcase-column .showcase-dots {
    justify-content: flex-start;
    margin-bottom: 30px;
}

.showcase-column .showcase-dot {
    border-color: rgba(255, 255, 255, 0.3);
}

.showcase-column .showcase-dot.active {
    background: #60a5fa;
    border-color: #60a5fa;
}

.showcase-content {
    min-height: 280px;
}

.showcase-column .showcase-slide {
    display: none;
    animation: fadeIn 0.5s ease;
}

.showcase-column .showcase-slide.active {
    display: block;
}

.showcase-icon-small {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.showcase-icon-small i {
    font-size: 24px;
    color: #fff;
}

.showcase-column h3 {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.showcase-column .showcase-slide>p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 24px;
}

.showcase-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.showcase-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.showcase-list li:last-child {
    border-bottom: none;
}

.showcase-list li i {
    color: #10b981;
    font-size: 14px;
}

/* Navigation Arrows */
.showcase-nav-arrows {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.showcase-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.showcase-arrow:hover {
    background: #407BFF;
    border-color: #407BFF;
}

.showcase-arrow i {
    font-size: 14px;
}

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

    .radar-container {
        width: 320px;
        height: 320px;
    }

    .ring-3 {
        width: 240px;
        height: 240px;
    }

    .ring-4 {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .feature-showcase-split {
        padding: 80px 0;
    }

    .radar-column {
        display: none;
    }

    .showcase-column {
        padding: 30px;
    }

    .showcase-column h3 {
        font-size: 22px;
    }
}

/* ================================================
   Attack Capabilities (Core Platform - Light BG)
   ================================================ */
.attack-capabilities {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

.capabilities-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    gap: 24px;
    margin-top: 60px;
}

.capability-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 32px;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
}

.capability-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: #407BFF;
}

.capability-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 48px;
    font-weight: 800;
    color: rgba(64, 123, 255, 0.1);
    line-height: 1;
}

.capability-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.capability-icon i {
    font-size: 24px;
    color: #fff;
}

.capability-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 12px;
}

.capability-card>p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Large Card */
.capability-large {
    grid-column: span 2;
    grid-row: span 2;
    padding: 40px;
}

.capability-large h4 {
    font-size: 24px;
}

.capability-large>p {
    font-size: 16px;
}

/* Stat Cards */
.capability-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.capability-stat .stat-value {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
}

.capability-stat .stat-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.capability-stat p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.capability-accent {
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border: none;
}

.capability-accent .stat-value {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

.capability-accent .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.capability-accent p {
    color: rgba(255, 255, 255, 0.7);
}

/* Medium Cards */
.capability-medium {
    grid-column: span 1;
}

.capability-wide {
    grid-column: span 2;
}

/* Tags */
.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.capability-tags span {
    background: #f1f5f9;
    color: #475569;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.capability-tags span:hover {
    background: #e0e7ff;
    color: #407BFF;
}

/* List */
.capability-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.capability-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 14px;
    padding: 8px 0;
}

.capability-list li i {
    color: #10b981;
    font-size: 12px;
}

/* Integrations */
.capability-integrations {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.capability-integrations span {
    width: 44px;
    height: 44px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.capability-integrations span:hover {
    background: #407BFF;
}

.capability-integrations span i {
    font-size: 18px;
    color: #64748b;
    transition: color 0.3s ease;
}

.capability-integrations span:hover i {
    color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
    .capabilities-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .capability-large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .capability-wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .attack-capabilities {
        padding: 80px 0;
    }

    .capabilities-bento {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .capability-large,
    .capability-wide {
        grid-column: span 1;
    }

    .capability-card {
        padding: 28px;
    }
}

/* ================================================
   Vertical Cards Grid Layout
   ================================================ */
.capabilities-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 60px;
}

.capability-card-v {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 36px 28px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-align: center;
}

.capability-card-v::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #407BFF 0%, #6c5ce7 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.capability-card-v:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(64, 123, 255, 0.15);
    border-color: rgba(64, 123, 255, 0.3);
}

.capability-card-v:hover::before {
    transform: scaleX(1);
}

.card-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 56px;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(64, 123, 255, 0.08) 0%, rgba(108, 92, 231, 0.08) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    pointer-events: none;
}

.card-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(64, 123, 255, 0.25);
}

.card-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px dashed rgba(64, 123, 255, 0.25);
    border-radius: 22px;
    opacity: 0;
    transition: all 0.4s ease;
}

.capability-card-v:hover .card-icon::after {
    opacity: 1;
    animation: rotateBorder 8s linear infinite;
}

@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.card-icon i {
    font-size: 28px;
    color: #fff;
}

.capability-card-v:hover .card-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 15px 40px rgba(64, 123, 255, 0.35);
}

.capability-card-v h4 {
    font-size: 22px;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.capability-card-v:hover h4 {
    color: #407BFF;
}

.capability-card-v>p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px;
    min-height: 52px;
}

.card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.card-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    transition: all 0.3s ease;
}

.card-features li:last-child {
    margin-bottom: 0;
}

.card-features li:hover {
    background: linear-gradient(90deg, rgba(64, 123, 255, 0.08), rgba(108, 92, 231, 0.08));
    color: #407BFF;
    transform: translateX(4px);
}

.card-features li i {
    color: #10b981;
    font-size: 12px;
    flex-shrink: 0;
}

/* Responsive - Vertical Cards Grid */
@media (max-width: 1199px) {
    .capabilities-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .capabilities-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }

    .capability-card-v {
        padding: 28px 24px;
    }

    .capability-card-v>p {
        min-height: auto;
    }

    .card-number {
        font-size: 42px;
    }

    .card-icon {
        width: 64px;
        height: 64px;
    }

    .card-icon i {
        font-size: 24px;
    }
}

/* ================================================
   Process Timeline (Horizontal)
   ================================================ */
.process-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
    padding: 0 20px;
}

.timeline-line {
    position: absolute;
    top: 85px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, #407BFF 0%, #6c5ce7 50%, #407BFF 100%);
    z-index: 1;
}

.timeline-line::before,
.timeline-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #407BFF;
    border-radius: 50%;
}

.timeline-line::before {
    left: 0;
}

.timeline-line::after {
    right: 0;
}

.timeline-step {
    position: relative;
    flex: 1;
    text-align: center;
    z-index: 2;
    padding: 0 15px;
}

.step-number {
    font-size: 14px;
    font-weight: 700;
    color: #407BFF;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.step-icon {
    width: 80px;
    height: 80px;
    background: #ffffff;
    border: 3px solid #407BFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(64, 123, 255, 0.15);
}

.step-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px dashed rgba(64, 123, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.timeline-step:hover .step-icon {
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-color: transparent;
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(64, 123, 255, 0.3);
}

.step-icon i {
    font-size: 28px;
    color: #407BFF;
    transition: color 0.3s ease;
}

.timeline-step:hover .step-icon i {
    color: #fff;
}

.step-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 10px;
}

.step-content>p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 16px;
    min-height: 42px;
}

.step-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step-features li {
    font-size: 13px;
    color: #475569;
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.step-features li:hover {
    background: #e0e7ff;
    color: #407BFF;
}

/* Stats Row */
.process-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 80px;
    padding: 40px 0;
    border-top: 1px solid #e2e8f0;
}

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

.process-stat .stat-num {
    display: block;
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
}

.process-stat .stat-text {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
    .process-timeline {
        flex-wrap: wrap;
        gap: 40px;
    }

    .timeline-step {
        flex: 0 0 45%;
    }

    .timeline-line {
        display: none;
    }

    .process-stats {
        gap: 40px;
        flex-wrap: wrap;
    }

    .process-stat {
        flex: 0 0 40%;
    }
}

@media (max-width: 768px) {
    .process-timeline {
        flex-direction: column;
        gap: 30px;
        margin-top: 50px;
    }

    .timeline-step {
        flex: 1;
        display: flex;
        text-align: left;
        gap: 20px;
        align-items: flex-start;
    }

    .step-icon {
        width: 60px;
        height: 60px;
        margin: 0;
        flex-shrink: 0;
    }

    .step-icon i {
        font-size: 22px;
    }

    .step-number {
        position: absolute;
        top: -8px;
        left: -8px;
        background: #407BFF;
        color: #fff;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
    }

    .step-content>p {
        min-height: auto;
    }

    .step-features {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .process-stats {
        gap: 20px;
        margin-top: 50px;
    }

    .process-stat {
        flex: 0 0 45%;
    }

    .process-stat .stat-num {
        font-size: 28px;
    }
}

/* ================================================
   Interactive Platform Diagram
   ================================================ */
.platform-diagram {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.platform-diagram .section-title h3 {
    color: #407BFF;
}

.platform-diagram .section-title h2 {
    color: #0a1628;
}

.platform-diagram .section-title p {
    color: #64748b;
}

.diagram-wrapper {
    margin-top: 60px;
    position: relative;
}

/* Cloud Providers Row */
.diagram-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

.cloud-providers {
    padding: 0 40px;
}

.cloud-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 30px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cloud-node:hover {
    border-color: #407BFF;
    box-shadow: 0 10px 30px rgba(64, 123, 255, 0.15);
    transform: translateY(-5px);
}

.cloud-node i {
    font-size: 32px;
    color: #64748b;
    transition: color 0.3s ease;
}

.cloud-node:hover i {
    color: #407BFF;
}

.cloud-node span {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

/* Connector Lines */
.diagram-connectors {
    height: 60px;
    width: 100%;
    position: relative;
}

.diagram-connectors svg {
    width: 100%;
    height: 100%;
}

.connector-line {
    fill: none;
    stroke: #cbd5e1;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    animation: flowLine 2s linear infinite;
}

@keyframes flowLine {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -20;
    }
}

/* Central Platform Core */
.diagram-center {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.platform-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 60px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(64, 123, 255, 0.3);
    position: relative;
}

.platform-core::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    background: linear-gradient(135deg, #407BFF, #6c5ce7, #407BFF);
    z-index: -1;
    animation: pulse 2s ease-in-out infinite;
}

.core-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-icon i {
    font-size: 32px;
    color: #ffffff;
}

.platform-core h4 {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
    margin: 0;
}

.platform-core span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Capability Nodes */
.capability-nodes {
    padding: 0 20px;
}

.capability-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 120px;
}

.capability-node:hover,
.capability-node.active {
    border-color: #407BFF;
    background: linear-gradient(135deg, rgba(64, 123, 255, 0.05) 0%, rgba(108, 92, 231, 0.05) 100%);
    box-shadow: 0 10px 30px rgba(64, 123, 255, 0.15);
    transform: translateY(-5px);
}

.node-icon {
    width: 50px;
    height: 50px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.capability-node:hover .node-icon,
.capability-node.active .node-icon {
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
}

.node-icon i {
    font-size: 22px;
    color: #64748b;
    transition: color 0.3s ease;
}

.capability-node:hover .node-icon i,
.capability-node.active .node-icon i {
    color: #ffffff;
}

.capability-node span {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-align: center;
}

/* Feature Detail Panel */
.feature-detail-panel {
    margin-top: 50px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    min-height: 200px;
}

.feature-detail {
    display: none;
    animation: fadeIn 0.4s ease;
}

.feature-detail.active {
    display: block;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-detail h4 {
    font-size: 22px;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-detail h4 i {
    color: #407BFF;
}

.feature-detail>p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px;
}

.feature-detail ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.feature-detail ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #475569;
    background: #f8fafc;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.feature-detail ul li i {
    color: #10b981;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 1024px) {

    .cloud-providers,
    .capability-nodes {
        flex-wrap: wrap;
        gap: 20px;
    }

    .cloud-node,
    .capability-node {
        flex: 0 0 calc(50% - 10px);
    }

    .diagram-connectors {
        display: none;
    }

    .platform-core {
        padding: 25px 40px;
    }
}

@media (max-width: 768px) {
    .platform-diagram {
        padding: 60px 0;
    }

    .cloud-node,
    .capability-node {
        flex: 0 0 calc(50% - 10px);
        padding: 15px;
    }

    .cloud-node i {
        font-size: 24px;
    }

    .capability-node {
        min-width: auto;
    }

    .node-icon {
        width: 40px;
        height: 40px;
    }

    .node-icon i {
        font-size: 18px;
    }

    .feature-detail-panel {
        padding: 25px;
    }

    .feature-detail h4 {
        font-size: 18px;
    }

    .feature-detail ul {
        flex-direction: column;
    }
}

/* ================================================
   Centered Hub & Spoke Layout
   ================================================ */
.hub-spoke-container {
    position: relative;
    max-width: 1000px;
    margin: 80px auto;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-center {
    position: relative;
    z-index: 10;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 0 50px rgba(64, 123, 255, 0.4);
    border: 4px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.hub-center .hub-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.hub-center h4 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: #fff;
    letter-spacing: 1px;
}

.hub-center span {
    font-size: 13px;
    opacity: 0.8;
}

.hub-center-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(64, 123, 255, 0.2);
    border-radius: 50%;
    z-index: -1;
    animation: hubPulse 3s infinite;
}

@keyframes hubPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.spoke-nodes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.spoke-node {
    position: absolute;
    width: 160px;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 5;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.spoke-node:hover {
    z-index: 11;
}

.node-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 18px 12px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.node-box i {
    font-size: 26px;
    color: #64748b;
    transition: all 0.3s ease;
}

.node-box span {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.spoke-node:hover .node-box {
    border-color: #407BFF;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(64, 123, 255, 0.15);
}

.spoke-node:hover .node-box i {
    color: #407BFF;
    transform: scale(1.1);
}

.spoke-node.active .node-box {
    background: linear-gradient(135deg, #fff 0%, #f0f4ff 100%);
    border-color: #407BFF;
    box-shadow: 0 15px 35px rgba(64, 123, 255, 0.2);
}

.spoke-node.active .node-box i {
    color: #407BFF;
}

/* Positioning Spoke Nodes Radially - 9 Nodes */
.spoke-node:nth-child(1) {
    top: 50%;
    left: 92%;
}

.spoke-node:nth-child(2) {
    top: 78%;
    left: 82%;
}

.spoke-node:nth-child(3) {
    top: 94%;
    left: 55%;
}

.spoke-node:nth-child(4) {
    top: 88%;
    left: 25%;
}

.spoke-node:nth-child(5) {
    top: 60%;
    left: 8%;
}

.spoke-node:nth-child(6) {
    top: 30%;
    left: 12%;
}

.spoke-node:nth-child(7) {
    top: 8%;
    left: 35%;
}

.spoke-node:nth-child(8) {
    top: 6%;
    left: 65%;
}

.spoke-node:nth-child(9) {
    top: 25%;
    left: 88%;
}

/* Connector SVG */
.hub-spoke-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hub-spoke-svg line {
    stroke: #cbd5e1;
    stroke-width: 2;
    stroke-dasharray: 6, 6;
    opacity: 0.4;
    animation: dashOffset 20s linear infinite;
}

@keyframes dashOffset {
    to {
        stroke-dashoffset: -200;
    }
}

/* Feature Detail for Hub-Spoke */
.hub-spoke-detail {
    max-width: 900px;
    margin: 60px auto 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

/* Responsive Hub & Spoke */
@media (max-width: 991px) {
    .hub-spoke-container {
        height: auto;
        flex-direction: column;
        gap: 40px;
        margin: 40px auto;
    }

    .spoke-nodes {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        width: 100%;
        height: auto;
    }

    .spoke-node {
        position: relative;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100%;
    }

    .hub-center {
        width: 160px;
        height: 160px;
    }

    .hub-spoke-svg {
        display: none;
    }
}

@media (max-width: 650px) {
    .spoke-nodes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 450px) {
    .spoke-nodes {
        grid-template-columns: 1fr;
    }
}


/* ================================================
   Core Platform Capabilities Section
   ================================================ */
.core-capabilities {
    padding: 100px 0;
    background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
    position: relative;
}

.core-capabilities::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 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='%23407BFF' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.core-capabilities .section-title h3 {
    color: #407BFF;
}

.core-capabilities .section-title h2 {
    color: #ffffff;
}

.core-capabilities .section-title p {
    color: rgba(255, 255, 255, 0.7);
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.capability-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 35px;
    transition: all 0.4s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.capability-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(64, 123, 255, 0.4);
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.capability-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.capability-card .capability-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.capability-card .capability-icon i {
    font-size: 24px;
    color: #ffffff;
}

.capability-header h4 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.capability-card>p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 25px;
}

.capability-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.capability-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.capability-features li:last-child {
    border-bottom: none;
}

.capability-features li i {
    color: #10b981;
    font-size: 14px;
    margin-top: 2px;
}

/* Capability Badge */
.capability-badge {
    position: absolute;
    top: 20px;
    right: 20px;
}

.capability-badge span {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.capability-badge.ai-badge span {
    background: linear-gradient(135deg, #8b5cf6 0%, #6c5ce7 100%);
}

/* Stats Row */
.capabilities-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 70px;
    padding-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.stat-item .stat-number {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, #407BFF 0%, #6c5ce7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 10px;
}

.stat-item .stat-label {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .capabilities-stats {
        gap: 40px;
    }

    .stat-item .stat-number {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .core-capabilities {
        padding: 60px 0;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .capability-card {
        padding: 25px;
    }

    .capability-header h4 {
        font-size: 18px;
    }

    .capabilities-stats {
        flex-wrap: wrap;
        gap: 30px;
    }

    .stat-item {
        flex: 0 0 45%;
    }

    .stat-item .stat-number {
        font-size: 36px;
    }
}

/* ============================================
   HORIZONTAL ACCORDION CAPABILITIES
   ============================================ */

.capabilities-accordion-section {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0a1035 50%, var(--primary-color) 100%);
    position: relative;
    overflow: hidden;
}

.capabilities-accordion-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(77, 81, 171, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(85, 206, 227, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.capabilities-accordion-section .section-title h3 {
    color: var(--accent-secondary-color);
}

.capabilities-accordion-section .section-title h3::before {
    filter: brightness(0) invert(1);
}

.capabilities-accordion-section .section-title h2 {
    color: #fff;
}

.capabilities-accordion-section .section-title h2 span {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.capabilities-accordion-section .section-title p {
    color: rgba(255, 255, 255, 0.7);
}

/* Accordion Container */
.capabilities-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Accordion Panel */
.accordion-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-panel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(77, 81, 171, 0.3);
}

.accordion-panel.active {
    background: rgba(77, 81, 171, 0.12);
    border-color: rgba(85, 206, 227, 0.4);
}

/* Panel Header */
.panel-header {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    gap: 20px;
    transition: all 0.3s ease;
}

.panel-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Panel Icon */
.panel-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.2), rgba(85, 206, 227, 0.2));
    border-radius: 12px;
    flex-shrink: 0;
}

.panel-icon i {
    font-size: 20px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.accordion-panel.active .panel-icon {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
}

.accordion-panel.active .panel-icon i {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Panel Title */
.panel-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel-title h4 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    transition: color 0.3s ease;
}

.accordion-panel.active .panel-title h4 {
    color: #55cee3;
}


.panel-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2));
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.panel-badge.dev {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2));
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

/* Panel Stat */
.panel-stat {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    min-width: 70px;
    text-align: center;
}

.accordion-panel.active .panel-stat {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
    color: #fff;
}

/* Panel Toggle */
.panel-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.panel-toggle i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    transition: transform 0.3s ease;
}

.accordion-panel.active .panel-toggle {
    background: rgba(85, 206, 227, 0.3);
}

.accordion-panel.active .panel-toggle i {
    transform: rotate(180deg);
    color: #fff;
}

/* Panel Content */
.panel-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 25px;
}

.accordion-panel.active .panel-content {
    max-height: 300px;
    padding: 0 25px 25px 95px;
}

.panel-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Panel Features */
.panel-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-features span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-features span i {
    color: #22c55e;
    font-size: 11px;
}

/* Accordion Stats Row */
.accordion-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

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

.stat-box .stat-value {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 8px;
}

.stat-box .stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 992px) {
    .capabilities-accordion-section {
        padding: 80px 0;
    }

    .panel-header {
        padding: 15px 20px;
        gap: 15px;
    }

    .panel-icon {
        width: 44px;
        height: 44px;
    }

    .accordion-panel.active .panel-content {
        padding: 0 20px 20px 79px;
    }

    .accordion-stats {
        flex-wrap: wrap;
        gap: 30px;
        padding: 30px;
    }

    .stat-box {
        flex: 0 0 45%;
    }

    .stat-box .stat-value {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .panel-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .panel-title {
        order: 1;
        flex: 0 0 calc(100% - 60px);
    }

    .panel-icon {
        order: 0;
    }

    .panel-stat {
        order: 2;
        margin-left: 64px;
    }

    .panel-toggle {
        order: 3;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .accordion-panel {
        position: relative;
    }

    .accordion-panel.active .panel-content {
        padding: 0 20px 20px 20px;
    }

    .panel-features span {
        font-size: 12px;
        padding: 5px 10px;
    }

    .accordion-stats {
        gap: 20px;
        padding: 25px;
    }

    .stat-box .stat-value {
        font-size: 30px;
    }

    .stat-box .stat-label {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .panel-title h4 {
        font-size: 16px;
    }

    .panel-badge {
        display: none;
    }

    .stat-box {
        flex: 0 0 100%;
    }
}

/* ============================================
   ERMETIX FEATURES SECTION (Light BG)
   ============================================ */

.ermetix-features-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 50%, #f8f9fc 100%);
    position: relative;
}

.ermetix-features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77, 81, 171, 0.2), transparent);
}

/* Pillars Grid */
.ermetix-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 60px;
}

/* Pillar Card */
.ermetix-pillar-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: center;
}

.ermetix-pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(77, 81, 171, 0.15);
    border-color: rgba(77, 81, 171, 0.2);
}

/* Pillar Icon */
.pillar-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.1), rgba(85, 206, 227, 0.1));
    border-radius: 18px;
    transition: all 0.3s ease;
}

.pillar-icon i {
    font-size: 28px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ermetix-pillar-card:hover .pillar-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    transform: scale(1.1);
}

.ermetix-pillar-card:hover .pillar-icon i {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pillar-icon.protection {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
}

.pillar-icon.protection i {
    background: linear-gradient(135deg, #ef4444, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ermetix-pillar-card:hover .pillar-icon.protection {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

/* Pillar Content */
.ermetix-pillar-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.ermetix-pillar-card>p {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Pillar Features List */
.pillar-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.pillar-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--primary-color);
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.pillar-features li:first-child {
    border-top: none;
}

.pillar-features li i {
    color: #22c55e;
    font-size: 12px;
}

/* Supported Platforms */
.ermetix-platforms {
    background: #fff;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.platforms-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 35px;
}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Platform Card */
.platform-card {
    text-align: center;
    padding: 30px 20px;
    border-radius: 16px;
    background: #f8f9fc;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.platform-card:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

/* Platform Icon */
.platform-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.platform-icon i {
    font-size: 28px;
}

.platform-icon.android {
    background: rgba(61, 220, 132, 0.15);
}

.platform-icon.android i {
    color: #3ddc84;
}

.platform-icon.apple {
    background: rgba(0, 0, 0, 0.08);
}

.platform-icon.apple i {
    color: #333;
}

.platform-icon.windows {
    background: rgba(0, 120, 212, 0.15);
}

.platform-icon.windows i {
    color: #0078d4;
}

/* Platform Content */
.platform-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.platform-card>p {
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 15px;
}

/* Platform Badges */
.platform-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.platform-badges span {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(77, 81, 171, 0.1);
    color: var(--accent-color);
    border-radius: 20px;
}

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

@media (max-width: 992px) {
    .ermetix-features-section {
        padding: 80px 0;
    }

    .ermetix-platforms {
        padding: 40px 30px;
    }

    .platforms-grid {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .ermetix-pillars-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .platforms-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ermetix-platforms {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .ermetix-pillar-card {
        padding: 25px 20px;
    }

    .pillar-icon {
        width: 60px;
        height: 60px;
    }

    .pillar-icon i {
        font-size: 24px;
    }
}

/* ============================================
   ERMETIX DUAL CAPABILITY LAYOUT (UEM + MTD)
   ============================================ */

.ermetix-dual-capability {
    display: flex;
    align-items: stretch;
    gap: 30px;
    margin-bottom: 50px;
}

/* Capability Block */
.capability-block {
    flex: 1;
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.capability-block.uem {
    border-color: rgba(77, 81, 171, 0.2);
}

.capability-block.uem:hover {
    border-color: rgba(77, 81, 171, 0.4);
    box-shadow: 0 15px 50px rgba(77, 81, 171, 0.15);
}

.capability-block.mtd {
    border-color: rgba(239, 68, 68, 0.2);
}

.capability-block.mtd:hover {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 15px 50px rgba(239, 68, 68, 0.15);
}

/* Capability Header */
.capability-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.capability-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 18px;
    flex-shrink: 0;
}

.capability-icon i {
    font-size: 28px;
    color: #fff;
}

.capability-icon.mtd-icon {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.capability-label {
    flex: 1;
}

.capability-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    color: #fff;
    border-radius: 20px;
    margin-bottom: 8px;
}

.capability-tag.mtd-tag {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.capability-label h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.capability-desc {
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Capability Features */
.capability-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.capability-features .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: #f8f9fc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.capability-features .feature-item:hover {
    background: #f0f2f8;
    transform: translateX(5px);
}

.capability-block.uem .feature-item i {
    font-size: 20px;
    color: var(--accent-color);
    margin-top: 3px;
}

.capability-block.mtd .feature-item i {
    font-size: 20px;
    color: #ef4444;
    margin-top: 3px;
}

.capability-features .feature-item h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 4px 0;
}

.capability-features .feature-item p {
    font-size: 13px;
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
}

/* Plus Sign Connector */
.capability-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.capability-plus span {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid #e5e7eb;
}

/* Result Statement */
.ermetix-result {
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0a1035 100%);
    border-radius: 20px;
    padding: 30px 40px;
    margin-bottom: 60px;
}

.result-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
}

.result-icon i {
    font-size: 24px;
    color: #fff;
}

.result-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.result-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1200px) {
    .ermetix-dual-capability {
        flex-direction: column;
        gap: 20px;
    }

    .capability-plus {
        transform: rotate(90deg);
    }

    .capability-plus span {
        width: 50px;
        height: 50px;
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .capability-block {
        padding: 30px 25px;
    }

    .capability-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .capability-icon {
        width: 60px;
        height: 60px;
    }

    .capability-icon i {
        font-size: 24px;
    }

    .capability-label h3 {
        font-size: 20px;
    }

    .ermetix-result {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .result-content h4 {
        font-size: 18px;
    }

    .result-content p {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .capability-features .feature-item {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .capability-plus span {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

/* ============================================
   ERMETIX KEY CAPABILITIES SECTION (Dark BG)
   ============================================ */

.ermetix-capabilities-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #010535 0%, #0a1045 50%, #010535 100%);
    position: relative;
    overflow: hidden;
}

.ermetix-capabilities-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(85, 206, 227, 0.3), transparent);
}

.ermetix-capabilities-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(85, 206, 227, 0.3), transparent);
}

/* Dark Section Title Override */
.section-title.dark-section h3 {
    color: var(--accent-secondary-color);
}

.section-title.dark-section h2 {
    color: #fff;
}

.section-title.dark-section h2 span {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title.dark-section p {
    color: rgba(255, 255, 255, 0.7);
}

/* Capabilities Icon Grid */
.capabilities-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 30px;
    margin-top: 50px;
}

/* Capability Icon Item */
.capability-icon-item {
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
}

.capability-icon-item:hover {
    transform: translateY(-5px);
}

/* Icon Container */
.cap-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cap-icon i {
    font-size: 48px;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.capability-icon-item:hover .cap-icon i {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(85, 206, 227, 0.5));
}

/* MTD Icons - Red/Orange gradient */
.cap-icon.mtd i {
    background: linear-gradient(180deg, #4D51AB 0%, var(--accent-secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.capability-icon-item:hover .cap-icon.mtd i {
    filter: drop-shadow(0 0 15px rgba(77, 81, 171, 0.5));
}

/* Icon Label */
.capability-icon-item h5 {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.capability-icon-item p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

/* Probely Capabilities Section - Uses same dark styles */
.probely-capabilities-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #010535 0%, #0a1045 50%, #010535 100%);
    position: relative;
    overflow: hidden;
}

.probely-capabilities-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(85, 206, 227, 0.3), transparent);
}

.probely-capabilities-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(85, 206, 227, 0.3), transparent);
}

/* Responsive */
@media (max-width: 1200px) {
    .capabilities-icon-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 20px;
    }
}

@media (max-width: 992px) {
    .capabilities-icon-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }

    .ermetix-capabilities-section {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {
    .capabilities-icon-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px;
    }

    .cap-icon {
        width: 60px;
        height: 60px;
    }

    .cap-icon i {
        font-size: 36px;
    }

    .capability-icon-item h5 {
        font-size: 13px;
    }

    .capability-icon-item {
        padding: 10px;
    }
}

/* ============================================
   PROBELY FEATURES SECTION (Light BG)
   ============================================ */

.probely-features-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 50%, #f8f9fc 100%);
    position: relative;
}

.probely-features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77, 81, 171, 0.2), transparent);
}

/* Workflow Steps Grid */
.probely-workflow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* Workflow Step Card */
.workflow-step {
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
}

.workflow-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(77, 81, 171, 0.15);
}

/* Step Number Badge */
.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(77, 81, 171, 0.3);
}

/* Step Icon */
.step-icon {
    width: 80px;
    height: 80px;
    margin: 15px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.step-icon i {
    font-size: 32px;
    color: var(--accent-color);
    transition: all 0.3s ease;
}

/* Step Icon Colors - Theme Aligned */
.step-icon.discover,
.step-icon.scan,
.step-icon.analyze,
.step-icon.fix {
    background: rgba(77, 81, 171, 0.1);
}

.workflow-step:hover .step-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}

.workflow-step:hover .step-icon i {
    color: #fff;
}

/* Step Content */
.workflow-step h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.workflow-step>p {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Step Features List */
.step-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.step-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--primary-color);
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.step-features li:first-child {
    border-top: none;
}

.step-features li i {
    color: #22c55e;
    font-size: 12px;
}

/* Stats Row */
.probely-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 40px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0a1035 100%);
    border-radius: 20px;
    margin-bottom: 40px;
}

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

.stat-value {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* Compliance Badges */
.probely-compliance {
    text-align: center;
}

.probely-compliance h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.compliance-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.compliance-badges span {
    display: inline-block;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: var(--primary-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.compliance-badges span:hover {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

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

    .probely-stats {
        gap: 40px;
        padding: 30px;
    }

    .stat-value {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .probely-workflow {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .probely-stats {
        flex-wrap: wrap;
        gap: 30px;
    }

    .stat-item {
        flex: 0 0 45%;
    }

    .probely-features-section {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {
    .workflow-step {
        padding: 30px 20px;
    }

    .step-icon {
        width: 70px;
        height: 70px;
    }

    .step-icon i {
        font-size: 28px;
    }

    .probely-stats {
        padding: 25px;
    }

    .stat-value {
        font-size: 24px;
    }

    .stat-label {
        font-size: 12px;
    }
}

/* ============================================
   PROBELY COMPLIANCE SECTION (Light BG)
   ============================================ */

.probely-compliance-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 50%, #ffffff 100%);
    position: relative;
}

/* Compliance Grid */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* Compliance Card */
.compliance-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: center;
}

.compliance-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(77, 81, 171, 0.12);
    border-color: var(--accent-color);
}

/* Compliance Icon */
.compliance-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(77, 81, 171, 0.1), rgba(85, 206, 227, 0.1));
    border-radius: 16px;
    transition: all 0.3s ease;
}

.compliance-icon i {
    font-size: 24px;
    color: var(--accent-color);
    transition: all 0.3s ease;
}

.compliance-card:hover .compliance-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}

.compliance-card:hover .compliance-icon i {
    color: #fff;
}

/* Compliance Card Content */
.compliance-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.compliance-card p {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
}

/* Compliance CTA */
.compliance-cta {
    text-align: center;
    padding: 20px 30px;
    background: linear-gradient(135deg, var(--primary-color), #0a1035);
    border-radius: 12px;
}

.compliance-cta p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.compliance-cta i {
    font-size: 20px;
    color: var(--accent-secondary-color);
}

/* Responsive */
@media (max-width: 992px) {
    .compliance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .probely-compliance-section {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {
    .compliance-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .compliance-card {
        padding: 25px 20px;
    }

    .compliance-cta p {
        font-size: 14px;
    }
}