/* ==========================================================
   NOWANA HOME
   ========================================================== */

:root {
    --nv-primary: #6c4df6;
    --nv-primary-dark: #5234dc;
    --nv-secondary: #a46cf7;

    --nv-dark: #17172f;
    --nv-text: #50506c;
    --nv-muted: #7b7b94;

    --nv-border: #ebe9f7;
    --nv-bg: #faf9ff;

    --nv-shadow:
        0 20px 60px rgba(74, 50, 170, 0.10);

    --nv-radius: 24px;
}


html {
    scroll-behavior: smooth;
}


body {
    overflow-x: hidden;
}


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

.nv-hero .container,
.nv-products .container,
.nv-benefits .container,
.nv-cta .container,
.nv-final-stats .container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}


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

.nv-hero {
    position: relative;

    padding: 100px 0 80px;

    background:
        radial-gradient(
            circle at 10% 70%,
            rgba(180, 91, 255, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(108, 77, 246, 0.10),
            transparent 30%
        ),
        #fcfbff;

    overflow: hidden;
}


.nv-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    gap: 70px;

    align-items: center;
}


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

.nv-hero-content {
    direction: rtl;
}


.nv-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 17px;

    border-radius: 100px;

    color: var(--nv-primary);

    background:
        linear-gradient(
            135deg,
            #f1edff,
            #fbf9ff
        );

    border: 1px solid #eee9ff;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 25px;
}


.nv-eyebrow-icon {
    font-size: 15px;
}


.nv-hero-title {
    margin: 0;

    color: var(--nv-dark);

    font-size: clamp(44px, 5vw, 68px);

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -2px;
}


.nv-hero-title span {
    display: block;

    margin-top: 3px;

    background:
        linear-gradient(
            90deg,
            #5b3cf0,
            #9f5df4
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.nv-hero-description {
    max-width: 560px;

    margin: 26px 0 0;

    font-size: 17px;

    line-height: 2;

    color: var(--nv-text);

    font-weight: 500;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.nv-hero-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 32px;
}


.nv-btn {
    height: 54px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 15px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.nv-btn:hover {
    transform: translateY(-3px);
}


.nv-btn-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7958f7,
            #5c3ce8
        );

    box-shadow:
        0 15px 35px rgba(100, 70, 235, .25);
}


.nv-btn-secondary {
    background: rgba(255, 255, 255, .8);

    color: var(--nv-dark);

    border: 1px solid #e2dff1;

    backdrop-filter: blur(10px);
}


/* ==========================================================
   TRUST
   ========================================================== */

.nv-trust-items {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 30px;

    flex-wrap: wrap;
}


.nv-trust-items div {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #62617a;

    font-size: 12px;

    font-weight: 700;
}


.nv-trust-items i {
    color: var(--nv-primary);

    font-size: 13px;
}


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

.nv-dashboard-area {
    position: relative;

    direction: rtl;
}


.nv-dashboard {
    display: grid;

    grid-template-columns: 145px 1fr;

    min-height: 430px;

    background: #fff;

    border:
        1px solid rgba(217, 212, 238, .8);

    border-radius: 26px;

    overflow: hidden;

    box-shadow:
        0 35px 80px rgba(66, 46, 154, .15);

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


/* ==========================================================
   SIDEBAR
   ========================================================== */

.nv-dashboard-sidebar {
    padding: 22px 13px;

    background:
        linear-gradient(
            180deg,
            #18172f,
            #25204c
        );

    color: white;
}


.nv-dashboard-logo {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 2px 7px 22px;
}


.nv-dashboard-logo span {
    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ffe0a1,
            #ffbd53
        );

    color: var(--nv-primary);

    font-weight: 900;
}


.nv-dashboard-logo strong {
    font-size: 14px;
}


.nv-dashboard-sidebar nav {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.nv-dashboard-sidebar nav a {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    color: #c8c6dd;

    font-size: 11px;

    text-decoration: none;

    border-radius: 9px;

    transition: .2s;
}


.nv-dashboard-sidebar nav a:hover,
.nv-dashboard-sidebar nav a.active {
    background:
        linear-gradient(
            90deg,
            rgba(108, 77, 246, .75),
            rgba(83, 56, 203, .75)
        );

    color: #fff;
}


.nv-dashboard-sidebar nav i {
    width: 16px;

    text-align: center;
}


.nv-sidebar-banner {
    margin-top: 30px;

    padding: 13px;

    background:
        linear-gradient(
            135deg,
            #684af4,
            #5032cc
        );

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.nv-sidebar-banner span {
    font-size: 10px;

    font-weight: 800;
}


.nv-sidebar-banner small {
    font-size: 8px;

    opacity: .8;
}


/* ==========================================================
   DASHBOARD MAIN
   ========================================================== */

.nv-dashboard-main {
    padding: 20px;
}


.nv-dashboard-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;
}


.nv-dashboard-header h4 {
    margin: 0;

    color: var(--nv-dark);

    font-size: 16px;
}


.nv-dashboard-user {
    padding: 7px 10px;

    border: 1px solid #eceaf4;

    border-radius: 8px;

    font-size: 9px;

    color: var(--nv-muted);
}


/* ==========================================================
   MINI STATS
   ========================================================== */

.nv-dashboard-stats {
    display: grid;

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

    gap: 10px;
}


.nv-mini-stat {
    padding: 14px;

    border:
        1px solid #eeeef6;

    border-radius: 13px;

    box-shadow:
        0 5px 20px rgba(25, 22, 70, .035);
}


.nv-stat-head {
    display: flex;

    justify-content: space-between;

    color: #78778d;

    font-size: 8px;

    margin-bottom: 9px;
}


.nv-stat-head span {
    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--nv-primary);

    background: #f1efff;

    border-radius: 7px;
}


.nv-mini-stat strong {
    display: block;

    font-size: 16px;

    color: #25243b;

    margin-bottom: 6px;
}


.nv-mini-stat small {
    font-size: 7px;

    color: #9997aa;
}


.nv-mini-stat small b {
    color: #23ba77;
}


/* ==========================================================
   CHARTS
   ========================================================== */

.nv-dashboard-charts {
    display: grid;

    grid-template-columns: 2fr .85fr;

    gap: 10px;

    margin-top: 12px;
}


.nv-chart-card,
.nv-donut-card {
    min-height: 190px;

    padding: 14px;

    border:
        1px solid #eeeef6;

    border-radius: 13px;
}


.nv-card-title {
    color: var(--nv-dark);

    font-size: 9px;

    font-weight: 800;

    margin-bottom: 10px;
}


.nv-fake-chart {
    height: 145px;

    position: relative;
}


.nv-fake-chart svg {
    width: 100%;

    height: 100%;
}


.nv-donut-card {
    display: flex;

    flex-direction: column;
}


.nv-donut {
    width: 88px;
    height: 88px;

    border-radius: 50%;

    margin: 15px auto;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        conic-gradient(
            #6847f5 0 62%,
            #ad9cf8 62% 86%,
            #eeeaff 86% 100%
        );
}


.nv-donut-hole {
    width: 55px;
    height: 55px;

    background: white;

    border-radius: 50%;
}


.nv-donut-labels {
    display: flex;

    flex-direction: column;

    gap: 5px;

    font-size: 7px;

    color: #77768a;
}


.nv-donut-labels span {
    display: flex;

    align-items: center;

    gap: 5px;
}


.nv-donut-labels i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--nv-primary);
}


/* ==========================================================
   FLOATING ICONS
   ========================================================== */

.nv-floating-card {
    position: absolute;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #c793ff,
            #7349f7
        );

    color: white;

    font-size: 25px;

    z-index: 10;

    box-shadow:
        0 15px 35px rgba(104, 71, 245, .28);
}


.nv-float-chart {
    left: -28px;
    top: -25px;

    transform: rotate(-7deg);
}


.nv-float-study {
    right: 20px;
    top: -40px;

    transform: rotate(8deg);
}


.nv-float-users {
    left: -25px;
    bottom: -22px;

    transform: rotate(5deg);
}


/* ==========================================================
   SECTIONS
   ========================================================== */

.nv-products,
.nv-benefits {
    padding: 90px 0;

    background: #fff;
}


.nv-products {
    background:
        linear-gradient(
            180deg,
            #fcfbff,
            #ffffff
        );
}


.nv-section-heading {
    max-width: 650px;

    margin: 0 auto 55px;

    text-align: center;
}


.nv-section-badge {
    display: inline-flex;

    padding: 7px 17px;

    border-radius: 50px;

    color: var(--nv-primary);

    background: #f3efff;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 15px;
}


.nv-section-heading h2 {
    margin: 0;

    color: var(--nv-dark);

    font-size: 35px;

    line-height: 1.5;

    font-weight: 900;
}


.nv-section-heading p {
    max-width: 530px;

    margin: 13px auto 0;

    color: var(--nv-text);

    font-size: 14px;

    line-height: 2;
}


/* ==========================================================
   PRODUCT CARDS
   ========================================================== */

.nv-products-grid {
    display: grid;

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

    gap: 28px;
}


.nv-product-card {
    padding: 32px;

    border:
        1px solid #edeaf8;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fdfcff
        );

    border-radius: var(--nv-radius);

    box-shadow: var(--nv-shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


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

    box-shadow:
        0 30px 70px rgba(74, 50, 170, .16);
}


.nv-product-top {
    display: flex;

    align-items: flex-start;

    gap: 20px;
}


.nv-product-icon {
    min-width: 70px;
    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #a16cff,
            #6040ed
        );

    color: white;

    font-size: 27px;

    box-shadow:
        0 17px 28px rgba(100, 64, 237, .25);
}


.nv-product-card h3 {
    margin: 2px 0 10px;

    font-size: 23px;

    color: var(--nv-dark);

    font-weight: 900;
}


.nv-product-card p {
    color: var(--nv-text);

    font-size: 13px;

    line-height: 2;
}


.nv-product-features {
    list-style: none;

    padding: 20px 0 12px;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.nv-product-features li {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #58576f;

    font-size: 12px;
}


.nv-product-features i {
    color: var(--nv-primary);
}


.nv-product-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--nv-primary);

    font-size: 13px;

    font-weight: 900;

    text-decoration: none;

    margin-top: 10px;
}


/* ==========================================================
   BENEFITS
   ========================================================== */

.nv-benefits {
    background: #fff;
}


.nv-benefits-grid {
    display: grid;

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

    gap: 10px;
}


.nv-benefit {
    text-align: center;

    padding: 25px 20px;
}


.nv-benefit + .nv-benefit {
    border-right:
        1px dashed #ddd9ef;
}


.nv-benefit-icon {
    width: 56px;
    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    border-radius: 16px;

    color: var(--nv-primary);

    font-size: 22px;

    background:
        linear-gradient(
            145deg,
            #f5f2ff,
            #ece6ff
        );
}


.nv-benefit h3 {
    font-size: 16px;

    color: var(--nv-dark);

    margin: 0 0 12px;

    font-weight: 900;
}


.nv-benefit p {
    color: var(--nv-text);

    font-size: 12px;

    line-height: 2;

    margin: 0;
}


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

.nv-cta {
    padding: 35px 0;
}


.nv-cta-box {
    min-height: 185px;

    padding: 35px 55px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    overflow: hidden;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(255,255,255,.18),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #9b64fa,
            #6845ee,
            #5232da
        );

    box-shadow:
        0 25px 60px rgba(92, 59, 220, .25);

    color: white;
}


.nv-cta-text {
    position: relative;

    z-index: 2;
}


.nv-cta-text span {
    font-size: 12px;

    opacity: .85;
}


.nv-cta-text h2 {
    margin: 9px 0;

    font-size: 30px;

    font-weight: 900;
}


.nv-cta-text p {
    margin: 0;

    font-size: 13px;

    opacity: .8;
}


.nv-cta-button {
    position: relative;

    z-index: 2;

    background: white;

    color: var(--nv-primary);

    min-width: 180px;

    box-shadow:
        0 13px 30px rgba(32, 20, 90, .18);
}


/* ==========================================================
   FINAL STATS
   ========================================================== */

.nv-final-stats {
    padding: 10px 0 90px;
}


.nv-final-stats-box {
    display: grid;

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

    padding: 28px;

    border:
        1px solid #eeeaf8;

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 15px 45px rgba(67, 48, 145, .08);
}


.nv-final-stat {
    position: relative;

    display: grid;

    grid-template-columns: 45px auto;

    grid-template-rows: auto auto;

    column-gap: 12px;

    align-items: center;

    justify-content: center;
}


.nv-final-stat + .nv-final-stat {
    border-right: 1px solid #eeeaf8;
}


.nv-final-stat-icon {
    grid-row: 1 / 3;

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #f2efff;

    color: var(--nv-primary);

    font-size: 18px;
}


.nv-final-stat strong {
    color: var(--nv-primary);

    font-size: 23px;

    font-weight: 900;
}


.nv-final-stat span {
    color: var(--nv-text);

    font-size: 10px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .nv-hero-grid {
        grid-template-columns: 1fr;

        gap: 80px;
    }


    .nv-hero-content {
        max-width: 700px;

        margin: auto;

        text-align: center;
    }


    .nv-hero-description {
        margin-left: auto;
        margin-right: auto;
    }


    .nv-hero-actions,
    .nv-trust-items {
        justify-content: center;
    }


    .nv-dashboard-area {
        max-width: 720px;

        margin: auto;
    }


    .nv-products-grid {
        gap: 20px;
    }

}


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

@media (max-width: 768px) {

    .nv-hero {
        padding-top: 65px;
    }


    .nv-hero-title {
        font-size: 42px;

        letter-spacing: -1px;
    }


    .nv-hero-description {
        font-size: 14px;
    }


    .nv-hero-actions {
        flex-direction: column;
    }


    .nv-btn {
        width: 100%;
    }


    .nv-trust-items {
        gap: 12px;
    }


    .nv-dashboard {
        grid-template-columns: 90px 1fr;

        min-width: 650px;

        transform: none;
    }


    .nv-dashboard-area {
        overflow-x: auto;

        padding: 25px 0;

        scrollbar-width: none;
    }


    .nv-dashboard-area::-webkit-scrollbar {
        display: none;
    }


    .nv-dashboard-sidebar {
        padding-left: 7px;
        padding-right: 7px;
    }


    .nv-dashboard-logo strong,
    .nv-dashboard-sidebar nav a {
        font-size: 9px;
    }


    .nv-products,
    .nv-benefits {
        padding: 65px 0;
    }


    .nv-section-heading h2 {
        font-size: 27px;
    }


    .nv-products-grid {
        grid-template-columns: 1fr;
    }


    .nv-product-card {
        padding: 25px;
    }


    .nv-benefits-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }


    .nv-benefit + .nv-benefit {
        border: none;
    }


    .nv-cta-box {
        padding: 35px 25px;

        flex-direction: column;

        text-align: center;
    }


    .nv-cta-text h2 {
        font-size: 25px;
    }


    .nv-final-stats-box {
        grid-template-columns: repeat(2, 1fr);

        gap: 30px 10px;
    }


    .nv-final-stat + .nv-final-stat {
        border: none;
    }

}


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

@media (max-width: 480px) {

    .nv-hero-title {
        font-size: 35px;
    }


    .nv-eyebrow {
        font-size: 11px;
    }


    .nv-trust-items {
        display: grid;

        grid-template-columns: 1fr;
    }


    .nv-product-top {
        flex-direction: column;
    }


    .nv-product-icon {
        width: 58px;
        height: 58px;

        min-width: 58px;

        font-size: 22px;
    }


    .nv-benefits-grid {
        grid-template-columns: 1fr;
    }


    .nv-final-stats-box {
        grid-template-columns: 1fr;
    }


    .nv-final-stat {
        min-height: 65px;
    }

}