/* =========================================
   HOME CTA - CLEAN LIGHT LUXURY CTA
========================================= */

.velo-home-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: clamp(500px, 58vh, 660px);
    display: flex;
    align-items: center;

    padding: clamp(78px, 7vw, 115px) 24px;

    color: #07101f;
    background: #f7fbff;
}

/* Background image - no opacity, no overlay */
.velo-home-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image: url("https://orlandoprodetail.net/wp-content/uploads/2026/07/ChatGPT-Image-Jul-3-2026-03_57_23-AM.png");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;

    pointer-events: none;
}

/* No dark layer */
.velo-home-cta::after {
    display: none;
}

/* Inner container */
.velo-home-cta__inner {
    position: relative;
    z-index: 2;

    width: min(100%, 1320px);
    max-width: 1320px;

    margin-left: auto;
    margin-right: auto;

    text-align: left;
}

/* Remove old texture panel */
.velo-home-cta .velo-home-cta__inner::before {
    display: none;
}

/* Text block */
.velo-home-cta__inner > .velo-kicker,
.velo-home-cta__inner > h2,
.velo-home-cta__inner > p,
.velo-home-cta__inner > .velo-actions {
    width: 100%;
    max-width: 520px;
}

/* Kicker */
.velo-home-cta .velo-kicker {
    margin: 0 0 18px;

    font-family: "Jura", Arial, sans-serif;
    font-size: clamp(0.96rem, 1.02vw, 1.22rem);
    font-weight: 1000;
    line-height: 1.2;
    letter-spacing: 0.24em;
    text-transform: uppercase;

    color: #00aef5;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 16px rgba(69, 217, 255, 0.34);
}

/* Heading */
.velo-home-cta h2 {
    margin: 0;

    font-family: "Jura", Arial, sans-serif;
    font-size: clamp(2rem, 3.25vw, 3.75rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.035em;
    text-wrap: balance;

    color: #07101f;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 22px rgba(255, 255, 255, 0.8),
        0 10px 28px rgba(7, 16, 31, 0.1);
}

/* Paragraph */
.velo-home-cta p {
    margin: 22px 0 0;

    font-size: clamp(0.9rem, 0.95vw, 1.05rem);
    font-weight: 500;
    line-height: 1.68;

    color: #1c3148;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92),
        0 8px 22px rgba(7, 16, 31, 0.08);
}

/* =========================================
   CTA BUTTONS - ANGLED LUXURY SHAPE
========================================= */

.velo-home-cta .velo-actions,
.velo-home-cta__inner > .velo-actions {
    width: min(100%, 520px);
    max-width: 520px;
    margin: 30px 0 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;

    text-align: center;
}

/* Both buttons same size + angled shape */
.velo-home-cta .velo-button,
.velo-home-cta .velo-button--primary,
.velo-home-cta .velo-button--ghost {
    position: relative;

    width: 205px;
    min-width: 205px;
    height: 62px;
    padding: 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    font-family: "Jura", Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: none;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    border: 0;
    border-radius: 10px 10px 26px 10px;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

/* Primary button with visible pulsing glow */
.velo-home-cta .velo-button--primary {
    background: linear-gradient(135deg, #007cff 0%, #00b8ff 100%);
    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 12px 28px rgba(0, 124, 255, 0.28);

    filter:
        drop-shadow(0 0 10px rgba(0, 184, 255, 0.45))
        drop-shadow(0 0 18px rgba(69, 217, 255, 0.28));

    animation: veloCtaPulse 1.8s ease-in-out infinite;
}

/* Primary button with real glow behind it */
.velo-home-cta .velo-button--primary {
    position: relative;
    isolation: isolate;
    overflow: visible;

    background: linear-gradient(135deg, #007cff 0%, #00b8ff 100%);
    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 12px 28px rgba(0, 124, 255, 0.22);

    animation: veloCtaButtonBreath 2.2s ease-in-out infinite;
}

/* Glow layer behind primary button */
.velo-home-cta .velo-button--primary::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;

    border-radius: 16px 16px 34px 16px;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 184, 255, 0.42) 0%,
            rgba(69, 217, 255, 0.26) 38%,
            rgba(69, 217, 255, 0.08) 62%,
            rgba(69, 217, 255, 0) 78%
        );

    filter: blur(12px);
    opacity: 0.65;

    animation: veloCtaGlowPulse 2.2s ease-in-out infinite;
    pointer-events: none;
}

/* Button movement */
@keyframes veloCtaButtonBreath {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.018);
    }

    100% {
        transform: scale(1);
    }
}

/* Actual glowing aura */
@keyframes veloCtaGlowPulse {
    0% {
        opacity: 0.45;
        filter: blur(10px);
        transform: scale(0.96);
    }

    50% {
        opacity: 0.95;
        filter: blur(18px);
        transform: scale(1.08);
    }

    100% {
        opacity: 0.45;
        filter: blur(10px);
        transform: scale(0.96);
    }
}

/* Hover */
.velo-home-cta .velo-button--primary:hover {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.02);

    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    color: #07101f;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 18px 42px rgba(7, 16, 31, 0.24);
}

.velo-home-cta .velo-button--primary:hover::before {
    animation-play-state: paused;
    transform: scale(1.08);
}

/* Ghost button */
.velo-home-cta .velo-button--ghost {
    background: rgba(255, 255, 255, 0.58);
    color: #07101f;
    border: 1px solid rgba(7, 16, 31, 0.16);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 12px 28px rgba(7, 16, 31, 0.08);
}

/* Hover states */
.velo-home-cta .velo-button:hover {
    transform: translateY(-2px);
}

.velo-home-cta .velo-button--primary:hover {
    animation-play-state: paused;

    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    color: #1b4c9e;

    box-shadow:
        0 20px 46px rgba(7, 16, 31, 0.22),
        0 0 34px rgba(69, 217, 255, 0.32);
}

.velo-home-cta .velo-button--ghost:hover {
    background: rgba(255, 255, 255, 0.82);
    color: #1b4c9e;

    box-shadow:
        0 0 28px rgba(69, 217, 255, 0.22),
        0 14px 32px rgba(7, 16, 31, 0.1);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {
    .velo-home-cta {
        min-height: clamp(520px, 64vh, 700px);
        padding: 82px 24px;
    }

    .velo-home-cta::before {
        background-position: 68% center;
    }

    .velo-home-cta__inner > .velo-kicker,
    .velo-home-cta__inner > h2,
    .velo-home-cta__inner > p,
    .velo-home-cta__inner > .velo-actions {
        max-width: 500px;
    }

    .velo-home-cta h2 {
        font-size: clamp(1.9rem, 4vw, 3.25rem);
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {
    .velo-home-cta {
        min-height: 590px;
        padding: 78px 18px;
        align-items: center;
    }

    .velo-home-cta::before {
        background-position: 72% center;
        opacity: 0.38;
    }

    .velo-home-cta__inner {
        text-align: center;
    }

    .velo-home-cta__inner > .velo-kicker,
    .velo-home-cta__inner > h2,
    .velo-home-cta__inner > p,
    .velo-home-cta__inner > .velo-actions {
        max-width: 100%;
    }

    .velo-home-cta .velo-kicker {
        margin-bottom: 16px;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
    }

    .velo-home-cta h2 {
        font-size: clamp(1.8rem, 8.5vw, 2.8rem);
        line-height: 1.08;
    }

    .velo-home-cta p {
        margin-top: 18px;
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .velo-home-cta .velo-actions,
    .velo-home-cta__inner > .velo-actions {
        margin-top: 26px;
        justify-content: center;
    }

    .velo-home-cta .velo-button,
    .velo-home-cta .velo-button--primary,
    .velo-home-cta .velo-button--ghost {
        width: 100%;
        max-width: 270px;
        min-width: 0;
        height: 58px;
    }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
    .velo-home-cta .velo-button--primary {
        animation: none;
    }
}