/* ===== CSS VARIABLES ===== */
:root {
   /* Colors */
   /* --bg-color: #F6F4F2; */
   --bg-color: rgb(246, 244, 242);
   --text-color: #111211;
   --accent-color: #F97B40;
   --secondary-color: #8D9092;

   /* Layout */
   --nav-height: 70px;
   --nav-z-index: 1000;
   --burger-size: 30px;
}

/* ===== BASE STYLES ===== */
html {
   background-color: var(--bg-color);
}

body {
   overflow-x: hidden;
   margin: 0;
   padding: 0;
   font-family: "Roboto Flex", sans-serif;
   background-color: var(--bg-color);
}

/* ===== TYPOGRAPHY ===== */
.roboto-flex-uniquifier {
   font-family: "Roboto Flex", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;
   font-style: normal;
   font-variation-settings:
       "slnt" 0,
       "wdth" 151,
       "GRAD" 150,
       "XOPQ" 88,
       "XTRA" 468,
       "YOPQ" 79,
       "YTAS" 750,
       "YTDE" -203,
       "YTFI" 738,
       "YTLC" 514,
       "YTUC" 712;
}

h1 {
   font-size: 5vmax;
   position: absolute;
   bottom: 60px;
   padding-right: 60%;
   margin: 0 20px;
   color: var(--text-color);
}

h2 {
   font-size: 60px;
   font-weight: 300;
   margin: 20px;
   color: var(--text-color);
   position: relative;
   z-index: 10;
}

.orange-text {
   color: var(--accent-color);
   font-size: 30px;
   font-family: "Roboto Flex", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;
   font-style: normal;
   font-variation-settings:
       "slnt" 0,
       "wdth" 151,
       "GRAD" 150,
       "XOPQ" 88,
       "XTRA" 468,
       "YOPQ" 79,
       "YTAS" 750,
       "YTDE" -203,
       "YTFI" 738,
       "YTLC" 514,
       "YTUC" 712;
}

/* ===== LAYOUT CONTAINERS ===== */
.container {
   width: 100%;
   height: 100vh;
   padding-top: var(--nav-height);
   position: relative;
   overflow: hidden;
   background-color: var(--bg-color);
   border: 1px solid var(--text-color); /* Simple border */
}

.container.black {
   background-color: var(--text-color);
}

.container.black h2 {
   color: var(--bg-color);
   text-align: center;
}

.container header {
   margin-top: calc(-1 * var(--nav-height));
   position: relative;
   z-index: 10;
}

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: transparent;
    z-index: var(--nav-z-index);
}

.nav-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: var(--text-color);
    font-size: 20px;
    text-decoration: none;
    padding: 10px;
    transition: color 0.3s ease;
    font-variation-settings: "wdth" 151, "wght" 700;
}

.nav-links a:hover {
    color: var(--accent-color);
}

/* Burger Menu - Three Horizontal Orange Dots */
.burger-menu {
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* ADJUST DOTS PADDING AND GAPS HERE: */
    width: 80px; /* Total width - increase for more spacing */
    height: 40px; /* Total height */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 0; /* Vertical padding around dots */
    z-index: 1001;
    position: relative;
}

.burger-menu span {
    /* ADJUST DOT SIZE HERE: */
    width: 16px; /* Dot width */
    height: 16px; /* Dot height */
    background-color: var(--accent-color);
    border-radius: 50%;
    transition: all 0.3s ease;
    /* ADJUST SPACE BETWEEN DOTS: */
    /* The space is controlled by the parent width and justify-content: space-between */
}

/* Mobile Menu - Slide in from right with higher z-index */
.nav-links.mobile-active {
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen to the right */
    width: 100%;
    height: 100vh;
    background-color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px; /* Increased gap between menu items */
    padding: 120px 40px 40px 40px; /* Increased top padding */
    transition: right 0.4s ease-in-out; /* Smooth slide animation */
    z-index: 1002; /* Higher than burger menu */
}

.nav-links.mobile-active.show {
    right: 0; /* Slide in to visible position */
}

.nav-links.mobile-active a {
    color: var(--bg-color);
    /* ADJUST MENU TEXT SIZE HERE: */
    font-size: 48px; /* Increased from 36px */
    font-weight: 700;
    padding: 20px 0; /* Increased padding */
    text-align: left;
    width: 100%;
    border-bottom: none;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.4s ease;
    transition-delay: 0.1s;
}

.nav-links.mobile-active.show a {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger animation for menu items */
.nav-links.mobile-active.show a:nth-child(1) { transition-delay: 0.1s; }
.nav-links.mobile-active.show a:nth-child(2) { transition-delay: 0.15s; }
.nav-links.mobile-active.show a:nth-child(3) { transition-delay: 0.2s; }
.nav-links.mobile-active.show a:nth-child(4) { transition-delay: 0.25s; }
.nav-links.mobile-active.show a:nth-child(5) { transition-delay: 0.3s; }

/* Close button in mobile menu - White X only */
.nav-links.mobile-active::before {
    content: '✕';
    position: absolute;
    top: 30px;
    right: 30px;
    color: var(--bg-color);
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1003; /* Higher than menu */
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.nav-links.mobile-active.show::before {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.35s;
}

/* Remove the black X from burger menu when active */
.burger-menu.active::before,
.burger-menu.active::after {
    display: none;
}

/* Adjust breakpoint for when nav transforms to burger menu */
@media (max-width: 1024px) {
    .burger-menu {
        display: flex;
    }

    .nav-links {
        display: none;
    }

    .nav-container {
        padding: 0 15px;
    }
}

/* Keep only these responsive adjustments for mobile menu */
@media (max-width: 768px) {
    .nav-links.mobile-active a {
        font-size: 42px; /* Larger text on tablet */
    }

    .nav-links.mobile-active {
        padding: 110px 30px 30px 30px;
        gap: 35px;
    }

    .nav-links.mobile-active::before {
        top: 25px;
        right: 25px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .nav-links.mobile-active a {
        font-size: 38px; /* Larger text on mobile */
    }

    .nav-links.mobile-active {
        padding: 100px 20px 20px 20px;
        gap: 30px;
    }

    .nav-links.mobile-active::before {
        top: 20px;
        right: 20px;
        font-size: 24px;
    }
}
/* ===== SECTION SPECIFIC STYLES ===== */

/* Home Section */
#home {
   position: relative;
   overflow: hidden;
   display: block;
}

#home canvas {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   z-index: 1 !important;
   width: 100% !important;
   height: 100% !important;
}

#home header {
   position: absolute;
   top: var(--nav-height); /* Position below navigation */
   left: 0;
   width: 100%;
   z-index: 20; /* Higher than canvas */
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   padding: 20px;
}

#home header img {
   width: 45vw;
   max-width: 45%;
   height: auto;
   object-fit: contain;
}

#home h1 {
   font-size: 5vmax;
   position: absolute;
   bottom: calc(30px + var(--sticky-button-height, 80px));
   padding-right: 60%;
   margin: 0 20px;
   color: var(--text-color);
   z-index: 20; /* Higher than canvas */
}

/* Values Section */
#values {
   position: relative;
}

#values canvas {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
}

#values header {
   z-index: 2;
   text-align: center;
   margin-top: 80px;
}

/* Works Section */
#works {
   position: relative;
   overflow: hidden;
}

#works canvas {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
}

#works header {
   z-index: 2;
}

/* Clients Section */
#clients {
   position: relative;
   overflow: hidden;
}

#clients canvas {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
}

#clients header {
   z-index: 2;
}

/* About Section */
#about {
   position: relative;
   overflow: hidden;
}

#about canvas {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
}

#about header {
   z-index: 2;
}

/* Team Section */
.team-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(2, minmax(200px, 1fr));
   gap: 20px;
   padding: 20px;
   width: 100%;
   height: calc(100vh - var(--nav-height) - 40px);
   align-content: center;
   margin-top: -20px;
}

.team-grid figure {
   text-align: center;
   margin: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   height: 100%;
}

.team-grid img {
   width: 100%;
   height: auto;
   max-height: 70%;
   min-height: 150px;
   object-fit: cover;
   border-radius: 200px;
   margin-bottom: 0;
   flex-shrink: 0;
}

.team-text-container {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   padding-top: 10px;
   height: auto;
   min-height: 80px;
   flex-shrink: 0;
}

.team-position {
   font-size: clamp(14px, 1.2vw, 16px);
   font-weight: 800;
   color: var(--text-color);
   margin-bottom: 4px;
   line-height: 1.1;
}

.team-name {
   font-size: clamp(16px, 1.5vw, 20px);
   font-weight: 800;
   color: var(--text-color);
   margin-bottom: 4px;
   line-height: 1;
}

.team-email {
   font-size: clamp(12px, 1vw, 14px);
   font-weight: 700;
   color: var(--secondary-color);
   margin-bottom: 0;
   line-height: 1.1;
}

/* Contacts Section */
#contacts {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   min-height: 100vh;
   padding: 20px 0;
   padding-top: 15vh;
   position: relative;
}

#contacts header {
   text-align: center;
   width: 100%;
   flex-shrink: 0;
   margin-bottom: 40px;
}

#contacts h2 {
   text-align: center;
   color: var(--bg-color);
   margin: 0;
   font-size: 48px;
}

.contact-form-container {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   flex-grow: 0;
   margin-top: 0;
   flex-direction: column;
}

.contact-form {
   width: 100%;
   max-width: 400px;
   display: flex;
   flex-direction: column;
   gap: 15px;
   position: relative;
}

.form-group {
   position: relative;
   width: 100%;
}

.form-group input,
.form-group textarea {
   width: 100%;
   padding: 16px 20px;
   border: 0px solid var(--bg-color);
   border-radius: 50px;
   background: var(--bg-color);
   color: var(--text-color);
   font-family: "Roboto Flex", sans-serif;
   font-size: 16px;
   transition: all 0.3s ease;
   outline: none;
}

.form-group textarea {
   border-radius: 25px;
   resize: none;
   min-height: 100px;
}

.form-group label {
   position: absolute;
   top: 20px;
   left: 20px;
   color: var(--secondary-color);
   font-family: "Roboto Flex", sans-serif;
   font-size: 16px;
   font-weight: 600;
   pointer-events: none;
   transition: all 0.3s ease;
   margin: 0;
   background: transparent;
}

.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
   top: 5px;
   left: 15px;
   font-size: 12px;
   color: var(--secondary-color);
   padding: 0 8px;
}

/* ===== STICKY BUTTON ===== */
.sticky-button-container {
   position: fixed;
   bottom: 0;
   width: 100%;
   text-align: center;
   padding-bottom: 20px;
   z-index: 999;
   transition: all 0.3s ease;
   --sticky-button-height: 80px; /* Default height */
}

.sticky-button-container.sticky-active {
   position: static;
   width: auto;
   padding-bottom: 0;
   margin-top: 20px;
}

.sticky-button-container button {
   background-color: var(--accent-color);
   border: none;
   color: var(--bg-color);
   padding: 20px 40px;
   text-align: center;
   font-size: 40px;
   border-radius: 40px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   font-variation-settings: "wdth" 151, "wght" 700;
   width: auto;
   display: inline-block;
   height: var(--sticky-button-height, 80px);
}

.sticky-button-container button:hover {
   background-color: #e86a30;
}

/* ===== FOOTER ===== */
footer.container {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding-bottom: 20px;
   min-height: 100vh;
   position: relative;
}

.back-to-top {
   position: absolute;
   top: 20px;
   left: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   z-index: 100;
   cursor: pointer;
}

.back-to-top .orange-text {
   font-size: 24px;
   margin: 0;
   transition: color 0.3s ease;
}

.back-to-top:hover .orange-text {
   color: var(--bg-color);
}

.arrow-up {
   width: 20px;
   height: 20px;
   position: relative;
}

.arrow-up::before {
   content: '';
   position: absolute;
   top: 80%;
   left: 50%;
   width: 15px;
   height: 15px;
   border-top: 4px solid var(--accent-color);
   border-right: 4px solid var(--accent-color);
   transform: translate(-50%, -50%) rotate(-45deg);
   transition: border-color 0.3s ease;
}

.back-to-top:hover .arrow-up::before {
   border-color: var(--bg-color);
}

.footer-contacts {
   width: 100%;
   padding: 0 20px;
   margin-bottom: 10px;
}

.footer-contacts p {
   margin: 5px 0;
   text-align: left;
   width: 100%;
}

.footer-link {
   color: var(--accent-color);
   text-decoration: none;
   transition: color 0.3s ease;
}

.footer-link:hover {
   color: var(--bg-color);
}

/* Footer contacts hover effects for "Ждем вас!" */
.footer-contacts p.orange-text:last-child {
   position: relative;
   display: block;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: left;
   /* width: 100%; */
   padding-left: 0;
   margin-left: 0;
}

.footer-contacts p.orange-text:last-child:hover {
   color: var(--bg-color) !important;
   padding-left: 30px; /* Create space for the heart on the left */
}

/* Heart icons */
.footer-contacts p.orange-text:last-child::before,
.footer-contacts p.orange-text:last-child::after {
   content: '❤';
   color: var(--accent-color);
   font-size: 20px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
   /* transition: all 0.0s ease; */
}

.footer-contacts p.orange-text:last-child::before {
   left: 0;
}

.footer-contacts p.orange-text:last-child::after {
   right: -25px;
}

.footer-contacts p.orange-text:last-child:hover::before {
   opacity: 1;
   color: var(--bg-color);
   left: 0;
}

.footer-contacts p.orange-text:last-child:hover::after {
   opacity: 1;
   color: var(--bg-color);
   right: -25px;
}

.footer-logo {
   width: 100%;
   padding: 0 20px;
}

.footer-logo img {
   width: 100%;
   height: auto;
   display: block;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1200px) {
   .team-grid {
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(4, minmax(180px, 1fr));
   }
}

/* Mobile */
@media (max-width: 768px) {
   .burger-menu {
       display: flex;
   }

   .nav-links {
       display: none;
   }

   #home header img {
       width: 40vw;
       max-width: 40%;
   }

   .team-grid {
       grid-template-columns: 1fr;
       grid-template-rows: repeat(8, minmax(150px, 1fr));
       height: calc(100vh - var(--nav-height) - 30px);
   }

   .sticky-button-container button {
       font-size: 32px;
       padding: 15px 30px;
   }

   footer.container {
       padding-bottom: 30px;
   }

   .footer-contacts,
   .footer-logo {
       padding: 0 15px;
   }

   .footer-contacts p {
       font-size: 24px;
   }

   .back-to-top {
       top: 15px;
       left: 15px;
   }

   .back-to-top .orange-text {
       font-size: 20px;
   }

   /* Mobile responsiveness for hearts */
   .footer-contacts p.orange-text:last-child::before,
   .footer-contacts p.orange-text:last-child::after {
       font-size: 18px;
   }

   .footer-contacts p.orange-text:last-child:hover {
       padding-left: 25px;
   }

   .footer-contacts p.orange-text:last-child::after {
       right: -20px;
   }

   :root {
       --nav-height: 60px;
   }
}

/* Small Mobile */
@media (max-width: 480px) {
   #home header img {
       width: 50vw;
       max-width: 50%;
   }

   .team-grid {
       height: calc(100vh - var(--nav-height) - 20px);
       gap: 15px;
   }

   #contacts {
       padding-top: 8vh;
   }

   .sticky-button-container button {
       font-size: 28px;
       padding: 12px 25px;
   }

   footer.container {
       padding-bottom: 20px;
   }

   .footer-contacts,
   .footer-logo {
       padding: 0 10px;
   }

   .footer-contacts p {
       font-size: 20px;
   }

   .back-to-top {
       top: 10px;
       left: 10px;
   }

   .back-to-top .orange-text {
       font-size: 18px;
   }

   .arrow-up {
       width: 16px;
       height: 16px;
   }

   .arrow-up::before {
       width: 10px;
       height: 10px;
   }

   /* Small mobile responsiveness for hearts */
   .footer-contacts p.orange-text:last-child::before,
   .footer-contacts p.orange-text:last-child::after {
       font-size: 16px;
   }

   .footer-contacts p.orange-text:last-child:hover {
       padding-left: 22px;
   }

   .footer-contacts p.orange-text:last-child::after {
       right: -18px;
   }
}