/*
|--------------------------------------------------------------------------
| Smartclass School ERP SaaS
|--------------------------------------------------------------------------
| File: assets/css/pages/index.css
| Purpose:
| - Public landing page
| - Hero section
| - Features
| - Pricing plans
| - Public header/footer
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Page Base
|--------------------------------------------------------------------------
*/

.public-page {
    margin: 0;

    min-height: 100vh;
    min-height: 100dvh;

    background:
        #ffffff;

    color:
        var(--text-primary);

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

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

    margin-left:
        auto;

    margin-right:
        auto;
}


/*
|--------------------------------------------------------------------------
| Public Header
|--------------------------------------------------------------------------
*/

.public-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    border-bottom:
        1px solid
        rgba(
            226,
            232,
            240,
            0.9
        );

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

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.header-inner {
    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.public-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(--text-primary);

    text-decoration:
        none;
}

.public-brand:hover {
    color:
        var(--text-primary);
}

.brand-logo {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #2563eb
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    box-shadow:
        0 8px 20px
        rgba(
            37,
            99,
            235,
            0.18
        );
}

.public-brand > span:last-child {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.2;
}

.public-brand strong {
    color:
        var(--text-primary);

    font-size:
        15px;

    font-weight:
        800;
}

.public-brand small {
    margin-top:
        2px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        600;
}


/*
|--------------------------------------------------------------------------
| Public Navigation
|--------------------------------------------------------------------------
*/

.public-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}

.public-nav > a:not(.button) {
    padding:
        9px
        12px;

    border-radius:
        8px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        background
        var(--transition-fast),
        color
        var(--transition-fast);
}

.public-nav > a:not(.button):hover {
    background:
        var(--color-gray-50);

    color:
        var(--text-primary);
}

.public-nav .button {
    margin-left:
        4px;

    min-height:
        40px;
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero-section {
    position:
        relative;

    overflow:
        hidden;

    padding:
        92px
        0
        88px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );
}

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

    position:
        absolute;

    top:
        -180px;

    right:
        -180px;

    width:
        520px;

    height:
        520px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                37,
                99,
                235,
                0.12
            ) 0%,
            rgba(
                37,
                99,
                235,
                0
            ) 70%
        );

    pointer-events:
        none;
}

.hero-section::after {
    content:
        "";

    position:
        absolute;

    bottom:
        -200px;

    left:
        -180px;

    width:
        480px;

    height:
        480px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                14,
                165,
                233,
                0.08
            ) 0%,
            rgba(
                14,
                165,
                233,
                0
            ) 70%
        );

    pointer-events:
        none;
}

.hero-grid {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.12fr
        )
        minmax(
            360px,
            0.88fr
        );

    align-items:
        center;

    gap:
        72px;
}


/*
|--------------------------------------------------------------------------
| Hero Content
|--------------------------------------------------------------------------
*/

.hero-content {
    max-width:
        680px;
}

.hero-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        20px;

    padding:
        7px
        12px;

    border:
        1px solid
        #bfdbfe;

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

    background:
        #eff6ff;

    color:
        #1d4ed8;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}

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

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #2563eb;

    box-shadow:
        0 0 0 4px
        rgba(
            37,
            99,
            235,
            0.10
        );
}

.hero-content h1 {
    max-width:
        720px;

    margin:
        0
        0
        22px;

    color:
        #0f172a;

    font-size:
        clamp(
            2.7rem,
            6vw,
            4.6rem
        );

    font-weight:
        850;

    line-height:
        1.03;

    letter-spacing:
        -0.045em;
}

.hero-content > p {
    max-width:
        640px;

    margin:
        0;

    color:
        #475569;

    font-size:
        1.08rem;

    line-height:
        1.8;
}

.hero-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;
}

.hero-actions .button {
    min-height:
        48px;

    padding-left:
        20px;

    padding-right:
        20px;
}


/*
|--------------------------------------------------------------------------
| Hero Card
|--------------------------------------------------------------------------
*/

.hero-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        30px;

    border:
        1px solid
        rgba(
            203,
            213,
            225,
            0.75
        );

    border-radius:
        26px;

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

    box-shadow:
        0 30px 70px
        rgba(
            15,
            23,
            42,
            0.12
        );
}

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

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #38bdf8
        );
}

.hero-card h3 {
    margin:
        0
        0
        24px;

    font-size:
        1.22rem;

    font-weight:
        800;
}

.hero-stat-grid {
    display:
        grid;

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

    gap:
        13px;
}

.hero-stat-grid > div {
    min-height:
        118px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        18px;

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

    border-radius:
        16px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

    transition:
        transform
        var(--transition-fast),
        box-shadow
        var(--transition-fast),
        border-color
        var(--transition-fast);
}

.hero-stat-grid > div:hover {
    transform:
        translateY(
            -3px
        );

    border-color:
        #bfdbfe;

    box-shadow:
        var(--shadow-sm);
}

.hero-stat-grid strong {
    margin-bottom:
        5px;

    color:
        #0f172a;

    font-size:
        1.55rem;

    font-weight:
        850;
}

.hero-stat-grid span {
    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.5;
}


/*
|--------------------------------------------------------------------------
| Common Section
|--------------------------------------------------------------------------
*/

.feature-section,
.plans-section {
    padding:
        90px
        0;
}

.section-heading {
    max-width:
        720px;

    margin:
        0
        auto
        46px;

    text-align:
        center;
}

.section-heading > span {
    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        #2563eb;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.section-heading h2 {
    margin:
        0;

    color:
        #0f172a;

    font-size:
        clamp(
            2rem,
            4vw,
            2.8rem
        );

    font-weight:
        820;

    letter-spacing:
        -0.025em;
}


/*
|--------------------------------------------------------------------------
| Feature Section
|--------------------------------------------------------------------------
*/

.feature-section {
    background:
        #ffffff;
}

.feature-grid {
    display:
        grid;

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

    gap:
        18px;
}

.feature-grid article {
    position:
        relative;

    min-height:
        190px;

    padding:
        24px;

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

    border-radius:
        18px;

    background:
        #ffffff;

    transition:
        transform
        var(--transition-fast),
        box-shadow
        var(--transition-fast),
        border-color
        var(--transition-fast);
}

.feature-grid article::before {
    content:
        "";

    display:
        block;

    width:
        38px;

    height:
        5px;

    margin-bottom:
        22px;

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

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );
}

.feature-grid article:hover {
    transform:
        translateY(
            -4px
        );

    border-color:
        #bfdbfe;

    box-shadow:
        0 18px 42px
        rgba(
            15,
            23,
            42,
            0.08
        );
}

.feature-grid h3 {
    margin:
        0
        0
        10px;

    color:
        #0f172a;

    font-size:
        1.05rem;

    font-weight:
        800;
}

.feature-grid p {
    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.75;
}


/*
|--------------------------------------------------------------------------
| Plans
|--------------------------------------------------------------------------
*/

.plans-section {
    border-top:
        1px solid
        #eef2f7;

    background:
        #f8fafc;
}

.plan-grid {
    display:
        grid;

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

    align-items:
        stretch;

    gap:
        20px;
}

.plan-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    padding:
        26px;

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

    border-radius:
        20px;

    background:
        #ffffff;

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

    transition:
        transform
        var(--transition-fast),
        box-shadow
        var(--transition-fast),
        border-color
        var(--transition-fast);
}

.plan-card:hover {
    transform:
        translateY(
            -5px
        );

    border-color:
        #93c5fd;

    box-shadow:
        0 22px 50px
        rgba(
            15,
            23,
            42,
            0.10
        );
}

.plan-card:nth-child(2) {
    border-color:
        #60a5fa;

    box-shadow:
        0 18px 44px
        rgba(
            37,
            99,
            235,
            0.12
        );
}

.plan-card:nth-child(2)::before {
    content:
        "Popular";

    position:
        absolute;

    top:
        -12px;

    right:
        22px;

    padding:
        5px
        10px;

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

    background:
        #2563eb;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}

.plan-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        24px;
}

.plan-header h3 {
    margin:
        0;

    color:
        #0f172a;

    font-size:
        1.25rem;

    font-weight:
        820;
}

.plan-header > span {
    padding:
        4px
        8px;

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

    background:
        #f1f5f9;

    color:
        #475569;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.06em;
}

.plan-price {
    min-height:
        74px;

    margin-bottom:
        20px;
}

.plan-price strong {
    display:
        block;

    color:
        #0f172a;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.45rem
        );

    font-weight:
        850;

    line-height:
        1.15;
}

.plan-price span {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        11px;

    text-transform:
        capitalize;
}

.plan-details {
    flex:
        1;

    margin-bottom:
        24px;

    padding-top:
        18px;

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

.plan-details p {
    position:
        relative;

    margin:
        0
        0
        10px;

    padding-left:
        20px;

    color:
        var(--text-secondary);

    font-size:
        12px;

    line-height:
        1.55;
}

.plan-details p::before {
    content:
        "✓";

    position:
        absolute;

    left:
        0;

    top:
        0;

    color:
        #15803d;

    font-weight:
        800;
}

.plan-details p:last-child {
    margin-bottom:
        0;
}

.plan-card .button {
    margin-top:
        auto;

    min-height:
        46px;
}


/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.plans-section .empty-state {
    max-width:
        680px;

    margin:
        0
        auto;

    padding:
        42px
        24px;

    border:
        1px dashed
        #cbd5e1;

    border-radius:
        18px;

    background:
        #ffffff;
}

.plans-section .empty-state h3 {
    margin-bottom:
        8px;
}

.plans-section .empty-state p {
    margin:
        0;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.public-footer {
    padding:
        28px
        0;

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

    background:
        #0f172a;
}

.public-footer .public-container {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}

.public-footer p {
    margin:
        0;

    color:
        #94a3b8;

    font-size:
        11px;

    line-height:
        1.6;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .hero-grid {
        gap:
            40px;

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            minmax(
                320px,
                0.85fr
            );
    }

    .hero-content h1 {
        font-size:
            clamp(
                2.5rem,
                6vw,
                3.8rem
            );
    }

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

    .plan-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


/*
|--------------------------------------------------------------------------
| Mobile / Tablet Portrait
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {

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

    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    .header-inner {
        min-height:
            64px;
    }

    .public-nav > a[href="#features"],
    .public-nav > a[href="#plans"] {
        display:
            none;
    }

    .public-nav > a:not(.button) {
        padding:
            8px;
    }

    .public-nav .button {
        min-height:
            38px;

        padding:
            8px
            12px;

        font-size:
            11px;
    }

    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .hero-section {
        padding:
            64px
            0
            68px;
    }

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

        gap:
            42px;
    }

    .hero-content {
        max-width:
            none;

        text-align:
            center;
    }

    .hero-content h1 {
        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            clamp(
                2.3rem,
                9vw,
                3.7rem
            );
    }

    .hero-content > p {
        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            1rem;
    }

    .hero-actions {
        justify-content:
            center;
    }

    .hero-card {
        max-width:
            560px;

        width:
            100%;

        margin:
            0
            auto;
    }

    /*
    |--------------------------------------------------------------------------
    | Sections
    |--------------------------------------------------------------------------
    */

    .feature-section,
    .plans-section {
        padding:
            68px
            0;
    }

    .section-heading {
        margin-bottom:
            32px;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .public-container {
        width:
            calc(
                100% - 20px
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    .public-brand strong {
        font-size:
            13px;
    }

    .public-brand small {
        display:
            none;
    }

    .brand-logo {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;

        border-radius:
            10px;
    }

    .public-nav {
        gap:
            3px;
    }

    .public-nav > a:not(.button) {
        font-size:
            11px;
    }

    .public-nav .button {
        padding:
            7px
            10px;
    }

    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .hero-section {
        padding:
            50px
            0
            54px;
    }

    .hero-badge {
        margin-bottom:
            16px;

        font-size:
            9px;
    }

    .hero-content h1 {
        margin-bottom:
            18px;

        font-size:
            clamp(
                2.05rem,
                11vw,
                3rem
            );
    }

    .hero-content > p {
        font-size:
            0.94rem;

        line-height:
            1.7;
    }

    .hero-actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            9px;

        margin-top:
            24px;
    }

    .hero-actions .button {
        width:
            100%;
    }

    .hero-card {
        padding:
            20px;

        border-radius:
            20px;
    }

    .hero-stat-grid {
        gap:
            9px;
    }

    .hero-stat-grid > div {
        min-height:
            100px;

        padding:
            14px;
    }

    .hero-stat-grid strong {
        font-size:
            1.35rem;
    }

    .hero-stat-grid span {
        font-size:
            10px;
    }

    /*
    |--------------------------------------------------------------------------
    | Features
    |--------------------------------------------------------------------------
    */

    .feature-section,
    .plans-section {
        padding:
            54px
            0;
    }

    .section-heading {
        margin-bottom:
            26px;
    }

    .section-heading h2 {
        font-size:
            1.85rem;
    }

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

        gap:
            12px;
    }

    .feature-grid article {
        min-height:
            0;

        padding:
            20px;
    }

    /*
    |--------------------------------------------------------------------------
    | Plans
    |--------------------------------------------------------------------------
    */

    .plan-grid {
        grid-template-columns:
            1fr;

        gap:
            16px;
    }

    .plan-card {
        padding:
            22px;

        border-radius:
            17px;
    }

    .plan-card:nth-child(2) {
        order:
            -1;
    }

    /*
    |--------------------------------------------------------------------------
    | Footer
    |--------------------------------------------------------------------------
    */

    .public-footer {
        padding:
            22px
            0;
    }
}


/*
|--------------------------------------------------------------------------
| Very Small Phones
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {

    .header-inner {
        gap:
            8px;
    }

    .public-brand {
        gap:
            7px;
    }

    .public-brand strong {
        max-width:
            82px;

        overflow:
            hidden;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;
    }

    .public-nav > a:not(.button) {
        display:
            none;
    }

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

    .hero-stat-grid > div {
        min-height:
            82px;
    }
}


/*
|--------------------------------------------------------------------------
| Accessibility / Reduced Motion
|--------------------------------------------------------------------------
*/

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

    .feature-grid article,
    .plan-card,
    .hero-stat-grid > div {
        transition:
            none;
    }

    .feature-grid article:hover,
    .plan-card:hover,
    .hero-stat-grid > div:hover {
        transform:
            none;
    }
}