:root {
            --bg: #080a14;
            --panel: #111528;
            --panel-2: #171c32;
            --line: #292f4b;

            --text: #f5f6ff;
            --muted: #9da5c0;

            --purple: #8d6bff;
            --blue: #54a9ff;
            --green: #52e3a0;

            --max: 1180px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;

            background:
                radial-gradient(
                    circle at 80% 5%,
                    #282052 0,
                    transparent 30%
                ),
                radial-gradient(
                    circle at 10% 25%,
                    #131d3c 0,
                    transparent 32%
                ),
                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;
        }

        .container {
            width: min(
                var(--max),
                calc(100% - 48px)
            );

            margin: auto;
        }

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

        .navbar {
            height: 82px;

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

            border-bottom: 1px solid #ffffff12;
        }

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

            text-decoration: none;

            font-size: 18px;
            font-weight: 850;
            letter-spacing: -0.04em;
        }

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

            display: grid;
            place-items: center;

            border-radius: 11px;

            background:
                linear-gradient(
                    135deg,
                    var(--purple),
                    var(--blue)
                );

            box-shadow:
                0 10px 28px #765eff55;

            font-weight: 900;
        }

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

        .nav-links a {
            color: var(--muted);

            text-decoration: none;

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

            transition: 0.2s ease;
        }

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

        .nav-button {
            padding: 10px 15px;

            border: 1px solid var(--line);
            border-radius: 10px;

            background: #ffffff08;

            color: white !important;
        }

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

        .hero {
            min-height: 610px;

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

            text-align: center;

            padding: 90px 0 110px;
        }

        .hero-content {
            max-width: 780px;
        }

        .eyebrow {
            margin-bottom: 18px;

            color: #a99aff;

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

            letter-spacing: 0.18em;
        }

        .hero h1 {
            margin: 0;

            font-size:
                clamp(52px, 8vw, 88px);

            line-height: 0.98;

            letter-spacing: -0.075em;
        }

        .hero h1 span {
            color: var(--purple);
        }

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

            margin: 26px auto 34px;

            color: var(--muted);

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

        .hero-buttons {
            display: flex;
            justify-content: center;
            gap: 13px;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 13px 20px;

            border-radius: 11px;

            text-decoration: none;

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

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }

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

        .button-primary {
            color: white;

            background:
                linear-gradient(
                    135deg,
                    var(--purple),
                    #5d8eff
                );

            box-shadow:
                0 15px 35px #6f5eff35;
        }

        .button-secondary {
            color: white;

            background: #ffffff08;

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

        /* =========================
           PRODUCTS
        ========================= */

        .products-section {
            padding: 100px 0;
        }

        .section-header {
            margin-bottom: 42px;
        }

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

            color: #8f98b7;

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

            letter-spacing: 0.16em;
        }

        .section-header h2 {
            margin: 0;

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

            line-height: 1;

            letter-spacing: -0.065em;
        }

        .section-header p {
            max-width: 580px;

            margin: 18px 0 0;

            color: var(--muted);

            font-size: 16px;
        }

        /* =========================
           PRODUCT GRID
        ========================= */

        .product-grid {
            display: grid;

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

            gap: 18px;
        }

        .product-card {
            position: relative;

            display: flex;
            flex-direction: column;

            min-height: 440px;

            padding: 25px;

            overflow: hidden;

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

            border-radius: 22px;

            background:
                linear-gradient(
                    150deg,
                    #151a30,
                    #0f1425
                );

            text-decoration: none;

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

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

            border-color: #6657a9;

            box-shadow:
                0 25px 60px #0008;
        }

        .product-preview {
            height: 205px;

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

            margin-bottom: 25px;

            overflow: hidden;

            border-radius: 15px;

            background:
                radial-gradient(
                    circle at 50% 0%,
                    #765eff45,
                    transparent 65%
                ),
                #0b1020;

            border:
                1px solid #ffffff10;
        }

        .preview-window {
            width: 78%;

            padding: 14px;

            border:
                1px solid #ffffff22;

            border-radius: 12px;

            background: #141a30e8;

            box-shadow:
                0 20px 45px #0009;

            transform: rotate(-2deg);
        }

        .preview-top {
            height: 7px;

            width: 45%;

            margin-bottom: 15px;

            border-radius: 10px;

            background:
                linear-gradient(
                    90deg,
                    var(--purple),
                    var(--blue)
                );
        }

        .preview-line {
            height: 7px;

            margin-top: 8px;

            border-radius: 10px;

            background: #ffffff14;
        }

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

        .preview-line.medium {
            width: 75%;
        }

        .preview-line.long {
            width: 92%;
        }

        .product-category {
            margin-bottom: 8px;

            color: #8f98b7;

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

            letter-spacing: 0.13em;
        }

        .product-card h3 {
            margin: 0;

            font-size: 23px;

            letter-spacing: -0.04em;
        }

        .product-card p {
            margin: 10px 0 20px;

            color: var(--muted);

            font-size: 14px;

            line-height: 1.65;
        }

        .product-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;

            margin-top: auto;

            margin-bottom: 22px;
        }

        .product-tag {
            padding: 5px 8px;

            border:
                1px solid #363d5b;

            border-radius: 7px;

            background: #ffffff06;

            color: #adb6d2;

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

        .product-link {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding-top: 17px;

            border-top:
                1px solid #ffffff10;

            color: white;

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

        .product-link span:last-child {
            color: #9d8aff;

            font-size: 18px;

            transition: transform 0.2s ease;
        }

        .product-card:hover
        .product-link span:last-child {
            transform: translateX(5px);
        }

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

        .template-card {
            background:
                linear-gradient(
                    150deg,
                    #111528,
                    #0c1020
                );

            border-style: dashed;
        }

        .template-card:hover {
            border-color: #414968;
        }

        .template-preview {
            background:
                repeating-linear-gradient(
                    45deg,
                    #ffffff03 0,
                    #ffffff03 10px,
                    transparent 10px,
                    transparent 20px
                ),
                #0d1222;
        }

        .template-plus {
            width: 54px;
            height: 54px;

            display: grid;
            place-items: center;

            border:
                1px solid #414968;

            border-radius: 16px;

            color: #8993b3;

            font-size: 25px;
        }

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

        .about-section {
            padding: 100px 0;
        }

        .about-box {
            padding: 55px;

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

            border-radius: 25px;

            background:
                linear-gradient(
                    120deg,
                    #171733,
                    #11192e
                );
        }

        .about-box h2 {
            max-width: 650px;

            margin: 0;

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

            line-height: 1;

            letter-spacing: -0.06em;
        }

        .about-box h2 span {
            color: var(--purple);
        }

        .about-box p {
            max-width: 650px;

            margin: 22px 0 0;

            color: var(--muted);

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

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

        .cta-section {
            padding: 30px 0 100px;
        }

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

            gap: 30px;

            padding: 45px 50px;

            border-radius: 23px;

            background:
                linear-gradient(
                    120deg,
                    #754cff,
                    #3e91ff
                );

            box-shadow:
                0 25px 65px #4c72f033;
        }

        .cta h2 {
            margin: 0;

            font-size: 36px;

            letter-spacing: -0.05em;
        }

        .cta p {
            margin: 8px 0 0;

            color: #e4e7ff;

            font-size: 14px;
        }

        .cta .button {
            flex-shrink: 0;

            background: white;

            color: #101323;
        }

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

        footer {
            border-top:
                1px solid #ffffff12;
        }

        .footer {
            min-height: 90px;

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

            gap: 20px;

            color: #707995;

            font-size: 11px;
        }

        .footer-brand {
            color: #aab2cc;

            font-weight: 800;
        }

        /* =========================
           TABLET
        ========================= */

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

            .hero {
                min-height: 540px;
            }

            .cta {
                align-items: flex-start;
                flex-direction: column;
            }
        }

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

        @media (max-width: 620px) {
            .container {
                width:
                    calc(100% - 32px);
            }

            .navbar {
                height: 70px;
            }

            .nav-links {
                display: none;
            }

            .hero {
                padding: 70px 0 80px;
            }

            .hero h1 {
                font-size: 52px;
            }

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

            .hero-buttons {
                align-items: stretch;
                flex-direction: column;
            }

            .products-section,
            .about-section {
                padding: 75px 0;
            }

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

            .product-card {
                min-height: 420px;
            }

            .about-box {
                padding: 32px 25px;
            }

            .cta {
                padding: 32px 25px;
            }

            .cta h2 {
                font-size: 31px;
            }

            .footer {
                align-items: flex-start;
                flex-direction: column;

                padding: 25px 0;
            }
        }