@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Barlow', sans-serif;
}

html{
    scroll-behavior: smooth;
}

/* HERO */

/* HERO */

.hero{
    position: relative;

    min-height: 100vh;

    background-image: url("../img/hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
}

.overlay{
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,18,38,.92) 0%,
            rgba(3,18,38,.82) 30%,
            rgba(3,18,38,.55) 60%,
            rgba(3,18,38,.75) 100%
        );
}

.hero-content{
    position: relative;
    z-index: 2;

    width: min(55rem, 90%);
    margin-left: 20%;
    margin-top: 4rem;

    color: white;
}

.hero-content > span{
    display: flex;
    align-items: center;
    gap: .8rem;

    color: #0066ff;

    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .12em;

    text-transform: uppercase;
}

.hero-content > span::before{
    content: "";

    width: 2rem;
    height: .1rem;

    background: #0066ff;
}

.hero-content h1{
    margin-top: 1rem;

    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(5rem, 8vw, 8rem);

    line-height: .9;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-content h1 span{
    color: #0066ff;
}

.hero-content p{
    margin-top: 2rem;

    max-width: 32rem;

    font-size: 1.1rem;
    line-height: 1.8;

    color: rgba(255,255,255,.75);
}

.hero-buttons{
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn{
    display: flex;
    align-items: center;
    gap: .8rem;

    padding: 1.2rem 2rem;

    text-decoration: none;
    text-transform: uppercase;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;

    transition: .3s ease;
}

.btn span{
    font-size: 1.3rem;
    transition: .3s ease;
}

.btn-primary{
    background: #0077ff;
    color: white;
}

.btn-primary:hover{
    transform: translateY(-.1rem);
}

.btn-primary:hover span{
    transform: translateX(.3rem);
}

.btn-secondary{
    color: white;

    border: .08rem solid rgba(255,255,255,.2);

    background: rgba(255,255,255,.02);
}

.btn-secondary:hover{
    background: rgba(255,255,255,.05);
}

.btn-secondary:hover span{
    transform: translateX(.3rem);
}

.stats{
    display: flex;

    margin-top: 3rem;

    width: fit-content;

    border: .05rem solid rgba(255,255,255,.12);

    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);

    background: rgba(5,15,35,.15);
}

.stat-item{
    min-width: 12rem;

    padding: 2rem 3rem;

    border-right: .05rem solid rgba(255,255,255,.12);

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

    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);

    transition: .3s ease;
}

.stat-item:hover{
    background: rgba(255,255,255,.03);
}

.stat-item:last-child{
    border-right: none;
}

.stat-item h3{
    font-family: "Barlow Condensed", sans-serif;

    color: #0077ff;

    font-size: 3rem;
    font-weight: 700;

    line-height: 1;
}

.stat-item span{
    display: block;

    margin-top: .5rem;

    font-size: .75rem;
    font-weight: 500;

    letter-spacing: .15em;
    text-transform: uppercase;

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

.services{
    padding: 8rem 12%;
    background: #f7f7f7;
}

.section-tag{
    display: flex;
    align-items: center;
    gap: .6rem;

    color: #008cff;

    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .15em;
}

.section-tag span{
    width: 1.5rem;
    height: .1rem;
    background: #008cff;
}

.services-intro{
    display: flex;
    justify-content: space-between;
    gap: 6rem;

    margin-top: 1rem;
}

.services-intro h2{
    font-family: "Barlow Condensed", sans-serif;

    font-size: clamp(3rem,4vw,4.5rem);
    line-height: .95;

    color: #101827;
}

.services-intro p{
    max-width: 30rem;

    line-height: 1.8;

    color: #6b7280;
}

.services-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);

    margin-top: 5rem;

    border-top: .05rem solid rgba(0,0,0,.08);
    border-left: .05rem solid rgba(0,0,0,.08);
}

.service-card{
    padding: 2rem;

    border-right: .05rem solid rgba(0,0,0,.08);
    border-bottom: .05rem solid rgba(0,0,0,.08);

    transition: .3s ease;
}

.service-card:hover{
    background: white;
}

.service-icon{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    aspect-ratio: 1;

    background: #efefef;

    margin-bottom: 1.5rem;
}

.service-card h3{
    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.3rem;
    margin-bottom: 1rem;

    color: #101827;
}

.service-card p{
    color: #6b7280;
    line-height: 1.7;
}

.section-divider{
    width: 100%;
    height: .08rem;

    background: linear-gradient(
        90deg,
        transparent,
        #0099ff,
        transparent
    );

    margin: 0.1rem 0;
}

.products{
    padding: 8rem 12%;
    background: #e2e5e9;
}

.products h2{
    margin-top: 1rem;

    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3rem,4vw,4.5rem);
    font-weight: 800;

    color: #111827;
}

.product-tabs{
    display: flex;
    margin-top: 2rem;
}

.tab{
    border: none;

    padding: 1rem 1.8rem;

    background: #eceff3;
    color: #7a8594;

    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;

    cursor: pointer;
}

.tab.active{
    background: #0084ff;
    color: white;
}

.product-box{
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-top: 2rem;

    background: white;

    overflow: hidden;
}

.product-content{
    padding: 3rem;
}

.product-content h3{
    font-family: "Barlow Condensed", sans-serif;
    font-size: 2rem;

    margin-bottom: 2rem;
}

.product-content ul{
    list-style: none;
}

.product-content li{
    margin-bottom: 1rem;
    position: relative;

    padding-left: 1.5rem;
}

.product-content li::before{
    content: "○";

    position: absolute;
    left: 0;

    color: #0084ff;
}

.product-btn{
    display: inline-flex;

    margin-top: 2rem;

    padding: 1rem 1.5rem;

    background: #0d1b2d;
    color: white;

    text-decoration: none;

    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
}

.product-image img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}

.tab-content{
    display: none;
}

.tab-content.active{
    display: block;
}

.technology{
    padding: 8rem 12%;

    background: #031325;
    color: white;
}

.technology-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;

    align-items: center;
}

.technology h2{
    margin-top: 1rem;

    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3rem,4vw,5rem);
    line-height: .95;
}

.technology h2 span{
    color: #0084ff;
}

.technology p{
    margin-top: 2rem;

    color: rgba(255,255,255,.7);
    line-height: 1.8;
}

.technology ul{
    list-style: none;
    margin-top: 2rem;
}

.technology li{
    margin-bottom: 1rem;
    position: relative;

    padding-left: 1.5rem;
}

.technology li::before{
    content: "■";

    position: absolute;
    left: 0;

    color: #0084ff;
    font-size: .6rem;
}

.technology-image{
    position: relative;
}

.technology-image img{
    width: 100%;
    display: block;
}

.technology-badge{
    position: absolute;

    left: -1rem;
    bottom: -1rem;

    padding: 1.5rem;

    background: #0084ff;
    color: white;

    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
}

.technology-certs{
    display: flex;
    gap: 1rem;

    margin-top: 5rem;
    padding-top: 2rem;

    border-top: .05rem solid rgba(255,255,255,.1);
}

.technology-certs span{
    padding: .8rem 1.2rem;

    border: .05rem solid rgba(255,255,255,.15);

    font-size: .8rem;
    letter-spacing: .08em;
}

.about{
    padding: 8rem 12%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;

    align-items: center;

    background: #f7f7f7;
}

.about-image img{
    width: 100%;
    display: block;
}

.about-content h2{
    margin-top: 1rem;

    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3rem,4vw,5rem);
    line-height: .95;

    color: #111827;
}

.about-content h2 span{
    color: #0084ff;
}

.about-content p{
    margin-top: 1.5rem;

    color: #6b7280;
    line-height: 1.9;
}

.about-stats{
    display: grid;
    grid-template-columns: repeat(2,1fr);

    margin-top: 3rem;

    background: #eef1f5;
}

.about-stat{
    padding: 2rem;

    border: .05rem solid rgba(0,0,0,.05);
}

.about-stat h3{
    font-family: "Barlow Condensed", sans-serif;
    font-size: 2rem;

    color: #0084ff;
}

.about-stat span{
    display: block;

    margin-top: .3rem;

    font-size: .75rem;
    letter-spacing: .12em;

    color: #6b7280;
}

.contact{
    padding: 8rem 12%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;

    background: #e2e5e9;
}

.contact h2{
    margin-top: 1rem;

    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3rem,4vw,5rem);
    line-height: .95;

    color: #111827;
}

.contact-info p{
    margin-top: 2rem;

    line-height: 1.8;
    color: #6b7280;
}

.contact-details{
    margin-top: 3rem;
}

.contact-item{
    display: flex;
    gap: 1rem;

    margin-bottom: 1.5rem;
}

.contact-icon{
    width: 3rem;
    height: 3rem;

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

    background: #0f172a;
    color: white;
}

.contact-item span{
    display: block;

    font-size: .75rem;
    color: #6b7280;

    margin-bottom: .3rem;
}

.contact-item strong{
    color: #111827;
}

.contact-form{
    padding: 2rem;

    background: white;

    box-shadow: 0 1rem 2rem rgba(0,0,0,.04);
}

.contact-form h3{
    margin-bottom: 2rem;

    font-family: "Barlow Condensed", sans-serif;
}

.form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group{
    margin-bottom: 1rem;
}

.form-group label{
    display: block;

    margin-bottom: .5rem;

    font-size: .75rem;
    font-weight: 700;

    color: #374151;
}

.form-group input,
.form-group textarea{
    width: 100%;

    padding: 1rem;

    border: .05rem solid #d1d5db;

    outline: none;
}

.form-group textarea{
    min-height: 8rem;
    resize: vertical;
}

.contact-btn{
    width: 100%;

    margin-top: 1rem;

    background: #0084ff;
    color: white;

    border: none;

    padding: 1rem;

    cursor: pointer;

    font-weight: 700;
}

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

@media (max-width: 75rem){

    .hero-content{
        margin-left: 10%;
        width: 90%;
    }

    .services,
    .products,
    .technology,
    .about,
    .contact{
        padding: 6rem 8%;
    }

    .services-intro{
        flex-direction: column;
        gap: 2rem;
    }

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

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

    .technology-content{
        grid-template-columns: 1fr;
    }

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

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

    .technology-certs{
        flex-wrap: wrap;
    }

    .stats{
        flex-wrap: wrap;
        width: 100%;
    }

    .stat-item{
        flex: 1 1 40%;
        min-width: 14rem;
    }
}

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

@media (max-width: 48rem){

    .hero{
        min-height: auto;
        padding: 10rem 0 4rem;
    }

    .hero-content{
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
    }

    .hero-content h1{
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .hero-content p{
        font-size: 1rem;
    }

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

    .btn{
        justify-content: center;
    }

    .stats{
        flex-direction: column;
        width: 100%;
    }

    .stat-item{
        min-width: unset;
        width: 100%;
        border-right: none;
        border-bottom: .05rem solid rgba(255,255,255,.12);
    }

    .stat-item:last-child{
        border-bottom: none;
    }

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

    .product-tabs{
        flex-direction: column;
    }

    .product-content{
        padding: 2rem;
    }

    .technology-badge{
        position: static;
        margin-top: 1rem;
        display: inline-block;
    }

    .technology-certs{
        flex-direction: column;
    }

    .about-stats{
        grid-template-columns: 1fr;
    }

    .form-row{
        grid-template-columns: 1fr;
    }
}

/* ========================= */
/* KLEINE SMARTPHONES */
/* ========================= */

@media (max-width: 30rem){

    .hero-content h1{
        font-size: 2.8rem;
    }

    .services,
    .products,
    .technology,
    .about,
    .contact{
        padding: 4rem 5%;
    }

    .services-intro h2,
    .products h2,
    .technology h2,
    .about h2,
    .contact h2{
        font-size: 2.5rem;
    }

    .product-content,
    .contact-form{
        padding: 1.5rem;
    }

    .stat-item{
        padding: 1.5rem;
    }
}

/* Animationsbasis */


.reveal{
    opacity: 0;
    transform: translateY(4rem);
    transition: all .8s ease;
}

.reveal-left{
    opacity: 0;
    transform: translateX(-4rem);
    transition: all .8s ease;
}

.reveal-right{
    opacity: 0;
    transform: translateX(4rem);
    transition: all .8s ease;
}

.reveal-scale{
    opacity: 0;
    transform: scale(.9);
    transition: all .8s ease;
}

.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active{
    opacity: 1;
    transform: translate(0) scale(1);
}