* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    background: #050505;

    color: white;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

}





header {

    position: fixed;

    top: 0;

    width: 100%;

    padding: 35px 8%;

    z-index: 10;

    backdrop-filter: blur(15px);

    background: rgba(0,0,0,0.35);

}



.logo {

    font-size: 1.3rem;

    font-weight: 700;

    letter-spacing: .35em;

}



.language-switch {

    position: absolute;

    right: 8%;

    top: 30px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 30px;

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

    border: 1px solid rgba(255,255,255,.15);

    backdrop-filter: blur(15px);

    font-size: .85rem;

    letter-spacing: .15em;

}



.language-switch a {

    color: #888;

    text-decoration: none;

    transition: .3s;

}



.language-switch a:hover {

    color: white;

}



.language-switch span {

    color: #555;

}



.language-switch .active {

    color: white;

    font-weight: 600;

}





.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 8%;

    background:

        radial-gradient(
            circle at top,
            #252525 0%,
            #050505 45%
        );

}



.hero-content {

    width: 100%;

    max-width: 1100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    animation: appear 1.2s ease forwards;

}



.hero h1 {

    margin: 0;

    text-align: center;

    font-size: clamp(3rem, 8vw, 6rem);

    letter-spacing: .25em;

    font-weight: 700;

}



.hero-text {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    padding-right: 80px;

    margin-top: 35px;

}



.hero-text p {

    max-width: 450px;

    margin: 0;

    text-align: right;

    font-size: 1.5rem;

    line-height: 1.6;

    color: #aaa;

}



.hero-button {

    display: inline-block;

    margin-top: 40px;

    padding: 15px 35px;

    border-radius: 40px;

    background: white;

    color: black;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}



.hero-button:hover {

    transform: translateY(-3px);

}



.scroll-indicator {

    position: absolute;

    bottom: 40px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    color: #888;

    text-decoration: none;

    font-size: .9rem;

    letter-spacing: .15em;

    text-transform: uppercase;

    animation: float 2s infinite;

}



.arrow {

    font-size: 1.5rem;

    color: white;

}



@keyframes float {


    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(8px);

    }


    100% {

        transform: translateY(0);

    }

}







.section {

    max-width: 1100px;

    margin: auto;

    padding: 120px 30px;

    text-align: center;

}



.section h2 {

    font-size: 3rem;

    margin-bottom: 50px;

    letter-spacing: -.03em;

}



.section p {

    color: #aaa;

    font-size: 1.15rem;

    line-height: 1.8;

}





.cards {

    display: flex;

    gap: 30px;

}



.card,
.software-card {

    flex: 1;

    padding: 40px;

    border-radius: 25px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );


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

    backdrop-filter: blur(20px);

}



.card h3,
.software-card h3 {

    font-size: 1.8rem;

    margin-bottom: 20px;

}





.software-card span {

    font-size: .8rem;

    letter-spacing: .3em;

    color: #888;

}



.software-card a {

    display: inline-block;

    margin-top: 35px;

    padding: 14px 30px;

    border-radius: 30px;

    background: white;

    color: black;

    text-decoration: none;

    font-weight: 600;

}





.service-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.service-list div {

    padding: 25px;

    border-radius: 20px;

    background: #111;

    border: 1px solid #222;

}





.contact {

    text-align: center;

    padding: 120px 30px;

}



.contact a {

    display: inline-block;

    margin-top: 20px;

    color: white;

    font-size: 1.4rem;

    text-decoration: none;

}





footer {

    border-top: 1px solid #222;

    padding: 50px 20px;

    text-align: center;

    color: #666;

    line-height: 1.8;

}





@keyframes appear {


    from {

        opacity: 0;

        transform: translateY(20px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }

}





@media(max-width:800px) {


    .hero-content {

        align-items: center;

    }



    .hero-text {

        align-items: center;

        padding-right: 0;

    }



    .hero-text p {

        text-align: center;

    }



    .hero h1 {

        letter-spacing: .15em;

    }



    .cards {

        flex-direction: column;

    }



    .section h2 {

        font-size: 2.2rem;

    }



    .language-switch {

        right: 5%;

        top: 25px;

    }


}