/* =====================================================
           GLOBAL
        ===================================================== */

        html {
            scroll-behavior: smooth;
        }

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

            background: #f8fafc;
            color: #111827;

            overflow-x: hidden;
        }


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

        .main-navbar {

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

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

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

            box-shadow:
                0 4px 25px rgba(15, 23, 42, 0.04);
        }


        .brand-logo {

            width: 43px;
            height: 43px;

            display: inline-flex;

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

            border-radius: 13px;

            background:
                linear-gradient(
                    135deg,
                    #4f46e5,
                    #7c3aed,
                    #9333ea
                );

            color: white;

            font-size: 21px;

            box-shadow:
                0 8px 20px rgba(79, 70, 229, 0.28);
        }


        .navbar-brand {
            color: #111827 !important;
        }


        .navbar-brand span:last-child {
            font-weight: 800;
            letter-spacing: -0.3px;
        }


        .navbar .nav-link {

            color: #4b5563;

            font-size: 14px;

            font-weight: 600;

            padding-left: 10px !important;
            padding-right: 10px !important;

            transition: 0.2s ease;
        }


        .navbar .nav-link:hover {
            color: #5b21b6;
        }


        .download-btn {

            background: #111827;

            border: none;

            color: white;

            padding:
                10px 18px;

            border-radius: 12px;

            font-weight: 700;

            box-shadow:
                0 8px 18px rgba(17, 24, 39, 0.18);

            transition: 0.25s;
        }


        .download-btn:hover {

            background: #1f2937;

            color: white;

            transform: translateY(-2px);
        }


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

        .hero {

            min-height: 100vh;

            padding-top: 110px;
            padding-bottom: 80px;

            position: relative;

            overflow: hidden;

            background:

                radial-gradient(
                    circle at 10% 20%,
                    rgba(129, 140, 248, 0.30),
                    transparent 35%
                ),

                radial-gradient(
                    circle at 90% 20%,
                    rgba(192, 132, 252, 0.28),
                    transparent 35%
                ),

                linear-gradient(
                    135deg,
                    #eef2ff 0%,
                    #f5f3ff 50%,
                    #faf5ff 100%
                );
        }


        .hero::before {

            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

            border-radius: 50%;

            background:
                rgba(129, 140, 248, 0.15);

            filter: blur(70px);

            top: 10%;
            left: -120px;
        }


        .hero::after {

            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

            border-radius: 50%;

            background:
                rgba(192, 132, 252, 0.14);

            filter: blur(70px);

            right: -120px;
            bottom: 10%;
        }


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


        .hero-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding:
                8px 14px;

            border-radius: 50px;

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

            border:
                1px solid rgba(99, 102, 241, 0.12);

            color: #5b21b6;

            font-size: 13px;

            font-weight: 700;

            box-shadow:
                0 5px 20px rgba(79, 70, 229, 0.05);
        }


        .badge-dot {

            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: #7c3aed;
        }


        .hero-title {

            font-size:
                clamp(50px, 7vw, 82px);

            line-height:
                0.98;

            letter-spacing:
                -4px;

            font-weight:
                900;

            margin-top: 22px;
        }


        .gradient-text {

            background:
                linear-gradient(
                    90deg,
                    #4f46e5,
                    #7c3aed,
                    #a21caf
                );

            -webkit-background-clip:
                text;

            background-clip:
                text;

            color:
                transparent;
        }


        .hero-description {

            max-width: 550px;

            margin-top: 25px;

            color: #6b7280;

            font-size: 18px;

            line-height: 1.75;
        }


        .hero-buttons {
            margin-top: 32px;
        }


        .play-btn {

            background:
                linear-gradient(
                    135deg,
                    #4f46e5,
                    #7c3aed
                );

            border: none;

            color: white;

            padding:
                14px 23px;

            border-radius: 14px;

            font-weight: 700;

            box-shadow:
                0 12px 28px
                rgba(79, 70, 229, 0.30);

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


        .play-btn:hover {

            color: white;

            transform:
                translateY(-3px);

            box-shadow:
                0 17px 35px
                rgba(79, 70, 229, 0.35);
        }


        .explore-btn {

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

            border:
                1px solid #e5e7eb;

            color: #374151;

            padding:
                14px 23px;

            border-radius: 14px;

            font-weight: 700;

            transition: 0.25s;
        }


        .explore-btn:hover {

            background: white;

            color: #111827;

            transform:
                translateY(-3px);
        }


        /* =====================================================
           GAME PREVIEW
        ===================================================== */

        .game-preview {

            position: relative;

            width: min(500px, 100%);

            aspect-ratio: 1;

            margin:
                0 auto;
        }


        .game-glow {

            position: absolute;

            width: 80%;
            height: 80%;

            top: 10%;
            left: 10%;

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    #6366f1,
                    #a855f7
                );

            filter:
                blur(75px);

            opacity:
                0.25;
        }


        .game-card {

            position: absolute;

            inset: 5%;

            padding: 27px;

            border-radius: 34px;

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

            backdrop-filter:
                blur(18px);

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

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

            box-shadow:
                0 30px 70px
                rgba(76,29,149,0.18);

            transform:
                rotate(3deg);
        }


        .game-card-inner {

            width: 100%;
            height: 100%;

            border-radius: 25px;

            padding: 20px;

            background:
                linear-gradient(
                    145deg,
                    #312e81,
                    #4f46e5
                );

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;
        }


        .game-small-title {

            color: white;

            font-size: 14px;

            font-weight: 800;

            letter-spacing: 2px;

            margin-bottom: 20px;

            opacity:
                0.85;
        }


        /* =====================================================
           BOARD
        ===================================================== */

        .board {

            width:
                min(290px, 78%);

            aspect-ratio: 1;

            padding: 15px;

            border-radius: 18px;

            background:
                #f8fafc;

            box-shadow:
                0 15px 35px
                rgba(0,0,0,0.22);

            display: grid;

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

            grid-template-rows:
                repeat(5, 1fr);

            gap: 5px;
        }


        .cell {

            position: relative;

            border-radius: 6px;

            background:
                #e0e7ff;
        }


        .cell:nth-child(6),
        .cell:nth-child(8),
        .cell:nth-child(16),
        .cell:nth-child(18) {

            background:
                #c7d2fe;
        }


        .piece {

            position: absolute;

            width: 70%;
            height: 70%;

            top: 15%;
            left: 15%;

            border-radius: 50%;

            box-shadow:

                inset
                0 3px 3px
                rgba(255,255,255,0.5),

                0 4px 7px
                rgba(0,0,0,0.22);
        }


        .piece-red {

            background:
                linear-gradient(
                    145deg,
                    #fb7185,
                    #dc2626
                );
        }


        .piece-green {

            background:
                linear-gradient(
                    145deg,
                    #4ade80,
                    #16a34a
                );
        }


        .piece-blue {

            background:
                linear-gradient(
                    145deg,
                    #60a5fa,
                    #2563eb
                );
        }


        /* =====================================================
           FLOATING PIECES
        ===================================================== */

        .floating-piece {

            position: absolute;

            width: 62px;
            height: 62px;

            border-radius: 50%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            color:
                rgba(255,255,255,0.9);

            font-size:
                20px;

            box-shadow:

                0 12px 25px
                rgba(0,0,0,0.17),

                inset
                0 3px 5px
                rgba(255,255,255,0.5);

            z-index: 5;
        }


        .floating-red {

            left:
                -4px;

            top:
                22%;

            background:
                linear-gradient(
                    145deg,
                    #fb7185,
                    #dc2626
                );

            transform:
                rotate(-10deg);
        }


        .floating-green {

            right:
                -4px;

            bottom:
                20%;

            background:
                linear-gradient(
                    145deg,
                    #4ade80,
                    #16a34a
                );

            transform:
                rotate(12deg);
        }


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

        .features {

            padding:
                100px 0;

            background:
                white;
        }


        .section-label {

            color:
                #7c3aed;

            font-size:
                13px;

            font-weight:
                800;

            letter-spacing:
                1.5px;

            text-transform:
                uppercase;
        }


        .section-title {

            font-size:
                clamp(30px, 4vw, 45px);

            font-weight:
                800;

            letter-spacing:
                -1.5px;

            margin-top:
                10px;
        }


        .section-description {

            color:
                #6b7280;

            line-height:
                1.7;
        }


        .feature-card {

            height:
                100%;

            padding:
                30px;

            border-radius:
                22px;

            background:
                #f8fafc;

            border:
                1px solid #eef2f7;

            transition:
                0.25s;
        }


        .feature-card:hover {

            transform:
                translateY(-6px);

            box-shadow:
                0 18px 35px
                rgba(15,23,42,0.08);
        }


        .feature-icon {

            width:
                55px;

            height:
                55px;

            border-radius:
                16px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                linear-gradient(
                    135deg,
                    #eef2ff,
                    #f3e8ff
                );

            font-size:
                25px;

            margin-bottom:
                18px;
        }


        .feature-card h3 {

            font-size:
                19px;

            font-weight:
                750;

            margin-bottom:
                9px;
        }


        .feature-card p {

            color:
                #6b7280;

            font-size:
                14px;

            line-height:
                1.75;

            margin-bottom:
                0;
        }


        /* =====================================================
           ABOUT
        ===================================================== */

        .about-section {

            padding:
                100px 0;

            background:
                #f8fafc;
        }


        .about-card {

            background:
                white;

            border-radius:
                28px;

            padding:
                55px;

            box-shadow:
                0 15px 45px
                rgba(15,23,42,0.06);
        }


        .about-icon {

            width:
                80px;

            height:
                80px;

            border-radius:
                22px;

            background:
                linear-gradient(
                    135deg,
                    #4f46e5,
                    #9333ea
                );

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            color:
                white;

            font-size:
                35px;

            margin:
                0 auto 20px;
        }


        /* =====================================================
           PRIVACY / TERMS
        ===================================================== */

        .legal-section {

            padding:
                100px 0;

            background:
                white;
        }


        .legal-card {

            background:
                #f8fafc;

            border:
                1px solid #eef2f7;

            border-radius:
                22px;

            padding:
                35px;

            height:
                100%;
        }


        .legal-card h3 {

            font-size:
                19px;

            margin-top:
                25px;

            margin-bottom:
                8px;

            color:
                #312e81;
        }


        .legal-card h3:first-of-type {
            margin-top: 20px;
        }


        .legal-card p,
        .legal-card li {

            color:
                #6b7280;

            font-size:
                14px;

            line-height:
                1.8;
        }


        .updated {

            display:
                inline-block;

            background:
                #eef2ff;

            color:
                #4338ca;

            padding:
                6px 12px;

            border-radius:
                50px;

            font-size:
                12px;

            font-weight:
                700;
        }


        /* =====================================================
           CONTACT
        ===================================================== */

        .contact-section {

            padding:
                80px 0;

            background:
                linear-gradient(
                    135deg,
                    #eef2ff,
                    #faf5ff
                );
        }


        .contact-card {

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

            border:
                1px solid rgba(99,102,241,0.12);

            border-radius:
                25px;

            padding:
                40px;
        }


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

        footer {

            background:
                #111827;

            color:
                #9ca3af;

            padding:
                35px 0;

            text-align:
                center;
        }


        footer a {

            color:
                #d1d5db;

            text-decoration:
                none;

            font-size:
                13px;

            margin:
                0 10px;
        }


        footer a:hover {
            color: white;
        }


        footer strong {
            color: white;
        }


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

        @media (max-width: 991px) {

            .hero {
                text-align:
                    center;
            }


            .hero-description {
                margin-left:
                    auto;

                margin-right:
                    auto;
            }


            .hero-buttons {
                justify-content:
                    center;
            }


            .game-preview {
                margin-top:
                    25px;
            }


            .about-card {
                padding:
                    35px 25px;
            }
        }


        @media (max-width: 575px) {

            .hero-title {

                font-size:
                    52px;

                letter-spacing:
                    -2.5px;
            }


            .hero-description {

                font-size:
                    16px;
            }


            .game-preview {

                max-width:
                    360px;
            }


            .game-card {

                padding:
                    20px;

                border-radius:
                    27px;
            }


            .board {
                width:
                    78%;
            }


            .floating-piece {

                width:
                    50px;

                height:
                    50px;
            }


            .legal-card {

                padding:
                    25px;
            }
        }