/**
 * VECMS Page Custom Styles
 */

/* === Hero Section === */
.vecms-hero-section {
    padding: 50px 0 40px;
    text-align: center;
}

.vecms-hero-title {
    font-size: 52px;
    font-weight: 600;
    color: var(--bringer-s-heading, #F5F7FA);
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.vecms-hero-tagline {
    font-size: 24px;
    font-weight: 500;
    color: var(--bringer-s-accent, #6366F1);
    margin: 0 auto 24px auto;
    font-style: italic;
    max-width: 800px;
    text-align: center;
}

.vecms-hero-subtitle {
    font-size: 18px;
    line-height: 1.8;
    color: var(--bringer-s-text, #C5C7CE);
    margin: 0 0 40px 0;
}

.vecms-hero-cta {
    margin-top: 0px;
}

/* === Overview Section === */
.vecms-overview-section {
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vecms-overview-content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px;
    margin-top: 10px;
}

.vecms-overview-content p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--bringer-s-text, #C5C7CE);
    margin: 0;
}

/* === Section Titles === */
.section-title {
    font-size: 36px;
    font-weight: 600;
    color: var(--bringer-s-heading, #F5F7FA);
    margin: 0 0 16px 0;
}

.section-subtitle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: var(--bringer-s-text, #C5C7CE);
    max-width: 700px;
    text-align: center;
}

/* === Architecture Section === */
.vecms-architecture-section {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vecms-features-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0 0;
}

.vecms-features-list li {
    font-size: 17px;
    line-height: 1.8;
    color: var(--bringer-s-text, #C5C7CE);
    padding: 16px 0 16px 40px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vecms-features-list li:last-child {
    border-bottom: none;
}

.vecms-features-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--bringer-s-accent, #6366F1);
    font-weight: bold;
    font-size: 20px;
}

.vecms-architecture-image {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.vecms-architecture-image img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
}

/* === Dashboard Section === */
.vecms-dashboard-section {
    padding: 50px 0 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vecms-feature-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px 16px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.vecms-feature-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

.vecms-feature-icon {
    width: 64px;
    height: 64px;
    background: var(--bringer-s-accent, #6366F1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.vecms-feature-icon i {
    width: 32px;
    height: 32px;
    background: var(--bringer-s-heading, #F5F7FA);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.vecms-feature-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bringer-s-heading, #F5F7FA);
    margin: 0 0 8px 0;
}

.vecms-feature-card p {
    font-size: 14px;
    color: var(--bringer-s-text, #C5C7CE);
    margin: 0;
}

/* === Features Grid Section === */
.vecms-features-grid-section {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vecms-module-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.vecms-module-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.vecms-module-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--bringer-s-heading, #F5F7FA);
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bringer-s-accent, #6366F1);
}

.vecms-module-section {
    margin-bottom: 24px;
}

.vecms-module-section:last-child {
    margin-bottom: 0;
}

.vecms-module-section h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--bringer-s-heading, #F5F7FA);
    margin: 0 0 12px 0;
}

.vecms-module-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vecms-module-section ul li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--bringer-s-text, #C5C7CE);
    padding-left: 24px;
    position: relative;
    margin-bottom: 8px;
}

.vecms-module-section ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--bringer-s-accent, #6366F1);
    font-size: 14px;
}

/* === Deployment Section === */
.vecms-deployment-section {
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

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

.vecms-deployment-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

.vecms-deployment-icon {
    width: 80px;
    height: 80px;
    background: var(--bringer-s-accent, #6366F1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.vecms-deployment-icon i {
    width: 40px;
    height: 40px;
    background: var(--bringer-s-heading, #F5F7FA);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.vecms-deployment-card h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--bringer-s-heading, #F5F7FA);
    margin: 0 0 12px 0;
}

.vecms-deployment-card p {
    font-size: 15px;
    color: var(--bringer-s-text, #C5C7CE);
    margin: 0;
}

/* === Business Value Section === */
.vecms-value-section {
    padding: 80px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vecms-value-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 28px 24px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.vecms-value-card:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateX(4px);
}

.vecms-value-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bringer-s-heading, #F5F7FA);
    margin: 0 0 8px 0;
}

.vecms-value-card p {
    font-size: 15px;
    color: var(--bringer-s-text, #C5C7CE);
    margin: 0;
}

/* === Final CTA Section === */
.vecms-cta-section {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(99, 102, 241, 0.05);
}

.vecms-cta-title {
    font-size: 40px;
    font-weight: 600;
    color: var(--bringer-s-heading, #F5F7FA);
    margin: 0 0 40px 0;
    line-height: 1.3;
}

.vecms-cta-buttons {
    margin-top: 40px;
}

/* === Custom Icon Masks === */
.vecms-icon-health {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
}

.vecms-icon-devices {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
}

.vecms-icon-alerts {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0'/%3E%3C/svg%3E");
}

.vecms-icon-compliance {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.vecms-icon-onprem {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16'/%3E%3C/svg%3E");
}

.vecms-icon-cloud {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z'/%3E%3C/svg%3E");
}

.vecms-icon-hybrid {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

/* === Responsive Design === */
@media (max-width: 1024px) {
    .vecms-hero-title {
        font-size: 42px;
    }
    
    .vecms-hero-tagline {
        font-size: 20px;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .vecms-cta-title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .vecms-hero-section {
        padding: 80px 0 60px;
    }
    
    .vecms-hero-title {
        font-size: 32px;
    }
    
    .vecms-hero-tagline {
        font-size: 18px;
    }
    
    .vecms-hero-subtitle {
        font-size: 16px;
    }
    
    .vecms-hero-cta a {
        display: block;
        margin: 0 0 12px 0 !important;
    }
    
    .vecms-overview-section,
    .vecms-architecture-section,
    .vecms-dashboard-section,
    .vecms-features-grid-section,
    .vecms-deployment-section,
    .vecms-value-section,
    .vecms-cta-section {
        padding: 60px 0;
    }
    
    .vecms-overview-content {
        padding: 32px 24px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .vecms-architecture-image {
        margin-top: 40px;
        min-height: 300px;
    }
    
    .vecms-module-card {
        padding: 24px;
    }
    
    .vecms-module-title {
        font-size: 20px;
    }
    
    .vecms-cta-title {
        font-size: 28px;
    }
    
    .vecms-cta-buttons a {
        display: block;
        margin: 0 0 12px 0 !important;
    }
}

@media (max-width: 480px) {
    .vecms-hero-title {
        font-size: 28px;
    }
    
    .vecms-hero-tagline {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .vecms-module-title {
        font-size: 18px;
    }
    
    .vecms-cta-title {
        font-size: 24px;
    }
}

/* === Utilities === */
.align-center {
    text-align: center;
}

.stg-valign-middle {
    align-items: center;
}