/* KYIV TYPE FONT */

@font-face {
  font-family: "KyivType";
  src: url("fonts/KyivTypeSans-Regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "KyivType";
  src: url("fonts/KyivTypeSans-Bold.woff2") format("woff2");
  font-weight: 700;
}


/* базові налаштування */

body{
margin:0;
font-family:"KyivType", Arial, sans-serif;
background:#f4f1ea;
color:#222;
line-height:1.6;
}


/* HERO */

.hero{
position:relative;
height:72vh;
min-height:520px;
overflow:hidden;
background:#111;
}


/* відео */

.hero-video{
position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

transform:scale(1.03);
filter:blur(2px) brightness(0.72) saturate(0.95);
}


/* додатковий blur */

.hero-blur{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;

backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);

pointer-events:none;
}


/* cinematic overlay */

.hero-overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;

background:
linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.45) 100%),
linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.1) 50%, rgba(244,241,234,1) 100%);
}


/* текст поверх відео */

.hero-content{
position:absolute;
left:50%;
bottom:36px;

transform:translateX(-50%);

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

color:white;
z-index:2;
}


/* логотип */

.logo{
width:92px;
margin-bottom:14px;
border-radius:18px;
}


/* назва гри */

.hero h1{
font-family:"KyivType", sans-serif;
font-weight:700;

font-size:clamp(34px, 5vw, 64px);

line-height:1.02;
margin:0 0 12px;

max-width:780px;

letter-spacing:0.5px;

text-shadow:0 4px 24px rgba(0,0,0,0.45);
}


/* підзаголовок */

.hero-subtitle{
font-size:18px;
max-width:620px;
margin:0 0 20px;

color:rgba(255,255,255,0.92);

text-shadow:0 2px 12px rgba(0,0,0,0.35);
}


/* STORE BUTTONS */

.store-buttons{
display:flex;
gap:18px;
align-items:center;
flex-wrap:wrap;
}


.store-badge{
height:58px;
transition:transform 0.2s ease;
}

.store-buttons a:hover .store-badge{
transform:scale(1.04);
}


.disabled{
opacity:0.7;
}


.coming-soon{
text-align:center;
}

.coming-soon p{
margin:6px 0 0;
font-size:13px;
color:rgba(255,255,255,0.85);
}


/* MAIN CONTENT */

.container{
max-width:1000px;
margin:auto;
padding:36px 20px 50px;
}


/* блоки */

section{
background:white;

padding:26px;

margin-bottom:24px;

border-radius:16px;

box-shadow:0 6px 18px rgba(0,0,0,0.07);
}


h2{
margin-top:0;
font-size:26px;
}


/* SCREENSHOTS */

.screenshots{
display:grid;

grid-template-columns:repeat(auto-fit, minmax(260px,1fr));

gap:16px;

margin-top:20px;
}


.screenshots img{
width:100%;
border-radius:12px;

cursor:pointer;

transition:transform 0.22s ease, box-shadow 0.22s ease;

box-shadow:0 4px 14px rgba(0,0,0,0.12);
}


.screenshots img:hover{
transform:scale(1.02);

box-shadow:0 10px 24px rgba(0,0,0,0.18);
}


/* LIGHTBOX */

.lightbox{
display:none;

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

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

z-index:9999;

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

padding:30px;
}


.lightbox-content{
max-width:92vw;
max-height:88vh;

border-radius:12px;

box-shadow:0 10px 40px rgba(0,0,0,0.45);
}


.lightbox-close{
position:absolute;
top:18px;
right:28px;

font-size:42px;
color:white;

cursor:pointer;
}


/* LINKS */

a{
color:#2a5db0;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}


/* MOBILE */

@media(max-width:700px){

.hero{
height:64vh;
min-height:460px;
}

.hero-content{
width:calc(100% - 28px);
bottom:24px;
}

.hero-subtitle{
font-size:16px;
}

.store-badge{
height:52px;
}

section{
padding:20px;
}

}