/* ===================================
   SERVICES PAGE STYLES
   =================================== */

.services-section {
    min-height: 100vh;
    padding: calc(var(--spacing-xl) + 120px) 0 var(--spacing-md);
    position: relative;
    background-color: #0B0A0F;
    overflow: hidden;
}

/* ===================================
   BACKGROUND ELEMENTS
   =================================== */

.background-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: floatBlob 20s infinite alternate;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.3), rgba(80, 201, 233, 0.1));
    animation-delay: 0s;
}

.blob-2 {
    bottom: 10%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(123, 44, 191, 0.25), rgba(157, 78, 221, 0.1));
    animation-delay: -5s;
}

.blob-3 {
    top: 40%;
    left: 40%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 87, 34, 0.15), rgba(255, 138, 101, 0.05));
    animation-delay: -10s;
}

@keyframes floatBlob {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(30px, 50px) scale(1.1);
    }
}

/* ===================================
   PAGE HEADER
   =================================== */

.services-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    animation: fadeInUp 0.8s ease-out;
}

.services-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-black);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.services-title .highlight {
    background: linear-gradient(135deg, #4A90E2 0%, #50C9E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-subtitle {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===================================
   SERVICES GRID
   =================================== */

.services-grid {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 90vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--spacing-3xl);
}

/* ===================================
   SERVICE CARD
   =================================== */

.service-card {
    position: absolute;
    width: 100%;
    max-width: 900px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
    padding: var(--spacing-2xl);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
    
    /* Glassmorphism */
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Cards in queue - vertical stack at bottom center */
.service-card {
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 100px) scale(0.9);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Position cards in vertical queue based on their order */
.service-card.next {
    transform: translate(-50%, 40px) scale(0.95);
    opacity: 0.6;
    z-index: 5;
    filter: blur(2px);
}

.service-card.next-2 {
    transform: translate(-50%, 80px) scale(0.9);
    opacity: 0.3;
    z-index: 4;
    filter: blur(4px);
}

/* Active card - rises to upper area */
.service-card.active {
    top: 10%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
    filter: blur(0);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Card returning to queue */
.service-card.prev {
    transform: translate(-50%, -100px) scale(0.9);
    opacity: 0;
    z-index: 1;
}

/* ===================================
   SERVICE ICON
   =================================== */

.service-icon {
    width: 240px;
    height: 240px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    position: relative;
    overflow: visible;
    transition: all var(--transition-normal);
    padding: var(--spacing-lg);
}

/* Icon background gradients with subtle glow from Figma */
.service-card[data-color="purple"] .service-icon {
    background: linear-gradient(135deg, #7B2CBF 0%, #9D4EDD 100%);
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="purple"].active .service-icon {
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="blue"] .service-icon {
    background: linear-gradient(135deg, #2E8B9E 0%, #4FB3C5 100%);
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="blue"].active .service-icon {
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="red"] .service-icon {
    background: linear-gradient(135deg, #B83A3A 0%, #D95F5F 100%);
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="red"].active .service-icon {
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="magenta"] .service-icon {
    background: linear-gradient(135deg, #A8357A 0%, #C85A9A 100%);
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="magenta"].active .service-icon {
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="green"] .service-icon {
    background: linear-gradient(135deg, #2D8B5F 0%, #4CAF7D 100%);
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-card[data-color="green"].active .service-icon {
    box-shadow:
        0px 4.28px 8.57px 0px #FFF50040,
        0px 1.71px 21.41px 0px #E8000066;
}

.service-icon svg {
    color: white;
    position: relative;
    z-index: 1;
    transition: transform var(--transition-normal);
}

/* Font Awesome Icon Styles */
.service-icon i {
    color: white;
    font-size: 64px;
    position: relative;
    z-index: 1;
    transition: transform var(--transition-normal);
}

/* Icon Title Styles */
.icon-title {
    color: white;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    line-height: 1.3;
    margin: 0;
    position: relative;
    z-index: 1;
    max-width: 200px;
}

.service-card.active .service-icon {
    animation: iconPulse 2.5s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Icon glow effect - enhanced */
.service-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 0;
}

.service-card.active .service-icon::before {
    opacity: 1;
    animation: glowPulse 2.5s ease-in-out infinite;
}

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

/* Bottom glow line */
.service-icon::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    filter: blur(10px);
    opacity: 0.6;
}

/* ===================================
   SERVICE CONTENT
   =================================== */

.service-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.service-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: none; /* Hide on desktop since title is in icon box */
}

.service-description {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
    font-weight: 300;
}

.service-link {
    display: inline-flex;
    align-items: center;
    color: #4FB3C5;
    font-weight: var(--font-weight-semibold);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
    width: fit-content;
}

.service-link::after {
    content: '→';
    margin-left: var(--spacing-xs);
    transition: transform var(--transition-fast);
}

.service-link:hover {
    color: #50C9E9;
    transform: translateX(5px);
}

.service-link:hover::after {
    transform: translateX(5px);
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.next-service-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.next-service-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.3);
}

.next-service-btn svg {
    width: 20px;
    height: 20px;
}

/* ===================================
   CTA SECTION
   =================================== */

.services-cta {
    text-align: center;
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

/* ===================================
   SCROLL INDICATORS
   =================================== */

.card-controls {
    display: none; /* Hidden on desktop, we use the global side indicator */
}

/* On desktop, we still want the next button inside the card actions if needed, 
   but the design had it next to Get Started. 
   Wait, the original design had the next button next to Get Started. 
   We moved it to card-controls. 
   So on desktop, we should probably show card-controls but style it differently 
   OR just hide the dots and show the button. */

.card-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.card-controls .scroll-indicator {
    display: none; /* Hide dots inside card on desktop */
}

/* Global Scroll Indicator (Desktop) */
.global-scroll-indicator {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
}

.card-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Hide dots inside card on desktop */
.card-controls .scroll-indicator {
    display: none;
}

.scroll-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.scroll-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.scroll-dot.active {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
}

.scroll-dot.active::after {
    transform: translate(-50%, -50%) scale(1);
}

.scroll-dot:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.2);
}





/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
    .services-section {
        padding: calc(var(--spacing-2xl) + 60px) 0 var(--spacing-2xl);
    }

    .services-header {
        margin-bottom: var(--spacing-2xl);
    }

    .services-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .services-subtitle {
        font-size: 1rem;
        padding: 0 var(--spacing-sm);
    }

    .services-grid {
        min-height: 85vh;
    }

    /* Stack layout on mobile */
    .service-card {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
        padding: var(--spacing-xl) var(--spacing-md);
        max-width: 90%;
    }

    /* Adjust queue positions for mobile - vertical stack */
    /* Adjust queue positions for mobile - vertical stack */
    .service-card {
        bottom: 30px;
        transform: translate(-50%, 100px) scale(0.85);
    }

    .service-card.next {
        transform: translate(-50%, 60px) scale(0.9);
        opacity: 0.6;
        z-index: 5;
    }

    .service-card.next-2 {
        transform: translate(-50%, 120px) scale(0.85);
        opacity: 0.3;
        z-index: 4;
    }

    .service-card.active {
        top: 10%;
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
        z-index: 10;
    }

    .service-icon {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }

    /* Hide icon title on mobile */
    .icon-title {
        display: none;
    }

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

    .service-content {
        text-align: center;
    }

    /* Show service title on mobile */
    .service-title {
        display: block;
    }

    .service-description {
        font-size: 0.9375rem;
        margin-bottom: var(--spacing-sm);
    }

    .service-link {
        margin: 0 auto;
    }

    .card-actions {
        justify-content: center;
        margin-top: var(--spacing-sm);
    }

    .card-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: var(--spacing-md);
    }

    .service-card .next-service-btn {
        display: flex;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--color-text-primary);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--transition-normal);
    }

    .scroll-indicator {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        flex-direction: row;
        gap: 12px;
    }

    /* Show dots inside card on mobile */
    .card-controls .scroll-indicator {
        display: flex;
    }

    /* Hide global controls styles */
    .global-scroll-indicator,
    .controls-container,
    .global-next-btn {
        display: none;
    }
}

@media (max-width: 480px) {
    .services-section {
        padding: calc(var(--spacing-xl) + 60px) 0 var(--spacing-xl);
    }

    .services-header {
        margin-bottom: var(--spacing-xl);
    }

    .services-grid {
        min-height: 80vh;
    }

    .service-card {
        gap: var(--spacing-sm);
        padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-lg);
    }

    /* Tighter vertical queue for small screens */
    /* Tighter vertical queue for small screens */
    .service-card {
        bottom: 20px;
        transform: translate(-50%, 80px) scale(0.8);
    }

    .service-card.next {
        transform: translate(-50%, 50px) scale(0.85);
        opacity: 0;
        z-index: 5;
    }

    .service-card.next-2 {
        transform: translate(-50%, 100px) scale(0.8);
        opacity: 0;
        z-index: 4;
    }

    .service-card.active {
        top: 15%;
        transform: translate(-50%, 0) scale(1);
    }

    .service-icon {
        width: 100px;
        height: 100px;
    }

    .service-icon svg {
        width: 36px;
        height: 36px;
    }

    .service-icon i {
        font-size: 36px;
    }


}

/* ===================================
   SCROLL ANIMATIONS
   =================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes riseUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 100px) scale(0.7);
    }
    60% {
        opacity: 0.8;
        transform: translate(-50%, -5px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes returnToQueue {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    40% {
        opacity: 0.7;
        transform: translate(-50%, -50px) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -120px) scale(0.3);
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .navbar,
    .mobile-menu,
    .services-cta,
    .footer {
        display: none;
    }

    .service-card {
        page-break-inside: avoid;
    }
}