:root {
    --landing-ink: #17142d;
    --landing-muted: #6f6a83;
    --landing-violet: #6d46e8;
    --landing-violet-dark: #3b258f;
    --landing-gold: #ffd166;
    --landing-surface: #fff;
    --landing-line: rgba(78, 54, 157, .12);
    --landing-shadow: 0 24px 70px rgba(36, 24, 83, .12);
}

body {
    color: var(--landing-ink);
    background: #f8f7fc;
}

#hero {
    position: relative;
    min-height: min(920px, 100svh);
    isolation: isolate;
    background:
        radial-gradient(circle at 17% 18%, rgba(134, 96, 255, .52), transparent 31rem),
        radial-gradient(circle at 84% 25%, rgba(48, 216, 181, .2), transparent 25rem),
        linear-gradient(145deg, #17113d 0%, #31206f 48%, #5d38cc 100%) !important;
}

#hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent 84%);
}

#hero > .overlay {
    background: linear-gradient(105deg, rgba(14, 8, 44, .35), rgba(40, 20, 95, .08)) !important;
    opacity: 1 !important;
}

#hero > .container { position: relative; z-index: 2; }

.landing-hero-copy { max-width: 42rem; }

.landing-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .65rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
}

.landing-hero-kicker .badge {
    padding: .42rem .65rem;
    background: linear-gradient(135deg, #ffd166, #ffb84d) !important;
    color: #332006;
}

.landing-hero-title {
    max-width: 13ch;
    font-size: clamp(2.75rem, 5.5vw, 5.25rem) !important;
    letter-spacing: -.052em;
    line-height: 1.02;
    text-wrap: balance;
}

.landing-hero-title .text-warning {
    background: linear-gradient(110deg, #fff2b8, #ffd166 58%, #ffae52);
    background-clip: text;
    color: transparent !important;
}

.landing-hero-lead {
    max-width: 38rem;
    color: rgba(255, 255, 255, .76) !important;
    line-height: 1.8;
}

.landing-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-height: 3.65rem;
    padding: .55rem .65rem .55rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 1rem;
    background: linear-gradient(135deg, #fff, #fff6d9);
    box-shadow: 0 18px 44px rgba(12, 6, 43, .3), inset 0 1px #fff;
    color: #2a1c55;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.landing-hero-cta:hover,
.landing-hero-cta:focus-visible {
    color: #211442;
    box-shadow: 0 24px 55px rgba(12, 6, 43, .4), 0 0 0 5px rgba(255, 209, 102, .13);
    transform: translateY(-3px);
}

.landing-hero-cta > svg {
    min-width: 1.2rem;
    color: #6b43d7;
}

.landing-hero-cta-label { font-size: .96rem; font-weight: 800; }

.landing-hero-cta-price {
    display: inline-flex;
    align-items: baseline;
    padding: .6rem .75rem;
    border-radius: .72rem;
    background: linear-gradient(135deg, #6e46dc, #4829aa);
    color: #fff;
}

.landing-hero-cta-price strong { font-size: 1.1rem; }
.landing-hero-cta-price b { font-size: .9rem; }
.landing-hero-cta-price small { margin-inline-start: .12rem; color: rgba(255, 255, 255, .72); font-size: .72rem; }

.landing-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.15rem;
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, .68);
    font-size: .76rem;
}

.landing-hero-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.landing-hero-trust i { display: grid; width: 1.1rem; height: 1.1rem; place-items: center; border-radius: 50%; background: rgba(63, 225, 176, .16); color: #6ff0c4; font-size: .66rem; font-style: normal; }

.landing-hero-visual { position: relative; }
.landing-hero-visual::before {
    position: absolute;
    z-index: -1;
    inset: 9% 5% 2%;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 44% 56% 48% 52% / 54% 42% 58% 46%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 40px 90px rgba(10, 5, 35, .28);
    content: "";
    backdrop-filter: blur(12px);
    animation: landing-visual-morph 12s ease-in-out infinite alternate;
}

.landing-hero-visual img { filter: drop-shadow(0 32px 34px rgba(10, 5, 36, .3)); }

@keyframes landing-visual-morph {
    to { border-radius: 55% 45% 58% 42% / 43% 58% 42% 57%; transform: rotate(2deg) scale(1.02); }
}

#demo { position: relative; z-index: 3; background: #f8f7fc !important; }
#demo > .container {
    padding: clamp(2rem, 4vw, 4rem);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 2rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--landing-shadow);
    transform: translateY(-3.5rem);
    backdrop-filter: blur(18px);
}

#demo h2,
#features h2,
#performance h2,
#partner-brand h2 { letter-spacing: -.03em; }

#demo .lead { color: var(--landing-muted); font-size: 1rem; line-height: 1.9; }
#demo .btn-warning { padding: .8rem 1.2rem; border: 0; border-radius: .85rem; background: linear-gradient(135deg, #ffd76d, #ffb63e); box-shadow: 0 12px 25px rgba(255, 182, 62, .25); }

#qr-code {
    overflow: hidden;
    margin: 1.5rem clamp(.75rem, 2vw, 2rem) 0;
    border-radius: clamp(1.5rem, 3vw, 2.75rem);
    background: linear-gradient(145deg, #251757, #5230b7) !important;
    box-shadow: var(--landing-shadow);
}

#qr-code .showcase-img { min-height: 35rem; background-position: center; }
#qr-code .showcase-text { background: radial-gradient(circle at 15% 25%, rgba(139, 103, 255, .28), transparent 24rem); }

#partner-brand { background: linear-gradient(180deg, #fff, #faf9fe) !important; }
#partner-brand .brands-image {
    max-height: 4.5rem;
    padding: .65rem;
    border: 1px solid var(--landing-line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(39, 29, 84, .08);
    filter: none;
    opacity: 1;
    transition: transform .2s ease, box-shadow .2s ease;
}
#partner-brand a:hover .brands-image { box-shadow: 0 16px 35px rgba(39, 29, 84, .14); transform: translateY(-4px); }

#features {
    background:
        radial-gradient(circle at 8% 12%, rgba(109, 70, 232, .09), transparent 24rem),
        #f7f6fb !important;
}

#features .row > [class*="col-md-"] > .p-4 {
    min-height: calc(100% - 3rem);
    border: 1px solid var(--landing-line);
    border-radius: 1.35rem !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 13px 36px rgba(37, 25, 81, .075) !important;
    backdrop-filter: blur(12px);
}

#features .row > [class*="col-md-"] > .p-4 svg {
    padding: .6rem;
    border-radius: 1rem;
    background: rgba(109, 70, 232, .09);
}

#performance { background: linear-gradient(180deg, #fff, #fbfaff) !important; }
#performance .process-vertical-item {
    margin-bottom: .8rem;
    padding: 1rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 1.1rem;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
#performance .process-vertical-item:hover { border-color: var(--landing-line); background: #fff; transform: translateX(.25rem); }
#performance img { filter: drop-shadow(0 24px 35px rgba(50, 32, 104, .12)); }

.landing-plans-section { border-block: 1px solid rgba(91, 43, 224, .07); }
.landing-plan-card { backdrop-filter: blur(14px); }
.landing-plan-card.is-popular { transform: translateY(-.45rem); }
.landing-plan-card.is-popular:hover { transform: translateY(-.8rem); }

.footer-dark { background: linear-gradient(145deg, #17112f, #25194b 58%, #17112f) !important; }
.footer-dark .widget-content { height: 100%; }
.footer-dark .footer-links a { opacity: .76; }
.footer-dark .footer-links a:hover { opacity: 1; }

[data-bs-theme="dark"] #demo,
[data-bs-theme="dark"] #features { background: #171423 !important; }
[data-bs-theme="dark"] #demo > .container,
[data-bs-theme="dark"] #features .row > [class*="col-md-"] > .p-4 { border-color: rgba(255, 255, 255, .08); background: rgba(32, 27, 50, .94) !important; }
[data-bs-theme="dark"] #partner-brand,
[data-bs-theme="dark"] #performance { background: #1b1728 !important; }

@media (max-width: 991.98px) {
    #hero { min-height: auto; }
    .landing-hero-copy { margin-inline: auto; }
    .landing-hero-title,
    .landing-hero-lead { margin-inline: auto; }
    .landing-hero-trust { justify-content: center; }
    #demo > .container { width: calc(100% - 1.5rem); transform: translateY(-2rem); }
    #qr-code .showcase-img { min-height: 24rem; }
    .landing-plan-card.is-popular { transform: none; }
}

@media (max-width: 575.98px) {
    .landing-hero-title { font-size: clamp(2.35rem, 13vw, 3.4rem) !important; }
    .landing-hero-cta { width: 100%; justify-content: center; padding-inline: .65rem; }
    .landing-hero-trust { align-items: flex-start; flex-direction: column; }
    #demo > .container { padding: 1.5rem; border-radius: 1.45rem; }
    #qr-code { margin-inline: .5rem; border-radius: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero-visual::before { animation: none; }
    .landing-hero-cta,
    #partner-brand .brands-image,
    #performance .process-vertical-item { transition: none; }
}