:root {
            --primary: #6c5ce7;
            --primary-dark: #5548d4;
            --dark: #111318;
            --muted: #6b7280;
            --light: #f7f7fb;
            --border: rgba(17, 19, 24, 0.08);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            color: var(--dark);
            background: #ffffff;
        }

        a {
            text-decoration: none;
        }

        /* =====================================================
           NAVBAR
        ====================================================== */

        .navbar-custom {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;

            padding: 22px 0;
        }

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

            color: #ffffff;
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .brand:hover {
            color: #ffffff;
        }

        .brand-icon {
            width: 38px;
            height: 38px;

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

            border-radius: 12px;

            background: rgba(255,255,255,0.16);
            border: 1px solid rgba(255,255,255,0.2);

            backdrop-filter: blur(10px);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-nav-login {
            color: #ffffff;
            padding: 10px 18px;
            font-weight: 600;
        }

        .btn-nav-register {
            color: #111318;
            background: #ffffff;

            border-radius: 12px;
            padding: 10px 18px;

            font-weight: 700;

            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        .btn-nav-register:hover {
            color: #111318;

            transform: translateY(-2px);

            box-shadow:
                0 10px 30px rgba(0,0,0,.15);
        }

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

        .hero {
            min-height: 760px;

            position: relative;
            overflow: hidden;

            display: flex;
            align-items: center;

            color: #ffffff;

            background:
                radial-gradient(
                    circle at 80% 20%,
                    rgba(125, 95, 255, .55),
                    transparent 35%
                ),
                radial-gradient(
                    circle at 15% 80%,
                    rgba(30, 144, 255, .28),
                    transparent 35%
                ),
                linear-gradient(
                    135deg,
                    #111318 0%,
                    #1a1830 45%,
                    #241f48 100%
                );
        }

        .hero::before {
            content: "";

            position: absolute;
            width: 600px;
            height: 600px;

            right: -180px;
            top: -180px;

            border-radius: 50%;

            border: 1px solid rgba(255,255,255,.08);

            animation: rotateGlow 20s linear infinite;
        }

        .hero::after {
            content: "";

            position: absolute;
            width: 800px;
            height: 800px;

            left: -500px;
            bottom: -500px;

            border-radius: 50%;

            border: 1px solid rgba(255,255,255,.05);
        }

        @keyframes rotateGlow {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

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

            padding: 8px 14px;

            margin-bottom: 24px;

            border-radius: 100px;

            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.12);

            color: rgba(255,255,255,.9);

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

            backdrop-filter: blur(10px);
        }

        .hero-badge-dot {
            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: #7c6cff;

            box-shadow:
                0 0 15px rgba(124,108,255,.9);
        }

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

            margin-bottom: 24px;

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

            line-height: .98;

            font-weight: 850;

            letter-spacing: -4px;
        }

        .hero-title span {
            background:
                linear-gradient(
                    90deg,
                    #ffffff,
                    #b9b0ff,
                    #ffffff
                );

            background-size: 200% auto;

            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;

            animation: gradientText 5s linear infinite;
        }

        @keyframes gradientText {
            to {
                background-position: 200% center;
            }
        }

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

            margin-bottom: 36px;

            color: rgba(255,255,255,.7);

            font-size: 19px;
            line-height: 1.7;
        }

        .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .btn-primary-custom {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            padding: 15px 24px;

            color: #ffffff;

            border-radius: 14px;

            background:
                linear-gradient(
                    135deg,
                    #7668ff,
                    #5b4de0
                );

            border: 1px solid rgba(255,255,255,.15);

            font-weight: 700;

            box-shadow:
                0 15px 40px rgba(91,77,224,.35);

            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        .btn-primary-custom:hover {
            color: #ffffff;

            transform: translateY(-3px);

            box-shadow:
                0 20px 50px rgba(91,77,224,.5);
        }

        .btn-secondary-custom {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 15px 24px;

            color: #ffffff;

            border-radius: 14px;

            background: rgba(255,255,255,.07);

            border: 1px solid rgba(255,255,255,.15);

            font-weight: 700;

            backdrop-filter: blur(10px);

            transition:
                background .2s ease,
                transform .2s ease;
        }

        .btn-secondary-custom:hover {
            color: #ffffff;

            background: rgba(255,255,255,.13);

            transform: translateY(-3px);
        }

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

        .hero-visual {
            position: relative;

            height: 500px;

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

        .dashboard-window {
            width: 100%;
            max-width: 470px;

            padding: 12px;

            border-radius: 22px;

            background: rgba(255,255,255,.1);

            border: 1px solid rgba(255,255,255,.16);

            box-shadow:
                0 40px 100px rgba(0,0,0,.35);

            backdrop-filter: blur(20px);

            transform:
                perspective(1000px)
                rotateY(-8deg)
                rotateX(3deg);

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

        @keyframes floatWindow {
            0%, 100% {
                transform:
                    perspective(1000px)
                    rotateY(-8deg)
                    rotateX(3deg)
                    translateY(0);
            }

            50% {
                transform:
                    perspective(1000px)
                    rotateY(-8deg)
                    rotateX(3deg)
                    translateY(-12px);
            }
        }

        .window-inner {
            overflow: hidden;

            border-radius: 15px;

            background: #ffffff;

            color: #111318;
        }

        .window-top {
            height: 42px;

            display: flex;
            align-items: center;

            gap: 6px;

            padding: 0 14px;

            background: #f4f4f7;
        }

        .window-dot {
            width: 9px;
            height: 9px;

            border-radius: 50%;

            background: #d0d0d5;
        }

        .window-body {
            padding: 20px;
        }

        .mock-title {
            width: 45%;
            height: 15px;

            margin-bottom: 18px;

            border-radius: 5px;

            background: #e8e8ed;
        }

        .mock-card {
            padding: 14px;

            margin-bottom: 10px;

            border-radius: 12px;

            background: #f7f7fa;
        }

        .mock-line {
            height: 9px;

            margin-bottom: 8px;

            border-radius: 4px;

            background: #e2e2e8;
        }

        .mock-line.short {
            width: 55%;
        }

        .mock-line.price {
            width: 30%;

            margin-bottom: 0;

            background: #6c5ce7;
        }

        /* =====================================================
           STATS
        ====================================================== */

        .stats {
            position: relative;
            z-index: 5;

            margin-top: -65px;
        }

        .stats-card {
            padding: 28px;

            background: rgba(255,255,255,.96);

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

            border-radius: 22px;

            box-shadow:
                0 25px 70px rgba(17,19,24,.1);
        }

        .stat {
            text-align: center;
        }

        .stat-number {
            margin-bottom: 5px;

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

        .stat-label {
            color: var(--muted);

            font-size: 14px;
        }

        /* =====================================================
           FEATURES
        ====================================================== */

        .section {
            padding: 120px 0;
        }

        .section-label {
            margin-bottom: 12px;

            color: var(--primary);

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

            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .section-title {
            max-width: 700px;

            margin-bottom: 20px;

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

            line-height: 1.05;

            font-weight: 800;

            letter-spacing: -2px;
        }

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

            color: var(--muted);

            font-size: 18px;
            line-height: 1.7;
        }

        .feature-card {
            height: 100%;

            padding: 30px;

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

            border-radius: 22px;

            background: #ffffff;

            transition:
                transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
        }

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

            border-color: rgba(108,92,231,.25);

            box-shadow:
                0 25px 60px rgba(17,19,24,.08);
        }

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

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

            margin-bottom: 22px;

            border-radius: 16px;

            color: var(--primary);

            background: #f0eeff;

            font-size: 23px;
        }

        .feature-title {
            margin-bottom: 12px;

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

        .feature-description {
            margin: 0;

            color: var(--muted);

            line-height: 1.7;
        }

        /* =====================================================
           HOW IT WORKS
        ====================================================== */

        .steps-section {
            background: var(--light);
        }

        .step {
            position: relative;

            padding: 25px;
        }

        .step-number {
            width: 48px;
            height: 48px;

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

            margin-bottom: 20px;

            border-radius: 14px;

            color: #ffffff;

            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    #5143d3
                );

            font-weight: 800;
        }

        .step h3 {
            margin-bottom: 10px;

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

        .step p {
            margin: 0;

            color: var(--muted);

            line-height: 1.7;
        }

        /* =====================================================
           CTA
        ====================================================== */

        .cta {
            padding: 100px 0;
        }

        .cta-box {
            position: relative;

            overflow: hidden;

            padding: 70px 50px;

            border-radius: 32px;

            color: #ffffff;

            background:
                radial-gradient(
                    circle at 85% 20%,
                    rgba(124,108,255,.45),
                    transparent 30%
                ),
                linear-gradient(
                    135deg,
                    #111318,
                    #29234f
                );

            box-shadow:
                0 30px 80px rgba(17,19,24,.2);
        }

        .cta-box::after {
            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

            right: -100px;
            bottom: -160px;

            border-radius: 50%;

            border: 1px solid rgba(255,255,255,.1);
        }

        .cta-title {
            position: relative;
            z-index: 2;

            margin-bottom: 15px;

            font-size: clamp(35px, 5vw, 55px);

            font-weight: 800;

            letter-spacing: -2px;
        }

        .cta-description {
            position: relative;
            z-index: 2;

            max-width: 650px;

            margin-bottom: 30px;

            color: rgba(255,255,255,.7);

            font-size: 18px;
            line-height: 1.7;
        }

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

        footer {
            padding: 35px 0;

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

            color: var(--muted);

            font-size: 14px;
        }

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

        .reveal {
            opacity: 0;

            transform: translateY(30px);

            transition:
                opacity .7s ease,
                transform .7s ease;
        }

        .reveal.visible {
            opacity: 1;

            transform: translateY(0);
        }

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

        @media (max-width: 991px) {

            .hero {
                min-height: auto;

                padding:
                    150px 0
                    80px;
            }

            .hero-title {
                letter-spacing: -2px;
            }

            .hero-visual {
                height: 390px;

                margin-top: 40px;
            }

            .dashboard-window {
                max-width: 420px;
            }

            .stats {
                margin-top: 0;

                padding: 20px 0;
            }

        }

        @media (max-width: 575px) {

            .navbar-custom {
                padding: 15px 0;
            }

            .brand {
                font-size: 19px;
            }

            .brand-icon {
                width: 34px;
                height: 34px;
            }

            .btn-nav-login {
                display: none;
            }

            .btn-nav-register {
                padding: 9px 13px;

                font-size: 14px;
            }

            .hero {
                padding-top: 125px;
            }

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

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

            .hero-buttons a {
                width: 100%;
            }

            .hero-visual {
                height: 330px;
            }

            .dashboard-window {
                transform: none;

                animation: none;
            }

            .stats-card {
                padding: 20px 10px;
            }

            .section {
                padding: 80px 0;
            }

            .cta-box {
                padding: 50px 25px;
            }

        }