/* ================== BASE ================== */
html,
body {
    margin: 0;
    background: #1d1d1d;
    color: #eee;
    font: 16px/1.4 system-ui,Segoe UI,Roboto,Arial;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Единая ширина контента на десктопе (без формул) */
.container,
.site-header__inner,
.accordion,
.site-footer__inner,
.grid {
    width: 948px;
    max-width: 92vw;
    margin: 0 auto;
}

/* ================== HEADER ================== */
.site-header {
    background: #1a1a1a00;
    border-bottom: 0px solid rgba(255,255,255,.08);
}

.site-header__inner {
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-logo {
    font-family: Oswald,system-ui;
    font-weight: 400;
    font-size: 28px;
}

.site-logo .accent {
    color: #4aa0d6;
}

.site-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flag,
.icon,
.social a {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: .95;
    transition: transform .12s,opacity .12s;
}

.flag:hover,
.icon:hover,
.social a:hover {
    transform: translateY(-1px);
    opacity: 1;
}

.site-divider {
    r: 1px;
    height: 18px;
    background: rgba(255,255,255,.12);
}

.about {
    max-width: 948px;
    width: 100%;
    margin: 15px auto;
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
}

/* ================== ACCORDION ================== */
.accordion {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease;
}

.accordion__inner {
    padding: 22px 14px 0 22px;
    border-bottom: 0px solid rgba(255,255,255,.08);
}

.panel {
    display: none;
    color: #c6ccd1;
    line-height: 1.55;
}

.panel[aria-hidden="false"] {
    display: block;
}

/* Language block formatting */
.lang-block {
    padding: 12px 0 20px 0;
}

.lang-title {
    font-family: Oswald, sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 4px;
}

.lang-subtitle {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: .5px;
    color: #9aa3aa;
    margin: 0 0 14px;
}

.lang-body {
    font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 15px;
    color: #c6ccd1;
    line-height: 1.55;
    margin: 0;
    white-space: pre-line;
}

.introtext {
    max-width: 948px;
    width: 100%;
    margin: 15px auto 10px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1px;

    /* внутренняя + внешняя тень 
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.21) , 0 0 12px rgba(0, 0, 0, 0.4); */
}

/* плавный адаптивный паддинг без медиазапросов */
.introtext__inner {
    padding: clamp(15px, 3vw, 20px);
}

/* ================== FORM ================== */
.form {
    max-width: 640px;
}

.field {
    margin: 10px 0;
}

.label {
    display: block;
    font-size: .9rem;
    color: #9aa3aa;
    margin: 0 0 6px;
}

.input,
.select,
.textarea {
    width: 100%;
    background: #0b0b0b;
    color: #ddd;
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px 12px;
    border-radius: 8px;
    outline: none;
}

.textarea {
    min-height: 120px;
    resize: vertical;
}

.btn {
    margin-top: 6px;
    margin-bottom: 56px;
    background: transparent;
    color: #adadad;
    border: 2px solid #6b6a6a;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.btn:hover {
    border-color: rgba(170,169,169,.28);
}

/* ================== FOOTER ================== */
.site-footer {
    border-top: 0px solid rgba(255,255,255,.08);
    background: #141414;
    border-left-color: rgba(0, 0, 0, 0.92);
    background-color: rgba(0, 0, 0, 0);
}

.site-footer__inner {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #9aa3aa;
}

.social {
    display: flex;
    gap: 14px;
}

/* ================== GRID ================== */
.stage {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.grid {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-auto-rows: 300px;
    gap: 24px;
    grid-template-areas: "one two three"
      "a   a   four"
      "a   a   five"
      "six seven eight";
}

.one {
    grid-area: one;
}

.two {
    grid-area: two;
}

.three {
    grid-area: three;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

.six {
    grid-area: six;
}

.seven {
    grid-area: seven;
}

.eight {
    grid-area: eight;
}

.a {
    grid-area: a;
}

.tile {
    position: relative;
}

.tilt {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 900px;
    transform-style: preserve-3d;
    will-change: transform;
    overflow: visible;
}

.layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}

.layer>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layer.text {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
}

.caption {
    background: transparent;
    color: #fff;
    letter-spacing: .3px;
    padding: 6px 10px;
    border-radius: 8px;
    backdrop-filter: blur(1px);
    font-family: Oswald,sans-serif;
    font-weight: 200;
    font-size: 22px;
}

/* ================== LIGHTBOX ================== */
.lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    display: grid;
    place-items: center;
    z-index: 9999;
    padding: 2rem;
}

.lb-dialog {
    position: relative;
    max-width: 96vw;
    width: 100%;
}

.lb-img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    margin: 0 auto;
    box-shadow: 0 12px 36px rgba(0,0,0,.5);
}

.lb-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.lb-btn img {
    width: 26px;
    height: 26px;
}

.lb-prev {
    left: .25rem;
}

.lb-next {
    right: .25rem;
}

.lb-next img {
    transform: rotate(180deg);
}

.lb-close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10000;
    border: 0;
    background: rgba(0,0,0,.45);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-size: 24px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.lb-count {
    display: none !important;
}

/* Hidden counter */
.lb-desc {
    margin-top: .25rem;
    text-align: center;
    opacity: .9;
    font-size: .95rem;
    max-width: 92vw;
    margin-inline: auto;
}

/* ================== SLIDER ================== */
.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1d1d1d;
}

.slides {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translateX(0);
}

.slide {
    flex: 0 0 100%;
    position: relative;
}

.slide>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(0,0,0,0);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.s-btn img {
    width: 44px;
    height: 44px;
}

.s-prev {
    left: .35rem;
}

.s-next {
    right: .35rem;
}

.s-next img {
    transform: rotate(180deg);
}

/* ================== TABLET ================== */
@media (max-width: 900px){
    .container,
    .site-header__inner,
    .accordion,
    .site-footer__inner,
    .grid {
        width: 720px;
        max-width: 92vw;
    }

    .grid {
        grid-template-columns: 220px 220px 220px;
        grid-auto-rows: 220px;
        gap: 20px;
    }

    .site-logo {
        font-size: 24px;
    }

    .flag,
    .icon,
    .social a {
        width: 20px;
        height: 20px;
    }
}

/* ================== MOBILE (2 колонки, квадраты) ================== */
@media (max-width: 480px){
    .container,
    .site-header__inner,
    .accordion,
    .site-footer__inner,
    .grid {
        width: 92vw;
    }

    .grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 12px;
        grid-template-areas: "a a"
      "one two"
      "three four"
      "five six"
      "seven eight";
    }

    .tile {
        aspect-ratio: 1 / 1;
    }

    .a {
        grid-column: 1 / -1;
        aspect-ratio: 1 / 1;
    }

    .tilt {
        perspective: 0;
    }

    .flag,
    .icon,
    .social a {
        width: 24px;
        height: 24px;
    }
}

/* ================== CLICKABLE BASE LAYER (for external links on any tile) ================== */
.tile .layer[data-depth="0"] {
    pointer-events: auto;
}

.tile .layer[data-depth="0"] a {
    position: absolute;
    inset: 0;
    display: block;
}

.tile .layer.text {
    pointer-events: none;
}

/* ==== Social icons: grayscale default + color on hover ==== */
.social a img {
    filter: grayscale(100%) brightness(0.8);
    opacity: 0.8;
    transition: filter .3s ease, opacity .3s ease;
}

.social a:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

.form-status {
    margin: 8px 0 10px;
    min-height: 1.2em;
    color: #9aa3aa;
    transition: opacity .3s ease;
}