:root {
    --primary-color: #00ff88;
    /* Bright Green */
    --secondary-color: #1f51ff;
    /* Deep Blue */
    --tertiary-color: #00e5ff;
    /* Cyan for the glow */
    --inner-bg-color: rgba(15, 30, 35, 0.9);
    --text-color: #ffffff;
    --button-height: 70px;
}

.button-wrapper {
    margin: 2rem 0;
    position: relative;
    /* perspective: 1000px; <--- REMOVED */
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* For the HERO SECTION button ONLY */
.hero-button-wrapper {
    margin: 2rem auto;
    /* Centered */
    justify-content: center;
}

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.pro-button {
    position: relative;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    width: auto;
    height: var(--button-height);
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    transition: transform 0.2s ease-out, box-shadow 0.3s ease;
    /* transform-style: preserve-3d; <--- No longer needed */
    z-index: 2;
    outline: none;
}

/* ADDED for a simpler hover effect */
.pro-button:hover {
    transform: translateY(-4px);
}

.pro-button:focus {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.pro-button::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--tertiary-color));
    border-radius: 50px;
    z-index: -1;
    filter: blur(15px);
    opacity: 0.8;
    animation: glow 2.5s infinite alternate;
}

.button-inner {
    background: var(--inner-bg-color);
    border-radius: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.button-text-wrapper {
    color: var(--text-color);
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 35px;
    white-space: nowrap;
}

#typing-text {
    /* REMOVED blinking cursor styles */
    min-height: 1.2em;
}

@keyframes glow {
    to {
        filter: blur(25px);
        opacity: 1;
    }
}

/* The @keyframes blink rule is completely deleted */

@media (prefers-reduced-motion: reduce) {

    .pro-button,
    .pro-button::before {
        animation: none;
        transition: none;
    }
}

#typing-text {
    /* The text to be typed out */
    --text: "Open Book With Zero Hidden Charges!";
    /* The number of characters in the text */
    --characters: 35;

    /* The animation that reveals the text */
    animation: typing 2.8s steps(var(--characters)),
        blink 1s step-end infinite;

    /* This adds the text content from the variable */
    content: var(--text);

    /* Required for the animation to work correctly */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid var(--primary-color);
    min-height: 1.2em;
}

/* Typing animation that reveals the text */
@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Blinking cursor animation */
@keyframes blink {
    50% {
        border-right-color: transparent;
    }
}

/* ================================================= */
/* --- Compact Button (For Other Sections) --- */
/* ================================================= */

.compact-button-wrapper {
    margin: 2rem 0;
    /* Left-aligned */
    display: flex;
    align-items: center;
}

.compact-pro-button {
    position: relative;
    display: block;
    text-decoration: none;
    height: 45px;
    /* Smaller height */
    width: auto;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    padding: 2px;
    /* Thinner border */
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease-out;
}

.compact-pro-button:hover {
    transform: translateY(-4px);
}

.compact-button-inner {
    background: var(--inner-bg-color);
    height: 100%;
    width: 100%;
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compact-button-text-wrapper {
    padding: 0 25px;
    white-space: nowrap;
    color: var(--text-color);
    font-size: 16px;
    /* Smaller font */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

@media (max-width: 768px) {

    /* --- Mobile Styles for HERO SECTION Button --- */

    .hero-button-wrapper .pro-button {
        height: var(--button-height);
        /* Use fixed height instead of auto */
        min-height: var(--button-height);
        padding: 1;
        min-height: 50px;
    }

    /* SMALLER BUTTON DURING TYPING */
    .hero-button-wrapper .pro-button[data-typing="true"] {
        min-height: auto;
    }

    .hero-button-wrapper .button-inner {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* OPTIONAL: Smaller font during typing for even smaller button */
    .hero-button-wrapper .pro-button[data-typing="true"] .button-text-wrapper {
        font-size: 16px;
        /* Reduced from 18px */
    }

    .hero-button-wrapper .button-text-wrapper {
        font-size: 18px;
        padding: 0 20px !important;
        margin: 0 !important;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }

    /* Rest of your code remains the same... */

    .hero-button-wrapper #typing-text {
        /* exactly the same desktop animation timing */
        animation: typing 2.8s steps(var(--characters)),
            blink 1s step-end infinite;
        /* force the overflow/width so the "cursor" works */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        /* bring back the cursor bar */
        border-right: 3px solid var(--primary-color);
    }

    /* Force consistent button width on mobile */
    .compact-button-wrapper {
        max-width: 370px;
        /* Adjust this value as needed */
    }

    /* --- Mobile Styles for COMPACT Button --- */
    .compact-pro-button {
        width: 100%;
        /* Make button fill wrapper */
        height: auto;
        min-height: 40px;
        /* Reduced from 50px */
        padding: 1px;
        /* Reduced from 0px to 1px for thinner border */
    }

    .compact-button-text-wrapper {
        font-size: 14px;
        /* Reduced from 16px */
        padding: 6px 12px;
        /* Reduced padding: vertical and horizontal */

        /* This allows the text to wrap and stack */
        white-space: normal;
        text-align: center;
        line-height: 1.3;
        word-break: break-word;
        /* Add this for consistent breaking */
    }

    /* ============================================= */
    /* After typing animation ends, allow wrapping  */
    /* ============================================= */
    .hero-button-wrapper #typing-text.wrap {
        white-space: normal !important;
        overflow: visible !important;
        width: auto !important;
        border-right: none !important;
    }

}