:root {
            --ink: #f7fbff;
            --muted: #a9b9c9;
            --night: #050914;
            --panel: rgba(10, 22, 39, .78);
            --cyan: #20e7f4;
            --pink: #ff1d72;
            --yellow: #ffbf00;
            --green: #5bea2b;
            --line: rgba(96, 226, 255, .17);
            --shadow: 0 24px 70px rgba(0, 0, 0, .42);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            color: var(--ink);
            background: radial-gradient(circle at 77% 15%, rgba(255, 29, 114, .16), transparent 25rem), radial-gradient(circle at 10% 30%, rgba(32, 231, 244, .14), transparent 28rem), linear-gradient(145deg, #03060e 0%, #071525 55%, #02050b 100%);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
        }

            body::before {
                content: "";
                position: fixed;
                inset: 0;
                pointer-events: none;
                opacity: .34;
                background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
                background-size: 52px 52px;
                mask-image: linear-gradient(to bottom, black, transparent 82%);
            }

        a {
            color: inherit;
        }

        img {
            display: block;
            max-width: 100%;
        }

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

        .topbar {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            min-height: 92px;
            border-bottom: 1px solid rgba(255,255,255,.09);
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: white;
            font-weight: 950;
            letter-spacing: -.03em;
            text-decoration: none;
            text-transform: uppercase;
        }

            .brand img {
                width: 55px;
                height: 55px;
                object-fit: contain;
                filter: drop-shadow(0 0 14px rgba(255,29,114,.38));
            }

            .brand span {
                font-size: clamp(.9rem, 2.1vw, 1.08rem);
            }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 52px;
            padding: 0 23px;
            border: 1px solid transparent;
            border-radius: 15px;
            color: #fff;
            font-weight: 900;
            line-height: 1;
            text-decoration: none;
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
        }

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

            .button:focus-visible, .social-card:focus-visible, .brand:focus-visible {
                outline: 3px solid var(--yellow);
                outline-offset: 4px;
            }

        .button-primary {
            background: linear-gradient(135deg, #ff334f, #d90035);
            box-shadow: 0 14px 35px rgba(255, 0, 56, .3);
        }

            .button-primary:hover {
                box-shadow: 0 18px 42px rgba(255, 0, 56, .46);
            }

        .button-secondary {
            border-color: rgba(32, 231, 244, .38);
            background: rgba(9, 26, 44, .72);
            box-shadow: inset 0 0 22px rgba(32, 231, 244, .05);
        }

            .button-secondary:hover {
                border-color: var(--cyan);
                background: rgba(15, 43, 64, .9);
            }

        .play-icon {
            width: 24px;
            height: 17px;
            border-radius: 5px;
            background: currentColor;
            position: relative;
            flex: 0 0 auto;
        }

            .play-icon::after {
                content: "";
                position: absolute;
                left: 9px;
                top: 4px;
                border-left: 7px solid #e4133f;
                border-top: 4.5px solid transparent;
                border-bottom: 4.5px solid transparent;
            }

        .hero {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
            align-items: center;
            gap: clamp(36px, 6vw, 86px);
            min-height: calc(100vh - 92px);
            padding-block: 72px 88px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 24px;
            color: var(--cyan);
            font-size: .79rem;
            font-weight: 900;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

            .eyebrow::before {
                content: "";
                width: 42px;
                height: 3px;
                border-radius: 3px;
                background: linear-gradient(90deg, var(--yellow), var(--cyan));
                box-shadow: 0 0 15px var(--cyan);
            }

        h1 {
            max-width: 760px;
            margin: 0;
            font-size: clamp(3.15rem, 7.7vw, 7rem);
            line-height: .85;
            letter-spacing: -.075em;
            text-transform: uppercase;
            text-wrap: balance;
            text-shadow: 0 7px 0 rgba(0,0,0,.22);
        }

            h1 .future {
                display: block;
                color: var(--yellow);
                background: linear-gradient(180deg, #fff26a 0%, #ffc400 49%, #ff7a00 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                filter: drop-shadow(0 6px 0 rgba(125, 25, 0, .8));
            }

            h1 .ai {
                color: var(--cyan);
            }

        .intro {
            max-width: 650px;
            margin: 30px 0 0;
            color: #c1ceda;
            font-size: clamp(1.05rem, 2vw, 1.28rem);
            line-height: 1.62;
        }

            .intro strong {
                color: white;
            }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-top: 34px;
        }

        .microcopy {
            margin: 18px 0 0;
            color: #7fa2b9;
            font-size: .84rem;
            font-weight: 700;
        }

        .hero-art {
            position: relative;
            display: grid;
            place-items: center;
            isolation: isolate;
            min-height: 560px;
        }

            .hero-art::before,
            .hero-art::after {
                content: "";
                position: absolute;
                border-radius: 50%;
                z-index: -1;
            }

            .hero-art::before {
                width: 112%;
                aspect-ratio: 1;
                border: 1px solid rgba(32,231,244,.38);
                background: repeating-conic-gradient(from 12deg, transparent 0 7deg, rgba(32,231,244,.2) 7.5deg 8deg), radial-gradient(circle, rgba(91,234,43,.15), transparent 55%);
                animation: rotate 45s linear infinite;
            }

            .hero-art::after {
                width: 86%;
                aspect-ratio: 1;
                background: rgba(255, 29, 114, .32);
                filter: blur(62px);
            }

        .hero-logo {
            width: min(100%, 540px);
            height: auto;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            object-position: center;
            justify-self: center;
            align-self: center;
            filter: drop-shadow(0 26px 45px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(255,29,114,.35));
            animation: float 6s ease-in-out infinite;
        }

        .orbit-label {
            position: absolute;
            padding: 11px 16px;
            border: 1px solid rgba(32,231,244,.42);
            border-radius: 12px;
            background: rgba(4, 12, 23, .86);
            box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 14px rgba(32,231,244,.08);
            color: white;
            font-size: .72rem;
            font-weight: 950;
            letter-spacing: .1em;
            text-transform: uppercase;
            backdrop-filter: blur(9px);
        }

            .orbit-label b {
                color: var(--cyan);
            }

        .orbit-one {
            top: 11%;
            right: -2%;
            transform: rotate(3deg);
        }

        .orbit-two {
            bottom: 15%;
            left: -7%;
            transform: rotate(-4deg);
        }

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

        @keyframes float {
            50% {
                transform: translateY(-13px) rotate(.6deg);
            }
        }

        .proof {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            margin-bottom: 120px;
            border: 1px solid rgba(255,255,255,.11);
            border-radius: 24px;
            overflow: hidden;
            background: rgba(7, 17, 31, .68);
            box-shadow: var(--shadow);
            backdrop-filter: blur(13px);
        }

            .proof div {
                padding: 26px 32px;
            }

                .proof div + div {
                    border-left: 1px solid rgba(255,255,255,.09);
                }

            .proof strong {
                display: block;
                color: white;
                font-size: 1.1rem;
                text-transform: uppercase;
            }

            .proof span {
                display: block;
                margin-top: 5px;
                color: var(--muted);
                font-size: .9rem;
            }

            .proof div:nth-child(1) strong {
                color: var(--yellow);
            }

            .proof div:nth-child(2) strong {
                color: var(--cyan);
            }

            .proof div:nth-child(3) strong {
                color: var(--pink);
            }

        .social-section {
            position: relative;
            z-index: 1;
            padding-bottom: 120px;
            scroll-margin-top: 30px;
        }

        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 28px;
            margin-bottom: 36px;
        }

            .section-head h2 {
                max-width: 700px;
                margin: 0;
                font-size: clamp(2.4rem, 5vw, 4.8rem);
                line-height: .95;
                letter-spacing: -.055em;
                text-transform: uppercase;
            }

            .section-head p {
                max-width: 430px;
                margin: 0;
                color: var(--muted);
                line-height: 1.6;
            }

        .social-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .social-card {
            --accent: var(--cyan);
            position: relative;
            min-height: 505px;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 25px;
            overflow: hidden;
            color: white;
            text-decoration: none;
            box-shadow: 0 20px 52px rgba(0,0,0,.3);
            isolation: isolate;
            transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
        }

            .social-card:hover {
                transform: translateY(-9px);
                border-color: var(--accent);
                box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 25px color-mix(in srgb, var(--accent) 35%, transparent);
            }

            .social-card img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center 34%;
                z-index: -2;
                transition: transform .45s ease, filter .3s ease;
            }

            .social-card:hover img {
                transform: scale(1.035);
                filter: saturate(1.12);
            }

            .social-card::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: -1;
                background: linear-gradient(to bottom, rgba(1,4,10,.04) 28%, rgba(1,5,12,.5) 57%, #030710 92%);
            }

        .card-content {
            position: absolute;
            inset: auto 0 0;
            padding: 76px 22px 23px;
            background: linear-gradient(to bottom, transparent, rgba(1,5,12,.88) 45%);
        }

        .network {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .network-name {
            font-size: 1.5rem;
            font-weight: 950;
            letter-spacing: -.03em;
        }

        .arrow {
            display: grid;
            place-items: center;
            width: 41px;
            height: 41px;
            border-radius: 50%;
            background: var(--accent);
            color: #06101c;
            font-size: 1.35rem;
            font-weight: 950;
        }

        .handle {
            display: block;
            margin-top: 7px;
            color: #d3dfeb;
            font-size: .88rem;
            font-weight: 750;
        }

        .visit {
            display: inline-block;
            margin-top: 15px;
            color: var(--accent);
            font-size: .74rem;
            font-weight: 950;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .youtube {
            --accent: #ff3656;
        }

        .tiktok {
            --accent: #20e7f4;
        }

        .instagram {
            --accent: #ff4f9a;
        }

        .twitter {
            --accent: #f3f7fb;
        }

        .closing {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 30px;
            margin-bottom: 80px;
            padding: clamp(34px, 6vw, 68px);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 30px;
            overflow: hidden;
            background: radial-gradient(circle at 88% 50%, rgba(91,234,43,.16), transparent 18rem), linear-gradient(135deg, rgba(255,29,114,.17), rgba(7,20,36,.92) 52%, rgba(32,231,244,.13));
            box-shadow: var(--shadow);
        }

            .closing::after {
                content: "AI";
                position: absolute;
                right: 17%;
                top: 50%;
                color: rgba(255,255,255,.035);
                font-size: 13rem;
                font-weight: 1000;
                line-height: 1;
                transform: translateY(-50%) rotate(-6deg);
                pointer-events: none;
            }

        .closing-copy {
            position: relative;
            z-index: 1;
        }

        .closing h2 {
            max-width: 700px;
            margin: 0;
            font-size: clamp(2.3rem, 5vw, 4.6rem);
            line-height: .96;
            letter-spacing: -.055em;
            text-transform: uppercase;
        }

        .closing p {
            max-width: 630px;
            margin: 20px 0 0;
            color: #b7c6d4;
            font-size: 1.05rem;
            line-height: 1.65;
        }

        .closing .button {
            position: relative;
            z-index: 1;
            min-width: 210px;
        }

        footer {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-block: 0 38px;
            color: #71879a;
            font-size: .82rem;
        }

            footer strong {
                color: #b6c6d4;
            }

        @media (max-width: 990px) {
            .hero {
                grid-template-columns: 1fr;
                min-height: auto;
                padding-top: 62px;
            }

            .hero-copy {
                text-align: center;
            }

            .eyebrow {
                justify-content: center;
            }

            .intro {
                margin-inline: auto;
            }

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

            .hero-art {
                width: min(620px, 92vw);
                min-height: auto;
                margin-inline: auto;
            }

            .hero-logo {
                width: min(88%, 500px);
            }

            .social-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .social-card {
                min-height: 610px;
            }

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

                .closing .button {
                    justify-self: start;
                }
        }

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

            .topbar {
                min-height: 78px;
            }

            .brand img {
                width: 47px;
                height: 47px;
            }

            .topbar > .button {
                min-height: 45px;
                padding-inline: 16px;
                font-size: .84rem;
            }

            .hero {
                padding-block: 52px 70px;
            }

            h1 {
                font-size: clamp(3rem, 16.2vw, 5.1rem);
            }

            .intro {
                margin-top: 25px;
            }

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

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

            .hero-art {
                margin-top: 20px;
            }

            .orbit-label {
                display: none;
            }

            .proof {
                grid-template-columns: 1fr;
                margin-bottom: 88px;
            }

                .proof div {
                    padding: 21px 24px;
                }

                    .proof div + div {
                        border-left: 0;
                        border-top: 1px solid rgba(255,255,255,.09);
                    }

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

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

            .social-card {
                min-height: 585px;
            }

            .social-section {
                padding-bottom: 88px;
            }

            .closing {
                padding: 35px 24px;
                margin-bottom: 48px;
            }

                .closing .button {
                    width: 100%;
                }

            footer {
                flex-direction: column;
                padding-bottom: 28px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }
        }
    
.project-language{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.project-language a{padding:8px 12px;border:1px solid var(--line);border-radius:20px;text-decoration:none;font-size:14px}.project-language [aria-current=page]{background:var(--cyan);color:#050914}.topbar{flex-wrap:wrap;padding-block:18px}.project-language a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}@media(max-width:600px){.project-language{width:100%;justify-content:center}.topbar>.button{min-height:44px;padding:0 14px}}