* {
    box-sizing: border-box;
}


/* =========================================================
   BODY
========================================================= */

.grades-body {
    margin: 0;
    min-height: 100vh;

    position: relative;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 7% 10%,
            rgba(198, 235, 224, 0.48),
            transparent 25%
        ),
        radial-gradient(
            circle at 93% 11%,
            rgba(205, 232, 249, 0.55),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 78%,
            rgba(224, 243, 213, 0.46),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 78%,
            rgba(236, 222, 252, 0.48),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #f8fcfb 0%,
            #ffffff 45%,
            #fbf8f4 100%
        );

    color: #303043;

    font-family: "Manrope", sans-serif;
}


/* =========================================================
   BACKGROUND
========================================================= */

.grades-background {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   CLOUDS
========================================================= */

.background-cloud {
    position: absolute;

    border-radius: 999px;

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

    filter: blur(1px);
}


.background-cloud::before,
.background-cloud::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background: inherit;
}


.cloud-one {
    width: 230px;
    height: 80px;

    left: -80px;
    top: 220px;
}


.cloud-one::before {
    width: 110px;
    height: 110px;

    left: 45px;
    top: -55px;
}


.cloud-one::after {
    width: 80px;
    height: 80px;

    right: 20px;
    top: -35px;
}


.cloud-two {
    width: 220px;
    height: 75px;

    right: -70px;
    top: 150px;
}


.cloud-two::before {
    width: 105px;
    height: 105px;

    left: 30px;
    top: -50px;
}


.cloud-two::after {
    width: 80px;
    height: 80px;

    right: 30px;
    top: -35px;
}


.cloud-three {
    width: 270px;
    height: 85px;

    right: -120px;
    bottom: 90px;

    opacity: 0.55;
}


.cloud-three::before {
    width: 115px;
    height: 115px;

    left: 50px;
    top: -55px;
}


.cloud-three::after {
    width: 95px;
    height: 95px;

    right: 40px;
    top: -45px;
}


/* =========================================================
   LARGE BACKGROUND BLOBS
========================================================= */

.background-blob {
    position: absolute;

    border-radius: 50%;

    filter: blur(2px);
}


.blob-one {
    width: 390px;
    height: 390px;

    left: -190px;
    bottom: 70px;

    background:
        rgba(175, 222, 173, 0.17);
}


.blob-two {
    width: 420px;
    height: 420px;

    right: -210px;
    top: 330px;

    background:
        rgba(174, 218, 241, 0.17);
}


.blob-three {
    width: 330px;
    height: 330px;

    left: 42%;
    bottom: -230px;

    background:
        rgba(240, 210, 165, 0.13);
}


/* =========================================================
   BACKGROUND STARS
========================================================= */

.background-star {
    position: absolute;

    color: rgba(244, 186, 70, 0.68);

    font-size: 30px;

    animation:
        floatingStar 5s ease-in-out infinite;
}


.star-one {
    left: 6%;
    top: 160px;
}


.star-two {
    right: 8%;
    top: 270px;

    font-size: 23px;

    animation-delay: 1s;
}


.star-three {
    left: 4%;
    bottom: 220px;

    font-size: 22px;

    animation-delay: 2s;
}


.star-four {
    right: 5%;
    bottom: 110px;

    font-size: 35px;

    animation-delay: 0.5s;
}


/* =========================================================
   FLOATING WORDS
========================================================= */

.floating-word {
    position: absolute;

    color:
        rgba(107, 91, 206, 0.07);

    font-family: "Fredoka", sans-serif;

    font-weight: 700;
    letter-spacing: 5px;

    user-select: none;
}


.word-one {
    left: 2%;
    top: 42%;

    font-size: 48px;

    transform: rotate(-10deg);
}


.word-two {
    right: 2%;
    top: 51%;

    font-size: 50px;

    transform: rotate(9deg);
}


.word-three {
    left: 5%;
    bottom: 6%;

    font-size: 36px;

    transform: rotate(-5deg);
}


/* =========================================================
   HEADER
========================================================= */

.grades-header {
    position: relative;

    z-index: 10;

    padding:
        22px
        24px
        0;
}


/* =========================================================
   NAVIGATION
========================================================= */

.grades-navigation {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding:
        13px
        15px
        13px
        18px;

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

    gap: 25px;

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

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

    border:
        1px solid
        rgba(116, 104, 177, 0.11);

    border-radius: 27px;

    box-shadow:
        0 16px 40px
        rgba(61, 58, 91, 0.10);
}


/* =========================================================
   LOGO
========================================================= */

.grades-logo {
    flex-shrink: 0;

    padding:
        12px
        20px;

    background:
        linear-gradient(
            135deg,
            #8170d5,
            #aa96ed
        );

    border-radius: 17px;

    color: white;

    font-family: "Fredoka", sans-serif;

    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;

    text-decoration: none;

    box-shadow:
        0 8px 20px
        rgba(113, 93, 203, 0.22);

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


.grades-logo:hover {
    transform:
        translateY(-2px)
        rotate(-2deg);

    box-shadow:
        0 11px 25px
        rgba(113, 93, 203, 0.28);
}


/* =========================================================
   NAV LINKS
========================================================= */

.nav-links {
    margin: 0;
    padding: 0;

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

    gap: 4px;

    list-style: none;
}


.nav-links a {
    display: block;

    padding:
        10px
        15px;

    border-radius: 13px;

    color: #514d68;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.nav-links a:hover {
    background:
        #f2efff;

    color:
        #715fc2;

    transform:
        translateY(-2px);
}


/* =========================================================
   HOME BUTTON
========================================================= */

.home-button {
    flex-shrink: 0;

    padding:
        11px
        17px;

    display: flex;
    align-items: center;

    gap: 8px;

    background:
        linear-gradient(
            135deg,
            #f0e9ff,
            #e5d8ff
        );

    border:
        1px solid
        rgba(130, 105, 210, 0.10);

    border-radius: 16px;

    color: #6553aa;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

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


.home-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(113, 93, 203, 0.12);
}


.home-icon {
    font-size: 18px;
}


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

.grades-page {
    width:
        min(1120px, 90%);

    margin:
        0 auto;

    padding:
        75px
        0
        90px;

    position: relative;

    z-index: 2;
}


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

.grades-hero {
    max-width: 820px;

    margin:
        25px
        auto
        70px;

    position: relative;

    text-align: center;
}


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

.hero-star {
    width: 76px;
    height: 76px;

    margin:
        0 auto
        18px;

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

    background:
        linear-gradient(
            145deg,
            #fff5d9,
            #ffe3a3
        );

    border:
        1px solid
        rgba(230, 175, 66, 0.14);

    border-radius: 25px;

    font-size: 35px;

    box-shadow:
        0 11px 28px
        rgba(184, 133, 35, 0.12);

    transform:
        rotate(-4deg);
}


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

.hero-small-title {
    margin:
        0
        0
        10px;

    color:
        #8874d8;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2.5px;
}


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

.grades-hero h1 {
    margin:
        0
        0
        18px;

    color:
        #332d63;

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(
            45px,
            7vw,
            72px
        );

    font-weight:
        700;

    line-height:
        1.04;

    letter-spacing:
        -1.5px;
}


.grades-hero h1 span {
    color:
        #8a72df;
}


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

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

    margin:
        0 auto;

    color:
        #69667a;

    font-size:
        18px;

    line-height:
        1.75;
}


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

.hero-decoration {
    position:
        absolute;

    color:
        #f2b84b;

    font-size:
        30px;

    animation:
        floatingStar
        4s
        ease-in-out
        infinite;
}


.hero-decoration-left {
    left:
        30px;

    top:
        95px;
}


.hero-decoration-right {
    right:
        25px;

    top:
        125px;

    animation-delay:
        1.3s;
}


/* =========================================================
   MINI STARS
========================================================= */

.hero-mini-stars {
    margin-top:
        18px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        13px;

    color:
        #f0b444;
}


.hero-mini-stars span:nth-child(2) {
    color:
        #8d7bd7;

    font-size:
        12px;
}


/* =========================================================
   GRADES SECTION
========================================================= */

.grades-section {
    padding:
        37px;

    position:
        relative;

    overflow:
        hidden;

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

    backdrop-filter:
        blur(15px);

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

    border:
        1px solid
        rgba(
            102,
            98,
            134,
            0.09
        );

    border-radius:
        36px;

    box-shadow:
        0 20px 55px
        rgba(
            64,
            60,
            84,
            0.08
        );
}


/* =========================================================
   DECORATION INSIDE SECTION
========================================================= */

.grades-section::before {
    content:
        "YEW";

    position:
        absolute;

    right:
        -20px;

    top:
        20px;

    color:
        rgba(
            114,
            95,
            194,
            0.035
        );

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        160px;

    font-weight:
        700;

    transform:
        rotate(-8deg);

    pointer-events:
        none;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    margin-bottom:
        30px;

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;
}


.section-label {
    margin:
        0
        0
        7px;

    color:
        #8774d3;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.section-heading h2 {
    margin:
        0;

    color:
        #34314c;

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        31px;

    font-weight:
        600;
}


/* =========================================================
   GRADE COUNT
========================================================= */

.grade-count {
    padding:
        10px
        16px;

    flex-shrink:
        0;

    background:
        #f0ecff;

    border:
        1px solid
        rgba(
            123,
            105,
            197,
            0.09
        );

    border-radius:
        999px;

    color:
        #715fc2;

    font-size:
        13px;

    font-weight:
        800;
}


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

.grades-grid {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        23px;
}


/* =========================================================
   GRADE CARD
========================================================= */

.grade-card {
    min-height:
        315px;

    padding:
        26px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

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

    border-radius:
        30px;

    color:
        #303043;

    text-decoration:
        none;

    box-shadow:
        0 13px 30px
        rgba(
            54,
            57,
            73,
            0.09
        );

    transition:
        transform
        0.35s
        ease,
        box-shadow
        0.35s
        ease;
}


/* =========================================================
   CARD DECORATION
========================================================= */

.card-decoration {
    position:
        absolute;

    width:
        230px;

    height:
        230px;

    right:
        -85px;

    top:
        -105px;

    border-radius:
        50%;

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

    transition:
        transform
        0.4s
        ease;
}


.grade-card::after {
    content:
        "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    left:
        -55px;

    bottom:
        -50px;

    border-radius:
        50%;

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


/* =========================================================
   HOVER
========================================================= */

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

    box-shadow:
        0 21px 43px
        rgba(
            54,
            57,
            73,
            0.14
        );
}


.grade-card:hover .card-decoration {
    transform:
        scale(1.12);
}


/* =========================================================
   CARD TOP
========================================================= */

.grade-top {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.grade-number {
    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1.7px;
}


.grade-status {
    padding:
        7px
        11px;

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

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

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        800;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.grade-card-content {
    margin-top:
        27px;

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        21px;
}


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

.grade-icon {
    width:
        92px;

    height:
        92px;

    flex:
        0 0 92px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

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

    border-radius:
        28px;

    font-size:
        45px;

    box-shadow:
        0 10px 24px
        rgba(
            50,
            55,
            60,
            0.08
        );

    transition:
        transform
        0.35s
        ease;
}


.grade-card:hover .grade-icon {
    transform:
        translateY(-4px)
        rotate(-4deg)
        scale(1.05);
}


/* =========================================================
   CARD TEXT
========================================================= */

.grade-text {
    text-align:
        left;
}


.grade-text h2 {
    margin:
        0
        0
        8px;

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        32px;

    font-weight:
        650;

    line-height:
        1.1;
}


.grade-text p {
    margin:
        0;

    font-size:
        15px;

    line-height:
        1.65;
}


/* =========================================================
   FOOTER
========================================================= */

.grade-footer {
    margin-top:
        auto;

    padding-top:
        25px;

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    font-size:
        13px;

    font-weight:
        800;
}


/* =========================================================
   ARROW
========================================================= */

.grade-arrow {
    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    font-size:
        22px;

    box-shadow:
        0 7px 17px
        rgba(
            50,
            55,
            60,
            0.07
        );

    transition:
        transform
        0.3s
        ease,
        background
        0.3s
        ease;
}


.grade-card:hover .grade-arrow {
    transform:
        translateX(6px);

    background:
        white;
}


/* =========================================================
   GRADE 1 — GREEN
========================================================= */

.grade1 {
    background:
        linear-gradient(
            145deg,
            #edf9e9 0%,
            #dff3da 52%,
            #ccebc9 100%
        );
}


.grade1 .grade-number,
.grade1 .grade-footer {
    color:
        #397f46;
}


.grade1 .grade-text h2 {
    color:
        #286d37;
}


/* =========================================================
   GRADE 2 — ORANGE / GOLD
========================================================= */

.grade2 {
    background:
        linear-gradient(
            145deg,
            #fff5dc 0%,
            #ffe9bc 52%,
            #ffdaa0 100%
        );
}


.grade2 .grade-number,
.grade2 .grade-footer {
    color:
        #b36a19;
}


.grade2 .grade-text h2 {
    color:
        #985213;
}


/* =========================================================
   GRADE 3 — TURQUOISE
========================================================= */

.grade3 {
    background:
        linear-gradient(
            145deg,
            #e7f8f4 0%,
            #d3f1e9 52%,
            #bee7dc 100%
        );
}


.grade3 .grade-number,
.grade3 .grade-footer {
    color:
        #2e8b76;
}


.grade3 .grade-text h2 {
    color:
        #206d5e;
}


/* =========================================================
   GRADE 4 — PURPLE
========================================================= */

.grade4 {
    background:
        linear-gradient(
            145deg,
            #f3edff 0%,
            #e8ddff 52%,
            #d9c8fa 100%
        );
}


.grade4 .grade-number,
.grade4 .grade-footer {
    color:
        #7656bd;
}


.grade4 .grade-text h2 {
    color:
        #5d3da5;
}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.grades-message {
    margin:
        45px
        auto
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    text-align:
        center;

    color:
        #706b80;
}


.grades-message p {
    margin:
        0;

    font-size:
        16px;
}


.grades-message strong {
    color:
        #7662c5;
}


.message-star {
    color:
        #efb94e;

    font-size:
        16px;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes floatingStar {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(7deg);
    }

}


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

@media (max-width: 900px) {

    .grades-navigation {
        gap:
            12px;
    }


    .nav-links a {
        padding:
            9px
            11px;

        font-size:
            13px;
    }


    .home-button span:last-child {
        display:
            none;
    }


    .home-button {
        width:
            44px;

        height:
            44px;

        padding:
            0;

        justify-content:
            center;
    }


    .grades-page {
        width:
            calc(
                100% - 36px
            );
    }


    .grade-card-content {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


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

@media (max-width: 650px) {

    .grades-header {
        padding:
            12px;
    }


    .grades-navigation {
        padding:
            15px;

        flex-direction:
            column;

        border-radius:
            22px;
    }


    .grades-logo {
        padding:
            10px
            18px;

        font-size:
            22px;
    }


    .nav-links {
        width:
            100%;

        flex-wrap:
            wrap;
    }


    .nav-links a {
        padding:
            8px
            12px;

        font-size:
            13px;
    }


    .home-button {
        width:
            auto;

        height:
            auto;

        padding:
            9px
            14px;
    }


    .home-button span:last-child {
        display:
            inline;
    }


    .grades-page {
        width:
            calc(
                100% - 24px
            );

        padding:
            65px
            0
            60px;
    }


    .grades-hero {
        margin:
            15px
            auto
            45px;
    }


    .hero-star {
        width:
            66px;

        height:
            66px;

        font-size:
            30px;
    }


    .grades-hero h1 {
        font-size:
            45px;
    }


    .hero-description {
        font-size:
            16px;
    }


    .hero-decoration {
        display:
            none;
    }


    .grades-section {
        padding:
            23px
            17px;

        border-radius:
            28px;
    }


    .grades-section::before {
        font-size:
            90px;
    }


    .section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


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


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

        gap:
            19px;
    }


    .grade-card {
        min-height:
            290px;

        padding:
            23px;

        border-radius:
            27px;
    }


    .grade-card-content {
        margin-top:
            24px;

        flex-direction:
            row;

        align-items:
            center;
    }


    .grade-icon {
        width:
            78px;

        height:
            78px;

        flex-basis:
            78px;

        border-radius:
            23px;

        font-size:
            38px;
    }


    .grade-text h2 {
        font-size:
            28px;
    }


    .floating-word {
        display:
            none;
    }

}


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

@media (max-width: 430px) {

    .grade-card-content {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .grades-hero h1 {
        font-size:
            39px;
    }


    .grade-card {
        min-height:
            310px;
    }


    .grade-status {
        font-size:
            10px;
    }

}


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

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

    .background-star,
    .hero-decoration {
        animation:
            none;
    }


    .grade-card,
    .grade-icon,
    .grade-arrow,
    .grades-logo,
    .home-button,
    .nav-links a {
        transition:
            none;
    }

}