* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {

    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', sans-serif;
    color: #3A3A3A;

    overflow-x: hidden;
}

.hero {

    min-height: 100vh;

    background-image:
    linear-gradient(
        rgba(255,255,255,0.42),
        rgba(255,255,255,0.42)
    ),
    url("images/hero.jpg");

    background-size: cover;
    background-position: center center;

    display: flex;
    align-items: center;
}

.hero-content {

    max-width: 760px;

    margin-left: 10%;
}

.brand {

    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 35px;
}

.brand img {

    width: 52px;
    height: 52px;

    object-fit: contain;
}

.brand span {

    font-size: 15px;

    letter-spacing: 5px;

    color: #666666;
}

.hero h1 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 78px;

    line-height: 1.03;

    font-weight: 600;

    color: #353535;

    margin-bottom: 20px;
}

.hero p {

    font-size: 24px;

    line-height: 1.7;

    max-width: 620px;

    color: #4A4A4A;

    margin-bottom: 40px;
}

.hero-buttons {

    margin-top: 10px;
}

/* ===== BUTTONS ===== */

.btn {

    display: inline-block;

    text-decoration: none;

    padding: 18px 32px;

    border-radius: 6px;

    transition: all 0.25s ease;

    font-family: 'Inter', sans-serif;

    font-size: 18px;

    font-weight: 500;
}

.btn-primary {

    background: #B89055;

    color: #FFFFFF;
}

.btn-primary:hover {

    transform: translateY(-2px);

    background: #A57D43;
}

/* ===== TABLET ===== */

@media (max-width: 1024px) {

    .hero-content {

        max-width: 85%;
    }

    .hero h1 {

        font-size: 62px;
    }

    .hero p {

        font-size: 22px;
    }
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

    .hero {

        background-position: 65% center;

        align-items: flex-start;

        padding-top: 100px;
    }

    .hero-content {

        max-width: 88%;

        margin-left: 7%;
        margin-right: 7%;
    }

    .brand {

        gap: 16px;
    }

    .brand img {

        width: 46px;
        height: 46px;
    }

    .hero h1 {

        font-size: 64px;

        line-height: 0.95;

        margin-bottom: 28px;
    }

    .hero p {

        font-size: 20px;

        line-height: 1.6;
    }

    .hero-buttons {

        margin-top: 90px;
    }

    .btn {

        width: 100%;

        text-align: center;

        display: block;
    }
    }
/* =====================================
   SECTION 02
===================================== */

.problem-section {

    padding: 140px 10%;

    background: #FCFBF8;
}
.problem-container {

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 80px;
}

.problem-text {

    flex: 1;
}

.section-label {

    font-size: 56px;

    letter-spacing: 6px;

    line-height: 1.05;

    color: #C39A5A;

    margin-bottom: 25px;

    text-transform: uppercase;
}
    margin-bottom: 18px;
}

..problem-header h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 54px;

    font-weight: 600;

    color: #353535;

    margin-bottom: 0;
}

.problem-text p {

    font-size: 17px;

    line-height: 1.8;

    color: #4A4A4A;

    margin-bottom: 18px;

    max-width: 700px;
}

.problem-image {

    flex: 1;
}

.problem-image img {

    width: 100%;

    border-radius: 12px;

    display: block;
}
/* ===== SECTION 02 MOBILE ===== */

@media (max-width: 768px) {

    .problem-section {

        padding: 60px 7%;
    }

    .problem-container {

        display: flex;

        flex-direction: column;
    }

    .problem-header {

        order: 1;
    }

    .problem-image {

        order: 2;

        margin: 15px 0;
    }

    .problem-text {

        order: 3;
    }

    .section-label {

        font-size: 30px;

        letter-spacing: 3px;

        margin-bottom: 12px;
    }

    .problem-header h2 {

        font-size: 18px;

        line-height: 1.1;
    }

    .problem-text p {

        font-size: 15px;

        line-height: 1.75;
    }

    .problem-image img {

        width: 100%;

        border-radius: 12px;
    }
}/* ==================================
   SECTION 03
   WHAT IS EPISTOISM
================================== */

.epistoism-section {

    padding: 120px 10%;

    background: #ffffff;

}

.epistoism-container {

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 90px;

}

.epistoism-image {

    flex: 0 0 28%;

}

.epistoism-image img {

    width: 100%;

    display: block;

    border-radius: 12px;

}

.epistoism-content {

    flex: 1;

}

.epistoism-label {

    font-size: 56px;

    letter-spacing: 6px;

    color: #C49A57;

    line-height: 1.05;

    margin-bottom: 25px;

}

.epistoism-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 50px;

    font-weight: 600;

    color: #353535;

    margin-bottom: 40px;

}

.epistoism-content p {

    font-size: 17px;

    line-height: 1.8;

    color: #4A4A4A;

    margin-bottom: 22px;

    max-width: 720px;

}

.epistoism-highlight {

    margin-top: 45px;

    font-size: 18px;

    line-height: 1.8;

    color: #353535;

    font-weight: 500;

}
/* ===== SECTION 03 MOBILE ===== */

@media (max-width: 768px) {

    .epistoism-section {

        padding: 120px 10%;
    }

    .epistoism-container {

        flex-direction: column;

        align-items: center;

        gap: 35px;

        text-align: left;
    }

    .epistoism-image {

        width: 100%;

        max-width: 320px;
    }

    .epistoism-content {

    width: 100%;

    max-width: 380px;

    margin: 0 auto;

  }
    

    .epistoism-label {

        font-size: 30px;

        letter-spacing: 4px;

        margin-bottom: 18px;
         text-align: center;
    }

    .epistoism-content h2 {

        font-size: 35px;

        margin-bottom: 25px;
        text-align: center;
    }

    .epistoism-content p {

    font-size: 15px;

    line-height: 1.8;

    max-width: 100%;

    text-align: left;

    padding-left: 12px;

    padding-right: 12px;
}

    .epistoism-highlight {

        font-size: 16px;

        line-height: 1.8;
    }

}


/* ==================================
   SECTION 04 — TETRAS
================================== */

.tetras-section {

    padding: 140px 8%;

    background: #FCFBF8;

}

.tetras-intro {

    text-align: center;

    max-width: 900px;

    margin: 0 auto 90px;

}

.tetras-label {

    font-size: 54px;

    font-weight: 400;

    letter-spacing: 8px;

    color: #C49A56;

    margin-bottom: 25px;

}

.tetras-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 56px;

    font-weight: 600;

    color: #353535;

    margin-bottom: 25px;

}

.tetras-kicker {

    font-size: 18px;

    color: #666;

}

.tetras-grid {

    display: grid;

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

    gap: 30px;

    max-width: 1500px;

    margin: 0 auto;

}

.tetras-card {

    background: #ffffff;

    border: 1px solid #D9BC8A;

    border-radius: 12px;

    padding: 38px 28px;

    text-align: center;

    box-shadow: 0 8px 24px rgba(0,0,0,0.04);

    transition: all 0.3s ease;

}

.tetras-card:hover {

    transform: translateY(-6px);

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

}

.tetras-card img {

    width: 110px;

    height: 110px;

    object-fit: contain;

    margin-bottom: 22px;

}

.card-label {

    font-size: 18px;

    letter-spacing: 4px;

    color: #C49A56;

    margin-bottom: 18px;

}

.tetras-card h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 38px;

    font-weight: 600;

    color: #353535;

    margin-bottom: 20px;

}

.tetras-card p {

    font-size: 17px;

    line-height: 1.8;

    color: #4A4A4A;

    margin: 0;

}
/* ===== TETRAS MOBILE ===== */

@media (max-width: 768px) {

    .tetras-section {

        padding: 90px 7%;

    }

    .tetras-intro {

        margin-bottom: 45px;

    }

    .tetras-label {

        font-size: 22px;

        letter-spacing: 2px;

        line-height: 1.4;

        margin-bottom: 16px;

    }

    .tetras-title {

        font-size: 30px;

        margin-bottom: 14px;

    }

    .tetras-kicker {

        font-size: 15px;

    }

    .tetras-grid {

        grid-template-columns: 1fr;

        gap: 22px;

    }

    .tetras-card {

        padding: 32px 22px;

    }

    .tetras-card img {

        width: 90px;

        height: 90px;

        margin-bottom: 18px;

    }

    .card-label {

        font-size: 16px;

        letter-spacing: 3px;

    }

    .tetras-card h3 {

        font-size: 30px;

        margin-bottom: 18px;

    }

    .tetras-card p {

        font-size: 17px;

        line-height: 1.7;

    }

}
/* ===== SECTION 05 GALLERY ===== */

.gallery-section {

padding: 90px 7% 120px; 

background: #ffffff;


}

.gallery-header {


max-width: 850px;

margin: 0 auto 60px;

text-align: center;


}

.gallery-label {


font-family: 'Inter', sans-serif;

font-size: 56px;

font-weight: 300;

letter-spacing: 8px;

text-transform: uppercase;

color: #c79b4f;

margin-bottom: 35px;


}

.gallery-header h2 {


font-family: 'Cormorant Garamond', serif;

font-size: 50px;

font-weight: 500;

color: #2d2d2d;

margin-bottom: 30px;


}

.gallery-description {


font-family: 'Inter', sans-serif;

font-size: 17px;

line-height: 1.8;

color: #555;


}

/* ===== SWIPER ===== */

.philosophy-swiper {

    overflow: hidden;
}
 {


position: relative;

overflow: visible;


}

.swiper {


overflow: visible;


}

.swiper-wrapper {


align-items: stretch;


}

.gallery-slide 
{

cursor: pointer;

border-radius: 18px;

overflow: hidden;

transition: transform 0.35s ease;


}

.gallery-slide:hover {


transform: translateY(-10px);


}

.gallery-slide img 
{

width: 100%;

display: block;

border-radius: 18px;


}

/* ===== ARROWS ===== */

.gallery-prev,
.gallery-next {


position: absolute;

top: 50%;

transform: translateY(-50%);

width: 52px;

height: 52px;

border-radius: 50%;

background: rgba(255,255,255,0.95);

box-shadow: 0 4px 18px rgba(0,0,0,0.08);

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

z-index: 20;

font-size: 26px;

transition: 0.3s ease;


}

.gallery-prev:hover,
.gallery-next:hover {


transform: translateY(-50%) scale(1.08);


}

.gallery-prev {


left: -10px;


}

.gallery-next {


right: -10px;


}

/* ===== HINT ===== */

.gallery-hint {


text-align: center;

margin-top: 30px;

font-size: 13px;

color: #888;


}

/* ===== BUTTON ===== */

.gallery-button-wrapper {


text-align: center;

margin-top: 50px;


}

/* ===== LIGHTBOX ===== */

.lightbox {


position: fixed;

inset: 0;

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

display: none;

justify-content: center;

align-items: center;

flex-direction: column;

z-index: 9999;


}

.lightbox.active {


display: flex;


}

.lightbox-image {

```
max-width: 90%;

max-height: 80vh;

border-radius: 12px;


}

.lightbox-title {


color: #ffffff;

font-family: 'Cormorant Garamond', serif;

font-size: 24px;

margin-top: 24px;

text-align: center;


}

.close-lightbox {

```
position: absolute;

top: 30px;

right: 40px;

font-size: 52px;

color: white;

cursor: pointer;


}

/* ===== MOBILE ===== */

@media (max-width: 768px) {


 {.gallery-section

    padding: 70px 5%;
}

.gallery-label {

    font-size: 30px;

    letter-spacing: 4px;
}

.gallery-header h2 {

    font-size: 18px;
}

.gallery-description {

    font-size: 15px;
}

.gallery-prev,
.gallery-next {

    display: none;
}

.lightbox-title {

    font-size: 18px;

    padding: 0 20px;
}


}
/* ===== SECTION 06 JOIN THE JOURNEY ===== */

.journey-section {

    padding: 90px 7% 120px; 

    background: #f7f6f2;

    text-align: center;
}

.journey-header {

    max-width: 850px;

    margin: 0 auto 60px;
}

.journey-label {

    font-family: 'Inter', sans-serif;

    font-size: 56px;

    font-weight: 300;

    letter-spacing: 8px;

    text-transform: uppercase;

    color: #c79b4f;

    margin-bottom: 35px;
}

.journey-header h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 50px;

    font-weight: 500;

    color: #2d2d2d;

    margin-bottom: 30px;
}

.journey-description {

    font-family: 'Inter', sans-serif;

    font-size: 17px;

    line-height: 1.3;

    color: #555;
}

/* верхний ряд */

.journey-buttons-top {

    display: flex;

    justify-content: center;

    gap: 30px;

    margin-bottom: 30px;
}

/* нижний ряд */

.journey-buttons-bottom {

    display: flex;

    flex-direction: column;

    align-items: center;
}

.journey-buttons-bottom .btn {

    margin-bottom: 20px;
}

.journey-note {

    max-width: 700px;

    font-size: 15px;

    line-height: 1.8;

    color: #777;

    font-style: italic;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

    .journey-section {

        padding: 70px 5%;
    }

    .journey-label {

        font-size: 30px;

        letter-spacing: 4px;
    }

    .journey-header h2 {

        font-size: 18px;
    }

    .journey-description {

        font-size: 15px;
    }

    .journey-buttons-top {

        flex-direction: column;

        align-items: center;
    }

    .journey-buttons-top .btn,
    .journey-buttons-bottom .btn {

        width: 100%;

        max-width: 320px;
    }

    .journey-note {

        font-size: 14px;
    }

}/* ===== SECTION 07 CONTACT ===== */

.contact-section {


padding: 100px 7%;

background: #ffffff;

text-align: center;

}

.contact-header h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 54px;

    font-weight: 500;

    color: #2d2d2d;

    margin-bottom: 35px;
}

.contact-label {


font-family: 'Inter', sans-serif;

font-size: 56px;

font-weight: 300;

letter-spacing: 8px;

text-transform: uppercase;

color: #c79b4f;

margin-bottom: 35px;

}

.contact-header h2 {

font-family: 'Cormorant Garamond', serif;

font-size: 50px;

font-weight: 500;

color: #2d2d2d;

margin-bottom: 30px;

}

.contact-description {

font-size: 17px;

line-height: 1.8;

color: #555;

margin-bottom: 35px;

}

.contact-email {

margin-bottom: 35px;

}

.contact-email a {

font-size: 18px;

color: #c79b4f;

text-decoration: none;

transition: 0.3s;

}

.contact-email a:hover {

opacity: 0.75;

}

.contact-links {

display: flex;

justify-content: center;

align-items: center;

gap: 16px;

font-size: 15px;

}

.contact-links a {

color: #555;
text-decoration: none;

transition: 0.3s;


}

.contact-links a:hover {


color: #c79b4f;


}

/* ===== CONTACT MOBILE ===== */

@media (max-width: 768px) {


.contact-section {

    padding: 60px 5%;
}

.contact-label {

    font-size: 30px;

    letter-spacing: 4px;
}

.contact-header h2 {

    font-size: 18px;
}

.contact-description {

    font-size: 15px;
}

.contact-email a {

    font-size: 16px;
}


}/* ===== FOOTER ===== */

.site-footer {

    background: #23201d;

    padding: 45px 20px;

    text-align: center;
}

.footer-copyright {

    font-family: 'Inter', sans-serif;

    font-size: 15px;

    color: #c79b4f;

    letter-spacing: 1px;

    margin-bottom: 18px;
}

.footer-top {

    font-family: 'Inter', sans-serif;

    font-size: 14px;

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

    text-decoration: none;

    transition: 0.3s;
}

.footer-top:hover {

    color: #c79b4f;
}
/* ========================= */
/* STICKY NAVIGATION */
/* ========================= */

.site-nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 72px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 50px;

    background: rgba(255,255,255,0.75);

    backdrop-filter: blur(14px);

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

    border-bottom: 1px solid rgba(0,0,0,0.05);

    z-index: 9999;

    box-sizing: border-box;
}

.nav-logo {

    font-family: 'Inter', sans-serif;

    font-size: 15px;

    letter-spacing: 6px;

    color: #c79b4f;

    font-weight: 500;
}

.nav-links {

    display: flex;

    gap: 35px;
}

.nav-links a {

    text-decoration: none;

    color: #3A3A3A;

    font-family: 'Inter', sans-serif;

    font-size: 17px;

    transition: .3s;
}

.nav-links a:hover {

    color: #c79b4f;
}


/* якоря */

#about,
#tetras,
#gallery,
#journey,
#contact {

    scroll-margin-top: 100px;
}

/* мобильная версия */

@media (max-width:768px) {

    .site-nav {

        padding: 0 24px;
    }

   
    .nav-links {

        position: fixed;

        top: 72px;

        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        align-items: center;

        gap: 25px;

        padding: 30px 0;

        background: rgba(255,255,255,0.97);

        backdrop-filter: blur(14px);

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

        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

   
/* MOBILE MENU */

@media (max-width:768px) {

    .site-nav {

        position: relative;

        height: auto;

        padding: 12px 15px;

        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .nav-logo {

        font-size: 12px;

        letter-spacing: 4px;

        margin-bottom: 8px;
    }

    .nav-links {

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

        gap: 8px;

        width: 100%;
         margin-bottom: 12px
    }

    .nav-links a {

        font-size: 13px;

        white-space: nowrap;
    }

    .brand {

        display: none;
    }

}