/* style.css */

:root {
    --bg: #05050b;
    --surface: rgba(15, 16, 29, 0.68);
    --surface-strong: rgba(19, 20, 36, 0.9);

    --border: rgba(255, 255, 255, 0.09);

    --text: #f7f7fb;
    --muted: #9294a6;

    --purple: #8257ff;
    --blue: #35b9ff;

    --gradient:
        linear-gradient(
            120deg,
            #8d5cff,
            #5f72ff,
            #38bfff
        );
}


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


html {
    scroll-behavior: smooth;
}


body {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(105, 68, 255, 0.14),
            transparent 32%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255,255,255,0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.012) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );

    z-index: -5;
}


.noise {
    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: 0.025;

    z-index: 1000;
}


.orb {
    position: fixed;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(150px);

    opacity: 0.18;

    pointer-events: none;

    z-index: -10;
}


.orb-one {
    background: #713cff;

    top: -160px;
    left: -190px;

    animation:
        orbMoveOne 14s ease-in-out infinite;
}


.orb-two {
    background: #008cff;

    right: -220px;
    top: 45%;

    animation:
        orbMoveTwo 17s ease-in-out infinite;
}


.orb-three {
    background: #b426ff;

    left: 20%;
    bottom: -300px;

    animation:
        orbMoveOne 20s ease-in-out infinite reverse;
}


@keyframes orbMoveOne {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(80px,50px)
            scale(1.15);
    }

}


@keyframes orbMoveTwo {

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

    50% {
        transform:
            translate(-90px,-70px);
    }

}



/* NAVBAR */


.navbar {
    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    height: 74px;

    margin: 18px auto;

    padding: 0 18px;

    display: flex;
    align-items: center;

    position: sticky;

    top: 12px;

    z-index: 100;

    background:
        rgba(10, 10, 18, 0.67);

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

    border-radius: 20px;

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    box-shadow:
        0 15px 50px
        rgba(0,0,0,0.25);
}


.brand {
    display: flex;
    align-items: center;

    gap: 11px;

    color: white;

    text-decoration: none;
}


.brand-icon {
    width: 42px;
    height: 42px;

    border-radius: 13px;

    display: grid;
    place-items: center;

    background:
        var(--gradient);

    font-weight: 900;

    box-shadow:
        0 0 30px
        rgba(116, 87, 255, 0.32);
}


.brand strong {
    display: block;

    font-size: 17px;
}


.brand small {
    display: block;

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--muted);

    margin-top: 2px;
}


.desktop-nav {
    margin-left: auto;

    display: flex;

    gap: 28px;
}


.desktop-nav a {
    color: var(--muted);

    text-decoration: none;

    font-size: 14px;

    transition: 0.25s;
}


.desktop-nav a:hover {
    color: white;
}


.nav-cta {
    margin-left: 30px;

    padding:
        11px
        17px;

    border-radius: 11px;

    background:
        rgba(255,255,255,0.07);

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

    color: white;

    text-decoration: none;

    font-weight: 700;

    font-size: 13px;

    transition: 0.25s;
}


.nav-cta:hover {
    background:
        rgba(255,255,255,0.12);
}


.menu-button {
    display: none;

    margin-left: auto;

    width: 42px;
    height: 42px;

    background:
        rgba(255,255,255,0.05);

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

    border-radius: 11px;
}


.menu-button span {
    display: block;

    width: 20px;
    height: 2px;

    background: white;

    margin: 4px auto;
}


.mobile-menu {
    display: none;
}



/* MAIN */


main {
    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin: auto;
}



/* HERO */


.hero {
    min-height: 790px;

    padding:
        110px
        0
        80px;

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

    text-align: center;

    position: relative;
}


.hero::after {
    content: "";

    width: 650px;
    height: 300px;

    position: absolute;

    top: 220px;
    left: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(101, 66, 255, 0.16),
            transparent 70%
        );

    filter: blur(15px);

    z-index: -1;
}


.version-badge {
    padding:
        9px
        15px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius: 100px;

    color: #b4b5c3;

    font-size: 12px;

    margin-bottom: 28px;
}


.pulse {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #48e691;

    box-shadow:
        0 0 0
        6px
        rgba(72,230,145,0.08);

    animation:
        pulse 2s infinite;
}


@keyframes pulse {

    50% {
        box-shadow:
            0 0 0
            11px
            rgba(72,230,145,0);
    }

}


.hero h1 {
    font-size:
        clamp(
            63px,
            10vw,
            125px
        );

    line-height: 0.91;

    letter-spacing:
        -6px;

    max-width: 920px;
}


.gradient-text {
    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.hero-description {
    max-width: 650px;

    color: var(--muted);

    font-size: 18px;

    line-height: 1.7;

    margin-top: 30px;
}


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

    display: flex;

    gap: 12px;
}


.primary-button,
.secondary-button {
    min-width: 180px;

    padding:
        15px
        22px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    transition:
        transform 0.25s,
        box-shadow 0.25s;
}


.primary-button {
    background:
        var(--gradient);

    color: white;

    box-shadow:
        0 15px 45px
        rgba(93, 80, 255, 0.28);
}


.secondary-button {
    background:
        rgba(255,255,255,0.055);

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

    color: white;
}


.primary-button:hover,
.secondary-button:hover {
    transform:
        translateY(-4px);
}


.hero-meta {
    margin-top: 55px;

    display: flex;
    align-items: center;

    gap: 25px;
}


.hero-meta div:not(.separator) {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.hero-meta strong {
    font-size: 20px;
}


.hero-meta span {
    font-size: 11px;

    color: var(--muted);
}


.separator {
    width: 1px;
    height: 35px;

    background:
        rgba(255,255,255,0.1);
}



/* CLIENT PREVIEW */


.client-preview {
    padding:
        0
        0
        130px;
}


.preview-window {
    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius: 26px;

    background:
        rgba(12,13,24,0.84);

    box-shadow:
        0 40px 120px
        rgba(0,0,0,0.4),
        0 0 100px
        rgba(91,67,255,0.08);

    transform:
        perspective(1200px)
        rotateX(2deg);
}


.window-top {
    height: 58px;

    padding:
        0
        20px;

    display: grid;

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

    align-items: center;

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

    color: #9a9baa;

    font-size: 12px;
}


.window-buttons {
    display: flex;

    gap: 7px;
}


.window-buttons span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.18);
}


.window-status {
    justify-self: end;

    font-size: 9px;

    letter-spacing: 2px;

    color: #4fe297;
}


.client-ui {
    min-height: 460px;

    display: grid;

    grid-template-columns:
        220px
        1fr;
}


.client-ui aside {
    padding: 25px;

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


.sidebar-title {
    margin-bottom: 30px;

    font-weight: 900;

    letter-spacing: 4px;

    font-size: 12px;

    color:
        rgba(255,255,255,0.45);
}


.client-ui aside button {
    width: 100%;

    padding:
        13px
        15px;

    margin-bottom: 8px;

    text-align: left;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color:
        #858697;

    font-weight: 700;
}


.client-ui aside .active {
    background:
        linear-gradient(
            90deg,
            rgba(128,87,255,0.17),
            transparent
        );

    color:
        #a786ff;
}


.modules {
    padding: 45px;

    display: grid;

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

    gap: 15px;
}


.module {
    min-height: 110px;

    padding: 20px;

    border-radius: 18px;

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

    background:
        rgba(255,255,255,0.025);

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

    transition: 0.25s;
}


.module:hover {
    transform:
        translateY(-4px);

    background:
        rgba(255,255,255,0.045);
}


.module strong {
    display: block;
}


.module span {
    display: block;

    margin-top: 6px;

    color:
        var(--muted);

    font-size: 11px;
}


.active-module {
    box-shadow:
        inset 0 0 40px
        rgba(116,82,255,0.05);

    border-color:
        rgba(126,87,255,0.22);
}


.toggle {
    width: 41px;
    height: 23px;

    border-radius: 100px;

    background:
        #292a36;

    padding: 3px;
}


.toggle::after {
    content: "";

    display: block;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background:
        #757682;

    transition: 0.25s;
}


.toggle.on {
    background:
        #7657ff;
}


.toggle.on::after {
    transform:
        translateX(18px);

    background: white;
}


.gear {
    font-size: 20px !important;
}



/* SECTIONS */


.section {
    padding:
        120px
        0;
}


.eyebrow {
    font-size: 11px;

    font-weight: 900;

    letter-spacing: 4px;

    color:
        #8b6dff;

    margin-bottom: 17px;
}


.section h2,
.split-section h2,
.final-cta h2 {
    max-width: 720px;

    font-size:
        clamp(
            44px,
            7vw,
            76px
        );

    line-height: 1;

    letter-spacing: -3px;
}


.section-description {
    margin-top: 20px;

    color:
        var(--muted);

    max-width: 590px;

    font-size: 17px;

    line-height: 1.7;
}



/* FEATURES */


.feature-grid {
    margin-top: 60px;

    display: grid;

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

    gap: 15px;
}


.feature-card {
    min-height: 285px;

    padding: 28px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.018)
        );

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

    transition:
        transform 0.35s,
        border-color 0.35s,
        box-shadow 0.35s;
}


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

    border-color:
        rgba(118,87,255,0.3);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,0.25);
}


.feature-icon {
    width: 51px;
    height: 51px;

    border-radius: 15px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            rgba(130,87,255,0.22),
            rgba(55,181,255,0.16)
        );

    border:
        1px solid
        rgba(127,91,255,0.17);

    font-size: 21px;
}


.feature-card h3 {
    margin-top: 35px;

    font-size: 21px;
}


.feature-card p {
    margin-top: 13px;

    color:
        var(--muted);

    line-height: 1.65;

    font-size: 14px;
}



/* SPLIT */


.split-section {
    padding:
        130px
        0;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 90px;

    align-items: center;
}


.split-section > div > p:not(.eyebrow) {
    margin-top: 25px;

    color:
        var(--muted);

    font-size: 16px;

    line-height: 1.7;
}


.check-list {
    margin-top: 30px;

    display: grid;

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

    gap: 13px;
}


.check-list span {
    color:
        #b5b6c2;

    font-size: 13px;
}


.theme-card {
    padding: 35px;

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

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(128,87,255,0.07),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        0 40px 100px
        rgba(0,0,0,0.25);
}


.theme-row {
    display: flex;
    justify-content: space-between;

    margin-top: 23px;

    margin-bottom: 11px;

    font-size: 13px;
}


.theme-row span {
    color:
        var(--muted);
}


.slider {
    width: 100%;
    height: 7px;

    background:
        rgba(255,255,255,0.07);

    border-radius: 100px;

    overflow: hidden;
}


.slider span {
    display: block;

    height: 100%;

    background:
        var(--gradient);

    border-radius: inherit;
}


.colors {
    margin-top: 35px;

    display: flex;

    gap: 10px;
}


.colors button {
    width: 32px;
    height: 32px;

    border-radius: 50%;

    border:
        2px solid
        rgba(255,255,255,0.2);

    background:
        var(--c);
}



/* STATS */


.stats-section {
    padding:
        110px
        0;

    text-align: center;
}


.stats-section h2 {
    font-size:
        clamp(
            45px,
            6vw,
            70px
        );
}


.stats-grid {
    margin-top: 55px;

    display: grid;

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

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

    border-radius: 24px;

    overflow: hidden;
}


.stats-grid div {
    padding:
        40px
        15px;

    background:
        rgba(255,255,255,0.025);

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


.stats-grid div:last-child {
    border-right: 0;
}


.stats-grid strong {
    display: block;

    font-size: 35px;
}


.stats-grid span {
    display: block;

    margin-top: 7px;

    color:
        var(--muted);

    font-size: 11px;
}



/* REVIEWS */


.demo-warning {
    display: inline-block;

    margin-top: 18px;

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(255,196,74,0.14);

    border-radius: 10px;

    color:
        #bd9d64;

    font-size: 11px;

    background:
        rgba(255,196,74,0.04);
}


.rating-box {
    margin-top: 50px;

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

    border-radius: 20px;

    padding: 30px;

    background:
        rgba(255,255,255,0.025);
}


.rating-box > div {
    display: flex;
    align-items: center;

    gap: 20px;
}


.rating-box strong {
    font-size: 58px;
}


.stars {
    color:
        #9272ff;

    letter-spacing: 4px;
}


.rating-box p {
    color:
        var(--muted);

    margin-top: 4px;

    font-size: 12px;
}


.reviews-grid {
    margin-top: 15px;

    display: grid;

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

    gap: 15px;
}


.review {
    padding: 26px;

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

    border-radius: 20px;

    background:
        rgba(255,255,255,0.025);
}


.review-header {
    display: flex;
    align-items: center;

    gap: 12px;
}


.avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        var(--gradient);

    display: grid;
    place-items: center;

    font-weight: 900;
}


.review-header strong {
    display: block;
}


.review-header span {
    display: block;

    margin-top: 4px;

    color:
        #9577ff;

    font-size: 11px;

    letter-spacing: 2px;
}


.review p {
    margin-top: 22px;

    color:
        #b2b3bf;

    line-height: 1.65;

    font-size: 14px;
}


.review small {
    display: block;

    margin-top: 18px;

    color:
        #5f606c;

    font-size: 10px;
}



/* PRICING */


.pricing-grid {
    margin-top: 55px;

    display: grid;

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

    gap: 18px;
}


.price-card {
    position: relative;

    padding: 36px;

    border-radius: 26px;

    background:
        rgba(255,255,255,0.025);

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

    overflow: hidden;
}


.price-card.featured {
    border-color:
        rgba(126,88,255,0.32);

    background:
        linear-gradient(
            150deg,
            rgba(115,78,255,0.12),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        0 30px 80px
        rgba(75,55,200,0.12);
}


.popular {
    position: absolute;

    top: 18px;
    right: 18px;

    padding:
        7px
        10px;

    border-radius: 100px;

    background:
        rgba(126,88,255,0.12);

    border:
        1px solid
        rgba(126,88,255,0.25);

    color:
        #9a80ff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.plan-label {
    color:
        #8c70ff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;
}


.price-card h3 {
    margin-top: 14px;

    font-size: 25px;
}


.price {
    margin:
        40px
        0;

    display: flex;
    align-items: flex-end;

    gap: 8px;
}


.price strong {
    font-size: 68px;

    letter-spacing: -4px;
}


.price span {
    color:
        var(--muted);

    margin-bottom: 10px;
}


.price-card ul {
    list-style: none;

    display: grid;

    gap: 15px;

    color:
        #a6a7b3;

    font-size: 13px;
}


.price-card a {
    display: block;

    margin-top: 40px;

    padding:
        15px;

    border-radius: 13px;

    text-align: center;

    background:
        rgba(255,255,255,0.075);

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

    color: white;

    text-decoration: none;

    font-weight: 800;

    transition: 0.25s;
}


.featured a {
    background:
        var(--gradient);

    border: 0;

    box-shadow:
        0 15px 45px
        rgba(92,74,255,0.25);
}


.price-card a:hover {
    transform:
        translateY(-3px);
}


.payment-box {
    margin-top: 18px;

    padding: 22px;

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

    background:
        rgba(255,255,255,0.025);

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

    border-radius: 17px;
}


.payment-box > span {
    color:
        var(--muted);

    font-size: 12px;
}


.payment-box div {
    display: flex;

    gap: 9px;
}


.payment-box strong {
    padding:
        8px
        12px;

    border-radius: 9px;

    background:
        rgba(255,255,255,0.05);

    font-size: 11px;
}



/* FAQ */


.faq {
    margin-top: 50px;

    max-width: 850px;
}


.faq-question {
    width: 100%;

    padding:
        25px
        5px;

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

    background: transparent;

    border: 0;

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

    color: white;

    text-align: left;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;
.faq-question strong {
    font-size: 24px;
    color: #8d72ff;
    transition: 0.25s;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-answer.open {
    max-height: 150px;
    padding: 20px 5px;
}