/*//////////////////////Hero STYLES//////////////////////*/
.hero__cta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
/*//////////////////////BTN STYLES//////////////////////*/
.btn--primary {
    background: linear-gradient(135deg, var(--e-global-color-e9395a4), var(--e-global-color-656d01e));
    color: #052413;
    box-shadow: 0 8px 18px rgba(43, 217, 127, .15);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: .8rem;
    border: 1px solid transparent;
    font-weight: 700;
    cursor: pointer;
    transition: transform .14s 
ease, box-shadow .22s 
ease, background .22s 
ease, border-color .22s 
ease;
}

.scroll-cue {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .35);
    color: var(--e-global-color-text);
    cursor: pointer;
    opacity: .9;
    transition: transform .12s 
ease, background .2s 
ease, border-color .2s 
ease;
}
.btn--primary:hover {
    box-shadow: 0 14px 28px rgba(43, 217, 127, .25);
    filter: brightness(1.06);
}
.btn:hover {
    transform: translateY(-1px);
}
.btn-secondary:hover{
    transform: translateY(-3px);
}

.live-badge {
    position: absolute;
    right: min(2rem, 4vw);
    bottom: min(2rem, 4vw);
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    color: var(--e-global-coor-text);
    font-weight: 900;
    padding: .5rem .7rem;
    border-radius: .6rem;
    box-shadow: var(--shadow);
}


/*//////////////////////CELTIC IMAGE STYLES//////////////////////*/
.cr-symbol--tl {
    animation: intro-float-b 18s 
ease-in-out infinite, intro-glow 7s 
ease-in-out infinite reverse;
}

.cr-symbol {
    pointer-events: none;
    image-rendering: auto;
    will-change: transform, filter;
    filter: brightness(.96) saturate(1.04);
}

@keyframes intro-float-a{
    0% {
    transform: translate3d(0, 0, 0);
}
20% {
    transform: translate3d(6px, -8px, 0);
}
40% {
    transform: translate3d(0, -18px, 0);
}
60% {
    transform: translate3d(-8px, -8px, 0);
}
80% {
    transform: translate3d(4px, 10px, 0);
}
100% {
    transform: translate3d(0, 0, 0);
}
}

.cr-symbol--br {
    animation: intro-float-b 16s 
ease-in-out infinite, intro-glow 7s 
ease-in-out infinite reverse;
}

.cr-symbol {
    pointer-events: none;
    image-rendering: auto;
    will-change: transform, filter;
    filter: brightness(.96) saturate(1.04);
}

@keyframes intro-float-b{
    0% {
    transform: translate3d(0, 0, 0);
}
15% {
    transform: translate3d(-12px, 8px, 0);
}
40% {
    transform: translate3d(0, 28px, 0);
}
65% {
    transform: translate3d(12px, 8px, 0);
}

85% {
    transform: translate3d(-6px, -6px, 0);
}
100% {
    transform: translate3d(0, 0, 0);
}
}

@keyframes intro-glow{
    0%, 100% {
    filter: brightness(.92) saturate(1.02);
}
50% {
    filter: brightness(1.22) saturate(1.08);
}
}


/*////////////////////////LIST STYLES////////////////////////*/
.list-check {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .35rem;
}
.list-check li {
    padding-left: 1.6rem;
    position: relative;
}
.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .08rem;
    width: 1rem;
    height: 1rem;
    border-radius: .3rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/*//////////////////////Card STYLES//////////////////////*/
.card {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow);
}


/*//////////////////////FAQ STYLES//////////////////////*/
.tt-faqlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.tt-faqlist li {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .03);
    padding: 10px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12) inset;
}
/*//////////////////////CTA Bottom STYLES//////////////////////*/

.cta-bottom-box{
    border-radius: 16px;
    border: 1px solid rgba(123, 228, 149, .22);
    background: radial-gradient(120% 140% at 8% 0%, rgba(123, 228, 149, .16), rgba(123, 228, 149, 0) 60%), rgba(255, 255, 255, .03);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18) inset, 0 12px 32px rgba(0, 0, 0, .18);
}