*{
box-sizing:border-box;
}


body{

margin:0;

font-family:
Arial,sans-serif;

background:#120b2d;

color:white;

}



.stars{

position:fixed;

inset:0;

background:
radial-gradient(circle,#ffffff55 1px,transparent 2px);

background-size:80px 80px;

opacity:.3;

z-index:-1;

}



header{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 7%;

}



.logo{

font-size:28px;

font-weight:bold;

}



.gold-btn,
.magic-btn,
button{

background:
linear-gradient(45deg,#ffd86b,#ff9f00);

border:0;

padding:16px 35px;

border-radius:50px;

font-weight:bold;

color:#402300;

cursor:pointer;

text-decoration:none;

}





.hero{

min-height:90vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding:40px 7%;

}



h1{

font-size:60px;

line-height:1.1;

}



h1 span{

color:#ffd86b;

}



.hero p{

font-size:22px;

line-height:1.5;

}



.circle{

width:500px;

height:500px;

border-radius:50%;

overflow:hidden;

box-shadow:
0 0 80px #ffd86b;

}



.circle video{

width:100%;

height:100%;

object-fit:cover;

}





section{

padding:70px 7%;

}



h2{

font-size:42px;

text-align:center;

}



.emotion p{

font-size:26px;

text-align:center;

line-height:1.5;

}



.worlds{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.world{

background:#ffffff20;

padding:15px;

border-radius:30px;

}



.preview-video{

width:100%;

border-radius:20px;

}



.timeline{

display:flex;

gap:30px;

justify-content:center;

}


.timeline div{

padding:30px;

background:#ffffff20;

border-radius:25px;

}



.order{

background:#ffffff15;

}



form{

max-width:500px;

margin:auto;

display:grid;

gap:15px;

}



input,
select{

padding:18px;

border-radius:20px;

font-size:16px;

}



.mobile-order{

display:none;

}




footer{

text-align:center;

padding:40px;

}





@media(max-width:700px){



header{

padding:20px;

}



.desktop-btn{

display:none;

}



.hero{

display:flex;

flex-direction:column;

text-align:center;

}


h1{

font-size:38px;

}



.circle{

width:280px;

height:280px;

margin-top:40px;

}



.worlds{

display:flex;

overflow-x:auto;

overflow-y:hidden;

gap:20px;


padding-left:10px;

padding-right:60px;


/* чтобы карточки красиво останавливались */

scroll-snap-type:x mandatory;


/* скрываем полосу прокрутки */

scrollbar-width:none;
}


.worlds::-webkit-scrollbar{

display:none;

}
.world{

min-width:82vw;
text-align:center;


scroll-snap-align:start;


padding:25px;


border-radius:30px;
}


.world:not(:last-child){

margin-right:5px;

}


.timeline{

flex-direction:column;

}



.mobile-order{

display:block;

position:fixed;

bottom:0px;

left:15px;

right:15px;

z-index:999;

}
.mobile-order.is-hidden {
  opacity: 0;
  transform: translateY(80px); /* смещаем вниз за пределы экрана */
  pointer-events: none; /* отключаем клики по скрытому элементу */
}



.mobile-order a{

display:block;

background:#ffd86b;

color:#3b2200;

padding:18px;

border-radius:50px;

text-align:center;

font-weight:bold;

}



}

.swipe-hint{

display:none;

}



@media(max-width:700px){


.swipe-hint{


display:flex;


justify-content:center;


align-items:center;


gap:15px;


margin:25px auto;


color:#ffd86b;


font-size:18px;


animation:
hintMove 2s infinite;


}



.swipe-hint span{


font-size:14px;

opacity:.8;


}



.hand{


font-size:35px;


}




@keyframes hintMove{


0%{

transform:translateX(0);

}


50%{

transform:translateX(25px);

}


100%{

transform:translateX(0);

}


}


}



.photo-label{

display:block;

text-align:center;

padding:20px;

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

border-radius:20px;

cursor:pointer;

}


.photo-preview{


display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:2px;

justify-content:center;


}


.photo-preview img{


width:100px;

height:100px;

object-fit:contain;

border-radius:15px;

border:2px solid #ffd86b;
 display: block;

}



.photo-item{

position:relative;

}


.photo-item button{

position:absolute;

top:-8px;

right:-8px;

width:25px;

height:25px;

padding:0;

border-radius:50%;

background:#ff5555;

color:white;

font-size:18px;

}



.photo-preview{

display:flex;

gap:15px;

flex-wrap:wrap;

justify-content:center;

margin-top:20px;

}



.photo-item{

position:relative;

width:90px;

height:90px;

}



.photo-item img{


width:90px;

height:90px;


object-fit:cover;


border-radius:15px;


border:2px solid #ffd86b;


}



.remove-photo{


position:absolute;


top:-10px;

right:-10px;


width:28px;

height:28px;


border-radius:50%;


border:none;


background:#ff4d4d;


color:white;


font-size:22px;


line-height:20px;


cursor:pointer;


padding:0;


display:flex;

align-items:center;

justify-content:center;


}