:root {
    --cinema-ink: #111827;
    --cinema-blue: #76a9ff;
    --cinema-mint: #83f0cf;
}

body {
    font-family: "Manrope", "Radio Canada", system-ui, sans-serif !important;
    letter-spacing: .005em;
}

h1, h2, h3, h4, .display-5 {
    font-family: "Space Grotesk", "Manrope", system-ui, sans-serif;
    letter-spacing: -.035em;
}

section.background-image,
section.pt-5.bg-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.cinematic-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .68;
}

section.background-image > :not(.cinematic-canvas),
section.pt-5.bg-dark > :not(.cinematic-canvas) {
    position: relative;
    z-index: 1;
}

section.background-image {
    background-color: #080d18;
    background-blend-mode: screen;
}

section.background-image::before,
section.pt-5.bg-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 76% 18%, rgba(48, 105, 202, .22), transparent 42%),
        linear-gradient(115deg, rgba(5, 10, 24, .34), transparent 68%);
}

section.background-image > :not(.cinematic-canvas),
section.pt-5.bg-dark > :not(.cinematic-canvas) {
    z-index: 2;
}

.payment_protocol_button {
    border: 1px solid rgba(32, 48, 68, .1) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 7px 22px rgba(16, 28, 48, .055) !important;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.payment_protocol_button:hover,
.payment_protocol_button:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(57, 127, 255, .3) !important;
    box-shadow: 0 14px 30px rgba(24, 63, 118, .13) !important;
}

.payment_protocol_button img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: none !important;
}

.explore-tabs .nav-link a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
}

.explore-tabs .nav-link img {
    width: 19px !important;
    height: 19px !important;
    padding: 2px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(10, 20, 35, .16);
    vertical-align: middle;
}

.cinematic-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .25, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .cinematic-canvas { display: none; }
    .cinematic-reveal { opacity: 1; transform: none; }
}
