/* =========================================================
       TRUAPPS NAVY TURQUOISE STUDIO THEME
    ========================================================= */

    :root {

        --navy: #193778;
        --navy-dark: #10285A;
        --navy-deep: #0B1D43;
        --navy-light: #24478F;

        --turquoise: #3FE0C0;
        --teal: #0DB69F;

        --white: #FFFFFF;
        --white-soft: rgba(255, 255, 255, 0.88);
        --white-muted: rgba(255, 255, 255, 0.66);

        --background: #10285A;
        --background-dark: #0B1D43;
        --background-soft: #142F68;

        --text: #FFFFFF;
        --text-muted: rgba(255, 255, 255, 0.66);

        --border: rgba(255, 255, 255, 0.12);
        --border-light: rgba(255, 255, 255, 0.08);

        --turquoise-soft: rgba(63, 224, 192, 0.10);
        --turquoise-medium: rgba(63, 224, 192, 0.16);
        --turquoise-border: rgba(63, 224, 192, 0.35);

        --shadow:
            0 20px 55px rgba(0, 0, 0, 0.28);

        --shadow-hover:
            0 25px 65px rgba(0, 0, 0, 0.38);

        --turquoise-shadow:
            0 12px 30px rgba(63, 224, 192, 0.18);
    }


    /* =========================================================
       RESET
    ========================================================= */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }


    html {
        scroll-behavior: smooth;
    }


    body {

        margin: 0;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Helvetica,
            Arial,
            sans-serif;

        background:
            var(--background);

        color:
            var(--text);

        line-height: 1.6;

        -webkit-font-smoothing: antialiased;

        text-rendering: optimizeLegibility;
    }


    a {
        color: inherit;
        text-decoration: none;
    }


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

    .container {

        width:
            min(
                1600px,
                calc(80% - 40px)
            );

        margin:
            0 auto;
    }


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

    header {

        position: relative;

        padding:
            125px 0 65px;

        text-align: center;

        overflow: hidden;

        background:
            linear-gradient(
                180deg,
                var(--navy-deep) 0%,
                var(--navy-dark) 65%,
                var(--background-soft) 100%
            );

        border-bottom:
            1px solid var(--border);
    }


    /* Top decorative glow */

    header::before {

        content: "";

        position: absolute;

        width: 460px;
        height: 460px;

        top: -280px;
        right: -170px;

        background:
            var(--turquoise);

        opacity: 0.08;

        border-radius: 50%;

        filter:
            blur(15px);

        pointer-events: none;
    }


    /* Bottom decorative glow */

    header::after {

        content: "";

        position: absolute;

        width: 380px;
        height: 380px;

        bottom: -260px;
        left: -180px;

        background:
            var(--turquoise);

        opacity: 0.05;

        border-radius: 50%;

        filter:
            blur(15px);

        pointer-events: none;
    }


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

    .logo {

        position: relative;

        z-index: 1;

        width: 68px;
        height: 68px;

        display: flex;

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

        margin:
            0 auto 24px;

        border-radius: 17px;

        background:
            linear-gradient(
                145deg,
                var(--navy-light),
                var(--navy)
            );

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

        color:
            var(--turquoise);

        font-size: 27px;

        font-weight: 800;

        letter-spacing: -1px;

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


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

    h1 {

        position: relative;

        z-index: 1;

        margin: 0;

        font-size:
            clamp(
                34px,
                7vw,
                52px
            );

        line-height: 1.08;

        letter-spacing: -2px;

        color:
            var(--white);
    }


    h1 span {
        color:
            var(--turquoise);
    }


    .subtitle {

        position: relative;

        z-index: 1;

        max-width: 620px;

        margin:
            18px auto 0;

        color:
            var(--white-muted);

        font-size: 16px;

        line-height: 1.7;
    }


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

    main {

        padding:
            50px 0 70px;

        background:
            var(--background);
    }


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

    .card {

        background:
            linear-gradient(
                145deg,
                rgba(36, 71, 143, 0.72),
                rgba(20, 47, 104, 0.72)
            );

        padding:
            34px;

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

        border-radius:
            20px;

        box-shadow:
            var(--shadow);

        backdrop-filter:
            blur(12px);

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


    .card h2 {

        margin-top: 0;

        margin-bottom: 8px;

        font-size: 25px;

        letter-spacing: -0.6px;

        color:
            var(--white);
    }


    .card > p {

        margin-bottom: 25px;

        color:
            var(--white-muted);

        font-size: 14px;

        line-height: 1.7;
    }


    /* =========================================================
       FORM
    ========================================================= */

    label {

        display: block;

        margin-top: 22px;

        margin-bottom: 8px;

        color:
            var(--white-soft);

        font-size: 14px;

        font-weight: 600;
    }


    input,
    select,
    textarea {

        width: 100%;

        padding:
            13px 14px;

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

        border-radius:
            10px;

        background:
            rgba(11, 29, 67, 0.55);

        color:
            var(--white);

        font-family:
            inherit;

        font-size:
            15px;

        outline: none;

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


    input::placeholder,
    textarea::placeholder {

        color:
            rgba(255, 255, 255, 0.40);
    }


    input:focus,
    select:focus,
    textarea:focus {

        border-color:
            var(--turquoise);

        background:
            rgba(63, 224, 192, 0.05);

        box-shadow:
            0 0 0 3px
            rgba(63, 224, 192, 0.08);
    }


    select {
        cursor: pointer;
    }


    select option {

        background:
            var(--navy-dark);

        color:
            var(--white);
    }


    textarea {

        min-height:
            140px;

        resize:
            vertical;

        line-height:
            1.6;
    }


    /* =========================================================
       RATING
    ========================================================= */

    .rating {

        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            9px;
    }


    .rating label {
        margin: 0;
    }


    .rating input {
        display: none;
    }


    .rating span {

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        min-width:
            46px;

        height:
            42px;

        padding:
            8px 14px;

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

        border-radius:
            10px;

        background:
            rgba(11, 29, 67, 0.55);

        color:
            var(--white-muted);

        cursor:
            pointer;

        font-size:
            14px;

        font-weight:
            600;

        transition:
            all 0.2s ease;
    }


    .rating span:hover {

        border-color:
            var(--turquoise-border);

        color:
            var(--turquoise);

        background:
            var(--turquoise-soft);

        transform:
            translateY(-2px);
    }


    .rating input:checked + span {

        background:
            var(--turquoise);

        color:
            var(--navy-deep);

        border-color:
            var(--turquoise);

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


    /* =========================================================
       SUBMIT BUTTON
    ========================================================= */

    .submit {

        width:
            100%;

        margin-top:
            30px;

        padding:
            14px 20px;

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

        border-radius:
            10px;

        background:
            var(--turquoise);

        color:
            var(--navy-deep);

        font-family:
            inherit;

        font-size:
            15px;

        font-weight:
            700;

        cursor:
            pointer;

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


    .submit:hover {

        background:
            #63E8CF;

        transform:
            translateY(-2px);

        box-shadow:
            0 15px 35px
            rgba(63, 224, 192, 0.24);
    }


    .submit:active {

        transform:
            translateY(0);
    }


    /* =========================================================
       INFORMATION BOX
    ========================================================= */

    .info {

        margin-top:
            25px;

        padding:
            18px 20px;

        background:
            var(--turquoise-soft);

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

        border-radius:
            12px;

        color:
            var(--white-muted);

        font-size:
            13px;

        line-height:
            1.6;
    }


    .info strong {

        color:
            var(--turquoise);
    }


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

    footer {

        padding:
            40px 0;

        background:
            var(--background-dark);

        color:
            var(--white-muted);

        font-size:
            13px;

        text-align:
            center;

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


    footer p {
        margin:
            5px 0;
    }


    footer a {

        color:
            var(--white-muted);

        transition:
            color 0.2s ease;
    }


    footer a:hover {

        color:
            var(--turquoise);
    }


    .footer-brand {

        color:
            var(--turquoise);

        font-weight:
            700;
    }


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

    @media (max-width: 600px) {

        header {

            padding:
                105px 0 45px;
        }


        .container {

            width:
                calc(100% - 28px);
        }


        .logo {

            width:
                58px;

            height:
                58px;

            border-radius:
                15px;

            font-size:
                24px;
        }


        h1 {

            font-size:
                36px;

            letter-spacing:
                -1.5px;
        }


        .subtitle {

            font-size:
                15px;

            padding:
                0 5px;
        }


        main {

            padding:
                28px 0 45px;
        }


        .card {

            padding:
                25px 20px;

            border-radius:
                17px;
        }


        .card h2 {

            font-size:
                23px;
        }


        .rating {

            gap:
                7px;
        }


        .rating span {

            min-width:
                43px;

            height:
                40px;
        }
    }


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

    @media (max-width: 400px) {

        h1 {

            font-size:
                32px;
        }


        .card {

            padding:
                23px 17px;
        }


        input,
        select,
        textarea {

            font-size:
                14px;
        }


        .rating span {

            min-width:
                40px;

            padding:
                7px 11px;
        }
    }


    /* =========================================================
       REDUCE MOTION
    ========================================================= */

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

        html {
            scroll-behavior:
                auto;
        }

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

            transition:
                none !important;
        }
    }