Premium interactive landing page

:root {
    --muathemewpgiare-bg: #050507;
    --muathemewpgiare-bg-2: #08080d;
    --muathemewpgiare-card: rgba(255,255,255,.045);
    --muathemewpgiare-card-strong: rgba(255,255,255,.075);

    --muathemewpgiare-white: #ffffff;
    --muathemewpgiare-text: #f5f5f7;
    --muathemewpgiare-muted: #92929e;

    --muathemewpgiare-purple: #8b5cf6;
    --muathemewpgiare-purple-2: #6366f1;
    --muathemewpgiare-blue: #38bdf8;
    --muathemewpgiare-green: #34d399;
    --muathemewpgiare-orange: #fb923c;

    --muathemewpgiare-border: rgba(255,255,255,.09);

    --muathemewpgiare-radius: 24px;

    --muathemewpgiare-font:
        "Be Vietnam Pro",
        Inter,
        system-ui,
        sans-serif;
}


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


html {
    scroll-behavior: auto;
}


body {
    min-height: 100vh;

    overflow-x: hidden;

    color: var(--muathemewpgiare-text);

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(124,58,237,.17),
            transparent 38%
        ),
        var(--muathemewpgiare-bg);

    font-family: var(--muathemewpgiare-font);

    -webkit-font-smoothing: antialiased;
}


body.light {
    --muathemewpgiare-bg: #f6f6fa;
    --muathemewpgiare-bg-2: #ffffff;

    --muathemewpgiare-card: rgba(0,0,0,.035);
    --muathemewpgiare-card-strong: rgba(0,0,0,.07);

    --muathemewpgiare-text: #15151b;
    --muathemewpgiare-muted: #666672;

    --muathemewpgiare-border: rgba(0,0,0,.09);
}


button,
a {
    font-family: inherit;
}


button {
    border: 0;
}


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


::selection {
    color: white;
    background: var(--muathemewpgiare-purple);
}


/* =========================================
   LOADER
========================================= */

.muathemewpgiare-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: grid;
    place-items: center;

    background: #050507;
}


.muathemewpgiare-loader-inner {
    width: 260px;

    text-align: center;
}


.muathemewpgiare-loader-logo {
    width: 64px;
    height: 64px;

    margin: 0 auto 25px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;

    color: white;

    font-size: 25px;
    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #4f46e5
        );

    box-shadow:
        0 0 60px rgba(139,92,246,.45);
}


.muathemewpgiare-loader-line {
    height: 2px;

    overflow: hidden;

    background: rgba(255,255,255,.1);
}


.muathemewpgiare-loader-line span {
    display: block;

    width: 0;
    height: 100%;

    background: white;
}


.muathemewpgiare-loader-text {
    margin-top: 13px;

    color: #73737d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .3em;
}


/* =========================================
   CURSOR
========================================= */

.muathemewpgiare-cursor,
.muathemewpgiare-cursor-follower {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 9998;

    pointer-events: none;

    border-radius: 50%;

    transform: translate(-50%, -50%);
}


.muathemewpgiare-cursor {
    width: 7px;
    height: 7px;

    background: white;

    mix-blend-mode: difference;
}


.muathemewpgiare-cursor-follower {
    width: 35px;
    height: 35px;

    border: 1px solid rgba(255,255,255,.4);

    transition:
        width .3s ease,
        height .3s ease,
        border-color .3s ease;
}


.muathemewpgiare-cursor-follower.hover {
    width: 60px;
    height: 60px;

    border-color: rgba(167,139,250,.8);
}


/* =========================================
   PROGRESS
========================================= */

.muathemewpgiare-scroll-progress {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 9999;

    width: 0;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #38bdf8
        );

    box-shadow:
        0 0 20px rgba(139,92,246,.8);
}


/* =========================================
   PARTICLES
========================================= */

.muathemewpgiare-particles {
    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: .45;
}


/* =========================================
   CONTAINER
========================================= */

.muathemewpgiare-container {
    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;
}


/* =========================================
   NAV
========================================= */

.muathemewpgiare-navbar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        border-color .35s ease;
}


.muathemewpgiare-navbar.scrolled {
    background: rgba(5,5,7,.72);

    border-bottom: 1px solid var(--muathemewpgiare-border);

    backdrop-filter: blur(24px);
}


.muathemewpgiare-nav-inner {
    width: min(1240px, calc(100% - 40px));

    height: 80px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.muathemewpgiare-logo {
    display: flex;
    align-items: center;

    gap: 10px;
}


.muathemewpgiare-logo-symbol {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #4f46e5
        );

    color: white;

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        0 8px 25px rgba(124,58,237,.3);
}


.muathemewpgiare-logo-text {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}


.muathemewpgiare-logo-text small {
    display: block;

    margin-top: 1px;

    color: #8b5cf6;

    font-size: 7px;

    letter-spacing: .27em;
}


.muathemewpgiare-menu {
    display: flex;
    align-items: center;

    gap: 36px;
}


.muathemewpgiare-menu-link {
    position: relative;

    color: var(--muathemewpgiare-muted);

    font-size: 12px;
    font-weight: 600;

    transition:
        color .25s ease;
}


.muathemewpgiare-menu-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background: var(--muathemewpgiare-purple);

    transition:
        width .3s ease;
}


.muathemewpgiare-menu-link:hover,
.muathemewpgiare-menu-link.active {
    color: var(--muathemewpgiare-text);
}


.muathemewpgiare-menu-link:hover::after,
.muathemewpgiare-menu-link.active::after {
    width: 100%;
}


.muathemewpgiare-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


.muathemewpgiare-icon-button {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid var(--muathemewpgiare-border);
    border-radius: 12px;

    color: var(--muathemewpgiare-text);

    background: var(--muathemewpgiare-card);

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}


.muathemewpgiare-icon-button:hover {
    transform: rotate(15deg) scale(1.05);

    background: var(--muathemewpgiare-card-strong);
}


.muathemewpgiare-button {
    min-height: 52px;

    padding: 0 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border-radius: 15px;

    color: white;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


.muathemewpgiare-button svg {
    width: 17px;
}


.muathemewpgiare-button-small {
    min-height: 40px;

    padding: 0 16px;

    font-size: 11px;

    background:
        rgba(255,255,255,.07);

    border: 1px solid var(--muathemewpgiare-border);
}


.muathemewpgiare-button-primary {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #6366f1
        );

    box-shadow:
        0 12px 35px rgba(124,58,237,.27);
}


.muathemewpgiare-button-primary::before {
    content: "";

    position: absolute;

    top: -100%;
    left: -50%;

    width: 35%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transition:
        left .7s ease;
}


.muathemewpgiare-button-primary:hover::before {
    left: 120%;
}


.muathemewpgiare-button-primary:hover {
    box-shadow:
        0 20px 50px rgba(124,58,237,.42);
}


.muathemewpgiare-button-ghost {
    border: 1px solid var(--muathemewpgiare-border);

    color: var(--muathemewpgiare-text);

    background:
        rgba(255,255,255,.025);
}


.muathemewpgiare-button-ghost:hover {
    background:
        rgba(255,255,255,.07);

    transform: translateY(-3px);
}


.muathemewpgiare-mobile-toggle {
    display: none;

    width: 42px;
    height: 42px;

    border: 1px solid var(--muathemewpgiare-border);
    border-radius: 12px;

    color: white;

    background: var(--muathemewpgiare-card);
}


/* =========================================
   HERO
========================================= */

.muathemewpgiare-hero {
    position: relative;

    min-height: 100vh;

    padding:
        150px 0
        100px;

    overflow: hidden;

    display: flex;
    align-items: center;
}


.muathemewpgiare-hero-grid {
    position: absolute;
    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:
        70px 70px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 10%,
            transparent 72%
        );

    opacity: .45;
}


.muathemewpgiare-hero-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


.muathemewpgiare-orb-one {
    width: 500px;
    height: 500px;

    top: -200px;
    left: -100px;

    background:
        rgba(124,58,237,.17);
}


.muathemewpgiare-orb-two {
    width: 450px;
    height: 450px;

    right: -180px;
    bottom: -100px;

    background:
        rgba(37,99,235,.12);
}


.muathemewpgiare-hero .muathemewpgiare-container {
    position: relative;

    z-index: 2;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    align-items: center;

    gap: 70px;
}


.muathemewpgiare-hero-content {
    max-width: 650px;
}


.muathemewpgiare-eyebrow {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 12px;

    border: 1px solid rgba(139,92,246,.24);
    border-radius: 999px;

    color: #c4b5fd;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .18em;

    background:
        rgba(124,58,237,.07);
}


.muathemewpgiare-eyebrow-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #a78bfa;

    box-shadow:
        0 0 12px #a78bfa;

    animation:
        muathemewpgiarePulse 2s infinite;
}


@keyframes muathemewpgiarePulse {

    50% {
        transform: scale(1.6);
        opacity: .5;
    }

}


.muathemewpgiare-eyebrow-arrow {
    color: #7c3aed;
}


.muathemewpgiare-hero-title {
    margin-top: 30px;

    font-size:
        clamp(
            54px,
            6.4vw,
            90px
        );

    line-height: .99;

    letter-spacing: -.065em;

    font-weight: 900;
}


.muathemewpgiare-gradient-text {
    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff,
            #a78bfa,
            #60a5fa,
            #ffffff
        );

    background-size: 300% auto;

    color: transparent;

    background-clip: text;

    animation:
        muathemewpgiareGradient 6s linear infinite;
}


@keyframes muathemewpgiareGradient {

    to {
        background-position: 300% center;
    }

}


.muathemewpgiare-hero-description {
    max-width: 590px;

    margin-top: 28px;

    color: var(--muathemewpgiare-muted);

    font-size: 16px;

    line-height: 1.9;
}


.muathemewpgiare-hero-buttons {
    margin-top: 35px;

    display: flex;
    gap: 12px;
}


.muathemewpgiare-trust-row {
    margin-top: 40px;

    display: flex;
    align-items: center;

    gap: 15px;

    color: var(--muathemewpgiare-muted);

    font-size: 10px;
}


.muathemewpgiare-trust-row strong {
    display: block;

    color: var(--muathemewpgiare-text);

    font-size: 13px;
}


.muathemewpgiare-trust-row small {
    font-size: 9px;
}


.muathemewpgiare-avatar-stack {
    display: flex;
}


.muathemewpgiare-avatar-stack span {
    width: 31px;
    height: 31px;

    margin-left: -7px;

    display: grid;
    place-items: center;

    border: 2px solid var(--muathemewpgiare-bg);
    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #2563eb
        );

    font-size: 8px;
    font-weight: 800;
}


.muathemewpgiare-avatar-stack span:first-child {
    margin-left: 0;
}


.muathemewpgiare-trust-divider {
    width: 1px;
    height: 25px;

    background: var(--muathemewpgiare-border);
}


/* =========================================
   HERO DASHBOARD
========================================= */

.muathemewpgiare-hero-visual {
    position: relative;

    perspective: 1400px;
}


.muathemewpgiare-dashboard {
    position: relative;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 25px;

    background:
        rgba(13,13,20,.78);

    box-shadow:
        0 50px 120px rgba(0,0,0,.5),
        0 0 90px rgba(124,58,237,.1);

    transform:
        perspective(1400px)
        rotateY(-5deg)
        rotateX(3deg);
}


.muathemewpgiare-dashboard-glow {
    position: absolute;

    top: -50%;
    right: -20%;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        rgba(124,58,237,.15);

    filter: blur(70px);
}


.muathemewpgiare-dashboard-top {
    height: 48px;

    padding: 0 18px;

    display: flex;
    align-items: center;

    gap: 15px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}


.muathemewpgiare-window-dots {
    display: flex;
    gap: 5px;
}


.muathemewpgiare-window-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #52525b;
}


.muathemewpgiare-dashboard-address {
    flex: 1;

    padding: 6px 13px;

    border-radius: 7px;

    color: #71717a;

    background: rgba(255,255,255,.035);

    font-size: 8px;
}


.muathemewpgiare-dashboard-top svg {
    width: 15px;

    color: #71717a;
}


.muathemewpgiare-dashboard-body {
    display: flex;

    min-height: 400px;
}


.muathemewpgiare-dashboard-sidebar {
    width: 58px;

    padding: 17px 10px;

    display: flex;
    align-items: center;

    flex-direction: column;

    gap: 18px;

    border-right: 1px solid rgba(255,255,255,.06);
}


.muathemewpgiare-mini-logo {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    margin-bottom: 10px;

    border-radius: 8px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #4f46e5
        );

    font-size: 10px;
    font-weight: 900;
}


.muathemewpgiare-side-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #62626e;

    transition: .3s ease;
}


.muathemewpgiare-side-icon.active,
.muathemewpgiare-side-icon:hover {
    color: white;

    background:
        rgba(139,92,246,.15);
}


.muathemewpgiare-side-icon svg {
    width: 14px;
}


.muathemewpgiare-dashboard-main {
    flex: 1;

    padding: 27px;
}


.muathemewpgiare-dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.muathemewpgiare-dashboard-heading span {
    color: #777783;

    font-size: 8px;
}


.muathemewpgiare-dashboard-heading h3 {
    margin-top: 4px;

    font-size: 17px;

    letter-spacing: -.04em;
}


.muathemewpgiare-dashboard-action {
    display: flex;
    align-items: center;

    gap: 5px;

    padding: 7px 10px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px;

    color: #aaaab5;

    background: rgba(255,255,255,.035);

    font-size: 8px;
}


.muathemewpgiare-dashboard-action svg {
    width: 11px;
}


.muathemewpgiare-stat-grid {
    margin-top: 22px;

    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 10px;
}


.muathemewpgiare-stat-card {
    padding: 14px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;

    background:
        rgba(255,255,255,.025);
}


.muathemewpgiare-stat-card span {
    display: block;

    color: #71717a;

    font-size: 7px;
}


.muathemewpgiare-stat-card strong {
    display: block;

    margin-top: 7px;

    font-size: 16px;
}


.muathemewpgiare-stat-card small {
    display: block;

    margin-top: 5px;

    font-size: 7px;
}


.positive {
    color: #34d399;
}


.muathemewpgiare-chart-card {
    margin-top: 10px;

    padding: 18px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;

    background:
        rgba(255,255,255,.02);
}


.muathemewpgiare-chart-header {
    display: flex;
    justify-content: space-between;
}


.muathemewpgiare-chart-header span {
    display: block;

    color: #71717a;

    font-size: 7px;
}


.muathemewpgiare-chart-header strong {
    display: block;

    margin-top: 5px;

    font-size: 16px;
}


.muathemewpgiare-chart-period {
    align-self: flex-start;

    padding: 5px 7px;

    border-radius: 5px;

    background: rgba(255,255,255,.04);
}


.muathemewpgiare-chart {
    position: relative;

    height: 145px;

    margin-top: 17px;
}


.muathemewpgiare-chart::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.05) 0,
            rgba(255,255,255,.05) 1px,
            transparent 1px,
            transparent 35px
        );
}


.muathemewpgiare-chart-bars {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: end;

    justify-content: space-around;

    gap: 5px;
}


.muathemewpgiare-chart-bars span {
    width: 5%;

    border-radius: 5px 5px 2px 2px;

    background:
        linear-gradient(
            to top,
            rgba(124,58,237,.2),
            #8b5cf6
        );

    box-shadow:
        0 0 15px rgba(124,58,237,.2);

    animation:
        muathemewpgiareBars 2s ease-in-out infinite alternate;
}


.muathemewpgiare-chart-bars span:nth-child(even) {
    animation-delay: .3s;
}


@keyframes muathemewpgiareBars {

    from {
        transform: scaleY(.85);
    }

    to {
        transform: scaleY(1);
    }

}


.muathemewpgiare-floating-card {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;

    background:
        rgba(15,15,22,.82);

    backdrop-filter: blur(18px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);

    animation:
        muathemewpgiareFloat 5s ease-in-out infinite;
}


.muathemewpgiare-floating-card.card-one {
    top: 18%;

    right: -35px;
}


.muathemewpgiare-floating-card.card-two {
    bottom: 13%;

    left: -35px;

    animation-delay: -2s;
}


.muathemewpgiare-floating-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 9px;
}


.muathemewpgiare-floating-icon.purple {
    color: #c4b5fd;

    background: rgba(139,92,246,.15);
}


.muathemewpgiare-floating-icon.green {
    color: #6ee7b7;

    background: rgba(52,211,153,.12);
}


.muathemewpgiare-floating-icon svg {
    width: 14px;
}


.muathemewpgiare-floating-card small {
    display: block;

    color: #73737d;

    font-size: 7px;
}


.muathemewpgiare-floating-card strong {
    display: block;

    margin-top: 2px;

    font-size: 10px;
}


@keyframes muathemewpgiareFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


/* =========================================
   SCROLL HINT
========================================= */

.muathemewpgiare-scroll-hint {
    position: absolute;

    bottom: 25px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;

    color: #62626c;

    font-size: 7px;
    letter-spacing: .25em;
}


.muathemewpgiare-scroll-line {
    width: 1px;
    height: 35px;

    background:
        linear-gradient(
            to bottom,
            #8b5cf6,
            transparent
        );

    animation:
        muathemewpgiareScrollLine 1.5s infinite;
}


@keyframes muathemewpgiareScrollLine {

    50% {
        transform: translateY(8px);
        opacity: .4;
    }

}


/* =========================================
   MARQUEE
========================================= */

.muathemewpgiare-marquee {
    overflow: hidden;

    padding: 27px 0;

    border-top: 1px solid var(--muathemewpgiare-border);
    border-bottom: 1px solid var(--muathemewpgiare-border);

    background:
        rgba(255,255,255,.018);
}


.muathemewpgiare-marquee-track {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 35px;

    color: #595963;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .18em;

    animation:
        muathemewpgiareMarquee 25s linear infinite;
}


.muathemewpgiare-marquee-track b {
    color: #8b5cf6;
}


@keyframes muathemewpgiareMarquee {

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

}


/* =========================================
   SECTION
========================================= */

.muathemewpgiare-section {
    padding: 150px 0;
}


.muathemewpgiare-section-heading {
    display: grid;
    grid-template-columns: 100px 1fr;

    gap: 30px;

    margin-bottom: 65px;
}


.muathemewpgiare-section-number {
    padding-top: 10px;

    color: #7c3aed;

    font-family: monospace;

    font-size: 12px;
}


.muathemewpgiare-kicker {
    color: #8b5cf6;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .22em;
}


.muathemewpgiare-section-heading h2 {
    max-width: 700px;

    margin-top: 15px;

    font-size: clamp(38px, 5vw, 66px);

    line-height: 1.02;

    letter-spacing: -.06em;
}


.muathemewpgiare-section-heading h2 em {
    color: #858590;

    font-style: normal;
}


.muathemewpgiare-section-heading p {
    max-width: 520px;

    margin-top: 20px;

    color: var(--muathemewpgiare-muted);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================
   FEATURES
========================================= */

.muathemewpgiare-feature-grid {
    display: grid;

    grid-template-columns:
        1.3fr
        1fr
        1fr;

    gap: 16px;
}


.muathemewpgiare-feature-card {
    position: relative;

    min-height: 370px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--muathemewpgiare-border);
    border-radius: var(--muathemewpgiare-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease;
}


.muathemewpgiare-feature-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(139,92,246,.35);
}


.muathemewpgiare-feature-card.large {
    grid-row: span 2;

    min-height: 756px;
}


.muathemewpgiare-card-number {
    position: absolute;

    top: 25px;
    right: 28px;

    color: #4d4d57;

    font-family: monospace;

    font-size: 10px;
}


.muathemewpgiare-feature-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 50px;

    border: 1px solid rgba(139,92,246,.2);
    border-radius: 14px;

    color: #c4b5fd;

    background:
        rgba(139,92,246,.1);
}


.muathemewpgiare-feature-icon.blue {
    color: #7dd3fc;
    background: rgba(56,189,248,.08);
}


.muathemewpgiare-feature-icon.orange {
    color: #fdba74;
    background: rgba(251,146,60,.08);
}


.muathemewpgiare-feature-icon.green {
    color: #6ee7b7;
    background: rgba(52,211,153,.08);
}


.muathemewpgiare-feature-icon svg {
    width: 20px;
}


.muathemewpgiare-feature-card h3 {
    font-size: 22px;

    letter-spacing: -.035em;
}


.muathemewpgiare-feature-card p {
    max-width: 400px;

    margin-top: 13px;

    color: var(--muathemewpgiare-muted);

    font-size: 12px;

    line-height: 1.8;
}


/* FEATURE VISUAL */

.muathemewpgiare-feature-visual {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    height: 220px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;

    background:
        radial-gradient(
            circle,
            rgba(124,58,237,.14),
            transparent 60%
        );
}


.muathemewpgiare-mini-button {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px 20px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;

    color: white;

    background:
        rgba(255,255,255,.07);

    box-shadow:
        0 20px 50px rgba(0,0,0,.3);

    transition: .35s ease;
}


.muathemewpgiare-mini-button:hover {
    transform:
        translateY(-5px)
        scale(1.04);

    background:
        rgba(139,92,246,.2);

    box-shadow:
        0 25px 60px rgba(124,58,237,.25);
}


.muathemewpgiare-mini-button svg {
    width: 15px;
}


/* GLASS DEMO */

.muathemewpgiare-glass-demo {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.09),
            rgba(124,58,237,.1)
        );
}


.muathemewpgiare-glass-demo span {
    width: 70px;
    height: 70px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;

    background:
        rgba(255,255,255,.06);

    backdrop-filter: blur(12px);

    transform:
        rotate(
            calc(var(--i, 0) * 8deg)
        );
}


.muathemewpgiare-glass-demo span:nth-child(2) {
    transform:
        translateY(-14px)
        scale(1.15);
}


/* MAGNETIC */

.muathemewpgiare-magnetic-demo {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    height: 120px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background:
        radial-gradient(
            circle,
            rgba(251,146,60,.12),
            transparent 65%
        );
}


.muathemewpgiare-magnetic-demo span {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #fb923c,
            #f97316
        );

    box-shadow:
        0 0 45px rgba(251,146,60,.45);

    animation:
        muathemewpgiareMagnetDemo 3s ease-in-out infinite;
}


@keyframes muathemewpgiareMagnetDemo {

    0%,
    100% {
        transform: translate(-35px, 0);
    }

    50% {
        transform: translate(35px, 0);
    }

}


/* SPEED */

.muathemewpgiare-speed {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;
}


.muathemewpgiare-speed-track {
    height: 5px;

    overflow: hidden;

    border-radius: 10px;

    background: rgba(255,255,255,.07);
}


.muathemewpgiare-speed-track span {
    display: block;

    width: 98%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #10b981,
            #34d399
        );

    box-shadow:
        0 0 15px rgba(52,211,153,.5);
}


.muathemewpgiare-speed strong {
    display: block;

    margin-top: 15px;

    color: #6ee7b7;

    font-size: 30px;
}


/* =========================================
   SHOWCASE
========================================= */

.muathemewpgiare-showcase-section {
    padding: 130px 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(124,58,237,.035),
            transparent
        );
}


.muathemewpgiare-showcase-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 50px;

    margin-bottom: 55px;
}


.muathemewpgiare-showcase-heading h2 {
    margin-top: 15px;

    font-size: clamp(40px, 5vw, 67px);

    line-height: 1;

    letter-spacing: -.065em;
}


.muathemewpgiare-showcase-heading h2 span {
    display: block;

    color: #73737d;
}


.muathemewpgiare-showcase-heading p {
    max-width: 360px;

    color: var(--muathemewpgiare-muted);

    font-size: 12px;

    line-height: 1.8;
}


.muathemewpgiare-showcase-grid {
    display: grid;

    grid-template-columns:
        1.4fr
        .8fr
        .8fr;

    grid-template-rows: 430px;

    gap: 16px;
}


.muathemewpgiare-showcase-card {
    position: relative;

    overflow: hidden;

    padding: 30px;

    border: 1px solid var(--muathemewpgiare-border);
    border-radius: 26px;
}


.showcase-main {
    background:
        radial-gradient(
            circle at 50% 60%,
            rgba(124,58,237,.32),
            transparent 45%
        ),
        #111019;
}


.muathemewpgiare-showcase-top {
    display: flex;
    justify-content: space-between;

    color: #7c7c88;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .18em;
}


.muathemewpgiare-showcase-top svg {
    width: 18px;
}


.muathemewpgiare-showcase-content {
    position: absolute;

    left: 30px;
    bottom: 35px;

    z-index: 3;
}


.muathemewpgiare-showcase-content h3 {
    font-size: 43px;

    line-height: .94;

    letter-spacing: -.055em;
}


.muathemewpgiare-showcase-content p {
    margin-top: 17px;

    color: #858590;

    font-size: 10px;
}


.muathemewpgiare-showcase-orb {
    position: absolute;

    width: 210px;
    height: 210px;

    top: 80px;
    right: 90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #c4b5fd,
            #7c3aed 35%,
            #1e1b4b 70%,
            transparent 71%
        );

    filter:
        drop-shadow(
            0 0 60px rgba(139,92,246,.55)
        );

    animation:
        muathemewpgiareOrb 5s ease-in-out infinite;
}


@keyframes muathemewpgiareOrb {

    50% {
        transform:
            translateY(-20px)
            scale(1.08);
    }

}


.muathemewpgiare-showcase-ring {
    position: absolute;

    border: 1px solid rgba(196,181,253,.25);

    border-radius: 50%;

    transform:
        rotateX(65deg)
        rotateY(15deg);

    animation:
        muathemewpgiareRing 8s linear infinite;
}


.ring-one {
    width: 380px;
    height: 150px;

    top: 100px;
    right: 10px;
}


.ring-two {
    width: 430px;
    height: 180px;

    top: 85px;
    right: -15px;

    animation-direction: reverse;
}


@keyframes muathemewpgiareRing {

    to {
        transform:
            rotateX(65deg)
            rotateY(15deg)
            rotateZ(360deg);
    }

}


.showcase-dark {
    background:
        linear-gradient(
            145deg,
            #13131a,
            #08080c
        );
}


.muathemewpgiare-showcase-label {
    color: #71717a;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .18em;
}


.muathemewpgiare-mini-chart {
    height: 190px;

    margin-top: 35px;

    display: flex;
    align-items: end;

    gap: 9px;
}


.muathemewpgiare-mini-chart span {
    flex: 1;

    border-radius: 5px 5px 0 0;

    background:
        linear-gradient(
            to top,
            rgba(124,58,237,.15),
            #8b5cf6
        );
}


.showcase-dark strong {
    position: absolute;

    bottom: 30px;

    font-size: 30px;

    letter-spacing: -.05em;
}


.showcase-purple {
    background:
        linear-gradient(
            145deg,
            #3b1f75,
            #1e1640
        );
}


.showcase-purple > svg {
    width: 30px;
    margin-top: 30px;

    color: #ddd6fe;
}


.showcase-purple h3 {
    margin-top: 80px;

    font-size: 27px;

    line-height: 1;

    letter-spacing: -.05em;
}


.showcase-purple p {
    margin-top: 15px;

    color: #b8acd7;

    font-size: 10px;
}


.muathemewpgiare-command-pills {
    position: absolute;

    left: 30px;
    bottom: 30px;

    display: flex;
    gap: 7px;
}


.muathemewpgiare-command-pills span {
    padding: 7px 9px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;

    color: #d8b4fe;

    background:
        rgba(255,255,255,.07);

    font-family: monospace;

    font-size: 8px;
}


/* =========================================
   PRICING
========================================= */

.muathemewpgiare-pricing-heading {
    text-align: center;
}


.muathemewpgiare-pricing-heading h2 {
    margin-top: 17px;

    font-size: clamp(40px, 5vw, 65px);

    letter-spacing: -.06em;
}


.muathemewpgiare-pricing-heading h2 span {
    color: #8b5cf6;
}


.muathemewpgiare-pricing-heading p {
    max-width: 500px;

    margin: 20px auto 0;

    color: var(--muathemewpgiare-muted);

    font-size: 12px;
}


.muathemewpgiare-pricing-grid {
    margin-top: 60px;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 16px;
}


.muathemewpgiare-price-card {
    position: relative;

    padding: 34px;

    border: 1px solid var(--muathemewpgiare-border);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.018)
        );

    transition:
        transform .4s ease,
        border-color .4s ease;
}


.muathemewpgiare-price-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(139,92,246,.35);
}


.muathemewpgiare-price-card.featured {
    border-color:
        rgba(139,92,246,.45);

    background:
        linear-gradient(
            145deg,
            rgba(124,58,237,.13),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 30px 80px rgba(124,58,237,.1);
}


.muathemewpgiare-popular {
    position: absolute;

    top: 20px;
    right: 20px;

    padding: 6px 9px;

    border-radius: 6px;

    color: #ddd6fe;

    background:
        rgba(139,92,246,.15);

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .12em;
}


.muathemewpgiare-price-label {
    color: #8b5cf6;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .2em;
}


.muathemewpgiare-price-card h3 {
    margin-top: 13px;

    font-size: 23px;
}


.muathemewpgiare-price-card > p {
    margin-top: 8px;

    color: var(--muathemewpgiare-muted);

    font-size: 10px;
}


.muathemewpgiare-price {
    margin-top: 30px;

    font-size: 39px;
    font-weight: 900;

    letter-spacing: -.06em;
}


.muathemewpgiare-price small {
    color: #6f6f79;

    font-size: 9px;

    letter-spacing: 0;
}


.muathemewpgiare-price-button {
    width: 100%;

    height: 48px;

    margin-top: 25px;

    border: 1px solid var(--muathemewpgiare-border);
    border-radius: 11px;

    color: var(--muathemewpgiare-text);

    background:
        rgba(255,255,255,.04);

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition: .3s ease;
}


.muathemewpgiare-price-button:hover {
    background:
        rgba(255,255,255,.09);

    transform: translateY(-2px);
}


.muathemewpgiare-price-button.primary {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #6366f1
        );

    box-shadow:
        0 12px 30px rgba(124,58,237,.25);
}


.muathemewpgiare-price-card ul {
    margin-top: 30px;

    display: grid;

    gap: 14px;

    list-style: none;
}


.muathemewpgiare-price-card li {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #92929d;

    font-size: 10px;
}


.muathemewpgiare-price-card li svg {
    width: 14px;

    color: #8b5cf6;
}


/* =========================================
   CTA
========================================= */

.muathemewpgiare-cta-section {
    position: relative;

    padding: 80px 0 150px;

    overflow: hidden;
}


.muathemewpgiare-cta-glow {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 600px;
    height: 350px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(124,58,237,.13);

    filter: blur(90px);
}


.muathemewpgiare-cta {
    position: relative;

    padding:
        100px 30px;

    overflow: hidden;

    border: 1px solid rgba(139,92,246,.2);
    border-radius: 30px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(124,58,237,.18),
            transparent 55%
        ),
        rgba(255,255,255,.025);
}


.muathemewpgiare-cta-icon {
    width: 55px;
    height: 55px;

    margin: 0 auto 25px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(139,92,246,.3);
    border-radius: 16px;

    color: #c4b5fd;

    background:
        rgba(139,92,246,.1);

    box-shadow:
        0 0 50px rgba(139,92,246,.2);
}


.muathemewpgiare-cta-icon svg {
    width: 22px;
}


.muathemewpgiare-cta h2 {
    margin-top: 18px;

    font-size: clamp(43px, 6vw, 75px);

    line-height: .98;

    letter-spacing: -.065em;
}


.muathemewpgiare-cta p {
    max-width: 500px;

    margin: 22px auto 30px;

    color: var(--muathemewpgiare-muted);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================
   FOOTER
========================================= */

.muathemewpgiare-footer {
    padding: 80px 0 25px;

    border-top: 1px solid var(--muathemewpgiare-border);
}


.muathemewpgiare-footer-grid {
    display: grid;

    grid-template-columns: 1fr .6fr;
}


.muathemewpgiare-footer-grid > div:first-child p {
    max-width: 280px;

    margin-top: 20px;

    color: var(--muathemewpgiare-muted);

    font-size: 11px;

    line-height: 1.8;
}


.muathemewpgiare-footer-links {
    display: flex;

    justify-content: flex-end;

    gap: 100px;
}


.muathemewpgiare-footer-links div {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


.muathemewpgiare-footer-links strong {
    margin-bottom: 5px;

    font-size: 10px;
}


.muathemewpgiare-footer-links a {
    color: #70707a;

    font-size: 10px;

    transition: color .25s ease;
}


.muathemewpgiare-footer-links a:hover {
    color: white;
}


.muathemewpgiare-footer-bottom {
    margin-top: 70px;

    padding-top: 20px;

    display: flex;
    justify-content: space-between;

    border-top: 1px solid var(--muathemewpgiare-border);

    color: #55555f;

    font-size: 8px;
}


/* =========================================
   MODAL
========================================= */

.muathemewpgiare-modal {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;
}


.muathemewpgiare-modal.active {
    display: flex;
}


.muathemewpgiare-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(0,0,0,.75);

    backdrop-filter: blur(15px);
}


.muathemewpgiare-modal-box {
    position: relative;

    z-index: 2;

    width: min(480px,100%);

    padding: 40px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 25px;

    background:
        #101016;

    box-shadow:
        0 50px 100px rgba(0,0,0,.6);

    transform: translateY(20px) scale(.95);

    opacity: 0;

    transition:
        .4s cubic-bezier(.2,.8,.2,1);
}


.muathemewpgiare-modal.active .muathemewpgiare-modal-box {
    transform: translateY(0) scale(1);

    opacity: 1;
}


.muathemewpgiare-modal-close {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #aaa;

    background:
        rgba(255,255,255,.05);

    cursor: pointer;
}


.muathemewpgiare-modal-icon {
    width: 50px;
    height: 50px;

    margin-bottom: 25px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: #c4b5fd;

    background:
        rgba(139,92,246,.12);
}


.muathemewpgiare-modal-icon svg {
    width: 21px;
}


.muathemewpgiare-modal-box h3 {
    margin-top: 15px;

    font-size: 27px;

    letter-spacing: -.04em;
}


.muathemewpgiare-modal-box p {
    margin: 15px 0 25px;

    color: var(--muathemewpgiare-muted);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================
   TOAST
========================================= */

.muathemewpgiare-toast {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 11000;

    min-width: 260px;

    padding: 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid rgba(255,255,255,.1);
    border-radius: 15px;

    background:
        rgba(18,18,25,.9);

    backdrop-filter: blur(20px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.4);

    transform:
        translateY(120px);

    opacity: 0;

    transition:
        .45s cubic-bezier(.2,.8,.2,1);
}


.muathemewpgiare-toast.show {
    transform: translateY(0);

    opacity: 1;
}


.muathemewpgiare-toast-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #6ee7b7;

    background:
        rgba(52,211,153,.1);
}


.muathemewpgiare-toast-icon svg {
    width: 15px;
}


.muathemewpgiare-toast strong,
.muathemewpgiare-toast span {
    display: block;
}


.muathemewpgiare-toast strong {
    font-size: 10px;
}


.muathemewpgiare-toast span {
    margin-top: 2px;

    color: #777783;

    font-size: 8px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 1050px) {

    .muathemewpgiare-menu {
        display: none;
    }

    .muathemewpgiare-nav-actions {
        margin-left: auto;
        margin-right: 10px;
    }

    .muathemewpgiare-mobile-toggle {
        display: grid;
        place-items: center;
    }

    .muathemewpgiare-hero .muathemewpgiare-container {
        grid-template-columns: 1fr;
    }

    .muathemewpgiare-hero-content {
        max-width: 800px;
    }

    .muathemewpgiare-hero-visual {
        max-width: 850px;
    }

    .muathemewpgiare-feature-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .muathemewpgiare-feature-card.large {
        grid-row: auto;
        min-height: 500px;
    }

    .muathemewpgiare-showcase-grid {
        grid-template-columns: 1fr 1fr;
    }

    .showcase-main {
        grid-column: span 2;
    }

    .muathemewpgiare-pricing-grid {
        grid-template-columns: 1fr;
    }

    .muathemewpgiare-price-card {
        max-width: 550px;
        width: 100%;
        margin: auto;
    }

}


@media (max-width: 700px) {

    .muathemewpgiare-container {
        width: min(100% - 28px,1180px);
    }

    .muathemewpgiare-nav-inner {
        width: calc(100% - 28px);
    }

    .muathemewpgiare-logo-text {
        font-size: 10px;
    }

    .muathemewpgiare-nav-actions {
        display: none;
    }

    .muathemewpgiare-mobile-menu {
        position: fixed;

        top: 80px;
        left: 14px;
        right: 14px;

        z-index: 999;

        padding: 20px;

        display: flex;
        flex-direction: column;

        gap: 5px;

        border: 1px solid var(--muathemewpgiare-border);
        border-radius: 18px;

        background:
            rgba(12,12,17,.92);

        backdrop-filter: blur(25px);

        transform: translateY(-20px);

        opacity: 0;
        visibility: hidden;

        transition: .3s ease;
    }

    .muathemewpgiare-mobile-menu.active {
        transform: translateY(0);

        opacity: 1;
        visibility: visible;
    }

    .muathemewpgiare-mobile-menu a {
        padding: 14px;

        border-radius: 10px;

        color: #aaa;

        font-size: 12px;
    }

    .muathemewpgiare-mobile-menu a:hover {
        background: rgba(255,255,255,.05);
        color: white;
    }

    .muathemewpgiare-hero {
        padding-top: 130px;
    }

    .muathemewpgiare-hero-title {
        font-size: 52px;
    }

    .muathemewpgiare-hero-description {
        font-size: 13px;
    }

    .muathemewpgiare-hero-buttons {
        flex-direction: column;
    }

    .muathemewpgiare-button {
        width: 100%;
    }

    .muathemewpgiare-trust-row {
        flex-wrap: wrap;
    }

    .muathemewpgiare-dashboard {
        transform: none;
    }

    .muathemewpgiare-dashboard-body {
        min-height: 350px;
    }

    .muathemewpgiare-dashboard-sidebar {
        display: none;
    }

    .muathemewpgiare-dashboard-main {
        padding: 17px;
    }

    .muathemewpgiare-stat-grid {
        grid-template-columns: 1fr;
    }

    .muathemewpgiare-stat-card:nth-child(3) {
        display: none;
    }

    .muathemewpgiare-floating-card {
        display: none;
    }

    .muathemewpgiare-section {
        padding: 90px 0;
    }

    .muathemewpgiare-section-heading {
        display: block;
    }

    .muathemewpgiare-section-number {
        display: block;
        margin-bottom: 20px;
    }

    .muathemewpgiare-feature-grid {
        grid-template-columns: 1fr;
    }

    .muathemewpgiare-feature-card,
    .muathemewpgiare-feature-card.large {
        min-height: 400px;
    }

    .muathemewpgiare-showcase-heading {
        display: block;
    }

    .muathemewpgiare-showcase-heading p {
        margin-top: 20px;
    }

    .muathemewpgiare-showcase-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .showcase-main {
        grid-column: auto;

        min-height: 430px;
    }

    .showcase-dark,
    .showcase-purple {
        min-height: 300px;
    }

    .muathemewpgiare-showcase-orb {
        right: 20px;
    }

    .muathemewpgiare-footer-grid {
        grid-template-columns: 1fr;
    }

    .muathemewpgiare-footer-links {
        justify-content: flex-start;

        margin-top: 50px;

        gap: 60px;
    }

    .muathemewpgiare-footer-bottom {
        flex-direction: column;
        gap: 10px;
    }

    .muathemewpgiare-cursor,
    .muathemewpgiare-cursor-follower {
        display: none;
    }

    .muathemewpgiare-scroll-hint {
        display: none;
    }

    .muathemewpgiare-cta {
        padding: 70px 20px;
    }

}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}

"use strict";

/*
 * =========================================================
 * MUATHEMEWPGIARE PREMIUM INTERACTION ENGINE
 * Author: muathemewpgiare.com
 * =========================================================
 */


/* =========================================================
   GLOBAL
========================================================= */

const $ = (selector, parent = document) =>
    parent.querySelector(selector);

const $$ = (selector, parent = document) =>
    [...parent.querySelectorAll(selector)];


/* =========================================================
   LOADER
========================================================= */

window.addEventListener("load", () => {

    const loader = $("#muathemewpgiareLoader");
    const line = $(".muathemewpgiare-loader-line span");

    if (line) {
        gsap.to(line, {
            width: "100%",
            duration: 1.1,
            ease: "power3.inOut"
        });
    }

    setTimeout(() => {

        gsap.to(loader, {
            opacity: 0,
            duration: .7,
            ease: "power2.out",
            onComplete: () => {
                loader.remove();
            }
        });

    }, 1200);

});


/* =========================================================
   LUCIDE
========================================================= */

if (window.lucide) {
    lucide.createIcons();
}


/* =========================================================
   AOS
========================================================= */

if (window.AOS) {

    AOS.init({
        duration: 850,
        easing: "ease-out-cubic",
        once: true,
        offset: 70
    });

}


/* =========================================================
   LENIS SMOOTH SCROLL
========================================================= */

let muathemewpgiareLenis = null;

if (window.Lenis) {

    muathemewpgiareLenis = new Lenis({
        duration: 1.15,
        smoothWheel: true,
        wheelMultiplier: .9,
        touchMultiplier: 1.1
    });


    function muathemewpgiareLenisFrame(time) {

        muathemewpgiareLenis.raf(time);

        requestAnimationFrame(
            muathemewpgiareLenisFrame
        );

    }

    requestAnimationFrame(
        muathemewpgiareLenisFrame
    );

}


/* =========================================================
   GSAP
========================================================= */

if (window.gsap) {

    gsap.registerPlugin(ScrollTrigger);


    /* HERO INTRO */

    gsap.from(
        ".muathemewpgiare-dashboard",
        {
            opacity: 0,
            y: 70,
            rotateY: -12,
            duration: 1.5,
            delay: .5,
            ease: "power4.out"
        }
    );


    /* FLOATING CARDS */

    gsap.to(
        ".muathemewpgiare-floating-card.card-one",
        {
            y: -10,
            duration: 2.8,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        }
    );


    gsap.to(
        ".muathemewpgiare-floating-card.card-two",
        {
            y: 12,
            duration: 3.4,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        }
    );


    /* PARALLAX ORBS */

    gsap.to(
        ".muathemewpgiare-orb-one",
        {
            x: 100,
            y: 80,
            scrollTrigger: {
                trigger: ".muathemewpgiare-hero",
                start: "top top",
                end: "bottom top",
                scrub: 1
            }
        }
    );


    gsap.to(
        ".muathemewpgiare-orb-two",
        {
            x: -100,
            y: -70,
            scrollTrigger: {
                trigger: ".muathemewpgiare-hero",
                start: "top top",
                end: "bottom top",
                scrub: 1
            }
        }
    );


    /* SHOWCASE PARALLAX */

    gsap.utils.toArray(
        ".muathemewpgiare-showcase-orb"
    ).forEach((orb) => {

        gsap.to(orb, {

            y: -40,

            scrollTrigger: {
                trigger: orb,
                start: "top bottom",
                end: "bottom top",
                scrub: 1.5
            }

        });

    });

}


/* =========================================================
   NAVBAR SCROLL
========================================================= */

const navbar =
    $("#muathemewpgiareNavbar");

function muathemewpgiareNavbarUpdate() {

    if (window.scrollY > 30) {
        navbar?.classList.add("scrolled");
    } else {
        navbar?.classList.remove("scrolled");
    }

}


window.addEventListener(
    "scroll",
    muathemewpgiareNavbarUpdate,
    { passive: true }
);


/* =========================================================
   SCROLL PROGRESS
========================================================= */

const progress =
    $("#muathemewpgiareScrollProgress");


function muathemewpgiareProgress() {

    const scrollTop =
        window.scrollY;

    const documentHeight =
        document.documentElement.scrollHeight -
        window.innerHeight;

    const percentage =
        documentHeight > 0
            ? (scrollTop / documentHeight) * 100
            : 0;

    if (progress) {
        progress.style.width =
            `${percentage}%`;
    }

}


window.addEventListener(
    "scroll",
    muathemewpgiareProgress,
    { passive: true }
);


/* =========================================================
   CUSTOM CURSOR
========================================================= */

const cursor =
    $(".muathemewpgiare-cursor");

const follower =
    $(".muathemewpgiare-cursor-follower");


if (
    cursor &&
    follower &&
    window.matchMedia("(pointer:fine)").matches
) {

    let cursorX = 0;
    let cursorY = 0;

    let followerX = 0;
    let followerY = 0;


    window.addEventListener(
        "mousemove",
        (event) => {

            cursorX = event.clientX;
            cursorY = event.clientY;

            gsap.to(cursor, {
                x: cursorX,
                y: cursorY,
                duration: .08,
                overwrite: true
            });

        }
    );


    function muathemewpgiareCursorLoop() {

        followerX +=
            (cursorX - followerX) * .12;

        followerY +=
            (cursorY - followerY) * .12;

        gsap.set(follower, {
            x: followerX,
            y: followerY
        });

        requestAnimationFrame(
            muathemewpgiareCursorLoop
        );

    }

    muathemewpgiareCursorLoop();


    $$(
        "a, button, .muathemewpgiare-feature-card"
    ).forEach((element) => {

        element.addEventListener(
            "mouseenter",
            () => {
                follower.classList.add("hover");
            }
        );

        element.addEventListener(
            "mouseleave",
            () => {
                follower.classList.remove("hover");
            }
        );

    });

}


/* =========================================================
   MAGNETIC BUTTON
========================================================= */

$$("[data-magnetic]").forEach((button) => {

    let frame = null;


    button.addEventListener(
        "mousemove",
        (event) => {

            if (
                !window.matchMedia(
                    "(pointer:fine)"
                ).matches
            ) {
                return;
            }


            const rect =
                button.getBoundingClientRect();


            const x =
                event.clientX -
                rect.left -
                rect.width / 2;


            const y =
                event.clientY -
                rect.top -
                rect.height / 2;


            cancelAnimationFrame(frame);


            frame =
                requestAnimationFrame(() => {

                    gsap.to(button, {

                        x: x * .16,
                        y: y * .16,

                        duration: .35,

                        ease: "power3.out",

                        overwrite: true

                    });

                });

        }
    );


    button.addEventListener(
        "mouseleave",
        () => {

            gsap.to(button, {

                x: 0,
                y: 0,

                duration: .55,

                ease: "elastic.out(1,.4)"

            });

        }
    );

});


/* =========================================================
   FEATURE CARD TILT
========================================================= */

$$(".muathemewpgiare-feature-card").forEach(
    (card) => {

        card.addEventListener(
            "mousemove",
            (event) => {

                if (
                    !window.matchMedia(
                        "(pointer:fine)"
                    ).matches
                ) {
                    return;
                }


                const rect =
                    card.getBoundingClientRect();


                const x =
                    event.clientX -
                    rect.left;


                const y =
                    event.clientY -
                    rect.top;


                const rotateY =
                    ((x / rect.width) - .5) * 4;


                const rotateX =
                    ((y / rect.height) - .5) * -4;


                gsap.to(card, {

                    rotateX,
                    rotateY,

                    transformPerspective: 900,

                    duration: .4,

                    ease: "power2.out",

                    overwrite: true

                });

            }
        );


        card.addEventListener(
            "mouseleave",
            () => {

                gsap.to(card, {

                    rotateX: 0,
                    rotateY: 0,

                    duration: .7,

                    ease: "elastic.out(1,.5)"

                });

            }
        );

    }
);


/* =========================================================
   MOBILE MENU
========================================================= */

const mobileToggle =
    $("#muathemewpgiareMobileToggle");

const mobileMenu =
    $("#muathemewpgiareMobileMenu");


mobileToggle?.addEventListener(
    "click",
    () => {

        mobileMenu?.classList.toggle(
            "active"
        );

    }
);


$$(
    ".muathemewpgiare-mobile-menu a"
).forEach((link) => {

    link.addEventListener(
        "click",
        () => {

            mobileMenu?.classList.remove(
                "active"
            );

        }
    );

});


/* =========================================================
   MODAL
========================================================= */

const modal =
    $("#muathemewpgiareModal");

const openDemo =
    $("#muathemewpgiareOpenDemo");

const ctaButton =
    $("#muathemewpgiareCtaButton");

const closeModal =
    $("#muathemewpgiareModalClose");

const modalAction =
    $("#muathemewpgiareModalAction");


function muathemewpgiareOpenModal() {

    modal?.classList.add("active");

    document.body.style.overflow =
        "hidden";

}


function muathemewpgiareCloseModal() {

    modal?.classList.remove("active");

    document.body.style.overflow =
        "";

}


openDemo?.addEventListener(
    "click",
    muathemewpgiareOpenModal
);


ctaButton?.addEventListener(
    "click",
    muathemewpgiareOpenModal
);


closeModal?.addEventListener(
    "click",
    muathemewpgiareCloseModal
);


modalAction?.addEventListener(
    "click",
    () => {

        muathemewpgiareCloseModal();

        muathemewpgiareShowToast(
            "Đã sẵn sàng để bắt đầu."
        );

    }
);


$(".muathemewpgiare-modal-backdrop")
    ?.addEventListener(
        "click",
        muathemewpgiareCloseModal
    );


document.addEventListener(
    "keydown",
    (event) => {

        if (event.key === "Escape") {
            muathemewpgiareCloseModal();
        }

    }
);


/* =========================================================
   TOAST
========================================================= */

const toast =
    $("#muathemewpgiareToast");

const toastText =
    $("#muathemewpgiareToastText");

let toastTimer = null;


function muathemewpgiareShowToast(
    message
) {

    if (!toast) {
        return;
    }


    if (toastText) {
        toastText.textContent =
            message;
    }


    toast.classList.add("show");


    clearTimeout(toastTimer);


    toastTimer =
        setTimeout(() => {

            toast.classList.remove(
                "show"
            );

        }, 2800);

}


$$("[data-toast]").forEach(
    (button) => {

        button.addEventListener(
            "click",
            () => {

                muathemewpgiareShowToast(
                    button.dataset.toast
                );

            }
        );

    }
);


/* =========================================================
   THEME
========================================================= */

const themeButton =
    $("#muathemewpgiareThemeButton");


themeButton?.addEventListener(
    "click",
    () => {

        document.body.classList.toggle(
            "light"
        );

        localStorage.setItem(
            "muathemewpgiare-theme",
            document.body.classList.contains(
                "light"
            )
                ? "light"
                : "dark"
        );

        muathemewpgiareShowToast(
            document.body.classList.contains(
                "light"
            )
                ? "Đã chuyển sang Light Mode"
                : "Đã chuyển sang Dark Mode"
        );

    }
);


const savedTheme =
    localStorage.getItem(
        "muathemewpgiare-theme"
    );


if (savedTheme === "light") {
    document.body.classList.add("light");
}


/* =========================================================
   ACTIVE NAVIGATION
========================================================= */

const sections =
    $$("section[id]");

const menuLinks =
    $$(".muathemewpgiare-menu-link");


const observer =
    new IntersectionObserver(
        (entries) => {

            entries.forEach(
                (entry) => {

                    if (!entry.isIntersecting) {
                        return;
                    }


                    const id =
                        entry.target.id;


                    menuLinks.forEach(
                        (link) => {

                            link.classList.toggle(
                                "active",
                                link.getAttribute(
                                    "href"
                                ) === `#${id}`
                            );

                        }
                    );

                }
            );

        },
        {
            rootMargin:
                "-35% 0px -55% 0px"
        }
    );


sections.forEach(
    (section) => {
        observer.observe(section);
    }
);


/* =========================================================
   SMOOTH ANCHOR
========================================================= */

$$("a[href^='#']").forEach(
    (link) => {

        link.addEventListener(
            "click",
            (event) => {

                const targetId =
                    link.getAttribute("href");


                if (
                    !targetId ||
                    targetId === "#"
                ) {
                    return;
                }


                const target =
                    $(targetId);


                if (!target) {
                    return;
                }


                event.preventDefault();


                if (muathemewpgiareLenis) {

                    muathemewpgiareLenis.scrollTo(
                        target,
                        {
                            offset: -70
                        }
                    );

                } else {

                    target.scrollIntoView({
                        behavior: "smooth"
                    });

                }

            }
        );

    }
);


/* =========================================================
   PARTICLES
========================================================= */

async function muathemewpgiareInitParticles() {

    if (
        !window.tsParticles ||
        !window.tsParticles.load
    ) {
        return;
    }


    try {

        await tsParticles.load({

            id:
                "muathemewpgiareParticles",

            options: {

                fullScreen: {
                    enable: false
                },

                fpsLimit: 60,

                particles: {

                    number: {
                        value: 35,
                        density: {
                            enable: true,
                            area: 1100
                        }
                    },

                    color: {
                        value: [
                            "#8b5cf6",
                            "#6366f1",
                            "#38bdf8"
                        ]
                    },

                    opacity: {
                        value: .25
                    },

                    size: {
                        value: {
                            min: 1,
                            max: 2.5
                        }
                    },

                    links: {
                        enable: true,
                        distance: 130,
                        opacity: .08,
                        width: 1
                    },

                    move: {
                        enable: true,
                        speed: .35,
                        direction: "none",
                        outModes: {
                            default: "out"
                        }
                    }

                }

            }

        });

    } catch (error) {

        console.warn(
            "MUATHEMEWPGIARE particles unavailable:",
            error
        );

    }

}


muathemewpgiareInitParticles();


/* =========================================================
   BUTTON PRESS MICRO EFFECT
========================================================= */

$$(".muathemewpgiare-button").forEach(
    (button) => {

        button.addEventListener(
            "pointerdown",
            () => {

                gsap.to(button, {

                    scale: .96,

                    duration: .12,

                    overwrite: true

                });

            }
        );


        button.addEventListener(
            "pointerup",
            () => {

                gsap.to(button, {

                    scale: 1,

                    duration: .45,

                    ease: "elastic.out(1,.4)"

                });

            }
        );

    }
);


/* =========================================================
   DASHBOARD MOUSE PARALLAX
========================================================= */

const dashboard =
    $(".muathemewpgiare-dashboard");


if (
    dashboard &&
    window.matchMedia("(pointer:fine)").matches
) {

    dashboard.addEventListener(
        "mousemove",
        (event) => {

            const rect =
                dashboard.getBoundingClientRect();


            const x =
                (event.clientX - rect.left) /
                rect.width -
                .5;


            const y =
                (event.clientY - rect.top) /
                rect.height -
                .5;


            gsap.to(dashboard, {

                rotateY:
                    -5 + x * 7,

                rotateX:
                    3 - y * 7,

                duration: .6,

                ease: "power2.out",

                overwrite: true

            });

        }
    );


    dashboard.addEventListener(
        "mouseleave",
        () => {

            gsap.to(dashboard, {

                rotateY: -5,
                rotateX: 3,

                duration: 1,

                ease: "elastic.out(1,.5)"

            });

        }
    );

}


/* =========================================================
   RESIZE
========================================================= */

window.addEventListener(
    "resize",
    () => {

        if (
            window.innerWidth > 1050
        ) {

            mobileMenu?.classList.remove(
                "active"
            );

        }

    }
);


/* =========================================================
   READY
========================================================= */

console.log(
    "%c MUATHEMEWPGIARE.COM ",
    "background:#7c3aed;color:#fff;padding:8px 12px;border-radius:6px;font-weight:800;"
);

console.log(
    "%c Premium UI Experience initialized.",
    "color:#a78bfa;font-weight:700;"
);