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

body{
    background:#0d0d0d;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
}

header{
    width:90%;
    margin:auto;
    height:90px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo img{
    width:130px;
}

nav{
    display:flex;
    gap:35px;
}

nav a{
    color:white;
    text-decoration:none;
    font-size:15px;
    transition:.3s;
}

nav a:hover{
    opacity:.6;
}

.hero{

    width:90%;
    margin:auto;
    min-height:calc(100vh - 90px);

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;

}

.subtitle{

    color:#888;
    letter-spacing:4px;
    font-size:13px;

}

.hero h1{

    margin-top:15px;
    font-size:90px;
    letter-spacing:12px;

}

.hero p{

    margin-top:25px;
    font-size:20px;
    color:#bdbdbd;
    max-width:430px;

}

button{

    margin-top:45px;

    padding:18px 42px;

    background:white;
    color:black;

    border:none;

    cursor:pointer;

    font-size:15px;

    transition:.3s;

}

button:hover{

    transform:translateY(-3px);

}

.hero-image{

    display:flex;
    justify-content:flex-end;

}

.hero-image img{

    width:100%;
    max-width:520px;

    border-radius:24px;

    object-fit:cover;

}

@media(max-width:900px){

.hero{

grid-template-columns:1fr;
text-align:center;
padding:40px 0;

}

.hero-text{

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

}

.hero h1{

font-size:58px;

}

.hero-image{

justify-content:center;

}

.hero-image img {

    width:100%;
    max-width:520px;

    height:700px;

    object-fit:cover;

    border-radius:30px;

    display:block;

}

header{

flex-direction:column;
height:auto;
padding:25px 0;
gap:20px;

}

nav{

flex-wrap:wrap;
justify-content:center;

}

}
.image-placeholder{

    width:100%;
    max-width:520px;
    height:700px;

    border:1px solid #2a2a2a;

    border-radius:30px;

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

    background:linear-gradient(
        180deg,
        #1b1b1b,
        #0d0d0d
    );

}

.image-placeholder span{

    font-size:42px;

    letter-spacing:10px;

    margin-bottom:20px;

}

.image-placeholder p{

    color:#777;

    font-size:16px;

}
@media (max-width: 600px){

    .hero-image img{

        width:100%;
        height:auto;

        max-height:none;

        object-fit:contain;

        border-radius:20px;

    }

    .hero-image{

        width:100%;

    }

}
html{
    scroll-behavior:smooth;
}


.hero-button{

    display:inline-block;

    margin-top:45px;

    padding:18px 42px;

    background:white;

    color:black;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}


.hero-button:hover{

    transform:translateY(-3px);

}


.collection{

    padding:100px 5%;

    text-align:center;

}


.collection h2{

    font-size:40px;

    margin-bottom:50px;

}


.products{

    display:flex;

    justify-content:center;

    gap:25px;

}


.item{

    width:280px;

    height:350px;

    border:1px solid #333;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#aaa;

}


.story{

    padding:120px 10%;

    text-align:center;

}


footer{

    padding:40px;

    text-align:center;

    color:#777;

}


@media(max-width:700px){

.products{

    flex-direction:column;

    align-items:center;

}

}
/* Анимация появления */

.collection,
.story {

    opacity:0;
    transform:translateY(50px);

    animation: showBlock 1s ease forwards;

}


@keyframes showBlock {

    from {

        opacity:0;
        transform:translateY(50px);

    }

    to {

        opacity:1;
        transform:translateY(0);

    }

}


/* Карточки коллекции */

.item {

    opacity:0;
    transform:translateY(40px);

    animation: showItem 0.8s ease forwards;

}


.item:nth-child(1){

    animation-delay:.2s;

}


.item:nth-child(2){

    animation-delay:.4s;

}


.item:nth-child(3){

    animation-delay:.6s;

}



@keyframes showItem {

    from {

        opacity:0;
        transform:translateY(40px);

    }

    to {

        opacity:1;
        transform:translateY(0);

    }

}
/* COLLECTION STYLE */

.collection {

    padding:140px 5%;

}


.collection-header {

    text-align:center;

    margin-bottom:80px;

}


.collection-header span {

    color:#777;

    font-size:13px;

    letter-spacing:5px;

}


.collection-header h2 {

    margin-top:25px;

    font-size:80px;

    letter-spacing:15px;

}


.collection-header p {

    margin-top:20px;

    color:#999;

    font-size:18px;

}



.products {

    display:flex;

    justify-content:center;

    gap:30px;

}



.item {

    position:relative;

    width:300px;

    height:380px;

    border:1px solid #2b2b2b;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.5s;

}



.item:hover {

    transform:translateY(-10px);

    border-color:white;

}



.product-number {

    position:absolute;

    top:20px;

    left:20px;

    color:#555;

    font-size:14px;

}



.item h3 {

    font-size:22px;

    letter-spacing:2px;

}



.item p {

    margin-top:15px;

    color:#888;

}



@media(max-width:700px){


.collection-header h2 {

    font-size:45px;

    letter-spacing:8px;

}


.products {

    flex-direction:column;

    align-items:center;

}


.item {

    width:100%;

    max-width:330px;

}


}