/* ==========================================================
   CHINMUN ERP
   PREMIUM FEATURES PAGE
   FEATURES.CSS
========================================================== */


/* ==========================================================
   PAGE BASE
========================================================== */

.features-page{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(70,70,255,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 45%,
            rgba(0,229,195,.055),
            transparent 30%
        ),
        #070b18;
}


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

.features-hero{
    position:relative;

    padding:
        70px
        0
        50px;

    overflow:hidden;

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


.features-hero::before{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

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

    background-size:
        70px
        70px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent
        );
}


.features-hero-glow{
    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    filter:blur(100px);

    pointer-events:none;

    opacity:.45;
}


.glow-one{

    top:-250px;

    right:-150px;

    background:
        rgba(80,70,255,.30);

}


.glow-two{

    bottom:-350px;

    left:-200px;

    background:
        rgba(0,229,195,.12);

}


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

.features-hero-content{
    position:relative;

    z-index:2;

    max-width:900px;
}


.features-hero .eyebrow{
    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:
        10px
        16px;

    border:
        1px solid
        rgba(120,190,255,.18);

    border-radius:
        999px;

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

    backdrop-filter:
        blur(14px);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.06);
}


.eyebrow-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0
        0
        15px
        var(--cyan);

}


.features-hero h1{

    margin:
        28px
        0
        24px;

    max-width:
        950px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            48px,
            7vw,
            96px
        );

    line-height:
        .98;

    letter-spacing:
        -.055em;

    font-weight:
        700;
}


.features-hero h1 span{

    display:block;

    background:
        linear-gradient(
            90deg,
            #63d7ff,
            #777cff,
            #a34fff,
            #ff9b4a
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.features-hero p{

    max-width:
        700px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.8;

}


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

.features-hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:
        32px;

}


.features-hero-actions .btn{

    min-width:
        170px;

}


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

.features-stats{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:
        16px;

    margin-top:
        70px;

}


.feature-stat-card{

    position:relative;

    min-height:
        150px;

    padding:
        25px;

    overflow:hidden;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    backdrop-filter:
        blur(16px);

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

}


.feature-stat-card:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(100,170,255,.30);

    box-shadow:
        0
        25px
        70px
        rgba(0,0,0,.22);

}


.feature-stat-card strong{

    display:block;

    margin-bottom:
        12px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        32px;

    font-weight:
        700;

    color:
        #fff;

}


.feature-stat-card span{

    color:
        var(--muted);

    font-size:
        14px;

}


.feature-stat-card::after{

    content:"";

    position:absolute;

    right:-20px;
    bottom:-35px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(100,90,255,.12),
            transparent 70%
        );

}


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

.features-section{

    position:relative;

    padding:
        80px
        0;

}


.features-section::before{

    content:"";

    position:absolute;

    left:0;
    right:0;

    top:50%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100,140,255,.12),
            transparent
        );

}


.features-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:
        18px;

}


/* ==========================================================
   PREMIUM FEATURE CARD
========================================================== */

.premium-feature-card{

    position:relative;

    min-height:
        390px;

    padding:
        26px;

    overflow:hidden;

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

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.02)
        );

    backdrop-filter:
        blur(18px);

    transform-style:
        preserve-3d;

    transition:
        border-color .35s ease,
        box-shadow .35s ease;

}


.premium-feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    transition:
        opacity .35s ease;

    background:
        radial-gradient(
            circle at top right,
            rgba(90,150,255,.16),
            transparent 45%
        );

}


.premium-feature-card:hover::before{

    opacity:1;

}


.premium-feature-card:hover{

    border-color:
        rgba(110,170,255,.32);

    box-shadow:
        0
        30px
        80px
        rgba(0,0,0,.30);

}


.feature-card-top{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

}


.feature-icon{

    width:
        58px;

    height:
        58px;

    display:grid;

    place-items:center;

    border-radius:
        18px;

    font-size:
        23px;

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

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.08);

}


.icon-blue{

    background:
        linear-gradient(
            135deg,
            rgba(32,110,255,.35),
            rgba(32,110,255,.08)
        );

}


.icon-purple{

    background:
        linear-gradient(
            135deg,
            rgba(145,75,255,.35),
            rgba(145,75,255,.08)
        );

}


.icon-cyan{

    background:
        linear-gradient(
            135deg,
            rgba(0,220,200,.28),
            rgba(0,220,200,.07)
        );

}


.icon-orange{

    background:
        linear-gradient(
            135deg,
            rgba(255,150,40,.30),
            rgba(255,150,40,.07)
        );

}


.icon-green{

    background:
        linear-gradient(
            135deg,
            rgba(0,210,130,.30),
            rgba(0,210,130,.07)
        );

}


.icon-pink{

    background:
        linear-gradient(
            135deg,
            rgba(255,70,150,.30),
            rgba(255,70,150,.07)
        );

}


.feature-number{

    color:
        rgba(255,255,255,.15);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        32px;

    font-weight:
        700;

}


.premium-feature-card h3{

    position:relative;

    z-index:2;

    margin:
        32px
        0
        12px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        22px;

    letter-spacing:
        -.02em;

}


.premium-feature-card p{

    position:relative;

    z-index:2;

    margin:
        0;

    min-height:
        78px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;

}


.premium-feature-card ul{

    position:relative;

    z-index:2;

    margin:
        26px
        0
        0;

    padding:
        0;

    list-style:
        none;

}


.premium-feature-card li{

    position:relative;

    padding:
        9px
        0
        9px
        22px;

    color:
        #cbd2e6;

    font-size:
        13px;

    border-top:
        1px solid
        rgba(255,255,255,.055);

}


.premium-feature-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:
        var(--cyan);

    font-weight:
        700;

}


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

.advanced-features-section{

    position:relative;

    padding:
        0
        0
        70px;

}


.advanced-features-card{

    position:relative;

    min-height:
        620px;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    align-items:center;

    gap:
        60px;

    padding:
        70px;

    overflow:hidden;

    border:
        1px solid
        rgba(110,120,255,.18);

    border-radius:
        36px;

    background:
        linear-gradient(
            135deg,
            rgba(25,30,70,.80),
            rgba(12,16,38,.94)
        );

    box-shadow:
        var(--shadow);

}


.advanced-features-card::before{

    content:"";

    position:absolute;

    width:
        600px;

    height:
        600px;

    right:
        -250px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(100,70,255,.25),
            transparent 65%
        );

    filter:
        blur(30px);

}


.advanced-content{

    position:relative;

    z-index:2;

}


.advanced-content h2{

    margin:
        18px
        0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            38px,
            4vw,
            60px
        );

    line-height:
        1.05;

    letter-spacing:
        -.045em;

}


.advanced-content h2 span{

    display:block;

    background:
        linear-gradient(
            90deg,
            #62d8ff,
            #8f6dff,
            #d75cff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.advanced-content p{

    max-width:
        600px;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.8;

}


/* ==========================================================
   ADVANCED LIST
========================================================== */

.advanced-list{

    display:grid;

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

    gap:
        12px;

    margin-top:
        35px;

}


.advanced-list div{

    display:flex;

    align-items:center;

    gap:
        12px;

    padding:
        15px;

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

    border-radius:
        15px;

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

    color:
        #d8def0;

    font-size:
        14px;

}


.advanced-list span{

    font-size:
        18px;

}


/* ==========================================================
   ERP ENGINE VISUAL
========================================================== */

.advanced-visual{

    position:relative;

    z-index:2;

    width:
        100%;

    min-height:
        480px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.system-orbit{

    position:absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(120,110,255,.22);

}


.orbit-one{

    width:
        440px;

    height:
        440px;

    animation:
        orbitPulse
        6s
        ease-in-out
        infinite;

}


.orbit-two{

    width:
        330px;

    height:
        330px;

    border-color:
        rgba(80,210,255,.20);

    animation:
        orbitPulse
        5s
        ease-in-out
        infinite
        reverse;

}


.orbit-three{

    width:
        220px;

    height:
        220px;

    border-color:
        rgba(180,100,255,.25);

}


.system-core{

    position:relative;

    z-index:4;

    width:
        150px;

    height:
        150px;

    display:flex;

    flex-direction:
        column;

    align-items:center;

    justify-content:center;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            rgba(55,65,160,.70),
            rgba(20,25,65,.90)
        );

    border:
        1px solid
        rgba(140,150,255,.35);

    box-shadow:
        0
        0
        80px
        rgba(100,80,255,.25),
        inset
        0
        0
        40px
        rgba(100,100,255,.10);

}


.core-logo{

    width:
        58px;

    height:
        58px;

    display:grid;

    place-items:center;

    margin-bottom:
        10px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        27px;

    font-weight:
        700;

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

}


.system-core strong{

    font-size:
        13px;

    letter-spacing:
        .08em;

}


.system-core small{

    margin-top:
        4px;

    color:
        var(--cyan);

    font-size:
        8px;

    letter-spacing:
        .12em;

}


/* ==========================================================
   ORBIT LABELS
========================================================== */

.orbit-label{

    position:absolute;

    z-index:5;

    padding:
        10px
        15px;

    border:
        1px solid
        rgba(120,150,255,.18);

    border-radius:
        999px;

    background:
        rgba(10,14,35,.85);

    backdrop-filter:
        blur(12px);

    color:
        #cfd7ef;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .10em;

}


.label-stock{

    top:
        80px;

    left:
        20px;

}


.label-sales{

    top:
        80px;

    right:
        20px;

}


.label-profit{

    bottom:
        80px;

    left:
        20px;

}


.label-report{

    bottom:
        80px;

    right:
        20px;

}


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

.features-cta-section{

    padding:
        0
        0
        70px;

}


.features-cta-section .cta-card{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        60px;

    overflow:hidden;

    border:
        1px solid
        rgba(130,110,255,.22);

    border-radius:
        32px;

    background:
        linear-gradient(
            120deg,
            rgba(30,35,85,.85),
            rgba(15,20,50,.95)
        );

}


.features-cta-section .cta-card::after{

    content:"";

    position:absolute;

    width:
        450px;

    height:
        450px;

    right:
        -200px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(130,70,255,.25),
            transparent 65%
        );

}


.features-cta-section .cta-card > *{

    position:relative;

    z-index:2;

}


.cta-actions{

    display:flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    min-width:
        max-content;

}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes orbitPulse{

    0%,
    100%{

        transform:
            scale(1);

        opacity:
            .55;

    }


    50%{

        transform:
            scale(1.05);

        opacity:
            1;

    }

}


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

@media
(
    max-width:1200px
){

    .features-grid{

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

    }


    .advanced-features-card{

        grid-template-columns:
            1fr;

    }


    .advanced-visual{

        min-height:
            500px;

    }

}


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

@media
(
    max-width:900px
){

    .features-hero{

        padding:
            90px
            0
            80px;

    }


    .features-stats{

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

        margin-top:
            50px;

    }


    .features-section{

        padding:
            90px
            0;

    }


    .advanced-features-card{

        padding:
            40px
            28px;

        min-height:
            auto;

    }


    .features-cta-section .cta-card{

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            40px
            28px;

    }


    .cta-actions{

        min-width:
            0;

    }

}


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

@media
(
    max-width:650px
){

    .features-hero{

        padding:
            70px
            0
            65px;

    }


    .features-hero h1{

        font-size:
            clamp(
                42px,
                14vw,
                64px
            );

    }


    .features-hero p{

        font-size:
            16px;

    }


    .features-hero-actions{

        flex-direction:
            column;

    }


    .features-hero-actions .btn{

        width:
            100%;

    }


    .features-stats{

        grid-template-columns:
            1fr
            1fr;

        gap:
            12px;

    }


    .feature-stat-card{

        min-height:
            125px;

        padding:
            18px;

    }


    .feature-stat-card strong{

        font-size:
            26px;

    }


    .features-grid{

        grid-template-columns:
            1fr;

    }


    .premium-feature-card{

        min-height:
            auto;

    }


    .premium-feature-card p{

        min-height:
            auto;

    }


    .advanced-list{

        grid-template-columns:
            1fr;

    }


    .advanced-visual{

        min-height:
            400px;

        transform:
            scale(.78);

    }


    .orbit-one{

        width:
            400px;

        height:
            400px;

    }


    .orbit-two{

        width:
            300px;

        height:
            300px;

    }


    .orbit-three{

        width:
            200px;

        height:
            200px;

    }


    .label-stock{

        left:
            -5px;

    }


    .label-sales{

        right:
            -5px;

    }


    .label-profit{

        left:
            -5px;

    }


    .label-report{

        right:
            -5px;

    }


    .features-cta-section{

        padding-bottom:
            80px;

    }


    .features-cta-section .cta-card{

        padding:
            32px
            22px;

    }


    .cta-actions{

        width:
            100%;

        flex-direction:
            column;

    }


    .cta-actions .btn{

        width:
            100%;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    *,
    *::before,
    *::after{

        animation-duration:
            .01ms
            !important;

        animation-iteration-count:
            1
            !important;

        scroll-behavior:
            auto
            !important;

    }

}