:root{
--cream:#f3ece2;
--cream-2:#efe6da;
--bronze:#9c7b59;
--bronze-deep:#6e5236;
--text:#4a4036;
--text-soft:#7d7163;
--gold:#b8956a;
}


*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Jost',sans-serif;
background:linear-gradient(180deg,#f6efe6 0%,#efe6da 50%,#f4ede3 100%);
color:var(--text);
overflow-x:hidden;
}


.label{
display:inline-block;
font-size:.72rem;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--bronze);
margin-bottom:1.4rem;
font-weight:500;
}


h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.15}
em{font-style:normal}


.sub{color:var(--text-soft);font-weight:300;letter-spacing:.05em}


/* ---------- HERO ---------- */
.hero{
position:relative;
min-height:92vh;
display:flex;
align-items:center;
justify-content:center;
padding:6vh 5vw;
}
.hero-video{
position:absolute;
inset:5vh 4vw;
border-radius:26px;
overflow:hidden;
box-shadow:0 40px 80px -30px rgba(110,82,54,.45);
}
.hero-video iframe,
.hero-video video{
position:absolute;
top:50%;left:50%;
width:177.78vh;
height:100%;
min-width:100%;
min-height:56.25vw;
transform:translate(-50%,-50%);
object-fit:cover;
pointer-events:none;
border:none;
}
.hero-overlay{
position:absolute;inset:0;
background:
radial-gradient(ellipse at center, rgba(60,42,26,.25), rgba(60,42,26,.55)),
linear-gradient(180deg, rgba(243,236,226,.15), rgba(110,82,54,.35));
}
.hero-content{
position:relative;
z-index:2;
text-align:center;
color:#fff7ee;
max-width:1100px;
padding:0 3vw;
}


/* ===== ВЕРХНИЙ ТЕКСТ — увеличен ===== */
.hero-title{
font-family:'Oswald', sans-serif;
font-weight:600;
line-height:1.35;
letter-spacing:.03em;
text-transform:uppercase;
font-size:clamp(1.6rem, 3.4vw, 2.6rem);
color:rgba(255,247,238,.92);
text-shadow:0 4px 25px rgba(0,0,0,.5);
}
.hero-title .line{
display:block;
}
.hero-title em{
color:#ffe9c9;
font-style:normal;
}


/* ===== ГЛАВНАЯ НАДПИСЬ "Пусть вашу ценность заметят" ===== */
.hero-sub{
margin-top:1.8rem;
font-family:'Oswald', sans-serif;
font-weight:700;
font-size:clamp(2.6rem, 7.2vw, 6.2rem);
letter-spacing:.01em;
text-transform:uppercase;
line-height:1.05;
color:#fff7ee;
text-shadow:0 8px 45px rgba(0,0,0,.55);
}


/* ---------- SECTIONS ---------- */
section{padding:9vh 6vw;text-align:center}


/* ===== "Первое впечатление решает больше, чем кажется" — КАПС ===== */
.statement h2{
font-family:'Oswald', sans-serif;
font-weight:600;
font-size:clamp(2.2rem, 4.8vw, 3.8rem);
letter-spacing:.02em;
text-transform:uppercase;
}


/* ===== "Красивый образ · Понятная форма · Сильное впечатление" — КАПС, крупнее ===== */
.value h3{
font-family:'Oswald', sans-serif;
font-weight:600;
font-size:clamp(1.7rem,3.6vw,2.8rem);
letter-spacing:.015em;
text-transform:uppercase;
color:var(--bronze-deep);
}
.value h3 span{color:var(--gold);margin:0 .35em}
.value .sub{
margin-top:1.2rem;
font-style:italic;
font-size:2rem
}


/* ---------- SHOWREEL ---------- */
.cases{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(450px,1fr));
gap:1.1rem;
max-width:1600px;
margin:2.5rem auto 0;
}
.case{
position:relative;
aspect-ratio:16/9;
border-radius:14px;
overflow:hidden;
box-shadow:0 25px 50px -25px rgba(110,82,54,.5);
transition:transform .5s ease, box-shadow .5s ease;
background:#d9c6ac;
cursor:pointer;
}
.case:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 35px 60px -25px rgba(110,82,54,.6)}


.case .poster{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
opacity:1;
transition:opacity .35s ease;
z-index:2;
}
.case video{
position:absolute;inset:0;
width:100%;height:100%;
border:none;object-fit:cover;
z-index:1;
background:#000;
}

/* ---------- PLAY OVERLAY ---------- */
.case .play-overlay{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,rgba(120,90,60,.15),rgba(80,58,38,.5));
color:#fff7ee;
font-size:2.6rem;
opacity:1;
transition:opacity .35s ease;
z-index:3;
pointer-events:none;
}
.case.playing .play-overlay{
opacity:0;
}

/* ---------- PLAYER CONTROLS ---------- */
.case .controls{
position:absolute;
bottom:0;left:0;right:0;
display:flex;
align-items:center;
gap:8px;
z-index:4;
opacity:0;
transition:opacity .3s ease;
background:linear-gradient(0deg, rgba(60,42,26,.85), rgba(60,42,26,0));
padding:10px 12px 8px;
}

.case:hover .controls,
.case.playing .controls{
opacity:1;
}

.ctrl-btn{
background:none;
border:none;
color:#fff7ee;
font-size:1rem;
line-height:1;
cursor:pointer;
padding:4px;
flex-shrink:0;
}

.play-btn{
font-size:.95rem;
}

.time{
font-family:'Jost', sans-serif;
font-size:.72rem;
color:#fff7ee;
flex-shrink:0;
min-width:34px;
text-align:center;
}

.progress{
flex:1;
cursor:pointer;
accent-color:var(--gold);
height:4px;
}

.volume-slider{
width:60px;
cursor:pointer;
accent-color:var(--gold);
}

.fullscreen-btn{
font-size:1.05rem;
}

/* fullscreen mode */
.case:fullscreen{
background:#000;
display:flex;
align-items:center;
justify-content:center;
border-radius:0;
}
.case:fullscreen video{
position:relative;
width:100%;
height:100%;
object-fit:contain;
}
.case:fullscreen .poster{
display:none;
}
.case:fullscreen .controls{
position:absolute;
bottom:0;
opacity:1;
padding:16px 20px;
}


/* ---------- CTA ---------- */
.cta h2{
font-family:'Oswald', sans-serif;
font-weight:600;
font-size:clamp(2.2rem, 4.8vw, 3.8rem);
letter-spacing:.02em;
text-transform:uppercase;
margin-bottom:2.4rem;
}


.btn{
display:inline-block;
padding:1.15rem 3.4rem;
border-radius:50px;
background:linear-gradient(135deg,var(--bronze),var(--bronze-deep));
color:#fff7ee;
text-decoration:none;
letter-spacing:.18em;
text-transform:uppercase;
font-family:'Oswald',sans-serif;
font-weight:600;
font-size:1rem;
box-shadow:0 18px 40px -14px rgba(110,82,54,.65);
transition:transform .3s, box-shadow .3s, letter-spacing .3s;
}
.btn:hover{
transform:translateY(-4px) scale(1.02);
box-shadow:0 26px 55px -14px rgba(110,82,54,.75);
letter-spacing:.22em;
}


.links{
margin-top:2.6rem;
display:flex;
align-items:center;
justify-content:center;
gap:1.6rem;
flex-wrap:wrap;
}
.links a{
position:relative;
font-family:'Oswald',sans-serif;
font-size:.85rem;
font-weight:500;
letter-spacing:.28em;
text-transform:uppercase;
color:var(--bronze-deep);
text-decoration:none;
padding-bottom:6px;
}
.links a::after{
content:'';
position:absolute;
left:0;bottom:0;
width:100%;height:1px;
background:var(--gold);
transform:scaleX(.3);
transform-origin:left;
transition:transform .35s ease, background .35s ease;
}
.links a:hover{color:var(--gold)}
.links a:hover::after{transform:scaleX(1)}
.links span{
color:var(--gold);
font-size:.9rem;
opacity:.7;
}


.note{margin-top:1.4rem;font-size:.78rem;color:var(--text-soft);letter-spacing:.03em}


footer{
text-align:center;
padding:3rem 1rem;
font-size:.8rem;
letter-spacing:.15em;
color:var(--text-soft);
}


/* ---------- ANIMATION ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease, transform 1s ease}
.reveal.in{opacity:1;transform:none}


@media(max-width:600px){
.hero-video{inset:3vh 3vw}
section{padding:7vh 5vw}
.cases{grid-template-columns:1fr}
.links{gap:1rem}

.case .controls{
opacity:1; /* на мобильных hover ненадёжен — контролы всегда видны */
flex-wrap:wrap;
gap:6px;
padding:8px 10px 6px;
}
.volume-slider{
width:45px;
}
.time{
min-width:28px;
font-size:.65rem;
}
}