/* Intro Cards Section Styles */
.info-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(28, 28, 28, 0.08);
    transition: all 0.3s ease-out;
    border-radius: 24px;
    padding: 24px;
    background: linear-gradient(96.85deg, #FFFFFF 0%, #EAEAEA 100%);
    min-height: 250px;
}

.info-card:hover { border-color: rgba(244, 89, 37, 0.4); }

.info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 247, 243, 0.94) 48%, rgba(255, 238, 230, 0.92) 100%);
    z-index: 1;
}

.info-card:hover::before { opacity: 1; }

.info-card-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.info-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #E3E3E3;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #FFFFFF 18.75%, #E3E3E3 109.37%);
    color: #1C1C1C;
    transition: all 0.3s ease;
}

.info-card:hover .info-card-icon {
    background: linear-gradient(135deg, #FF8056 18.75%, #FFD0C0 109.37%);
    color: white;
    border-color: #F2B9A6;
    box-shadow: 0 2px 8px rgba(244, 89, 37, 0.15);
}

.info-card h3 {
    margin-top: 16px;
    font-size: 28px;
    color: #171717;
    font-weight: 500;
}

.info-card p {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(28, 28, 28, 0.64);
}

@media (min-width: 1024px) {
    .info-card-tall { height: 665px; }
    .info-card-short { height: calc((665px - 20px) / 2); }
}

/* Stay Ahead Section Styles */
.stay-ahead-glow {
    position: absolute;
    left: 50%;
    top: -267px;
    z-index: 0;
    height: 1216px;
    width: 446px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(180deg, #5090FF 0%, rgba(80, 144, 255, 0) 100%);
    filter: blur(225px);
    pointer-events: none;
}

.bullet-dot {
    height: 8px;
    width: 8px;
    background-color: #F45925;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Fix only 1024px viewport horizontal spacing for Stay Ahead section */
@media (min-width: 1024px) and (max-width: 1100px) {
    .elementor-widget-vos_stay_ahead_widget .vos-stay-ahead-section > .relative.z-10 {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    #home-services {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .elementor-widget-vos_services_slider_widget #home-services > .mx-auto.w-full.max-w-\[1440px\] {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Insights Section Styles */
.insights-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    height: 520px;
    width: 520px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(244, 89, 37, 0.55) 0%,
        rgba(244, 89, 37, 0.22) 38%,
        rgba(244, 89, 37, 0.06) 62%,
        transparent 100%
    );
    filter: blur(48px);
    pointer-events: none;
    animation: insightsGlowPulse 5s ease-in-out infinite alternate;
}

@keyframes insightsGlowPulse {
    from { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

.insights-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.12) 70%, transparent 100%);
}

.stat-separator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.2), transparent);
}

/* Process Section: ring spin animation */
.ring-spin-layer {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(155, 184, 244, 0.95);
    border-right-color: rgba(155, 184, 244, 0.55);
    animation: ringSpin 11s linear infinite;
}

@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#process-scene {
    background: #F4F4F4;
    position: relative;
}

/* Cards: hidden by default (GSAP sets absolute + opacity per card) */
.process-card-desktop {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: transform, opacity;
    display: flex;
    align-items: center;
}

/* On desktop, ensure the h2 sits above the scene */
@media (min-width: 1024px) {
    #the-process .sticky {
        z-index: 50;
        background: rgba(244,244,244,0.95);
    }
}

/* Process mobile card stack tuning */
.process-mobile-stack .process-card-mobile-sticky {
    top: calc(94px + (var(--stack-index, 0) * 14px));
}

@media (max-width: 639px) {
    .process-mobile-stack .process-card-mobile-sticky {
        top: calc(76px + (var(--stack-index, 0) * 12px));
    }
}

.process-visual-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.text-gradient-vos {
    background: linear-gradient(90deg, #00A3FF 0%, #FF3A2D 50%, #0750CE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Testimonials Section Styles */
.testimonial-marquee {
    display: flex;
    width: max-content;
    animation: testimonialMarquee 28s linear infinite;
    will-change: transform;
}

@keyframes testimonialMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.testimonial-dot {
    height: 6px;
    border-radius: 9999px;
    transition: all 0.3s;
}

.testimonial-dot.active { width: 32px; background-color: #FF5029; }
.testimonial-dot.inactive { width: 16px; background-color: rgba(255, 255, 255, 0.2); }

/* Services Slider Section Styles */
.service-card {
    height: 380px;
    perspective: 1400px;
    position: relative;
}

@media (min-width: 1280px) {
    .service-card { height: 550px; }
}

.service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
}

.service-card:hover .service-card-inner {
    transform: rotateY(180deg);
}

.service-card-front, .service-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(28, 28, 28, 0.08);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.86) 0%, rgba(247, 247, 247, 0.86) 42%, rgba(236, 236, 236, 0.84) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 20px rgba(0, 0, 0, 0.035);
}

.service-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, rgba(250, 250, 250, 0.98) 0%, rgba(239, 239, 239, 0.98) 100%);
}

.service-card-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}

.service-card:hover .service-card-glow {
    opacity: 1;
}

.service-card-glow-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    background: linear-gradient(to top, rgba(244, 89, 37, 0.28), rgba(244, 89, 37, 0.14), transparent);
    transition: height 0.3s ease-out;
}

.service-card:hover .service-card-glow-track {
    height: 70%;
}

.service-card-glow-bubble {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -14px;
    height: 56px;
    background: radial-gradient(circle at center, rgba(244, 89, 37, 0.82) 0%, rgba(244, 89, 37, 0.42) 38%, rgba(244, 89, 37, 0) 76%);
    filter: blur(12px);
    border-radius: 100% 100% 0 0;
}

/* Insights Section Styles */
.insights-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 420px;
    width: 760px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(244, 89, 37, 0.28) 0%, rgba(244, 89, 37, 0.12) 28%, rgba(244, 89, 37, 0.02) 52%, transparent 75%);
    filter: blur(48px);
    pointer-events: none;
    z-index: 0;
}

.stat-separator {
    position: absolute;
    left: -12px;
    top: 50%;
    width: 1px;
    height: 56px;
    transform: translateY(-50%);
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.insights-divider {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.insights-dots span {
    display: inline-block;
    pointer-events: none;
}

.vos-stay-ahead-section,
.vos-stay-ahead-section.bg-black,
.elementor-widget-vos_stay_ahead_widget .vos-stay-ahead-section,
.elementor-widget-vos_stay_ahead_widget .vos-stay-ahead-section.bg-black {
    background: transparent !important;
}

.help-card-accurate {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(243,243,241,0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 18px 42px rgba(0,0,0,0.045);
}

.help-card-surface {
    background: linear-gradient(135deg, rgba(255,255,255,0.99) 0%, rgba(243,243,241,0.98) 100%);
}

.help-card-hero {
    z-index: 2;
}

.help-card-hero-fixed {
    height: 340px;
}

.help-card-content-offset {
    height: 286px;
}

.help-card-globe-stage {
    filter: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.help-card-network-bg {
    background: #111827;
}

.help-card-globe-stage .mini-globe-vanta-container,
.help-card-globe-stage .vanta-canvas,
.help-card-globe-stage canvas {
    display: block;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.help-card-hero-fade {
    background: linear-gradient(to bottom, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.35) 100%);
}

.help-card-icon {
    border-color: rgba(216, 216, 214, 0.95) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(237,237,235,0.95) 100%) !important;
    color: #262626 !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    margin-top: 30px !important;
}

.help-card-accurate:hover {
    border-color: rgba(244, 89, 37, 0.25) !important;
}

.help-card-accurate:hover .help-card-icon {
    border-color: #F2B9A6 !important;
    background: linear-gradient(135deg, #FF8056 18.75%, #FFD0C0 109.37%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(244, 89, 37, 0.15);
}

.help-card-accurate:hover .intro-card-icon-box.help-card-icon {
    border-color: #F2B9A6 !important;
    background: linear-gradient(135deg, #FF8056 18.75%, #FFD0C0 109.37%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(244, 89, 37, 0.15);
}

.help-card-accurate .relative.z-10 {
    z-index: 10;
}

@media (max-width: 1023px) {
    .help-card-hero-fixed {
        height: 312px;
    }

    .help-card-content-offset {
        height: 258px;
    }

    .help-card-globe-stage {
        top: 0;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 639px) {
    .help-card-accurate {
        padding: 24px;
    }

    .help-card-hero-fixed {
        height: 272px;
    }

    .help-card-content-offset {
        height: 228px;
    }

    .help-card-globe-stage {
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}