/* ===== базові ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#e9ecef;background:#0f1115;line-height:1.55;
}
.container{width:min(1120px,92%);margin:0 auto}
section{padding:56px 0}

/* header */
.header{position:sticky;top:0;z-index:20;background:rgba(15,17,21,.92);backdrop-filter:blur(8px);border-bottom:1px solid #1f2530}
.header .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.4px;text-decoration:none;color:#e9ecef}
.logo img{height:32px;width:auto}
.logo span{color:#2dd36f}
.nav a{color:#c9d3e6;margin-left:16px;text-decoration:none}
.nav a.btn{margin-left:24px}

/* hero */
.hero{padding:84px 0 56px;background:radial-gradient(1200px 600px at 50% -100px,#1a2030 0%,transparent 70%);text-align:center;border-bottom:1px solid #1a2030}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 12px}
.hero p{color:#bcc7da;margin:0 0 22px}
.btn{display:inline-block;padding:12px 20px;border-radius:10px;background:#2dd36f;color:#0b0d11;text-decoration:none;font-weight:800;border:1px solid #27ba60;transition:transform .1s ease,filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* cards */
.features{padding-top:32px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:#12151b;border:1px solid #222735;border-radius:12px;padding:16px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:#b3bbca}

/* form */
.h2{text-align:center;margin:0 0 18px;font-size:28px}
.form-wrap{background:#12151b;border:1px solid #222735;border-radius:14px;padding:22px;max-width:760px;margin:0 auto}
#regForm .row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
#regForm .row.full{grid-template-columns:1fr}
label{display:block;font-size:14px;color:#b8c1d1;margin:4px 0}
input,textarea,select{width:100%;padding:12px;border-radius:10px;background:#0f131a;border:1px solid #2a3142;color:#e9ecef;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:#2dd36f;box-shadow:0 0 0 3px rgba(45,211,111,.12)}
textarea{min-height:120px;resize:vertical}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:6px}
.note{color:#9aa6bd;font-size:13px}

/* gallery */
.gallery .gallery-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.gallery-grid img{width:100%;height:140px;object-fit:cover;border-radius:10px;border:1px solid #222735;background:#0f1115}

/* footer */
.footer{border-top:1px solid #1f232b;color:#9aa6bd;text-align:center;padding:22px 0}

/* responsive */
@media(max-width:820px){
  #regForm .row{grid-template-columns:1fr}
  .hero{padding-top:68px}
}

.gallery {
    background: #0e0e0e;
    padding: 40px 0;
    display: flex;
    justify-content: center; /* центрирует всю композицию */
}

.gallery-wrapper {
    display: flex;
    align-items: stretch; /* выравнивает по вертикали */
    gap: 20px; /* без отступа между колонками */
}

/* Левая колонка с тремя горизонтальными фото */
.left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 100px;
}

/* Правая колонка с одной вертикальной */
.right {
    display: flex;
    align-items: stretch;
}

/* Изображения */
.left img {
    width: 400px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

.right img {
    height: calc(3 * 400px * 9 / 16 + 24px); /* три фото по высоте + промежутки */
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
}

/* Ховер */
.gallery-wrapper img {
    transition: transform 0.3s ease;
}

.gallery-wrapper img:hover {
    transform: scale(1.02);
}

/* Адаптив */
@media (max-width: 900px) {
    .gallery-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .left {
        margin-left: 0;
    }


    .left img,
    .right img {
        width: 100%;
        height: auto;
    }

    .right img {
        height: auto;
    }
}