/* ===================================
   RESET
=================================== */

:root{
    --bg:#faf7f2;
    --surface:#fff;
    --text:#333;
    --text-light:#666;
    --accent:#d67c45;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    font-family:Arial, sans-serif;
    background:#faf7f2;
    color:#333;
}


header {
    padding: 20px 70px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.logo img {
    width: 195px;
    height: auto;
    display: block;
}

nav a {
    margin-left:25px;
    text-decoration:none;
    color:#555;
}



.hero {

    min-height:82vh;

    padding:40px 8% 90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

}


.hero-text {

    flex:1;
	

}


.hero h1 {

    font-size:52px;
    line-height:1.15;

}


.hero p {

    font-size:20px;

    color:#666;

    line-height:1.7;

    margin-bottom:10px;

}


.button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:40px;

    background:#d67c45;

    color:white;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

    box-shadow:0 12px 30px rgba(214,124,69,.30);

}
.button:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(214,124,69,.35);

}




.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
    border-radius: 32px;
    box-shadow: 0 25px 60px rgba(0,0,0,.15);
    transition: transform .35s ease;
}

.hero-image img:hover {
    transform: scale(1.02);
}



section {

    padding:80px 8%;

}


.title {

    text-align:center;
    font-size:40px;
    margin-bottom:20px;

}
.works-note{
    max-width:720px;
    margin:15px auto 45px;
    text-align:center;
    color:#666;
    font-size:18px;
    line-height:1.7;
}

.works-note strong{
    color:#d67c45;
}



.cards {

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

}


.card {

    background:white;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 10px 30px #0001;
    transition:0.3s;
}


.card:hover {
    transform:translateY(-8px);
    box-shadow:0 20px 40px #0002;

}


.card img {

    width:100%;
    height:300px;
    object-fit:cover;

}


.card h3 {

    padding:0 25px;

}


.card p {

    padding:0 25px 25px;
    color:#666;

}




.info {

    background:white;
    border-radius:35px;
    padding:45px;

}



.steps {

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;

}


.step {

    background:white;
    padding:30px;
    border-radius:25px;

}



.print {

    background:#222;
    color:white;
    border-radius:40px;

}


.print p {

    color:#ddd;

}



.contact {

    text-align:center;
    background:white;
    border-radius:40px;

}



footer {

    text-align:center;
    padding:40px;
    color:#777;

}




@media(max-width:900px){

.hero {

    flex-direction:column;

}


.hero h1 {

    font-size:38px;

}


nav {

    display:none;

}

}

/* Курсор при наведении на фотографии */
.card img {
    cursor: pointer;
}


/* Затемнение всего экрана при открытии фото */
#lightbox {

    display: none;

    position: fixed;

    z-index: 9999;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

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

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

}


/* Большое изображение внутри окна */
#lightbox img {

    max-width: 90%;
    max-height: 90%;

    border-radius: 20px;

    box-shadow: 0 20px 60px rgba(0,0,0,0.5);

}


/* Кнопка закрытия */
.close {

    position: absolute;

    top: 25px;
    right: 40px;

    color: white;

    font-size: 50px;

    font-weight: bold;

    cursor: pointer;

}
/* ---------- Другие изделия ---------- */

.products{

padding:90px 8%;

background:#f8f6f2;

}

.products h2{

text-align:center;

font-size:42px;

margin-bottom:20px;

}

.products-text{

max-width:760px;

margin:0 auto 60px;

text-align:center;

line-height:1.8;

color:#666;

}

.products-grid{

display:grid;

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

gap:28px;

}

.product{

position:relative;

overflow:hidden;

border-radius:24px;

cursor:pointer;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.35s;

}

.product:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.16);

}

.product img{

display:block;

width:100%;

height:auto;

object-fit:contain;

transition:.45s;

}

.product:hover img{

transform:scale(1.08);

}

.caption{

position:absolute;

left:0;

right:0;

bottom:0;

padding:22px;

background:linear-gradient(transparent,rgba(0,0,0,.75));

color:white;

font-size:22px;

font-weight:600;

}

@media(max-width:900px){

.products-grid{

grid-template-columns:1fr;

}

}


.hero-buttons{

display:flex;

gap:18px;

margin-top:35px;

margin-bottom:35px;

flex-wrap:wrap;

}

.button-outline{

background:transparent;

color:#444;

border:2px solid #ddd;

}

.button-outline:hover{

background:#fff;

}

.hero-features{

display:flex;

flex-wrap:wrap;

gap:14px;

margin-top:10px;

}

.hero-features span{

background:white;

padding:10px 18px;

border-radius:30px;

font-size:14px;

box-shadow:0 5px 18px rgba(0,0,0,.08);

}
.logo-link{

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

}

/* ===== Контакты ===== */

.contact-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin:35px 0 20px;
}

.email{
    margin-top:20px;
    font-size:18px;
    color:#666;
}

.email a{
    color:#d67c45;
    text-decoration:none;
    font-weight:600;
    transition:.25s;
}

.email a:hover{
    text-decoration:underline;
    color:#b55f2c;
}

/* ===========================
   Мини-слайдер карточек
=========================== */

.product{
    position:relative;
}

.slider-btn{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

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

    cursor:pointer;

    font-size:24px;

    z-index:20;

    transition:.25s;

    opacity:0;

}

.product:hover .slider-btn{
    opacity:1;
}

.slider-btn:hover{
    background:white;
}

.prev{
    left:12px;
}

.next{
    right:12px;
}

@media(max-width:900px){

.slider-btn{

    opacity:1;

}

}
.portfolio{

    padding:90px 7%;
    background:#faf7f2;

}

.masonry{

    column-count:4;
    column-gap:18px;

}

.masonry img{

    width:100%;

    margin-bottom:18px;

    border-radius:18px;

    cursor:pointer;

    display:block;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    break-inside:avoid;

}

.masonry img:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

@media(max-width:1100px){

.masonry{

    column-count:3;

}

}

@media(max-width:700px){

.masonry{

    column-count:2;

}

}

@media(max-width:450px){

.masonry{

    column-count:1;

}

}
.masonry img:hover{

    transform:scale(1.02);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}
/* ---------- ГАЛЕРЕЯ ---------- */

.portfolio{
    max-width:1500px;
    margin:auto;
    padding:70px 30px;
}

.portfolio .title{
    text-align:center;
    margin-bottom:20px;
}

.portfolio .products-text{
    text-align:center;
    max-width:800px;
    margin:0 auto 50px;
}

.masonry{
    column-count:4;
    column-gap:18px;
}

.masonry img{
    width:100%;
    margin-bottom:18px;
    display:block;
    cursor:pointer;
    border-radius:18px;
    break-inside:avoid;
    transition:.3s;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.masonry img:hover{
    transform:scale(1.02);
    box-shadow:0 18px 40px rgba(0,0,0,.22);
}

@media(max-width:1200px){
.masonry{
column-count:3;
}
}

@media(max-width:800px){
.masonry{
column-count:2;
}
}

@media(max-width:550px){
.masonry{
column-count:1;
}
}
.gallery-button{
    text-align:center;
    margin-top:50px;
}

.gallery-button .button{
    display:inline-block;
    padding:16px 38px;
    font-size:18px;
}