/* Custom styles */
.gradient-text {
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.12);
}

/* Add these to your existing style section */
.use-case-card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.use-case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* How It Works Section Styles */
/* Two-row process flow for desktop */
.two-row-process {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.process-row {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 50px;
    padding: 0 15%;
}

.process-row.reverse {
    flex-direction: row-reverse;
}

.process-step-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 30%;
    position: relative;
    z-index: 1;
}

.process-icon {
    width: 60px;
    height: 60px;
    background-color: white;
    border: 4px solid rgba(99, 102, 241, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.process-step-box:hover .process-icon {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.8);
}

.step-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(99, 102, 241);
}

.process-content {
    max-width: 100%;
}

/* Mobile process styles */
.mobile-process-container {
    display: flex;
    flex-direction: column;
    gap: 36px;
    position: relative;
}

.mobile-process-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 3px;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.5), rgba(99, 102, 241, 0.2));
    border-radius: 3px;
    z-index: 0;
}

.mobile-process-step {
    position: relative;
}

.mobile-process-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.mobile-step-number {
    width: 40px;
    height: 40px;
    background-color: white;
    border: 3px solid rgba(99, 102, 241, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgb(99, 102, 241);
    position: relative;
    z-index: 1;
}

.icon-wrapper::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.1;
    z-index: -1;
    transform: scale(0);
    transition: transform 0.3s ease-out;
}

.use-case-card:hover .icon-wrapper::after {
    transform: scale(2.5);
}

/* JSON Scrollbar */
pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

pre::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Animation */
@keyframes float {

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

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

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

.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
    /* Horizontal scrollbar height */
    width: 8px;
    /* Vertical scrollbar width (if ever needed) */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    /* Lighter track on dark background */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    /* Slightly more visible thumb */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Styles for the pre and code block for proper scrolling */
pre.custom-scrollbar {
  overflow-x: auto; /* Ensure pre tag itself can scroll horizontally */
  /* Consider adding a max-width if the parent isn't constraining it on mobile,
     though usually the parent grid/flex container should handle this.
     max-width: 100%;
  */
}

pre.custom-scrollbar code.hljs {
  display: block;      /* Make it a block element to control its overflow */
  white-space: pre;    /* Preserve whitespace and prevent line wrapping by default */
  overflow-x: auto;    /* Allow the code block itself to scroll if its content is wider */
  min-width: 100%;     /* Ensure it tries to take at least the width of the pre tag */
  /* The above line might seem counterintuitive with overflow-x, but it helps when the
     content *isn't* overflowing, ensuring it still fills the pre. If content *is*
     wider, overflow-x will kick in. Alternatively, some setups work without min-width. */
}