.navbar.svelte-1mko630 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 25px 40px;
    transition: all .3s ease
}

.scrolled.svelte-1mko630 {
    padding: 15px 40px
}

.scrolled.hovered.svelte-1mko630 {
    padding: 18px 40px
}

.navbar-container.svelte-1mko630 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #0a051980;
    border-radius: 16px;
    padding: 12px 25px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1);
    height: 65px;
    box-shadow: 0 8px 32px #0003;
    transition: all .3s ease
}

.navbar.hovered.svelte-1mko630 .navbar-container:where(.svelte-1mko630) {
    background-color: #0d071fcc;
    border-color: #ffffff26;
    box-shadow: 0 12px 40px #0000004d,0 0 15px #512feb1a
}

.logo.svelte-1mko630 {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -.02em;
    transition: all .3s ease
}

.logo.svelte-1mko630:hover {
    transform: translateY(-2px)
}

.logo.svelte-1mko630 img:where(.svelte-1mko630) {
    height: 100%;
    object-fit: contain
}

.logo-text.svelte-1mko630 {
    display: block;
    background: linear-gradient(to right,#fff,#a192ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent
}

.nav-links.svelte-1mko630 {
    display: flex;
    align-items: center;
    gap: 30px;
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.nav-link.svelte-1mko630 {
    color: #fffc;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    padding: 5px 10px;
    position: relative;
    transition: all .2s ease
}

.nav-link.svelte-1mko630:hover,.nav-link.hovered.svelte-1mko630 {
    color: #fff
}

.nav-link.active.svelte-1mko630 {
    color: #fff;
    font-weight: 500
}

.active-indicator.svelte-1mko630 {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%);
    width: 16px;
    height: 3px;
    background-color: #512febe6;
    border-radius: 10px
}

.nav-buttons.svelte-1mko630 {
    display: flex;
    align-items: center;
    gap: 16px
}

.auth-link.svelte-1mko630 {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 8px;
    transition: all .3s ease;
    font-weight: 400;
    letter-spacing: .2px
}

.auth-link.login.svelte-1mko630 {
    background-color: #ffffff14;
    border: 1px solid rgba(255,255,255,.1)
}

.auth-link.register.svelte-1mko630 {
    background-color: #512feb26;
    border: 1px solid rgba(81,47,235,.3);
    color: #fffffff2
}

.auth-link.login.svelte-1mko630:hover {
    background-color: #ffffff1f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #00000026
}

.auth-link.register.svelte-1mko630:hover {
    background-color: #512feb40;
    border-color: #512feb66;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px #512feb40
}

.mobile-menu-toggle.svelte-1mko630 {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #ffffff0d;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease
}

.mobile-menu-toggle.svelte-1mko630:hover {
    background-color: #ffffff1a
}

.hamburger.svelte-1mko630 {
    width: 24px;
    height: 18px;
    position: relative
}

.hamburger.svelte-1mko630 span:where(.svelte-1mko630) {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 0;
    transition: all .3s ease
}

.hamburger.svelte-1mko630 span:where(.svelte-1mko630):nth-child(1) {
    top: 0
}

.hamburger.svelte-1mko630 span:where(.svelte-1mko630):nth-child(2) {
    top: 50%;
    transform: translateY(-50%)
}

.hamburger.svelte-1mko630 span:where(.svelte-1mko630):nth-child(3) {
    bottom: 0
}

.hamburger.open.svelte-1mko630 span:where(.svelte-1mko630):nth-child(1) {
    transform: translateY(8px) rotate(45deg)
}

.hamburger.open.svelte-1mko630 span:where(.svelte-1mko630):nth-child(2) {
    opacity: 0
}

.hamburger.open.svelte-1mko630 span:where(.svelte-1mko630):nth-child(3) {
    transform: translateY(-8px) rotate(-45deg)
}

.mobile-backdrop.svelte-1mko630 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000b3;
    z-index: 80;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px)
}

.mobile-menu.svelte-1mko630 {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 80px);
    max-width: 400px;
    background-color: #0d071ff2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 15px 40px #0000004d,0 0 20px #512feb26;
    padding: 20px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.mobile-nav-links.svelte-1mko630 {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.mobile-separator.svelte-1mko630 {
    height: 1px;
    background-color: #ffffff1a;
    margin: 10px 0
}

.mobile-link.svelte-1mko630 {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 10px;
    transition: all .2s ease
}

.mobile-link.svelte-1mko630:hover,.mobile-link.active.svelte-1mko630 {
    background-color: #ffffff1a
}

.mobile-link.highlight.svelte-1mko630 {
    background-color: #512feb33;
    border: 1px solid rgba(81,47,235,.3)
}

.mobile-link.highlight.svelte-1mko630:hover {
    background-color: #512feb4d
}

.mobile-link.discord.svelte-1mko630 {
    margin-top: 5px;
    color: #ffffffe6
}

.desktop-only.svelte-1mko630 {
    display: flex
}

@media (max-width: 1024px) {
    .nav-links.svelte-1mko630 {
        display:none
    }
}

@media (max-width: 809px) {
    .navbar.svelte-1mko630 {
        padding:15px 20px
    }

    .scrolled.svelte-1mko630 {
        padding: 10px 20px
    }

    .scrolled.hovered.svelte-1mko630 {
        padding: 12px 20px
    }

    .navbar-container.svelte-1mko630 {
        border-radius: 12px;
        padding: 10px 15px;
        height: 55px
    }

    .logo.svelte-1mko630 {
        height: 38px;
        font-size: 18px
    }

    .desktop-only.svelte-1mko630 {
        display: none
    }

    .mobile-menu-toggle.svelte-1mko630 {
        display: flex
    }

    .mobile-menu.svelte-1mko630 {
        top: 75px;
        width: calc(100% - 40px);
        padding: 15px
    }

    .scrolled.svelte-1mko630 .mobile-menu:where(.svelte-1mko630) {
        top: 70px
    }
}

@media (min-width: 810px) and (max-width: 1024px) {
    .navbar-container.svelte-1mko630 {
        padding:10px 20px
    }

    .auth-link.svelte-1mko630 {
        font-size: 14px;
        padding: 6px 12px
    }
}

.hero.svelte-1v51mc0 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 160px 40px 100px;
    min-height: 100vh;
    overflow: hidden
}

.light-effect.svelte-1v51mc0 {
    position: absolute;
    filter: blur(80px);
    opacity: .35;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none
}

.light-effect.left.svelte-1v51mc0 {
    top: -100px;
    left: -200px;
    width: 800px;
    height: 800px;
    background: #512feb33;
    animation: svelte-1v51mc0-pulse 15s infinite alternate
}

.light-effect.right.svelte-1v51mc0 {
    bottom: -200px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: #512feb26;
    animation: svelte-1v51mc0-pulse 20s infinite alternate-reverse
}

.light-effect.center.svelte-1v51mc0 {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1200px;
    height: 800px;
    background: radial-gradient(ellipse at center,#512feb08,#0000 70%);
    z-index: -1
}

.particles.svelte-1v51mc0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0
}

.particle.svelte-1v51mc0 {
    position: absolute;
    width: var(--size);
    height: var(--size);
    background-color: #512feb4d;
    border-radius: 50%;
    top: var(--y);
    left: var(--x);
    animation: svelte-1v51mc0-float var(--duration) linear infinite;
    animation-delay: var(--delay)
}

@keyframes svelte-1v51mc0-float {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    to {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0
    }
}

@keyframes svelte-1v51mc0-pulse {
    0% {
        opacity: .2;
        transform: scale(1)
    }

    50% {
        opacity: .3
    }

    to {
        opacity: .2;
        transform: scale(1.05)
    }
}

.hero-content.svelte-1v51mc0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
    margin-bottom: 50px
}

.badge.svelte-1v51mc0 {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #0d0d0dd9;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
    padding: 7px 14px;
    margin-bottom: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px #0003
}

.badge.svelte-1v51mc0 span:where(.svelte-1v51mc0) {
    font-size: 14px;
    font-weight: 400;
    color: #ffffffe6
}

.header.svelte-1v51mc0 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 15px
}

h1.svelte-1v51mc0 {
    font-family: Outfit,sans-serif;
    font-size: 72px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1em;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 30px rgba(81,47,235,.5);
}

.gradient-text.svelte-1v51mc0 {
    background: linear-gradient(to right,#fff,#a192ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    margin-top: 5%;
}

.subtext {
  font-size: 3.5vmin;
  background: linear-gradient(to right,#fff,#777777);
  color: transparent;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: 1%;
  margin-bottom: 0;
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Inter', sans-serif;
}

.header.svelte-1v51mc0 p:where(.svelte-1v51mc0) {
    font-size: 20px;
    color: #ffffffe6;
    max-width: 550px;
    margin: 0;
    line-height: 1.5
}

.header.svelte-1v51mc0 p:where(.svelte-1v51mc0) strong:where(.svelte-1v51mc0) {
    color: #a192ff;
    font-weight: 500
}

.status-indicator.svelte-1v51mc0 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #0d0d0dd9;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 8px 16px;
    margin: 5px 0 20px;
    font-size: 15px;
    font-weight: 500;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px #0003;
    transition: all .3s ease
}

.status-up.svelte-1v51mc0 {
    color: #4ade80;
    border-left: 4px solid #4ade80
}

.status-down.svelte-1v51mc0 {
    color: #f87171;
    border-left: 4px solid #f87171
}

.status-error.svelte-1v51mc0 {
    color: #fbbf24;
    border-left: 4px solid #fbbf24
}

.status-loading.svelte-1v51mc0 {
    color: #a192ff;
    border-left: 4px solid #a192ff
}

.loading-spinner.svelte-1v51mc0 {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(161,146,255,.3);
    border-radius: 50%;
    border-top-color: #a192ff;
    animation: svelte-1v51mc0-spin 1s linear infinite
}

@keyframes svelte-1v51mc0-spin {
    to {
        transform: rotate(360deg)
    }
}

.stats-container.svelte-1v51mc0 {
    display: flex;
    gap: 40px;
    margin: 10px 0 40px
}

.stat.svelte-1v51mc0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.stat-value.svelte-1v51mc0 {
    font-size: 26px;
    font-weight: 600;
    color: #a192ff
}

.stat-label.svelte-1v51mc0 {
    font-size: 14px;
    color: #ffffffb3
}

.cta-buttons.svelte-1v51mc0 {
    display: flex;
    gap: 16px
}

.btn.svelte-1v51mc0 {
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all .3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px #00000026
}

.btn-primary.svelte-1v51mc0 {
    background-color: #512febe6;
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    width: auto;
    min-width: 140px;
    max-width: fit-content;
    height: 48px;
    padding: 0 20px;
    box-shadow: 0 4px 20px #512feb66
}

.btn-animation-container.svelte-1v51mc0 {
    position: relative;
    height: 24px;
    overflow: hidden;
    width: 100%
}

.btn-text-container.svelte-1v51mc0 {
    position: relative;
    transition: transform .3s ease
}

.btn-text.svelte-1v51mc0 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 24px;
    white-space: nowrap
}

.slide-up.svelte-1v51mc0 {
    transform: translateY(-24px)
}

.btn-secondary.svelte-1v51mc0 {
    background-color: #ffffff14;
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    height: 48px;
    width: auto;
    min-width: 140px;
    max-width: fit-content;
    padding: 0 20px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.discord-icon.svelte-1v51mc0 {
    transition: transform .3s ease
}

.discord-icon.pulse.svelte-1v51mc0 {
    animation: svelte-1v51mc0-iconPulse .5s ease
}

@keyframes svelte-1v51mc0-iconPulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }

    to {
        transform: scale(1)
    }
}

.btn.svelte-1v51mc0:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px #0003
}

.btn-primary.svelte-1v51mc0:hover {
    background-color: #512feb;
    box-shadow: 0 8px 25px #512feb80
}

.btn-secondary.svelte-1v51mc0:hover {
    background-color: #ffffff1f
}

.hero-card-wrapper.svelte-1v51mc0 {
    position: relative;
    width: 100%;
    max-width: 1000px;
    z-index: 2;
    margin-top: 20px;
    transition: transform 1s cubic-bezier(.19,1,.22,1)
}

.hero-card.svelte-1v51mc0 {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px #0000004d;
    border: 1px solid rgba(255,255,255,.1);
    background-color: #0000004d;
    cursor: pointer;
    transform: translateZ(0)
}

.video-frame-effect.svelte-1v51mc0 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    box-shadow: inset 0 0 40px #0006;
    z-index: 3;
    pointer-events: none
}

.video-container.svelte-1v51mc0 {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: #0000004d
}

.hero-video.svelte-1v51mc0,.hero-image.svelte-1v51mc0 {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover
}

.hero-image.fallback.svelte-1v51mc0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    background-color: #000000b3
}

.play-button-overlay.svelte-1v51mc0 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0006;
    z-index: 2;
    cursor: pointer;
    transition: background-color .3s ease
}

.play-button-overlay.svelte-1v51mc0:hover {
    background-color: #0009
}

.play-button.svelte-1v51mc0 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #512feb4d;
    transition: transform .3s ease,background-color .3s ease
}

.play-button-overlay.svelte-1v51mc0:hover .play-button:where(.svelte-1v51mc0) {
    transform: scale(1.05);
    background-color: #512feb80
}

.video-overlay.svelte-1v51mc0 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,transparent 80%,rgba(0,0,0,.5) 100%);
    pointer-events: none;
    z-index: 2
}

.feature-highlights.svelte-1v51mc0 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 4
}

.feature-tag.svelte-1v51mc0 {
    position: absolute;
    padding: 8px 14px;
    background-color: #512febcc;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 15px #0003;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.feature-tag.top-left.svelte-1v51mc0 {
    top: 20px;
    left: 20px
}

.feature-tag.bottom-right.svelte-1v51mc0 {
    bottom: 20px;
    right: 20px
}

@media (max-width: 809px) {
    .hero.svelte-1v51mc0 {
        padding:120px 24px 80px
    }

    h1.svelte-1v51mc0 {
        font-size: 42px
    }

    .header.svelte-1v51mc0 p:where(.svelte-1v51mc0) {
        font-size: 16px
    }

    .status-indicator.svelte-1v51mc0 {
        font-size: 13px;
        padding: 6px 12px
    }

    .stats-container.svelte-1v51mc0 {
        flex-direction: column;
        gap: 15px;
        margin: 10px 0 30px
    }

    .cta-buttons.svelte-1v51mc0 {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        gap: 12px
    }

    .btn.svelte-1v51mc0 {
        width: 100%
    }

    .btn-primary.svelte-1v51mc0,.btn-secondary.svelte-1v51mc0 {
        max-width: 100%
    }

    .feature-tag.svelte-1v51mc0 {
        padding: 6px 10px;
        font-size: 12px
    }

    .feature-tag.top-left.svelte-1v51mc0 {
        top: 10px;
        left: 10px
    }

    .feature-tag.bottom-right.svelte-1v51mc0 {
        bottom: 10px;
        right: 10px
    }
}

@media (min-width: 810px) and (max-width: 1199px) {
    h1.svelte-1v51mc0 {
        font-size:58px
    }
}

.features.svelte-c0p8qm {
    padding: 140px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    position: relative;
    overflow: hidden;
    min-height: 200px
}

.features.svelte-c0p8qm:before {
    content: "";
    position: absolute;
    top: -300px;
    right: -300px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,#512feb26,#512feb00 70%);
    border-radius: 50%;
    z-index: -1
}

.features.svelte-c0p8qm:after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle,#512feb1a,#512feb00 70%);
    border-radius: 50%;
    z-index: -1
}

.section-header.svelte-c0p8qm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    text-align: center;
    margin-bottom: 20px
}

.badge.svelte-c0p8qm {
    background-color: #0d0d0d;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 13px;
    box-shadow: 0 4px 10px #0003
}

.badge.small.svelte-c0p8qm {
    padding: 6px 10px
}

.badge.svelte-c0p8qm span:where(.svelte-c0p8qm) {
    font-size: 14px;
    font-weight: 300;
    color: #ffffffb3
}

h2.svelte-c0p8qm {
    font-family: Outfit,sans-serif;
    font-size: 50px;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff;
    text-shadow: 0 0 20px rgba(81,47,235,.3);
    max-width: 800px
}

.section-header.svelte-c0p8qm p:where(.svelte-c0p8qm) {
    font-size: 18px;
    color: #fffc;
    max-width: 650px;
    margin: 0
}

.features-tabs.svelte-c0p8qm {
    display: flex;
    gap: 10px;
    background: #0d0d0db3;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    margin-bottom: 20px
}

.tab-button.svelte-c0p8qm {
    background: none;
    border: none;
    padding: 10px 20px;
    color: #ffffffb3;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    border-radius: 10px;
    transition: all .3s ease
}

.tab-button.svelte-c0p8qm:hover {
    color: #fff;
    background: #ffffff12
}

.tab-button.active.svelte-c0p8qm {
    color: #fff;
    background: #512feb4d;
    box-shadow: 0 0 10px #512feb66
}

.feature-showcase.svelte-c0p8qm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    align-items: center;
    padding: 20px
}

.feature-card.svelte-c0p8qm {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    background: #0d0d0d80;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 10px 30px #0003;
    transition: transform .8s cubic-bezier(.34,1.56,.64,1)
}

.card-shine.svelte-c0p8qm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,#ffffff1a,#fff0 20%,#fff0 80%,#ffffff1a);
    pointer-events: none;
    z-index: 2
}

.feature-image.svelte-c0p8qm {
    width: 100%;
    height: 100%;
    position: relative
}

.feature-image.svelte-c0p8qm img:where(.svelte-c0p8qm) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 24px
}

.glow-overlay.svelte-c0p8qm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%,#512feb33,#0000 70%);
    pointer-events: none;
    z-index: 1
}

.feature-content.svelte-c0p8qm {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.feature-content.svelte-c0p8qm h3:where(.svelte-c0p8qm) {
    font-size: 36px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em
}

.feature-content.svelte-c0p8qm h4:where(.svelte-c0p8qm) {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 15px
}

.feature-content.svelte-c0p8qm p:where(.svelte-c0p8qm) {
    font-size: 18px;
    line-height: 1.6;
    color: #fffc;
    margin: 0
}

.stats-grid.svelte-c0p8qm {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin-top: 10px
}

.stat-card.svelte-c0p8qm {
    background: #ffffff0f;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all .3s ease
}

.stat-card.svelte-c0p8qm:hover {
    transform: translateY(-3px);
    background: #ffffff14;
    border-color: #ffffff26;
    box-shadow: 0 5px 15px #0000001a
}

.stat-value.svelte-c0p8qm {
    font-size: 28px;
    font-weight: 500;
    color: #512feb;
    margin-bottom: 5px
}

.stat-label.svelte-c0p8qm {
    font-size: 14px;
    color: #ffffffb3
}

.benefits-list.svelte-c0p8qm {
    margin-top: 10px
}

.benefits-list.svelte-c0p8qm ul:where(.svelte-c0p8qm) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.benefits-list.svelte-c0p8qm li:where(.svelte-c0p8qm) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #fff
}

.benefits-list.svelte-c0p8qm svg:where(.svelte-c0p8qm) {
    min-width: 16px
}

.cta-button.svelte-c0p8qm {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #512feb;
    color: #fff;
    padding: 12px 25px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,.2);
    transition: all .3s ease;
    box-shadow: 0 0 15px #512feb66;
    width: fit-content
}

.cta-button.svelte-c0p8qm:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px #512feb99;
    background: #5e3df3
}

.comparison-teaser.svelte-c0p8qm {
    background: #0d0d0db3;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 30px;
    max-width: 800px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    box-shadow: 0 5px 20px #00000026
}

.comparison-teaser.svelte-c0p8qm h4:where(.svelte-c0p8qm) {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    margin: 0
}

.comparison-teaser.svelte-c0p8qm p:where(.svelte-c0p8qm) {
    font-size: 16px;
    color: #fffc;
    margin: 0;
    max-width: 600px
}

.link-with-arrow.svelte-c0p8qm {
    color: #512feb;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    transition: all .2s ease
}

.link-with-arrow.svelte-c0p8qm:hover {
    opacity: .8;
    transform: translate(3px)
}

@media (max-width: 1000px) {
    .feature-showcase.svelte-c0p8qm {
        grid-template-columns:1fr;
        gap: 40px
    }

    .benefits-list.svelte-c0p8qm ul:where(.svelte-c0p8qm) {
        grid-template-columns: 1fr
    }

    .stats-grid.svelte-c0p8qm {
        grid-template-columns: repeat(3,1fr)
    }

    h2.svelte-c0p8qm {
        font-size: 38px
    }
}

@media (max-width: 768px) {
    .features.svelte-c0p8qm {
        padding:100px 24px
    }

    .features-tabs.svelte-c0p8qm {
        width: 100%;
        overflow-x: auto;
        justify-content: start;
        padding: 8px
    }

    .tab-button.svelte-c0p8qm {
        padding: 8px 16px;
        font-size: 14px;
        white-space: nowrap
    }

    .feature-content.svelte-c0p8qm h3:where(.svelte-c0p8qm) {
        font-size: 28px
    }

    .stats-grid.svelte-c0p8qm {
        grid-template-columns: repeat(2,1fr);
        gap: 10px
    }

    .comparison-teaser.svelte-c0p8qm {
        padding: 20px
    }

    .comparison-teaser.svelte-c0p8qm h4:where(.svelte-c0p8qm) {
        font-size: 20px
    }
}

@media (max-width: 480px) {
    .stats-grid.svelte-c0p8qm {
        grid-template-columns:1fr
    }

    h2.svelte-c0p8qm {
        font-size: 28px
    }
}

.benefits.svelte-1ns6gct {
    padding: 117px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    position: relative;
    min-height: 200px
}

.benefits.svelte-1ns6gct:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 20%,rgba(81,47,235,.08) 0%,transparent 70%);
    pointer-events: none;
    z-index: -1
}

.section-header.svelte-1ns6gct {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    text-align: center;
    margin-bottom: 10px
}

.badge.svelte-1ns6gct {
    background-color: #0d0d0d;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 13px
}

.badge.svelte-1ns6gct span:where(.svelte-1ns6gct) {
    font-size: 14px;
    font-weight: 300;
    color: #ffffffb3
}

h2.svelte-1ns6gct {
    font-family: Outfit,sans-serif;
    font-size: 50px;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff
}

.section-header.svelte-1ns6gct p:where(.svelte-1ns6gct) {
    font-size: 18px;
    color: #fffc;
    max-width: 600px;
    margin: 0
}

.featured-benefits.svelte-1ns6gct {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 60px
}

.featured-row.svelte-1ns6gct {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
    width: 100%
}

.second-row.svelte-1ns6gct {
    margin-top: 30px
}

.featured-card.svelte-1ns6gct {
    background: linear-gradient(145deg,#0d0d0de6,#512feb26);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
    box-shadow: 0 10px 30px #00000026,0 0 20px #512feb26;
    height: 100%;
    max-width: 100%;
    z-index: 1
}

.featured-card.svelte-1ns6gct:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px #0003,0 0 30px #512feb40;
    border-color: #512feb4d
}

.featured-glow.svelte-1ns6gct {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background-color: #512feb66;
    filter: blur(80px);
    border-radius: 50%;
    z-index: 0;
    opacity: .6;
    transition: all .5s ease
}

.featured-card.svelte-1ns6gct:hover .featured-glow:where(.svelte-1ns6gct) {
    opacity: 1;
    width: 180px;
    height: 180px
}

.featured-content.svelte-1ns6gct {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 5px
}

.featured-tag.svelte-1ns6gct {
    position: absolute;
    top: 25px;
    left: 25px;
    background-color: #512feb4d;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: .5px;
    z-index: 3
}

.users-tag.svelte-1ns6gct {
    color: #ffffffb3;
    font-size: 13px;
    margin-top: -8px
}

.featured-icon.svelte-1ns6gct {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    background-color: #512feb33;
    border-radius: 12px;
    padding: 8px
}

.featured-card.svelte-1ns6gct h3:where(.svelte-1ns6gct) {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    margin-top: 35px
}

.featured-description.svelte-1ns6gct {
    font-size: 14px;
    line-height: 1.5;
    color: #fffc
}

.learn-more-btn.svelte-1ns6gct {
    background: #512feb4d;
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all .3s ease;
    margin-top: 5px;
    width: fit-content;
    text-decoration: none
}

.learn-more-btn.svelte-1ns6gct:hover {
    background: #512feb80;
    transform: translateY(-2px)
}

.category-tabs.svelte-1ns6gct {
    display: flex;
    gap: 10px;
    background: #0d0d0db3;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    margin-bottom: 20px
}

.category-button.svelte-1ns6gct {
    background: none;
    border: none;
    padding: 10px 20px;
    color: #ffffffb3;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    border-radius: 10px;
    transition: all .3s ease
}

.category-button.svelte-1ns6gct:hover {
    color: #fff;
    background: #ffffff12
}

.category-button.active.svelte-1ns6gct {
    color: #fff;
    background: #512feb4d;
    box-shadow: 0 0 10px #512feb66
}

.benefits-grid.svelte-1ns6gct {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    width: 100%;
    max-width: 1200px
}

.benefit-card.svelte-1ns6gct {
    background-color: #ffffff0f;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    overflow: hidden;
    transition: all .3s ease
}

.benefit-card.svelte-1ns6gct:hover {
    transform: translateY(-5px);
    background-color: #ffffff14;
    border-color: #fff3;
    box-shadow: 0 15px 30px #0003
}

.light-effect.svelte-1ns6gct {
    position: absolute;
    top: -11px;
    right: -11px;
    width: 80px;
    height: 80px;
    background-color: #512feb80;
    border-radius: 231px;
    filter: blur(50px);
    z-index: 1;
    opacity: .3;
    transition: all .3s ease
}

.benefit-card.svelte-1ns6gct:hover .light-effect:where(.svelte-1ns6gct) {
    opacity: .5;
    width: 100px;
    height: 100px
}

.icon-holder.svelte-1ns6gct {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min-content;
    padding: 12px;
    background-color: #ffffff1a;
    border-radius: 12px;
    z-index: 2
}

.benefit-content.svelte-1ns6gct {
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px
}

h3.svelte-1ns6gct {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    color: #fff
}

p.svelte-1ns6gct {
    font-size: 15px;
    color: #ffffffb3;
    margin: 0;
    line-height: 1.4
}

@media (min-width: 810px) and (max-width: 1199px) {
    .benefits-grid.svelte-1ns6gct {
        grid-template-columns:repeat(2,1fr)
    }

    .featured-row.svelte-1ns6gct {
        grid-template-columns: 1fr
    }

    .second-row.svelte-1ns6gct {
        margin-top: 0
    }

    h2.svelte-1ns6gct {
        font-size: 40px
    }
}

@media (max-width: 809px) {
    .benefits.svelte-1ns6gct {
        padding:100px 24px;
        gap: 40px
    }

    .benefits-grid.svelte-1ns6gct,.featured-row.svelte-1ns6gct {
        grid-template-columns: 1fr
    }

    .second-row.svelte-1ns6gct {
        margin-top: 0
    }

    h2.svelte-1ns6gct {
        font-size: 28px
    }

    .category-tabs.svelte-1ns6gct {
        overflow-x: auto;
        width: 100%;
        justify-content: flex-start
    }

    .category-button.svelte-1ns6gct {
        white-space: nowrap;
        padding: 8px 15px;
        font-size: 14px
    }
}

.pricing.svelte-1s5gpxs {
    padding: 100px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 33px;
    position: relative;
    z-index: 1;
    min-height: 200px
}

.pricing.svelte-1s5gpxs:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 30%,rgba(81,47,235,.1) 0%,transparent 60%);
    pointer-events: none;
    z-index: -1
}

.section-header.svelte-1s5gpxs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    text-align: center;
    margin-bottom: 20px
}

.badge.svelte-1s5gpxs {
    background-color: #0d0d0d;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 13px;
    box-shadow: 0 4px 10px #0003
}

.badge.svelte-1s5gpxs span:where(.svelte-1s5gpxs) {
    font-size: 14px;
    font-weight: 300;
    color: #ffffffb3
}

h2.svelte-1s5gpxs {
    font-family: Outfit,sans-serif;
    font-size: 50px;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff;
    text-shadow: 0 0 10px rgba(81,47,235,.3)
}

.section-header.svelte-1s5gpxs p:where(.svelte-1s5gpxs) {
    font-size: 18px;
    color: #fffc;
    max-width: 600px;
    margin: 0
}

.security-notice.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #0d0d0db3;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 15px;
    padding: 15px 25px;
    max-width: 700px;
    margin-bottom: 30px
}

.security-icon.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #512feb;
    background: #512feb26;
    padding: 10px;
    border-radius: 50%;
    flex-shrink: 0
}

.security-content.svelte-1s5gpxs h4:where(.svelte-1s5gpxs) {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 5px
}

.security-content.svelte-1s5gpxs p:where(.svelte-1s5gpxs) {
    font-size: 14px;
    color: #ffffffb3;
    margin: 0;
    line-height: 1.5
}

.plan-cards.svelte-1s5gpxs {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    width: 100%;
    justify-content: center
}

.plan-card.svelte-1s5gpxs {
    background: linear-gradient(149deg,#512feb26,#ffffff0f 29%,#ffffff0f 74%,#512feb26);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 350px;
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all .3s ease;
    box-shadow: 0 10px 30px #00000026
}

.plan-card.svelte-1s5gpxs:hover,.plan-card.hovered.svelte-1s5gpxs {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px #0003,0 0 20px #512feb4d;
    border-color: #fff3;
    z-index: 2
}

.plan-tag.svelte-1s5gpxs {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    border-radius: 30px;
    z-index: 3;
    box-shadow: 0 2px 10px #0003
}

.plan-glow.svelte-1s5gpxs {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background-color: #512feb80;
    filter: blur(70px);
    border-radius: 50%;
    z-index: 0;
    opacity: .7;
    transition: all .3s ease
}

.plan-card.svelte-1s5gpxs:hover .plan-glow:where(.svelte-1s5gpxs),.plan-card.hovered.svelte-1s5gpxs .plan-glow:where(.svelte-1s5gpxs) {
    opacity: 1;
    width: 200px;
    height: 200px
}

.plan-header.svelte-1s5gpxs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    z-index: 1
}

.plan-type.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 10px
}

.plan-icon.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff1a;
    border-radius: 8px;
    padding: 6px
}

h3.svelte-1s5gpxs {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    margin: 0
}

.plan-price-container.svelte-1s5gpxs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.price-comparison.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 8px
}

.regular-price.svelte-1s5gpxs {
    font-size: 16px;
    color: #fff9;
    text-decoration: line-through
}

.plan-price.svelte-1s5gpxs {
    font-size: 35px;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: baseline
}

.plan-price.svelte-1s5gpxs .period:where(.svelte-1s5gpxs) {
    font-size: 16px;
    font-weight: 300;
    margin-left: 4px;
    opacity: .7
}

.savings-tag.svelte-1s5gpxs {
    display: inline-block;
    background-color: #00c85326;
    color: #00c853;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px
}

.advantages.svelte-1s5gpxs {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.advantage-item.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffffe6;
    font-size: 14px
}

.divider.svelte-1s5gpxs {
    height: 1px;
    background-color: #ffffff1a;
    width: 100%;
    margin: 5px 0
}

.btn-purchase.svelte-1s5gpxs {
    background-color: #331e8f;
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 1px 3px #0003;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1
}

.btn-purchase.svelte-1s5gpxs:hover {
    background-color: #3f25ac;
    box-shadow: 0 4px 15px #0000004d,0 0 20px #512feb66;
    transform: translateY(-3px)
}

.features-title.svelte-1s5gpxs {
    font-size: 14px;
    color: #ffffffb3;
    margin-bottom: 10px
}

.feature-list.svelte-1s5gpxs {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.feature-item.svelte-1s5gpxs {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative
}

.feature-icon.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff1a;
    border-radius: 6px;
    padding: 5px;
    margin-top: 2px
}

.feature-text.svelte-1s5gpxs {
    font-size: 15px;
    color: #fff;
    line-height: 1.4
}

.secure-payment.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff80;
    font-size: 12px;
    margin-top: 10px
}

.final-cta.svelte-1s5gpxs {
    margin-top: 40px;
    text-align: center;
    position: relative;
    max-width: 600px;
    padding: 10px 20px
}

.final-cta.svelte-1s5gpxs h4:where(.svelte-1s5gpxs) {
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #fff;
    letter-spacing: -.01em;
    text-shadow: 0 0 15px rgba(81,47,235,.5);
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg,#fff,#a89bff,#fff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: svelte-1s5gpxs-shine 3s linear infinite
}

.final-cta.svelte-1s5gpxs p:where(.svelte-1s5gpxs) {
    font-size: 17px;
    line-height: 1.5;
    margin: 0;
    color: #fffc;
    position: relative;
    z-index: 1
}

@keyframes svelte-1s5gpxs-shine {
    to {
        background-position: 200% center
    }
}

.shine-effect.svelte-1s5gpxs {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 60%;
    height: 100%;
    background: radial-gradient(circle,rgba(81,47,235,.2) 0%,transparent 70%);
    filter: blur(20px);
    z-index: 0;
    opacity: .7
}

.modal-backdrop.svelte-1s5gpxs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000bf;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow-y: auto;
    padding: 20px
}

.warning-modal.svelte-1s5gpxs {
    background: linear-gradient(135deg,#191919f2,#0d0d0df2);
    border: 1px solid rgba(255,75,75,.3);
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    padding: 30px;
    box-shadow: 0 20px 50px #0000004d,0 0 30px #ff4b4b33;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.warning-icon.svelte-1s5gpxs {
    color: #ff4b4b;
    margin-bottom: 20px
}

.warning-modal.svelte-1s5gpxs h3:where(.svelte-1s5gpxs) {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 15px
}

.warning-modal.svelte-1s5gpxs p:where(.svelte-1s5gpxs) {
    font-size: 16px;
    color: #ffffffe6;
    margin: 0 0 15px;
    line-height: 1.5
}

.warning-subtext.svelte-1s5gpxs {
    font-size: 14px!important;
    color: #ffffffb3!important;
    margin-bottom: 25px!important
}

.warning-buttons.svelte-1s5gpxs {
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: center;
    margin-top: 10px
}

.btn-secondary.svelte-1s5gpxs {
    background-color: #ffffff1a;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease
}

.btn-secondary.svelte-1s5gpxs:hover {
    background-color: #ffffff26;
    transform: translateY(-2px)
}

.btn-primary.svelte-1s5gpxs {
    background-color: #331e8f;
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease
}

.btn-primary.svelte-1s5gpxs:hover {
    background-color: #3f25ac;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px #0003
}

.resellers-modal.svelte-1s5gpxs {
    background: linear-gradient(135deg,#141414f2,#0d0d0df2);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    box-shadow: 0 20px 50px #0000004d,0 0 30px #512feb33;
    position: relative;
    display: flex;
    flex-direction: column
}

.downtime-reminder.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ff4b4b1a;
    border-left: 3px solid rgba(255,75,75,.5);
    padding: 12px 20px;
    color: #ff4b4be6;
    font-size: 14px;
    margin: 15px 30px 0
}

.downtime-reminder.svelte-1s5gpxs svg:where(.svelte-1s5gpxs) {
    flex-shrink: 0
}

.modal-header.svelte-1s5gpxs {
    padding: 25px 30px 15px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    position: relative
}

.modal-header.svelte-1s5gpxs h3:where(.svelte-1s5gpxs) {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 5px
}

.modal-header.svelte-1s5gpxs p:where(.svelte-1s5gpxs) {
    font-size: 16px;
    color: #ffffffb3;
    margin: 0
}

.close-button.svelte-1s5gpxs {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ffffff1a;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffffb3;
    cursor: pointer;
    transition: all .2s ease
}

.close-button.svelte-1s5gpxs:hover {
    background: #fff3;
    color: #fff;
    transform: rotate(90deg)
}

.modal-body.svelte-1s5gpxs {
    padding: 20px 30px 30px;
    overflow-y: auto
}

.loading-state.svelte-1s5gpxs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 20px
}

.loading-spinner.svelte-1s5gpxs {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,.1);
    border-radius: 50%;
    border-top-color: #512feb;
    animation: svelte-1s5gpxs-spin 1s ease-in-out infinite
}

@keyframes svelte-1s5gpxs-spin {
    to {
        transform: rotate(360deg)
    }
}

.loading-state.svelte-1s5gpxs p:where(.svelte-1s5gpxs) {
    color: #ffffffb3;
    font-size: 16px
}

.resellers-list.svelte-1s5gpxs {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.reseller-card.svelte-1s5gpxs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #19191980;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 20px;
    transition: all .2s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden
}

.reseller-card.svelte-1s5gpxs:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(81,47,235,.05),transparent);
    transform: translate(-100%);
    transition: transform .6s ease
}

.reseller-card.svelte-1s5gpxs:hover {
    border-color: #512feb4d;
    background: #1e1e1eb3;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px #0003
}

.reseller-card.svelte-1s5gpxs:hover:before {
    transform: translate(100%)
}

.reseller-card.featured.svelte-1s5gpxs {
    background: linear-gradient(100deg,#512feb26,#1e1e1eb3 40%,#1e1e1eb3 60%,#512feb26);
    border-color: #512feb4d;
    box-shadow: 0 5px 20px #512feb26
}

.reseller-info.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative
}

.reseller-logo.svelte-1s5gpxs {
    width: 48px;
    height: 48px;
    background-color: #ffffff1a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.reseller-logo.svelte-1s5gpxs img:where(.svelte-1s5gpxs) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    background-color: #fff3
}

.fallback-icon.svelte-1s5gpxs {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: #ffffff80
}

.reseller-logo.svelte-1s5gpxs:not(.fallback-only) .fallback-icon:where(.svelte-1s5gpxs) {
    opacity: 0
}

.reseller-details.svelte-1s5gpxs {
    display: flex;
    flex-direction: column;
    position: relative
}

.reseller-details.svelte-1s5gpxs h4:where(.svelte-1s5gpxs) {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin: 0
}

.featured-badge.svelte-1s5gpxs {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #ffba08e6;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #000000e6;
    margin-top: 8px;
    box-shadow: 0 2px 8px #0003
}

.reseller-cta.svelte-1s5gpxs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px
}

.trust-badge.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #00d1661a;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    color: #00d166
}

.btn-purchase-reseller.svelte-1s5gpxs {
    background-color: #331e8f;
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 1px 3px #0003;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.btn-purchase-reseller.svelte-1s5gpxs:hover {
    background-color: #3f25ac;
    box-shadow: 0 4px 15px #0000004d,0 0 20px #512feb66;
    transform: translateY(-3px)
}

.load-error-message.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ff4b4b1a;
    border: 1px solid rgba(255,75,75,.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px
}

.load-error-message.svelte-1s5gpxs svg:where(.svelte-1s5gpxs) {
    flex-shrink: 0;
    color: #ff4b4bcc
}

.load-error-message.svelte-1s5gpxs p:where(.svelte-1s5gpxs) {
    font-size: 14px;
    color: #fffc;
    margin: 0;
    line-height: 1.5
}

.modal-footer.svelte-1s5gpxs {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1)
}

.security-info.svelte-1s5gpxs {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff9;
    font-size: 14px
}

@media (max-width: 809px) {
    .pricing.svelte-1s5gpxs {
        padding:80px 24px
    }

    h2.svelte-1s5gpxs {
        font-size: 32px
    }

    .plan-cards.svelte-1s5gpxs {
        flex-direction: column;
        align-items: center
    }

    .plan-card.svelte-1s5gpxs {
        width: 100%;
        max-width: 350px
    }

    .security-notice.svelte-1s5gpxs {
        flex-direction: column;
        text-align: center;
        padding: 20px
    }

    .final-cta.svelte-1s5gpxs h4:where(.svelte-1s5gpxs) {
        font-size: 22px
    }

    .final-cta.svelte-1s5gpxs p:where(.svelte-1s5gpxs) {
        font-size: 15px
    }

    .warning-modal.svelte-1s5gpxs {
        max-width: 100%;
        margin: 0 15px;
        padding: 25px 15px
    }

    .warning-buttons.svelte-1s5gpxs {
        flex-direction: column;
        gap: 10px
    }

    .resellers-modal.svelte-1s5gpxs {
        max-width: 100%;
        margin: 0 15px;
        max-height: 80vh
    }

    .downtime-reminder.svelte-1s5gpxs {
        margin: 0 15px;
        padding: 10px 15px;
        font-size: 12px
    }

    .reseller-card.svelte-1s5gpxs {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px
    }

    .reseller-cta.svelte-1s5gpxs {
        width: 100%;
        align-items: stretch
    }

    .close-button.svelte-1s5gpxs {
        top: 15px;
        right: 15px
    }

    .modal-header.svelte-1s5gpxs h3:where(.svelte-1s5gpxs) {
        padding-right: 30px
    }
}

@media (min-width: 810px) and (max-width: 1199px) {
    .plan-cards.svelte-1s5gpxs {
        gap:20px
    }

    .plan-card.svelte-1s5gpxs {
        width: 45%
    }
}

.faq.svelte-15c2cs9 {
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    position: relative;
    min-height: 200px
}

.faq.svelte-15c2cs9:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 30%,rgba(81,47,235,.05) 0%,transparent 60%);
    pointer-events: none;
    z-index: -1
}

.section-header.svelte-15c2cs9 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    text-align: center
}

.badge.svelte-15c2cs9 {
    background-color: #0d0d0d;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 13px;
    box-shadow: 0 4px 10px #0003
}

.badge.svelte-15c2cs9 span:where(.svelte-15c2cs9) {
    font-size: 14px;
    font-weight: 300;
    color: #ffffffb3
}

h2.svelte-15c2cs9 {
    font-family: Outfit,sans-serif;
    font-size: 50px;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff;
    text-shadow: 0 0 15px rgba(81,47,235,.2)
}

.section-header.svelte-15c2cs9 p:where(.svelte-15c2cs9) {
    font-size: 18px;
    color: #fffc;
    max-width: 600px;
    margin: 0
}

.faq-container.svelte-15c2cs9 {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.faq-item.svelte-15c2cs9 {
    background-color: #ffffff0f;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    overflow: hidden;
    transition: all .3s ease
}

.faq-item.svelte-15c2cs9:hover {
    background-color: #ffffff14;
    border-color: #ffffff26;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px #00000026
}

.faq-item.active.svelte-15c2cs9 {
    background: linear-gradient(to right,#512feb0d,#ffffff14);
    border-color: #512feb33;
    box-shadow: 0 8px 20px #00000026,0 0 15px #512feb1a
}

.faq-question.svelte-15c2cs9 {
    padding: 22px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.faq-question.svelte-15c2cs9 h3:where(.svelte-15c2cs9) {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    letter-spacing: .01em
}

.icon.svelte-15c2cs9 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fff9;
    transition: transform .3s ease
}

.icon.svelte-15c2cs9 svg:where(.svelte-15c2cs9) {
    transition: transform .3s ease
}

.icon.svelte-15c2cs9 svg.rotated:where(.svelte-15c2cs9) {
    transform: rotate(180deg);
    color: #512feb
}

.faq-answer.svelte-15c2cs9 {
    padding: 0 25px 25px;
    border-top: 1px solid rgba(255,255,255,.05);
    margin-top: -1px
}

.faq-answer.svelte-15c2cs9 p:where(.svelte-15c2cs9) {
    margin: 20px 0 0;
    color: #fffc;
    line-height: 1.6;
    font-size: 16px
}

.support-link.svelte-15c2cs9 {
    margin-top: 15px;
    text-align: center
}

.support-link.svelte-15c2cs9 p:where(.svelte-15c2cs9) {
    font-size: 16px;
    color: #ffffffb3;
    margin: 0
}

.support-link.svelte-15c2cs9 a:where(.svelte-15c2cs9) {
    color: #512feb;
    text-decoration: none;
    font-weight: 500;
    transition: all .2s ease
}

.support-link.svelte-15c2cs9 a:where(.svelte-15c2cs9):hover {
    opacity: .8;
    text-decoration: underline
}

@media (max-width: 809px) {
    .faq.svelte-15c2cs9 {
        padding:70px 24px
    }

    h2.svelte-15c2cs9 {
        font-size: 32px
    }

    .faq-question.svelte-15c2cs9 {
        padding: 18px 20px
    }

    .faq-question.svelte-15c2cs9 h3:where(.svelte-15c2cs9) {
        font-size: 16px
    }

    .faq-answer.svelte-15c2cs9 {
        padding: 0 20px 20px
    }

    .faq-answer.svelte-15c2cs9 p:where(.svelte-15c2cs9) {
        font-size: 15px
    }
}

.footer.svelte-1eb5srx {
    position: relative;
    padding: 20px 40px;
    border-top: 1px solid rgba(255,255,255,.1);
    background-color: #0000004d;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.footer-content.svelte-1eb5srx {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px
}

.footer-logo.svelte-1eb5srx {
    display: flex;
    align-items: center;
    min-width: 40px
}

.footer-logo.svelte-1eb5srx a:where(.svelte-1eb5srx) {
    display: flex;
    align-items: center;
    text-decoration: none
}

.footer-logo.svelte-1eb5srx img:where(.svelte-1eb5srx) {
    width: 40px;
    height: 40px;
    object-fit: contain
}

.footer-info.svelte-1eb5srx {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    border-top: none
}

.copyright.svelte-1eb5srx {
    font-size: 14px;
    color: #ffffff8c;
    margin: 0
}

.footer-links.svelte-1eb5srx {
    display: flex;
    align-items: center;
    gap: 20px
}

.discord-link.svelte-1eb5srx {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d0d0d;
    border-radius: 8px;
    padding: 5px;
    transition: all .2s ease
}

.discord-link.svelte-1eb5srx:hover {
    background-color: #141414;
    transform: translateY(-2px)
}

.footer-links.svelte-1eb5srx a:where(.svelte-1eb5srx) {
    color: #ffffffb3;
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease
}

.footer-links.svelte-1eb5srx a:where(.svelte-1eb5srx):hover {
    color: #fff
}

@media (max-width: 809px) {
    .footer.svelte-1eb5srx {
        padding:20px 24px
    }

    .footer-info.svelte-1eb5srx {
        flex-direction: column;
        align-items: center;
        gap: 20px
    }

    .footer-links.svelte-1eb5srx {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap
    }
}

body {
    background-color: #000;
    margin: 0;
    padding: 0;
    font-family: Outfit,sans-serif;
    color: #fff
}

.app.svelte-xtp0l0 {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}