:root {
            --bg-dark: #0b0b12;
            --bg-card: #141420;
            --pink: #ff2f92;
            --pink-soft: #ff7abf;
            --text-main: #f5f5f7;
            --text-muted: #b9b9c5;
            --border-soft: rgba(255, 255, 255, .08);
        }

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            background: linear-gradient(180deg, #07070c, #0e0e18);
            color: var(--text-main);
            line-height: 1.7;
        }

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

        .container {
            width: 90%;
            max-width: 1180px;
            margin: auto
        }

        header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(10, 10, 18, .85);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-soft);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0
        }

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

        .brand img {
            height: 42px
        }

        .brand h1 {
            font-size: 18px;
            font-weight: 700
        }

        .brand span {
            font-size: 12px;
            color: var(--text-muted)
        }

        .cta {
            padding: 10px 22px;
            background: linear-gradient(135deg, var(--pink), var(--pink-soft));
            color: #000;
            font-weight: 700;
            border-radius: 999px;
            transition: .3s
        }

        .hero {
            padding: 90px 0 70px;
            background:
                radial-gradient(600px 300px at 80% 10%, rgba(255, 47, 146, .18), transparent),
                radial-gradient(400px 300px at 10% 90%, rgba(255, 122, 191, .15), transparent);
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 50px;
            align-items: center
        }

        .hero h2 {
            font-size: 42px;
            line-height: 1.2;
            margin-bottom: 16px
        }

        .hero h2 span {
            color: var(--pink)
        }

        .hero p {
            color: var(--text-muted);
            font-size: 17px;
            margin-bottom: 18px
        }

        .hero-tags span {
            display: inline-block;
            padding: 6px 14px;
            border: 1px solid var(--border-soft);
            border-radius: 999px;
            font-size: 13px;
            margin: 0 8px 10px 0;
            color: #eee
        }

       

        section {
            padding: 60px 0
        }

        .card {
            background: linear-gradient(180deg, #141420, #10101a);
            border: 1px solid var(--border-soft);
            border-radius: 22px;
            padding: 36px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
            margin-bottom: 34px
        }

        .card h3 {
            font-size: 26px;
            margin-bottom: 14px
        }

        .card p {
            color: var(--text-muted);
            font-size: 16px;
            margin-bottom: 14px
        }

        .grid-two {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px
        }

        ul {
            padding-left: 18px
        }

        li {
            margin-bottom: 8px;
            color: var(--text-muted)
        }

        .pill span {
            display: inline-block;
            background: #1d1d2b;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 13px;
            margin: 6px 8px 0 0;
            border: 1px solid var(--border-soft)
        }

        footer {
            background: #07070c;
            border-top: 1px solid var(--border-soft);
            padding: 40px 0;
            text-align: center
        }

        footer p {
            font-size: 13px;
            color: var(--text-muted)
        }

        .logo-img {
            background: linear-gradient(135deg, var(--pink), var(--pink-soft));
        }

        @media(max-width:900px) {
            .hero-grid {
                grid-template-columns: 1fr
            }

            .hero h2 {
                font-size: 34px
            }

            .hero-image {
                height: 260px
            }

            .cta {
                display: none
            }
        }