:root {
    --bg-dark: #0b1126;
    --bg-card: #111b43;
    --bg-card-hover: #162454;
    --bg-dark-alt: #0f1838;
    --bg-icon: #1a2b61;
    --bg-surface: #101a3c;
    --bg-footer: #0a1027;
    --text-main: #f3f6ff;
    --text-muted: #c6d1ea;
    --accent-gold: #35d9c3;
    --accent-taupe: #c4d0e4;
    --accent: #35d9c3;
    --brand-violet: #2b7ab8;
    --brand-royal: #1f5d94;
    --brand-blue: #35d9c3;
    --brand-yellow: #c9a84c;
    --font-serif: "Playfair Display", serif;
    --font-sans: "Inter", sans-serif
}

*,
:after,
:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    background: radial-gradient(circle at 12% 4%, rgba(53, 217, 195, .14), transparent 28%), radial-gradient(circle at 86% 2%, rgba(201, 168, 76, .12), transparent 30%), radial-gradient(circle at 50% 110%, rgba(55, 106, 167, .1), transparent 42%), var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

.serif,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif)
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

button {
    border: none;
    cursor: pointer
}

button,
input,
select {
    font-family: inherit
}

.container {
    max-width: 1280px
}

.container,
.container-wide {
    margin: 0 auto;
    padding: 0 1.5rem
}

.container-wide {
    max-width: 1600px
}

.book-shadow {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .5)
}

.book-hover {
    transition: all .3s ease
}

.book-hover:hover {
    box-shadow: inset -2px 0 2px hsla(0, 0%, 100%, .15), 0 20px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(52, 217, 195, .3);
    transform: translateY(-5px) scale(1.02)
}

.glass-panel {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(20, 20, 22, .7);
    border: 1px solid hsla(0, 0%, 100%, .08)
}

@keyframes scroll-left {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%)
    }

    to {
        transform: translateX(0)
    }
}

.marquee-left {
    animation: scroll-left 60s linear infinite
}

.marquee-right {
    animation: scroll-right 60s linear infinite
}

.shimmer-el {
    background: linear-gradient(90deg, transparent 0, hsla(0, 0%, 100%, .05) 50%, transparent);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skewX(-20deg) translateX(-150%);
    transition: transform .5s;
    width: 100%
}

.btn-glow:hover .shimmer-el {
    transform: skewX(-20deg) translateX(150%);
    transition: transform .7s
}

.no-scrollbar::-webkit-scrollbar {
    display: none
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

@media (max-width:767px) {
    .hide-mobile {
        display: none !important
    }
}

@media (min-width:768px) {
    .hide-desktop {
        display: none !important
    }
}

#hs-eu-cookie-confirmation,
.hs-cookie-notification-position-bottom,
.hs-cookie-notification-position-top {
    background: #f8f8fb !important;
    border: 1px solid rgba(46, 28, 114, .12) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 38px rgba(20, 10, 58, .22) !important
}

#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner,
#hs-eu-cookie-confirmation .hs-cookie-notification__inner,
#hs-eu-cookie-confirmation div,
#hs-eu-cookie-confirmation p {
    color: #324e76 !important
}

#hs-eu-cookie-confirmation #hs-eu-confirmation-button,
#hs-eu-cookie-confirmation .hs-button,
#hs-eu-cookie-confirmation button {
    background: #49698d !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important
}

#hs-eu-cookie-confirmation #hs-eu-confirmation-button:hover,
#hs-eu-cookie-confirmation .hs-button:hover,
#hs-eu-cookie-confirmation button:hover {
    background: var(--bg-dark) !important
}