/* =========================================================
           DIGISCALE-PRO — PALETTE OFFICIELLE
        ========================================================= */

        :root {

            --black: #01030A;
            --blue-black: #020713;
            --blue-dark: #041126;
            --blue: #071A36;

            --gold-shadow: #806217;
            --gold-dark: #A88322;
            --gold: #C6A23A;
            --gold-light: #E4C96A;
            --gold-white: #F5E7AE;

            --white: #FFFFFF;
            --text: #E9EBF0;
            --muted: #9299A7;

            --header-bg: rgba(1, 3, 10, 0.86);
            --header-border: rgba(228, 201, 106, 0.14);

            --card-bg: rgba(4, 17, 38, 0.78);
            --card-bg-solid: #041126;
            --card-border: rgba(198, 162, 58, 0.20);

            --input-bg: rgba(7, 26, 54, 0.82);

            --shadow:
                0 24px 70px rgba(0, 0, 0, 0.38);

            --soft-shadow:
                0 12px 34px rgba(0, 0, 0, 0.24);

            --radius-lg: 24px;
            --radius-md: 18px;
            --radius-sm: 12px;

            --transition: 220ms ease;

            color-scheme: dark;
        }


        /* =========================================================
           LIGHT MODE
        ========================================================= */

        html.theme-light {

            --black: #E8ECF3;
            --blue-black: #EEF1F6;
            --blue-dark: #DDE3EC;
            --blue: #071A36;

            --gold-shadow: #806217;
            --gold-dark: #A88322;
            --gold: #B58E26;
            --gold-light: #C6A23A;
            --gold-white: #7C641D;

            --white: #FFFFFF;
            --text: #172235;
            --muted: #667083;

            --header-bg: rgba(242, 243, 245, 0.91);
            --header-border: rgba(126, 99, 25, 0.16);

            --card-bg: rgba(238, 241, 246, 0.88);
            --card-bg-solid: #E8ECF3;
            --card-border: rgba(126, 99, 25, 0.19);

            --input-bg: #DDE3EC;

            --shadow:
                0 22px 60px rgba(7, 26, 54, 0.11);

            --soft-shadow:
                0 12px 32px rgba(7, 26, 54, 0.08);

            color-scheme: light;
        }


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

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

        html {
            scroll-behavior: smooth;
            background: var(--black);
        }

        body {

            min-height: 100vh;

            font-family:
                Inter,
                "Segoe UI",
                Arial,
                sans-serif;

            color: var(--text);

            background:
                radial-gradient(
                    circle at 50% -15%,
                    rgba(198, 162, 58, 0.09),
                    transparent 34%
                ),
                radial-gradient(
                    circle at 10% 35%,
                    rgba(7, 26, 54, 0.58),
                    transparent 38%
                ),
                linear-gradient(
                    145deg,
                    var(--black) 0%,
                    var(--blue-black) 46%,
                    var(--blue-dark) 100%
                );

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

            overflow-x: hidden;
        }


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

        html.theme-light body {

            background:

                radial-gradient(
                    ellipse 70% 48% at 12% 8%,
                    rgba(198, 162, 58, 0.12),
                    transparent 65%
                ),

                radial-gradient(
                    ellipse 58% 42% at 88% 18%,
                    rgba(7, 26, 54, 0.10),
                    transparent 70%
                ),

                radial-gradient(
                    ellipse 70% 60% at 50% 92%,
                    rgba(198, 162, 58, 0.07),
                    transparent 72%
                ),

                linear-gradient(
                    135deg,
                    #F7F3E6 0%,
                    #F2F3F5 30%,
                    #EEF1F6 62%,
                    #E8ECF3 100%
                );

            color: var(--text);
        }


        /* =========================================================
           DECORATIVE LIGHT ELEMENTS
        ========================================================= */

        body::before {

            content: "";

            position: fixed;

            width: 430px;
            height: 430px;

            top: 100px;
            right: -220px;

            border-radius: 50%;

            border: 1px solid
                rgba(198, 162, 58, 0.08);

            pointer-events: none;

            z-index: -1;
        }

        body::after {

            content: "";

            position: fixed;

            width: 520px;
            height: 520px;

            bottom: -310px;
            left: -250px;

            border-radius: 50%;

            border: 1px solid
                rgba(7, 26, 54, 0.08);

            pointer-events: none;

            z-index: -1;
        }

        html.theme-light body::before {

            border-color:
                rgba(126, 99, 25, 0.10);
        }

        html.theme-light body::after {

            border-color:
                rgba(7, 26, 54, 0.08);
        }


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

        header {

            position: sticky;
            top: 0;

            z-index: 100;

            height: 76px;

            display: flex;
            align-items: center;

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

            background:
                var(--header-bg);

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

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


        .header-inner {

            width: min(1400px, calc(100% - 44px));

            margin: 0 auto;

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

            gap: 25px;
        }


        /* =========================================================
           BRAND
        ========================================================= */

        .brand {

            display: flex;
            align-items: center;

            gap: 12px;

            text-decoration: none;

            color: var(--white);

            min-width: max-content;
        }


        .brand-mark {

            width: 42px;
            height: 42px;

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

            border-radius: 12px;

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

            color: var(--blue-black);

            font-weight: 900;
            font-size: 15px;

            letter-spacing: -0.5px;

            box-shadow:
                0 8px 22px
                rgba(198, 162, 58, 0.18);
        }


        .brand-text {

            display: flex;
            flex-direction: column;

            line-height: 1.05;
        }


        .brand-name {

            font-size: 15px;

            font-weight: 850;

            letter-spacing: 0.8px;

            color: var(--text);
        }


        .brand-subtitle {

            margin-top: 4px;

            font-size: 10px;

            color: var(--muted);

            letter-spacing: 1.5px;

            text-transform: uppercase;
        }


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

        nav {

            display: flex;
            align-items: center;

            gap: 7px;
        }


        nav a {

            position: relative;

            padding: 10px 13px;

            border-radius: 10px;

            text-decoration: none;

            color: var(--muted);

            font-size: 13px;
            font-weight: 650;

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


        nav a:hover {

            color: var(--text);

            background:
                rgba(198, 162, 58, 0.06);
        }


        nav a.active {

            color: var(--gold-light);

            background:
                rgba(198, 162, 58, 0.08);
        }


        nav a.active::after {

            content: "";

            position: absolute;

            left: 13px;
            right: 13px;

            bottom: 3px;

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--gold),
                    transparent
                );
        }


        /* =========================================================
           ACCOUNT
        ========================================================= */

        .account-area {

            position: relative;

            display: flex;
            align-items: center;
        }


        #loginButton {

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

            padding: 10px 17px;

            border-radius: 10px;

            border:
                1px solid
                rgba(228, 201, 106, 0.26);

            background:
                rgba(198, 162, 58, 0.07);

            color: var(--gold-light);

            text-decoration: none;

            font-size: 13px;
            font-weight: 750;

            transition:
                transform var(--transition),
                background var(--transition),
                border-color var(--transition);
        }


        #loginButton:hover {

            transform: translateY(-1px);

            background:
                rgba(198, 162, 58, 0.12);

            border-color:
                rgba(228, 201, 106, 0.42);
        }


        #userButton {

            display: none;

            align-items: center;

            gap: 10px;

            padding: 5px 8px 5px 5px;

            border: 1px solid
                rgba(198, 162, 58, 0.16);

            border-radius: 30px;

            background:
                rgba(7, 26, 54, 0.52);

            color: var(--text);

            cursor: pointer;

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


        html.theme-light #userButton {

            background:
                rgba(221, 227, 236, 0.82);
        }


        #userButton:hover {

            border-color:
                rgba(198, 162, 58, 0.35);
        }


        .user-avatar {

            width: 34px;
            height: 34px;

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

            border-radius: 50%;

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

            color: var(--blue-black);

            font-size: 12px;
            font-weight: 900;
        }


        .user-name {

            max-width: 130px;

            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;

            font-size: 13px;
            font-weight: 700;
        }


        .account-chevron {

            color: var(--muted);

            font-size: 11px;

            margin-right: 3px;
        }


        /* =========================================================
           ACCOUNT MENU
        ========================================================= */

        .account-menu {

            position: absolute;

            top: calc(100% + 12px);
            right: 0;

            width: 270px;

            padding: 10px;

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

            border-radius: 18px;

            background:
                rgba(2, 7, 19, 0.97);

            box-shadow: var(--shadow);

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

            display: none;
        }


        html.theme-light .account-menu {

            background:
                rgba(238, 241, 246, 0.98);
        }


        .account-menu.show {

            display: block;

            animation:
                menuIn 160ms ease both;
        }


        @keyframes menuIn {

            from {

                opacity: 0;
                transform: translateY(-5px);
            }

            to {

                opacity: 1;
                transform: translateY(0);
            }
        }


        .menu-user {

            padding: 12px;

            border-radius: 13px;

            background:
                rgba(198, 162, 58, 0.05);

            border:
                1px solid
                rgba(198, 162, 58, 0.10);

            margin-bottom: 7px;
        }


        .menu-user-name {

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

            color: var(--text);

            word-break: break-word;
        }


        .menu-user-email {

            margin-top: 4px;

            color: var(--muted);

            font-size: 11px;

            word-break: break-word;
        }


        .menu-link,
        #logoutButton {

            width: 100%;

            display: flex;
            align-items: center;

            padding: 11px 12px;

            border: 0;

            border-radius: 10px;

            background: transparent;

            color: var(--muted);

            text-decoration: none;

            font-family: inherit;

            font-size: 12px;
            font-weight: 650;

            cursor: pointer;

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


        .menu-link:hover,
        #logoutButton:hover {

            color: var(--text);

            background:
                rgba(198, 162, 58, 0.07);
        }


        #logoutButton {

            color: var(--gold-light);

            margin-top: 2px;
        }


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

        main {

            min-height: calc(100vh - 76px);
        }


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

        .hero {

            position: relative;

            padding:
                82px 22px
                65px;

            text-align: center;

            overflow: hidden;
        }


        .hero::before {

            content: "";

            position: absolute;

            width: 560px;
            height: 300px;

            top: -170px;
            left: 50%;

            transform: translateX(-50%);

            border-radius: 50%;

            background:
                radial-gradient(
                    ellipse,
                    rgba(198, 162, 58, 0.12),
                    transparent 70%
                );

            pointer-events: none;
        }


        .hero-eyebrow {

            position: relative;

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 7px 13px;

            border:
                1px solid
                rgba(198, 162, 58, 0.22);

            border-radius: 30px;

            background:
                rgba(198, 162, 58, 0.055);

            color: var(--gold-light);

            font-size: 10px;
            font-weight: 850;

            letter-spacing: 2px;

            text-transform: uppercase;
        }


        .hero-eyebrow::before {

            content: "";

            width: 5px;
            height: 5px;

            border-radius: 50%;

            background: var(--gold-light);

            box-shadow:
                0 0 9px
                rgba(228, 201, 106, 0.42);
        }


        .hero h1 {

            position: relative;

            max-width: 850px;

            margin:
                20px auto
                15px;

            font-size:
                clamp(36px, 5vw, 62px);

            line-height: 1.02;

            letter-spacing: -2.3px;

            font-weight: 850;

            color: var(--text);
        }


        .hero h1 span {

            color: var(--gold-light);
        }


        .hero p {

            position: relative;

            max-width: 650px;

            margin: 0 auto;

            color: var(--muted);

            font-size: 15px;

            line-height: 1.75;
        }


        /* =========================================================
           PLANS SECTION
        ========================================================= */

        .plans-section {

            width: min(1400px, calc(100% - 44px));

            margin: 0 auto;

            padding:
                10px 0
                80px;
        }


        .plans-grid {

            display: grid;

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

            gap: 18px;

            align-items: stretch;
        }


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

        .plan-card {

            position: relative;

            display: flex;
            flex-direction: column;

            min-height: 440px;

            padding: 27px 23px 22px;

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

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

            background:
                linear-gradient(
                    145deg,
                    rgba(7, 26, 54, 0.84),
                    rgba(2, 7, 19, 0.91)
                );

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

            overflow: hidden;

            transition:
                transform 220ms ease,
                border-color 220ms ease,
                box-shadow 220ms ease;
        }


        html.theme-light .plan-card {

            background:
                linear-gradient(
                    145deg,
                    #EEF1F6 0%,
                    #E8ECF3 58%,
                    #F2F3F5 100%
                );
        }


        .plan-card::before {

            content: "";

            position: absolute;

            width: 190px;
            height: 190px;

            top: -115px;
            right: -80px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(198, 162, 58, 0.11),
                    transparent 68%
                );

            pointer-events: none;
        }


        .plan-card:hover {

            transform: translateY(-5px);

            border-color:
                rgba(228, 201, 106, 0.34);

            box-shadow:
                0 25px 55px
                rgba(0, 0, 0, 0.25);
        }


        html.theme-light .plan-card:hover {

            box-shadow:
                0 25px 50px
                rgba(7, 26, 54, 0.12);
        }


        .plan-card.featured {

            border-color:
                rgba(198, 162, 58, 0.48);

            background:
                linear-gradient(
                    145deg,
                    rgba(7, 26, 54, 0.96),
                    rgba(4, 17, 38, 0.98)
                );

            box-shadow:
                0 20px 60px
                rgba(198, 162, 58, 0.08);
        }


        html.theme-light .plan-card.featured {

            background:
                linear-gradient(
                    145deg,
                    #F7F3E6 0%,
                    #EEF1F6 48%,
                    #E8ECF3 100%
                );

            border-color:
                rgba(126, 99, 25, 0.34);
        }


        .featured-badge {

            position: absolute;

            top: 17px;
            right: 17px;

            padding: 6px 9px;

            border-radius: 30px;

            background:
                linear-gradient(
                    135deg,
                    var(--gold-light),
                    var(--gold)
                );

            color: var(--blue-black);

            font-size: 8px;
            font-weight: 900;

            letter-spacing: 0.9px;

            text-transform: uppercase;
        }


        .plan-name {

            position: relative;

            font-size: 19px;

            font-weight: 850;

            color: var(--text);

            margin-bottom: 9px;
        }


        .plan-description {

            position: relative;

            min-height: 44px;

            color: var(--muted);

            font-size: 12px;

            line-height: 1.55;

            margin-bottom: 22px;
        }


        .plan-price {

            display: flex;
            align-items: baseline;

            gap: 5px;

            margin-bottom: 4px;
        }


        .plan-price strong {

            font-size: 32px;

            line-height: 1;

            font-weight: 900;

            letter-spacing: -1px;

            color: var(--gold-light);
        }


        html.theme-light .plan-price strong {

            color: var(--gold-dark);
        }


        .plan-price span {

            color: var(--muted);

            font-size: 11px;

            font-weight: 650;
        }


        .plan-duration {

            color: var(--muted);

            font-size: 10px;

            margin-bottom: 23px;
        }


        .plan-divider {

            width: 100%;

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    rgba(198, 162, 58, 0.25),
                    rgba(198, 162, 58, 0.03)
                );

            margin-bottom: 20px;
        }


        .plan-features {

            list-style: none;

            display: flex;
            flex-direction: column;

            gap: 12px;

            flex: 1;

            margin-bottom: 24px;
        }


        .plan-features li {

            position: relative;

            display: flex;
            align-items: flex-start;

            gap: 9px;

            color: var(--muted);

            font-size: 11px;

            line-height: 1.45;
        }


        .plan-features li::before {

            content: "✓";

            flex: 0 0 auto;

            width: 18px;
            height: 18px;

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

            margin-top: -1px;

            border-radius: 50%;

            background:
                rgba(198, 162, 58, 0.10);

            color: var(--gold-light);

            font-size: 9px;
            font-weight: 900;
        }


        .plan-button {

            width: 100%;

            min-height: 45px;

            border: 1px solid
                rgba(228, 201, 106, 0.32);

            border-radius: 12px;

            background:
                linear-gradient(
                    135deg,
                    var(--gold-light),
                    var(--gold),
                    var(--gold-dark)
                );

            color: var(--blue-black);

            font-family: inherit;

            font-size: 12px;

            font-weight: 850;

            cursor: pointer;

            box-shadow:
                0 10px 25px
                rgba(198, 162, 58, 0.10);

            transition:
                transform 180ms ease,
                box-shadow 180ms ease,
                filter 180ms ease;
        }


        .plan-button:hover {

            transform: translateY(-2px);

            box-shadow:
                0 14px 30px
                rgba(198, 162, 58, 0.17);

            filter: brightness(1.04);
        }


        .plan-button:active {

            transform: translateY(0);
        }


        /* =========================================================
           LOADING
        ========================================================= */

        .plans-loading {

            grid-column: 1 / -1;

            min-height: 240px;

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

            padding: 30px;

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

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

            background:
                rgba(4, 17, 38, 0.65);

            color: var(--muted);

            font-size: 13px;
        }


        html.theme-light .plans-loading {

            background:
                rgba(232, 236, 243, 0.82);
        }


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

        .info-section {

            width: min(1100px, calc(100% - 44px));

            margin: 0 auto 90px;

            padding: 28px;

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

            border-radius: 22px;

            background:
                linear-gradient(
                    145deg,
                    rgba(7, 26, 54, 0.58),
                    rgba(4, 17, 38, 0.72)
                );

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


        html.theme-light .info-section {

            background:
                linear-gradient(
                    145deg,
                    #E8ECF3,
                    #EEF1F6,
                    #F7F3E6
                );
        }


        .info-title {

            margin-bottom: 18px;

            color: var(--text);

            font-size: 16px;

            font-weight: 800;
        }


        .info-grid {

            display: grid;

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

            gap: 15px;
        }


        .info-item {

            padding: 17px;

            border:
                1px solid
                rgba(198, 162, 58, 0.10);

            border-radius: 14px;

            background:
                rgba(7, 26, 54, 0.42);
        }


        html.theme-light .info-item {

            background:
                #DDE3EC;
        }


        .info-item strong {

            display: block;

            margin-bottom: 6px;

            color: var(--gold-light);

            font-size: 12px;

            font-weight: 800;
        }


        html.theme-light .info-item strong {

            color: var(--gold-dark);
        }


        .info-item span {

            display: block;

            color: var(--muted);

            font-size: 11px;

            line-height: 1.55;
        }


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

        footer {

            background:
                linear-gradient(
                    145deg,
                    #020713,
                    #071A36
                );

            border-top:
                1px solid
                rgba(198, 162, 58, 0.14);

            padding:
                35px 22px;
        }


        .footer-inner {

            width: min(1400px, 100%);

            margin: 0 auto;

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

            gap: 20px;
        }


        .footer-brand {

            display: flex;
            align-items: center;

            gap: 10px;
        }


        .footer-mark {

            width: 32px;
            height: 32px;

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

            border-radius: 9px;

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

            color: var(--blue-black);

            font-size: 10px;
            font-weight: 900;
        }


        .footer-text {

            color: var(--muted);

            font-size: 10px;

            line-height: 1.5;
        }


        .footer-text strong {

            display: block;

            color: var(--text);

            font-size: 11px;

            margin-bottom: 2px;
        }


        .footer-link {

            color: var(--gold-light);

            text-decoration: none;

            font-size: 11px;

            font-weight: 700;

            transition:
                color var(--transition);
        }


        .footer-link:hover {

            color: var(--gold-white);
        }


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

        @media (max-width: 1100px) {

            .plans-grid {

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

            nav {

                display: none;
            }

            .info-grid {

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


        @media (max-width: 700px) {

            header {

                height: 68px;
            }


            .header-inner {

                width:
                    min(
                        100% - 28px,
                        1400px
                    );
            }


            .brand-subtitle {

                display: none;
            }


            .brand-name {

                font-size: 13px;
            }


            .brand-mark {

                width: 38px;
                height: 38px;

                border-radius: 10px;
            }


            .user-name,
            .account-chevron {

                display: none;
            }


            #userButton {

                padding: 4px;
            }


            .account-menu {

                right: -3px;

                width:
                    min(
                        270px,
                        calc(100vw - 28px)
                    );
            }


            .hero {

                padding:
                    65px 18px
                    48px;
            }


            .hero h1 {

                font-size:
                    clamp(34px, 11vw, 48px);

                letter-spacing: -1.7px;
            }


            .hero p {

                font-size: 13px;

                line-height: 1.7;
            }


            .plans-section {

                width:
                    calc(100% - 28px);

                padding-bottom: 60px;
            }


            .plans-grid {

                grid-template-columns:
                    1fr;

                gap: 14px;
            }


            .plan-card {

                min-height: 0;

                padding:
                    24px 20px
                    20px;
            }


            .info-section {

                width:
                    calc(100% - 28px);

                margin-bottom: 60px;

                padding: 20px;
            }


            .info-grid {

                grid-template-columns:
                    1fr;
            }


            .footer-inner {

                flex-direction: column;

                align-items: flex-start;
            }
        }


        @media (max-width: 420px) {

            #loginButton {

                padding:
                    9px 12px;

                font-size: 11px;
            }


            .brand-name {

                font-size: 12px;
            }


            .hero-eyebrow {

                font-size: 8px;

                letter-spacing: 1.5px;
            }


            .plan-price strong {

                font-size: 29px;
            }
        }