:root {
                --bg: #08090b;
                --panel: #0e1013;
                --panel-hover: #111419;
                --border: #242830;
                --border-light: #343a43;

                --text: #f4f5f7;
                --muted: #969da8;
                --muted-light: #c8cdd4;

                --green: #78e08f;
            }

            * {
                box-sizing: border-box;
            }

            html {
                scroll-behavior: smooth;
            }

            body {
                margin: 0;

                background: radial-gradient(circle at 50% -10%, #20252d 0, transparent 35%), var(--bg);

                color: var(--text);

                font-family:
                Inter,
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

                line-height: 1.5;
            }

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

            button {
                font: inherit;
            }

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

            /* =========================================
             N AVIGA*TION
             ========================================= */

            nav {
                height: 76px;

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

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

            .logo {
                display: flex;
                align-items: center;
                gap: 10px;

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

                letter-spacing: -0.04em;
            }

            .logo-mark {
                width: 31px;
                height: 31px;

                display: grid;
                place-items: center;

                border: 1px solid #555c66;
                border-radius: 8px;

                background: #111318;

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

            .nav-right {
                display: flex;
                align-items: center;
                gap: 22px;
            }

            .nav-links {
                display: flex;
                align-items: center;
                gap: 27px;

                color: var(--muted);

                font-size: 14px;
            }

            .nav-links a {
                transition: color 0.2s ease;
            }

            .nav-links a:hover {
                color: white;
            }

            .nav-cta {
                padding: 9px 15px;

                border: 1px solid #383e47;
                border-radius: 8px;

                background: #15181d;

                font-size: 14px;

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

            .nav-cta:hover {
                border-color: #555c66;
                background: #1a1e24;
            }

            /* =========================================
             L ANGUA*GE SWITCH
             ========================================= */

            .language-switch {
                display: flex;
                align-items: center;

                padding: 3px;

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

                background: #0d0f12;
            }

            .language-switch button {
                padding: 5px 8px;

                border: 0;
                border-radius: 6px;

                background: transparent;

                color: #707780;

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

                cursor: pointer;

                transition:
                background 0.2s ease,
                color 0.2s ease;
            }

            .language-switch button:hover {
                color: white;
            }

            .language-switch button.active {
                background: #242830;
                color: white;
            }

            /* =========================================
             H ERO  *
             ========================================= */

            .hero {
                padding: 110px 0 90px;

                text-align: center;
            }

            .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;

                margin-bottom: 26px;
                padding: 6px 11px;

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

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

                color: var(--muted);

                font-size: 12px;
            }

            .dot {
                width: 6px;
                height: 6px;

                border-radius: 50%;

                background: var(--green);

                box-shadow: 0 0 10px rgba(120, 224, 143, 0.6);
            }

            .hero h1 {
                max-width: 900px;

                margin: 0 auto;

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

                line-height: 0.96;

                letter-spacing: -0.07em;

                font-weight: 760;
            }

            .hero h1 em {
                color: #8f969f;
                font-style: normal;
            }

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

                margin: 30px auto 0;

                color: var(--muted);

                font-size: 17px;
            }

            .hero-actions {
                display: flex;
                justify-content: center;

                gap: 12px;

                margin-top: 36px;
            }

            .button {
                display: inline-block;

                padding: 12px 19px;

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

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

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

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

                border-color: #59606b;
            }

            .button.primary {
                border-color: white;

                background: white;

                color: #090a0c;
            }

            .button.secondary {
                background: #111318;

                color: #dfe2e6;
            }

            /* =========================================
             S ECTIO*N TITLE
             ========================================= */

            .section-title {
                margin-bottom: 45px;

                text-align: center;
            }

            .section-title h2 {
                margin: 0 0 9px;

                font-size: 36px;

                letter-spacing: -0.045em;
            }

            .section-title p {
                margin: 0;

                color: var(--muted);

                font-size: 14px;
            }

            /* =========================================
             P LANS *
             ========================================= */

            .plans {
                padding: 25px 0 115px;
            }

            .pricing {
                display: grid;

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

                gap: 14px;

                align-items: stretch;
            }

            .card {
                position: relative;

                display: flex;
                flex-direction: column;

                min-height: 560px;

                padding: 27px 24px;

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

                background: linear-gradient(180deg, #101216, #0c0e11);

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

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

                border-color: #3d434d;

                background: linear-gradient(180deg, #111419, #0d0f12);
            }

            .card.featured {
                border-color: #737983;

                box-shadow: 0 0 55px rgba(255, 255, 255, 0.035);
            }

            .card.free {
                background: linear-gradient(180deg, #0d1012, #0b0d0f);
            }

            .badge {
                position: absolute;

                top: -12px;
                left: 21px;

                padding: 5px 10px;

                border-radius: 999px;

                background: white;
                color: #090a0c;

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

                letter-spacing: 0.08em;

                text-transform: uppercase;
            }

            .plan-name {
                font-size: 20px;

                font-weight: 700;

                letter-spacing: -0.035em;
            }

            .plan-desc {
                min-height: 63px;

                margin-top: 8px;

                color: var(--muted);

                font-size: 12.5px;

                line-height: 1.55;
            }

            .price {
                margin: 23px 0;

                font-size: 39px;

                font-weight: 750;

                letter-spacing: -0.055em;
            }

            .price span {
                color: var(--muted);

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

                letter-spacing: 0;
            }

            .specs {
                padding-top: 15px;

                margin-bottom: 22px;

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

            .spec {
                display: flex;
                justify-content: space-between;

                gap: 10px;

                padding: 8px 0;

                border-bottom: 1px solid rgba(255, 255, 255, 0.045);

                font-size: 12px;
            }

            .spec span:first-child {
                color: var(--muted);
            }

            .spec span:last-child {
                font-weight: 650;

                text-align: right;
            }

            .features {
                list-style: none;

                padding: 0;
                margin: 0 0 24px;

                color: var(--muted-light);

                font-size: 12px;
            }

            .features li {
                margin: 8px 0;
            }

            .features li::before {
                content: "✓";

                margin-right: 8px;

                color: #aeb5bf;
            }

            .card .button {
                width: 100%;

                margin-top: auto;

                text-align: center;
            }

            /* =========================================
             O PEN S*OURCE MESSAGE
             ========================================= */

            .opensource {
                padding: 0 0 115px;
            }

            .opensource-box {
                display: grid;

                grid-template-columns: 1fr auto;

                align-items: center;

                gap: 40px;

                padding: 32px;

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

                background: linear-gradient(110deg, #0e1013, #0b0d10);
            }

            .opensource-box h3 {
                margin: 0 0 7px;

                font-size: 19px;

                letter-spacing: -0.025em;
            }

            .opensource-box p {
                max-width: 720px;

                margin: 0;

                color: var(--muted);

                font-size: 13px;
            }

            /* =========================================
             W HY PR*OXYAUTH CLOUD
             ========================================= */

            .why {
                padding: 95px 0;

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

                border-bottom: 1px solid rgba(255, 255, 255, 0.06);

                background: #0a0c0f;
            }

            .features-grid {
                display: grid;

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

                gap: 18px;
            }

            .feature {
                padding: 25px;

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

                background: #0d0f13;
            }

            .feature-icon {
                width: 36px;
                height: 36px;

                display: grid;
                place-items: center;

                margin-bottom: 17px;

                border: 1px solid var(--border-light);
                border-radius: 8px;

                color: #d9dde2;

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

            .feature h3 {
                margin: 0 0 7px;

                font-size: 15px;
            }

            .feature p {
                margin: 0;

                color: var(--muted);

                font-size: 13px;
            }

            /* =========================================
             C TA   *
             ========================================= */

            .cta {
                padding: 115px 0;

                text-align: center;
            }

            .cta h2 {
                margin: 0;

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

                line-height: 1;

                letter-spacing: -0.06em;
            }

            .cta p {
                max-width: 560px;

                margin: 21px auto 31px;

                color: var(--muted);
            }

            /* =========================================
             F OOTER*
             ========================================= */

            footer {
                display: flex;

                justify-content: space-between;

                padding: 28px 0;

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

                color: #737a84;

                font-size: 12px;
            }

            /* =========================================
             R ESPON*SIVE
             ========================================= */

            @media (max-width: 1050px) {
                .pricing {
                    grid-template-columns: repeat(2, 1fr);
                }

                .card {
                    min-height: 530px;
                }
            }

            @media (max-width: 800px) {
                .nav-links {
                    display: none;
                }

                .hero {
                    padding-top: 75px;
                }

                .features-grid {
                    grid-template-columns: 1fr;
                }

                .opensource-box {
                    grid-template-columns: 1fr;
                }
            }

            @media (max-width: 600px) {
                .container {
                    width: min(100% - 26px, 1180px);
                }

                .nav-right {
                    gap: 8px;
                }

                .nav-cta {
                    display: none;
                }

                .pricing {
                    grid-template-columns: 1fr;
                }

                .hero-actions {
                    flex-direction: column;
                }

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

                footer {
                    flex-direction: column;

                    gap: 8px;
                }
            }