/* =========================================================
   GRAPHIADDA
   HOME / INDEX PAGE STYLES
   ========================================================= */


/* =========================================================
   INDEX PAGE
   ========================================================= */

.index-page {

    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(
                109,
                93,
                252,
                0.16
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(
                36,
                186,
                242,
                0.08
            ),
            transparent 30%
        ),
        #060a15;

    color:
        #ffffff;

}


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

.index-hero {

    width:
        min(
            1000px,
            calc(
                100% - 28px
            )
        );

    min-height:
        100vh;

    margin:
        0 auto;

    padding:
        120px 0 70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.index-hero-content {

    width:
        100%;

    max-width:
        820px;

}


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

.index-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(
            139,
            124,
            255,
            0.25
        );

    border-radius:
        999px;

    background:
        rgba(
            109,
            93,
            252,
            0.07
        );

    color:
        #b9b1ff;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

}


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

.index-title {

    margin:
        18px 0 12px;

    font-size:
        clamp(
            42px,
            8vw,
            82px
        );

    line-height:
        1.02;

    letter-spacing:
        -0.065em;

    font-weight:
        950;

}


.index-gradient {

    background:
        linear-gradient(
            90deg,
            #9b8dff,
            #5eafff,
            #24baf2
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


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

.index-description {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        #8390a8;

    font-size:
        12px;

    line-height:
        1.8;

}


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

.index-actions {

    margin-top:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    flex-wrap:
        wrap;

}


.index-primary-btn,
.index-secondary-btn {

    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 17px;

    border-radius:
        10px;

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        850;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        background 0.2s ease;

}


.index-primary-btn {

    background:
        linear-gradient(
            135deg,
            #6d5dfc,
            #24baf2
        );

    color:
        #ffffff;

    box-shadow:
        0 14px 35px
        rgba(
            36,
            186,
            242,
            0.12
        );

}


.index-secondary-btn {

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

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

    color:
        #dbe4f0;

}


.index-primary-btn:hover,
.index-secondary-btn:hover {

    transform:
        translateY(-2px);

}


.index-primary-btn:hover {

    filter:
        brightness(
            1.07
        );

}


.index-secondary-btn:hover {

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

}


/* =========================================================
   INDEX STATS
   ========================================================= */

.index-stats {

    max-width:
        700px;

    margin:
        38px auto 0;

    display:
        grid;

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

    gap:
        9px;

}


.index-stat {

    padding:
        17px 10px;

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

    border-radius:
        13px;

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

}


.index-stat strong {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        19px;

    font-weight:
        900;

}


.index-stat span {

    color:
        #64748b;

    font-size:
        8px;

    font-weight:
        700;

}


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

.index-features {

    width:
        min(
            1000px,
            calc(
                100% - 28px
            )
        );

    margin:
        0 auto;

    padding:
        10px 0 80px;

}


.index-feature-heading {

    text-align:
        center;

    margin-bottom:
        20px;

}


.index-feature-heading h2 {

    margin:
        0 0 7px;

    font-size:
        clamp(
            22px,
            4vw,
            31px
        );

    line-height:
        1.1;

    font-weight:
        900;

}


.index-feature-heading p {

    margin:
        0;

    color:
        #64748b;

    font-size:
        10px;

}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.index-feature-grid {

    display:
        grid;

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

    gap:
        10px;

}


.index-feature-card {

    padding:
        19px;

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

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(
                17,
                26,
                45,
                0.96
            ),
            rgba(
                9,
                15,
                29,
                0.96
            )
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.index-feature-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(
            127,
            112,
            255,
            0.22
        );

    box-shadow:
        0 18px 40px
        rgba(
            0,
            0,
            0,
            0.15
        );

}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.index-feature-icon {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        12px;

    border-radius:
        11px;

    background:
        rgba(
            109,
            93,
            252,
            0.10
        );

    color:
        #a79fff;

    font-size:
        18px;

}


.index-feature-card h3 {

    margin:
        0 0 6px;

    font-size:
        13px;

    font-weight:
        850;

}


.index-feature-card p {

    margin:
        0;

    color:
        #64748b;

    font-size:
        9px;

    line-height:
        1.7;

}


/* =========================================================
   HERO BACKGROUND ORBS
   ========================================================= */

.index-orb {

    position:
        fixed;

    border-radius:
        50%;

    filter:
        blur(70px);

    pointer-events:
        none;

    z-index:
        -1;

    opacity:
        0.18;

}


.index-orb-one {

    width:
        180px;

    height:
        180px;

    top:
        14%;

    left:
        -60px;

    background:
        #6d5dfc;

}


.index-orb-two {

    width:
        150px;

    height:
        150px;

    right:
        -40px;

    bottom:
        16%;

    background:
        #24baf2;

}


/* =========================================================
   INDEX SECTION SPACING
   ========================================================= */

.index-section {

    padding:
        30px 0;

}


/* =========================================================
   INDEX RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .index-hero {

        width:
            calc(
                100% - 18px
            );

        padding-top:
            105px;

    }


    .index-title {

        font-size:
            clamp(
                38px,
                12vw,
                58px
            );

    }


    .index-description {

        font-size:
            10px;

    }


    .index-stats {

        grid-template-columns:
            1fr;

        max-width:
            260px;

    }


    .index-feature-grid {

        grid-template-columns:
            1fr;

    }


    .index-features {

        width:
            calc(
                100% - 18px
            );

    }

}


@media (max-width: 450px) {

    .index-actions {

        flex-direction:
            column;

        width:
            100%;

    }


    .index-primary-btn,
    .index-secondary-btn {

        width:
            100%;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .index-primary-btn,
    .index-secondary-btn,
    .index-feature-card {

        transition:
            none;

    }

}