body {
    font-family: 'Inter', sans-serif;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient-text, .gradient-button {
    background: linear-gradient(90deg, #0e6066, #14B8A6, #2dd4bf, #0e6066);
    background-size: 200% 200%;
    animation: gradient-move 5s ease infinite;
}

.diagonal-clip {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.diagonal-clip-reverse {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}

.diagonal-clip-wave {
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}

.diagonal-clip-wave-reverse {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
}

/* --- MODIFIED class for the diagonal split on the header --- */
.header-diagonal-split::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #ffffff; /* White background */
    /* This creates a triangle covering the bottom-right, matching the image's angle */
    clip-path: polygon(100% 70%, 100% 100%, 0 100%);
    z-index: 1; /* Below content (z-10), above canvas (z-0) */
}
/* --- End of modified class --- */

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

    .scroll-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

@keyframes icon-float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.float-icon {
    animation: icon-float 6s ease-in-out infinite;
}

.gradient-button {
    background-position: 0% 50%;
    transition: background-position 0.4s ease;
}

    .gradient-button:hover {
        background-position: 100% 50%;
    }

/* Stripe-like gradient canvas (for Hero) */
#gradient-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    filter: blur(80px);
    will-change: transform, opacity;
}

.checkout-input:focus {
    outline: none;
    border-color: #2dd4bf; /* brand.lighter */
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.5);
}

.mobile-phone-frame {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 460px;
    background: #111;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 4px 8px rgba(255,255,255,0.1);
    padding: 0px;
    margin: 0 auto;
}

.mobile-phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 30px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Swiper-specific overflow */
    overflow: hidden;
}

    .mobile-phone-screen::-webkit-scrollbar {
        display: none;
    }

.mobile-phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 18px;
    background: #111;
    border-radius: 0 0 16px 16px;
    z-index: 10;
}

    .mobile-phone-notch::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 100%;
        margin-right: 8px;
        transform: translateY(-50%);
        width: 45px;
        height: 6px;
        background: #333;
        border-radius: 3px;
    }

    .mobile-phone-notch::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 100%;
        margin-left: 8px;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        background: #333;
        border-radius: 50%;
    }

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    display: flex;
    width: 200%;
    animation: scroll 30s linear infinite;
}

.logo-container img {
    height: 40px;
    margin: 0 40px;
    filter: grayscale(0);
    opacity: 1;
    transition: all 0.3s ease;
}

.logo-container:hover img {
    filter: grayscale(1);
    opacity: 0.8;
    opacity: 1;
}

#featured-services {
    position: relative;
}

/* Swiper pagination styles for phone */
.mobile-phone-frame .swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.mobile-phone-frame .swiper-pagination-bullet {
    background: #ccc;
    opacity: 0.8;
}

.mobile-phone-frame .swiper-pagination-bullet-active {
    background: #0e6066; /* brand.DEFAULT */
}


/* --- Advanced Card Stack Styles --- */
.card-stack-container {
    perspective: 1000px;
    width: 100%;
    height: 400px; /* Adjust based on need */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-stack {
    position: relative;
    width: 340px;
    height: 215px;
}

.issuing-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3), 0 0 20px rgba(0,0,0,0.1) inset;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    /* Glass shine effect base */
    z-index: 1;
}

    .issuing-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent );
        transition: 0.5s;
        pointer-events: none;
    }

    /* Stack Positions matching reference image (Up and Back) */
    .issuing-card[data-position="front"] {
        z-index: 30;
        transform: translateY(100px) scale(1.0);
        opacity: 1;
    }

    .issuing-card[data-position="middle"] {
        z-index: 20;
        transform: translateY(50px) scale(0.95) translateY(-20px); /* compound transform for better transition */
        opacity: 0.95;
        filter: brightness(0.95);
    }

    .issuing-card[data-position="back"] {
        z-index: 10;
        transform: translateY(0px) scale(0.9) translateY(-40px);
        opacity: 0.9;
        filter: brightness(0.9);
    }

    /* Hidden state for cycling */
    .issuing-card[data-position="hidden"] {
        z-index: 0;
        transform: translateY(-100px) scale(0.8);
        opacity: 0;
        pointer-events: none;
    }

/* Hover interaction */
.card-stack:hover .issuing-card[data-position="front"] {
    transform: translateY(110px) scale(1.0);
}

.card-stack:hover .issuing-card[data-position="middle"] {
    transform: translateY(40px) scale(0.95) translateY(-20px);
}

.card-stack:hover .issuing-card[data-position="back"] {
    transform: translateY(-10px) scale(0.9) translateY(-40px);
}


/* --- Specific Card Designs --- */
/* Card 1: White (Powdur inspired) */
.card-1 {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    color: #1a1a1a;
}

    .card-1 .chip {
        background: linear-gradient(135deg, #d1d5db, #9ca3af);
    }

/* Card 2: Green (Rocket Rides inspired) */
.card-2 {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
}

    .card-2 .chip {
        background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    }

/* Card 3: Dark (Kavholm inspired) */
.card-3 {
    background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    color: white;
}

    .card-3 .chip {
        background: linear-gradient(135deg, #4B5563, #374151);
    }

.pricing-card,
.invoice-card {
    transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.hero {
    background: #4A0100;
    color: white;
    padding: 150px 40px;
    position: relative;
    clip-path: ellipse(80% 100% at 20% 0%);
}


    .hero .wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }