:root {
    --bg: #050507;
    --glass: rgba(255,255,255,0.08);
    --glass-heavy: rgba(255,255,255,0.12);
    --border: rgba(255,255,255,0.16);
    --text: #f5f5f7;
    --muted: rgba(245,245,247,.65);
    --radius: 34px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% -10%,
            #27344f,
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        Inter,
        sans-serif;

    overflow-x: hidden;
}



body::before {

    content:"";

    position:fixed;

    inset:-100px;

    background-image:
        linear-gradient(
            rgba(255,255,255,.25) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.25) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;


    transform:
        perspective(700px)
        rotateX(65deg)
        translateY(200px)
        scale(2);


    transform-origin:center;


    opacity:.35;


    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 70%
        );


    animation:
        gridMove 20s linear infinite;


    pointer-events:none;

}



@keyframes gridMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            0 450px;
    }

}


#liquidCanvas {

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:0;

}



.ambient {

    position:fixed;

    width:600px;
    height:600px;

    background:
        radial-gradient(
            circle,
            rgba(80,150,255,.25),
            transparent 65%
        );

    filter:blur(80px);

    top:20%;
    left:50%;

    transform:translateX(-50%);

    z-index:0;

}



.app-window {

    position:relative;

    z-index:2;

    width:min(1200px, calc(100% - 40px));

    margin:40px auto;

    border:

        1px solid var(--border);


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


    backdrop-filter:
        blur(40px)
        saturate(160%);


    border-radius:
        var(--radius);


    overflow:hidden;


    box-shadow:

        0 50px 120px
        rgba(0,0,0,.65);

}



.window-bar {

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    position:relative;

}



.traffic-lights {

    position:absolute;

    left:22px;

    display:flex;

    gap:9px;

}



.traffic {

    width:14px;

    height:14px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    transition:
        transform .2s ease,
        filter .2s ease;

}



.traffic:hover {

    transform:
        scale(1.25);

    filter:
        brightness(1.2);

}


.red {
    background:#ff5f57;
}

.yellow {
    background:#febc2e;
}

.green {
    background:#28c840;
}



.window-title {

    font-size:14px;

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

}



.nav {

    position:sticky;

    top:20px;

    margin:25px auto 0;

    width:max-content;

    display:flex;

    gap:12px;

    padding:10px 16px;


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


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


    border-radius:999px;


    backdrop-filter:
        blur(25px);

}



.nav a {

    color:white;

    opacity:.7;

    text-decoration:none;

    font-size:14px;

    transition:.2s;

}



.nav a:hover {

    opacity:1;

}



main {

    padding:
        60px;

}



.hero {

    min-height:800px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.memoji {

    width:170px;

    height:170px;

    border-radius:50%;

    overflow:hidden;

    margin-bottom:40px;

}



.memoji img {

    width:100%;

    height:100%;

    object-fit:cover;

}



h1 {

    font-size:
        clamp(55px,8vw,100px);

    letter-spacing:-.07em;

    line-height:.95;

    margin:0;

}



h2 {

    font-size:42px;

    letter-spacing:-.04em;

}



h3 {

    font-size:30px;

}



.subtitle {

    max-width:650px;

    font-size:24px;

    color:var(--muted);

    line-height:1.5;

}



.glass-panel {

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.04)
        );


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


    backdrop-filter:
        blur(35px);


    border-radius:
        var(--radius);


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.15);

}



.glass-button {

    margin-top:30px;

    padding:
        15px 28px;

    border-radius:999px;

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

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

    color:white;

    font-size:17px;

    backdrop-filter:blur(20px);

    cursor:pointer;

}



.section {

    padding:45px;

    margin-bottom:50px;

    display: flex;
    
    flex-direction: column;

    align-items: center;

    text-align: center;

}



.section p {

    color:var(--muted);

    font-size:20px;

    line-height:1.6;

    text-align: center;

    max-width: 75%;

}



.tags {

    display:flex;

    flex-wrap:wrap;

    gap:10px;
    
    justify-content: center;

}



.tags span {

    padding:
        8px 15px;

    border-radius:999px;

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

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

}

.engine-card {
    max-width: 75%;
}

.engine-card p {
    max-width: 100%;
}

.mobie-section {

    display:grid;

    grid-template-columns:
        1fr;

    gap:30px;

}

.mobie-section > * {
    max-width: 580px;
    margin: auto;
}


.mobie-info {

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

}

.mobie-info h2 {
    margin-bottom: 0;
}

.mobie-image {

    padding:20px;

}



.mobie-image img {

    width:100%;

    display:block;

    border-radius:25px;

}



footer {

    text-align:center;

    padding:60px;

    color:var(--muted);

}



@media(max-width:800px){

    main {
        padding:25px;
    }

    h1 {

        font-size:55px;

    }

}