/* Architecture Page Specific Styles */

/* ==============================================
   GLOBAL FONT SETTINGS
   ============================================== */
/* Ensure the architecture page uses the same fonts as index.html */
.architecture-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Force all text elements in architecture sections to use the correct font */
.architecture-fullscreen,
.architecture-diagram,
.architecture-subpages,
.architecture-title,
.node-front,
.node-back,
.subpage-card,
.component,
.flow-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Ensure specific text elements inherit the correct font */
.architecture-page h1,
.architecture-page h2,
.architecture-page h3,
.architecture-page h4,
.architecture-page h5,
.architecture-page h6,
.architecture-page p,
.architecture-page span,
.architecture-page div {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==============================================
   ARCHITECTURE DIAGRAM CONTAINER
   ============================================== */

/* Invisible scroll area */
.scroll-area {
    height: 400vh; /* Increased from 300vh to provide more scrolling space for new timing */
    width: 100%;
    pointer-events: none; /* Don't interfere with interactions */
}

/* Footer positioning for architecture page - removed to let footer flow naturally */
/* .architecture-fullscreen + .footer {
    position: static;
    margin-top: var(--spacing-2xl);
    width: 100%;
    z-index: 1;
    background: var(--darker-bg);
} */

/* Full Screen Architecture */
.architecture-fullscreen {
    position: fixed;
    top: 80px; /* Height of navbar */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: calc(100vh - 80px);
}

/* Architecture Title - Always Visible */
.architecture-title {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    max-width: 90%;
}

.architecture-title h2 {
    color: var(--kloud-cyan);
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin: 0;
    padding: var(--spacing-xl) var(--spacing-2xl);
    background: linear-gradient(135deg, var(--kloud-charcoal) 0%, var(--darker-bg) 100%);
    border: 2px solid var(--kloud-cyan);
    border-radius: var(--border-radius);
    box-shadow: 
        0 8px 32px rgba(47, 243, 224, 0.2),
        inset 0 1px 0 rgba(47, 243, 224, 0.1);
    text-shadow: 0 0 20px rgba(47, 243, 224, 0.4);
    letter-spacing: 0.8px;
    line-height: 1.3;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.architecture-title h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(47, 243, 224, 0.1), transparent);
    animation: titleShimmer 3s ease-in-out infinite;
}

@keyframes titleShimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* ==============================================
   ARCHITECTURE DIAGRAM FLOW
   ============================================== */

.architecture-diagram {
    padding: var(--section-padding-mobile);
    background: var(--dark-bg);
    min-height: 700vh; /* Increased from 600vh to provide more scrolling space for new timing */
    position: relative;
    overflow: hidden;
}

.diagram-container {
    max-width: 1000px;
    margin: 0 auto;
    position: sticky;
    top: 10vh;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.architecture-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 2rem;
    align-items: center;
    margin-bottom: 4rem;
    padding: 2rem;
    background: var(--kloud-charcoal);
    border: 1px solid var(--kloud-cyan);
    border-radius: var(--border-radius);
}

.flow-section {
    text-align: center;
}

.flow-section h3 {
    color: var(--medium-text);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.component {
    background: var(--card-bg);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid var(--gray-200);
    text-align: center;
    color: var(--light-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.component:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    border-color: var(--kloud-cyan);
}

.component i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.user-traffic i { color: var(--medium-text); }
.load-balancer i { color: var(--kloud-cyan); }
.cloud-run i { color: var(--kloud-cyan); }
.cloud-storage i { color: var(--kloud-cyan); }

.flow-arrow,
.flow-arrow-down {
    color: var(--kloud-cyan);
    font-size: 1.5rem;
    animation: flow 2s ease-in-out infinite;
}

.flow-arrow-down {
    grid-column: 3;
    text-align: center;
}

@keyframes flow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.storage-section {
    grid-column: 3;
    grid-row: 3;
}

/* ==============================================
   4-NODE PARALLAX ARCHITECTURE
   ============================================== */

.parallax-architecture {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 95vw;
    padding: 0.5rem;
    margin: -4rem auto 0;
    gap: var(--spacing-xs);
    box-sizing: border-box;
    /* Ensure proper z-index layering */
    z-index: 10;
    /* Prevent flickering during animations */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.architecture-node {
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); /* Increased from 1s to 1.5s for slower fade-in */
    z-index: 15;
    flex-shrink: 0;
}

.architecture-node.visible {
    opacity: 1;
    transform: translateY(0);
}



.node-content {
    text-align: center;
    padding: 0;
    background: transparent;
    perspective: 1000px;
    /* Base dimensions - will be scaled by CSS custom properties */
    height: 180px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==============================================
   RESPONSIVE NODE SIZING BASED ON SCREEN HEIGHT
   ============================================== */

/* Small desktop screens (height < 800px) */
@media screen and (max-height: 799px) {
    .node-content {
        height: 180px;
        width: 180px;
    }
    
    .node-front,
    .node-back {
        padding: 1.25rem;
    }
    
    .node-front i {
        font-size: 2.8rem;
        margin-bottom: 1rem;
    }
    
    .node-front h3 {
        font-size: 1rem;
    }
    
    .info-content h4 {
        font-size: 1.2rem;
    }
    
    .info-content p {
        font-size: 0.9rem;
    }
    
    /* Adjust gap between nodes for smaller screens */
    .parallax-architecture {
        gap: 1rem;
    }
    
    /* Adjust arrow width for smaller nodes */
    .architecture-arrow {
        width: 45px;
    }
}

/* Medium desktop screens (height 800px - 1000px) */
@media screen and (min-height: 800px) and (max-height: 999px) {
    .node-content {
        height: 220px;
        width: 220px;
    }
    
    .node-front,
    .node-back {
        padding: 1.75rem;
    }
    
    .node-front i {
        font-size: 3.5rem;
        margin-bottom: 1.25rem;
    }
    
    .node-front h3 {
        font-size: 1.1rem;
    }
    
    .info-content h4 {
        font-size: 1.3rem;
    }
    
    .info-content p {
        font-size: 1rem;
    }
    
    /* Adjust gap between nodes */
    .parallax-architecture {
        gap: 1.25rem;
    }
    
    /* Adjust arrow width */
    .architecture-arrow {
        width: 55px;
    }
}

/* Large desktop screens (height 1000px - 1200px) */
@media screen and (min-height: 1000px) and (max-height: 1199px) {
    .node-content {
        height: 280px;
        width: 280px;
    }
    
    .node-front,
    .node-back {
        padding: 2.25rem;
    }
    
    .node-front i {
        font-size: 4.2rem;
        margin-bottom: 1.5rem;
    }
    
    .node-front h3 {
        font-size: 1.3rem;
    }
    
    .info-content h4 {
        font-size: 1.5rem;
    }
    
    .info-content p {
        font-size: 1.1rem;
    }
    
    /* Standard gap */
    .parallax-architecture {
        gap: 1.5rem;
    }
    
    /* Standard arrow width */
    .architecture-arrow {
        width: 65px;
    }
}

/* Extra large desktop screens (height 1200px - 1400px) */
@media screen and (min-height: 1200px) and (max-height: 1399px) {
    .node-content {
        height: 340px;
        width: 340px;
    }
    
    .node-front,
    .node-back {
        padding: 2.75rem;
    }
    
    .node-front i {
        font-size: 5rem;
        margin-bottom: 1.75rem;
    }
    
    .node-front h3 {
        font-size: 1.5rem;
    }
    
    .info-content h4 {
        font-size: 1.7rem;
    }
    
    .info-content p {
        font-size: 1.2rem;
    }
    
    /* Larger gap for bigger screens */
    .parallax-architecture {
        gap: 1.75rem;
    }
    
    /* Larger arrow width */
    .architecture-arrow {
        width: 75px;
    }
}

/* Ultra-wide screens (height >= 1400px) */
@media screen and (min-height: 1400px) {
    .node-content {
        height: 400px;
        width: 400px;
    }
    
    .node-front,
    .node-back {
        padding: 3.25rem;
    }
    
    .node-front i {
        font-size: 6rem;
        margin-bottom: 2rem;
    }
    
    .node-front h3 {
        font-size: 1.7rem;
    }
    
    .info-content h4 {
        font-size: 1.9rem;
    }
    
    .info-content p {
        font-size: 1.3rem;
    }
    
    /* Even larger gap for ultra-wide screens */
    .parallax-architecture {
        gap: 2rem;
    }
    
    /* Larger arrow width */
    .architecture-arrow {
        width: 85px;
    }
}

/* ==============================================
   DESKTOP ROW LAYOUT ENFORCEMENT
   ============================================== */

/* Ensure nodes stay in one row on desktop screens */
@media screen and (min-aspect-ratio: 1.5) {
    .parallax-architecture {
        max-width: 98vw;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    
    .architecture-node {
        flex-shrink: 0;
    }
    
    .architecture-arrow {
        flex-shrink: 0;
    }
}

/* ==============================================
   RESPONSIVE ARCHITECTURE CONTAINER POSITIONING
   ============================================== */

/* Adjust architecture container positioning for different screen heights - updated margins */
@media screen and (max-height: 799px) {
    .parallax-architecture {
        margin: -2rem auto 0;
    }
    
    .architecture-subpages {
        margin-top: 120vh !important; /* Reduced to cover scroll down text on desktop */
    }
}

@media screen and (min-height: 800px) and (max-height: 999px) {
    .parallax-architecture {
        margin: -3rem auto 0;
    }
    
    .architecture-subpages {
        margin-top: 120vh !important; /* Reduced to cover scroll down text on desktop */
    }
}

@media screen and (min-height: 1000px) and (max-height: 1199px) {
    .parallax-architecture {
        margin: -4rem auto 0;
    }
    
    .architecture-subpages {
        margin-top: 120vh !important; /* Reduced to cover scroll down text on desktop */
    }
}

@media screen and (min-height: 1200px) and (max-height: 1399px) {
    .parallax-architecture {
        margin: -4rem auto 0;
    }
    
    .architecture-subpages {
        margin-top: 120vh !important; /* Reduced to cover scroll down text on desktop */
    }
}

@media screen and (min-height: 1400px) {
    .parallax-architecture {
        margin: -6rem auto 0;
    }
    
    .architecture-subpages {
        margin-top: 120vh !important; /* Reduced to cover scroll down text on desktop */
    }
}

/* ==============================================
   MOBILE OVERRIDE - DISABLE HEIGHT-BASED POSITIONING
   ============================================== */

/* When mobile layout is active (portrait/square orientations or height < 600px), disable height-based positioning
   to prevent overlap issues between architecture nodes and title text */
@media (max-aspect-ratio: 1.5), (max-height: 600px), (max-width: 1080px) {
    /* Override all height-based positioning rules for mobile - use higher specificity */
    .architecture-diagram .parallax-architecture {
        margin: 0 auto !important;
        /* Force column layout in mobile */
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .architecture-diagram .architecture-subpages {
        margin-top: var(--spacing-4xl) !important; /* Increased spacing for mobile to ensure proper timing */
        /* Ensure fade-in animation works on mobile */
        animation: fadeInSubpages 0.8s ease-out 0.3s forwards; /* Shorter delay for mobile */
    }
    
    /* Ensure proper spacing between title and first node */
    .architecture-title {
        margin-bottom: var(--spacing-xl);
    }
    
    /* Ensure nodes have proper spacing in mobile layout */
    .architecture-node {
        margin-bottom: var(--spacing-lg);
        /* Force column layout */
        order: initial !important;
        width: 100% !important;
        max-width: 300px !important;
        flex: 0 0 auto !important;
    }
    
    /* Ensure arrows have proper spacing in mobile layout */
    .architecture-arrow {
        margin: var(--spacing-md) 0;
        /* Force vertical orientation */
        flex-direction: column !important;
        width: 50px !important;
        height: 40px !important;
    }
    
    /* Override any height-based media query rules that might still be active */
    .parallax-architecture[style*="margin"] {
        margin: 0 auto !important;
    }
    
    /* Ensure the architecture container doesn't have any negative margins */
    .parallax-architecture {
        margin-top: 0 !important;
        margin-bottom: var(--spacing-2xl) !important;
    }
    
    /* Force override of all height-based media queries for mobile */
    .architecture-subpages {
        margin-top: var(--spacing-4xl) !important;
        /* Ensure fade-in animation works on mobile */
        animation: fadeInSubpages 0.8s ease-out 0.3s forwards; /* Shorter delay for mobile */
    }
}

/* ==============================================
   CARD FLIP ANIMATION
   ============================================== */

.node-card {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
    perspective: 1000px;
    /* Add fallback for browsers that don't support preserve-3d */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    /* Ensure smooth animations */
    -webkit-transition: -webkit-transform 0.6s ease;
    -moz-transition: -moz-transform 0.6s ease;
    /* Prevent flickering */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.node-card.flipped {
    transform: rotateY(180deg);
    /* Add vendor prefixes for better browser support */
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.node-front,
.node-back {
    position: absolute;
    /* Dimensions now handled by responsive media queries - use 100% to inherit from parent */
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    border: 2px solid var(--kloud-cyan);
    border-radius: var(--border-radius);
    box-shadow: 0 0 30px rgba(47, 243, 224, 0.3);
    background: var(--kloud-charcoal);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Ensure smooth transitions */
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.node-content:hover .node-card {
    transform: rotateY(180deg);
    /* Add vendor prefixes */
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.node-back {
    transform: rotateY(180deg);
    /* Add vendor prefixes */
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    background: var(--darker-bg);
    border-color: var(--kloud-cyan);
}

/* Add fallback for browsers that don't support 3D transforms */
@supports not (transform-style: preserve-3d) {
    .node-card {
        transform-style: flat;
    }
    
    .node-back {
        display: none;
    }
    
    .node-content:hover .node-card .node-back {
        display: flex;
        position: static;
        transform: none;
        margin-top: 1rem;
    }
    
    .node-content:hover .node-card .node-front {
        display: none;
    }
}

/* Additional fallback for older browsers */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .node-card {
        transform-style: flat;
    }
    
    .node-back {
        display: none;
    }
    
    .node-content:hover .node-card .node-back {
        display: flex;
        position: static;
        transform: none;
        margin-top: 1rem;
    }
    
    .node-content:hover .node-card .node-front {
        display: none;
    }
}

/* Base styles for node content - will be overridden by responsive media queries */
.node-front i {
    color: var(--kloud-cyan);
}

.node-front h3 {
    color: var(--kloud-cyan);
    font-weight: 700;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-content h4 {
    color: var(--kloud-cyan);
    margin-bottom: 1rem;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-content p {
    color: var(--light-text);
    line-height: 1.5;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==============================================
   ARCHITECTURE ARROWS
   ============================================== */

.architecture-arrow {
    position: relative;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Reduced from 1.2s to 0.6s for faster arrow appearance */
    display: flex;
    align-items: center;
    z-index: 5;
}

.architecture-arrow.visible {
    opacity: 1;
}

.arrow-line {
    flex: 1;
    height: 4px;
    background: linear-gradient(90deg, var(--kloud-cyan), rgba(47, 243, 224, 0.6));
    position: relative;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Reduced from 1.2s to 0.6s for faster arrow line appearance */
    box-shadow: 0 0 12px rgba(47, 243, 224, 0.4);
}

.architecture-arrow.visible .arrow-line {
    transform: scaleX(1);
}

.arrow-head {
    width: 0;
    height: 0;
    border-left: 18px solid var(--kloud-cyan);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: -2px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Removed delay so arrow head appears immediately */
    filter: drop-shadow(0 0 10px rgba(47, 243, 224, 0.5));
}

.architecture-arrow.visible .arrow-head {
    opacity: 1;
    transform: scale(1);
}

/* ==============================================
   NODE POSITIONING AND ORDERING
   ============================================== */

.node-1 {
    order: 1;
}

.architecture-arrow.arrow-1 {
    order: 2;
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    margin: 0 2px;
    top: auto;
    transform: none;
}

.node-2 {
    order: 3;
}

.architecture-arrow.arrow-2 {
    order: 4;
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    margin: 0 2px;
    top: auto;
    transform: none;
}

.node-3 {
    order: 5;
}

.architecture-arrow.arrow-3 {
    order: 6;
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    margin: 0 2px;
    top: auto;
    transform: none;
}

/* Responsive arrow positioning adjustments */
@media screen and (max-height: 799px) {
    .architecture-arrow.arrow-1,
    .architecture-arrow.arrow-2,
    .architecture-arrow.arrow-3 {
        width: 40px;
        margin: 0 1px;
    }
}

@media screen and (min-height: 800px) and (max-height: 999px) {
    .architecture-arrow.arrow-1,
    .architecture-arrow.arrow-2,
    .architecture-arrow.arrow-3 {
        width: 45px;
        margin: 0 1.5px;
    }
}

@media screen and (min-height: 1000px) and (max-height: 1199px) {
    .architecture-arrow.arrow-1,
    .architecture-arrow.arrow-2,
    .architecture-arrow.arrow-3 {
        width: 50px;
        margin: 0 2px;
    }
}

@media screen and (min-height: 1200px) and (max-height: 1399px) {
    .architecture-arrow.arrow-1,
    .architecture-arrow.arrow-2,
    .architecture-arrow.arrow-3 {
        width: 60px;
        margin: 0 2.5px;
    }
}

@media screen and (min-height: 1400px) {
    .architecture-arrow.arrow-1,
    .architecture-arrow.arrow-2,
    .architecture-arrow.arrow-3 {
        width: 70px;
        margin: 0 3px;
    }
}

.node-4 {
    order: 7;
}

/* Node-specific colors */
.node-1 .component i { color: var(--kloud-cyan); }
.node-2 .component i { color: var(--kloud-cyan); }
.node-3 .component i { color: var(--kloud-cyan); }
.node-4 .component i { color: var(--kloud-cyan); }

/* ==============================================
   PROGRESS INDICATOR
   ============================================== */

.architecture-progress {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.architecture-diagram .architecture-progress {
    opacity: 1;
}

.progress-step {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(47, 243, 224, 0.2);
    border: 2px solid rgba(47, 243, 224, 0.4);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.progress-step.active {
    background: var(--kloud-cyan);
    border-color: var(--kloud-cyan);
    box-shadow: 0 0 15px rgba(47, 243, 224, 0.8);
}

.progress-step::after {
    content: attr(data-step);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--kloud-charcoal);
    color: var(--kloud-cyan);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 300;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    border: 1px solid var(--kloud-cyan);
    pointer-events: none;
}

.progress-step:hover::after {
    opacity: 1;
}

/* ==============================================
   CI/CD PIPELINE
   ============================================== */

.cicd-pipeline {
    background: var(--darker-bg);
    color: var(--kloud-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    border: 1px solid var(--kloud-cyan);
    margin-top: var(--spacing-2xl);
}

.cicd-pipeline h3 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--kloud-cyan);
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.pipeline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.pipeline-component {
    background: var(--card-bg);
    border: 1px solid var(--gray-200);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    flex: 1;
    min-width: 120px;
    color: var(--light-text);
}

.pipeline-component:hover {
    background: var(--light-bg);
    border-color: var(--kloud-cyan);
    transform: translateY(-2px);
}

.pipeline-component i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.github i { color: var(--kloud-white); }
.cloud-build i { color: var(--kloud-cyan); }
.artifact-registry i { color: var(--kloud-cyan); }
.deploy-target i { color: var(--kloud-cyan); }

.pipeline-arrow {
    color: var(--kloud-cyan);
    font-size: 1.2rem;
}

/* ==============================================
   ARCHITECTURE FEATURES
   ============================================== */

.architecture-features {
    margin-top: 3rem;
}

/* ==============================================
   ARCHITECTURE SUBPAGES NAVIGATION
   ============================================== */

/* Ensure the architecture diagram moves up before subpages appear */

.subpages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.subpage-card {
    background: var(--card-bg);
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    text-decoration: none;
    color: var(--light-text);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: block;
}

.subpage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(47, 243, 224, 0.1), transparent);
    transition: left 0.6s ease;
}

.subpage-card:hover::before {
    left: 100%;
}

.subpage-card:hover {
    border-color: var(--kloud-cyan);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(47, 243, 224, 0.2);
}

.subpage-icon {
    width: 60px;
    height: 60px;
    background: var(--kloud-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    transition: all 0.3s ease;
}

.subpage-icon i {
    font-size: 1.5rem;
    color: var(--kloud-charcoal);
}

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

.subpage-card h3 {
    color: var(--kloud-cyan);
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin-bottom: var(--spacing-md);
    transition: color 0.3s ease;
}

.subpage-card p {
    color: var(--medium-text);
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.card-arrow {
    position: absolute;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 40px;
    height: 40px;
    background: rgba(47, 243, 224, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.card-arrow i {
    color: var(--kloud-cyan);
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.subpage-card:hover .card-arrow {
    background: var(--kloud-cyan);
}

.subpage-card:hover .card-arrow i {
    color: var(--kloud-charcoal);
    transform: translateX(2px);
}

/* ==============================================
   SERVICES CTA BUTTON
   ============================================== */

.giant-services-button {
    /* Enhanced enticing button design matching services page */
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--kloud-cyan), rgba(47, 243, 224, 0.9));
    color: var(--kloud-charcoal);
    font-size: 1.4rem;
    font-weight: 700;
    padding: 1.5rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(47, 243, 224, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    animation: servicesGlow 3s ease-in-out infinite;
}

.giant-services-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.giant-services-button:hover::before {
    left: 100%;
}

.giant-services-button:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(47, 243, 224, 0.5), 0 0 30px rgba(47, 243, 224, 0.3);
    background: linear-gradient(135deg, rgba(47, 243, 224, 0.95), var(--kloud-cyan));
    color: var(--kloud-charcoal);
    border-color: rgba(255, 255, 255, 0.3);
}

.giant-services-button:active {
    transform: translateY(-2px) scale(1.01);
    transition: all 0.1s ease;
}

.giant-services-button i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.giant-services-button:hover i {
    transform: translateX(3px);
}

/* Pulsing glow animation */
@keyframes servicesGlow {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(47, 243, 224, 0.3);
    }
    50% {
        box-shadow: 0 8px 25px rgba(47, 243, 224, 0.5), 0 0 20px rgba(47, 243, 224, 0.2);
    }
}

/* ==============================================
   SECTION HEADER VARIATIONS
   ============================================== */

.section-header-centered {
    margin-top: 4rem;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-description-large {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.tech-comparison-centered {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.services-cta-section {
    text-align: center;
    padding: 3rem 0;
}

/* Footer inside the Explore More section - full width with proper spacing */
.architecture-subpages .footer {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: var(--spacing-4xl);
    margin-bottom: 0; /* Remove bottom margin to eliminate blank space */
    padding: var(--spacing-2xl) 0;
    background: var(--dark-bg); /* Changed from darker-bg to dark-bg to match standard footer */
    border-top: 1px solid var(--kloud-cyan);
    /* Match other footer styles */
    color: var(--light-text);
    font-size: 1rem; /* Changed from 0.9rem to 1rem to match standard footer */
    line-height: 1.6;
    /* Ensure footer extends to the very bottom */
    position: relative;
    bottom: 0;
}

/* Ensure the footer content is properly centered */
.architecture-subpages .footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Remove the bottom margin from the subpages section since footer handles spacing */
.architecture-subpages {
    padding: var(--spacing-4xl) 0 0 0; /* Remove bottom padding */
    background: var(--darker-bg);
    /* Ensure proper positioning relative to architecture diagram */
    position: relative;
    z-index: 5;
    /* Position after the scroll area to prevent overlap - balanced for proper timing */
    margin-top: 160vh !important; /* Balanced default margin for proper timing after fade-in */
    /* Ensure subpages don't interfere with architecture nodes */
    pointer-events: auto;
    /* Remove bottom margin since footer handles spacing */
    margin-bottom: 0;
    /* Ensure no extra space at bottom */
    overflow: hidden;
    /* Remove initial opacity: 0 so scroll down text remains visible */
    /* Add smooth fade-in effect */
    animation: fadeInSubpages 0.8s ease-out 0.5s forwards; /* Fade in after 0.5s delay */
}

/* On desktop only, position subpages to cover the scroll down text */
@media screen and (min-aspect-ratio: 1.5) and (min-height: 600px) and (min-width: 1080px) {
    .architecture-subpages {
        /* Position to cover the scroll down text area */
        margin-top: 120vh !important; /* Reduced to cover scroll down text */
        /* Ensure it covers the scroll area */
        z-index: 20;
        /* Remove initial opacity so scroll down text remains visible until covered */
        opacity: 1;
    }
}

/* Fade-in animation for subpages */
@keyframes fadeInSubpages {
    from {
        opacity: 1; /* Start fully visible instead of 0 */
        transform: translateY(20px);
    }
    to {
        opacity: 1; /* End fully visible */
        transform: translateY(0);
    }
}

/* Ensure proper spacing on smaller screens */
@media (max-aspect-ratio: 1.5), (max-height: 600px), (max-width: 1080px) {
    .architecture-subpages {
        margin-top: var(--spacing-2xl) !important;
        padding-top: var(--spacing-2xl);
        /* On mobile, ensure subpages appear after architecture content */
        position: relative;
        z-index: 1;
    }
}

/* Final mobile override to ensure proper timing on small screens */
@media (max-aspect-ratio: 1.5), (max-height: 600px), (max-width: 1080px) {
    .architecture-subpages {
        margin-top: var(--spacing-4xl) !important;
        /* Ensure fade-in animation works on mobile */
        animation: fadeInSubpages 0.8s ease-out 0.3s forwards; /* Shorter delay for mobile */
        /* Ensure subpages are visible from start on mobile too */
        opacity: 1;
    }
}