body, html {
     overflow-x: hidden !important;
     overscroll-behavior: none;
     margin: 0 auto;
     padding: 0;
     height: 100%;
     font-family: 'Press Start 2P', monospace;
     background: url('assets/phone.webp') no-repeat center center fixed;
     background-size: cover;
     user-select: none;
     color: #ffffff;
     scroll-behavior: smooth;
}
 .background-overlay {
     background-color: rgba(0, 0, 0, 0.65);
     display: flex;
     box-sizing: border-box;
     min-height: 100vh;
     overflow-x: hidden;
}
 .menu {
     width: 200px;
     padding: 2rem 1.5rem;
     background-color: rgba(0, 0, 0, 0.85);
     border-right: 1px solid #444;
     box-sizing: border-box;
     display: flex;
     height: 100vh;
     position: fixed;
     z-index: 99;
}
 .menu ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     padding: 0;
     margin: 0;
}
 .menu li {
     position: relative;
     cursor: pointer;
     margin-bottom: 2.5rem;
     color: #ccc;
     transition: all 0.3s ease, transform 0.2 ease;
}
 .menu li::before {
     content: '';
     position: absolute;
     left: -12px;
     top: 50%;
     transform: translateY(-50%);
     height: 1.2rem;
     width: 3px;
     background: #00ffd5;
     opacity: 0;
     transition: opacity 0.3s;
     border-radius: 2px;
}
 .menu li.hover {
     color: #00ffd5;
     transform: scale(1.05);
     animation: glow 1.2s infinite;
}
 .menu li.hover:before {
     opacity: 1;
     background-color: #00fff7;
}
 .menu li.active {
     color: #ff6ec7;
     border-left: 3px solid #ff6ec7;
     padding-left: 0.7rem;
     transition: all 0.6s ease;
     animation: glowActive 1.2s infinite;
}
 .arrow-list li {
     margin-bottom: 0.6rem;
     line-height: 1.6;
     padding-left: 0.6rem;
}
 .content {
     position: relative;
     flex: 1;
     max-width: 1500px;
     padding: 0 4rem;
     margin-left: 120px;
     overflow-y: visible;
}
 .centered-logo {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100vh;
     text-align: center;
}
 .page-header {
     display: none;
     margin-top: 3rem;
     text-align: center;
}
 .page-header.show {
     display: block;
}
 .logo {
     font-size: 4rem;
     font-family: 'Great Vibes', cursive;
     text-align: center;
}
 .slogan {
     font-size: 2.5rem;
     color: #ccc;
     margin-top: 1.5rem;
     font-family: 'Playfair Display', serif;
     padding-left: 1rem;
     text-align: center;
     opacity: 0;
     animation: fadeUp 1.2s ease-out 0.5s forwards;
     min-height: 3.5rem;
}
 .fixed-header {
     display: none;
     flex-direction: row;
     height: 70px;
     background-color: rgba(0, 0, 0, 0.85);
     border-bottom: 1px solid #444;
     box-sizing: border-box;
     z-index: 100;
     align-items: center;
     position: fixed;
     top: 0;
     justify-content: space-between;
     right: 0;
     left: 200px;
}
 .top-bar {
     flex: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 1.5rem;
}
 .fixed-header .logo-small {
     font-size: 1.4rem;
     font-family: 'Great Vibes', cursive;
     color: #fff;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .fixed-header .slogan-small {
     font-size: 1rem;
     color: #aaa;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-family: 'Playfair Display', cursive;
     max-width: 55%;
     text-align: center;
}
 @keyframes fadeUp {
     0% {
         opacity: 0;
         transform: translateY(20px);
    }
     100% {
         opacity: 1;
         transform: translateY(0);
    }
}
 @keyframes glow {
     0%, 100% {
         color: #00ffd5;
         text-shadow: 0 0 4px #00ffd5;
    }
     50% {
         color: #66fff7;
         text-shadow: 0 0 7px #66fff7;
    }
}
 @keyframes glowActive {
     0%, 100% {
         color: #ff6ec7;
         text-shadow: 0 0 4px #ff6ec7;
    }
     50% {
         color: #ff99dd;
         text-shadow: 0 0 10px #ff99dd;
    }
}
 @keyframes fadeSlideIn {
     from {
         opacity: 0;
         transform: translateY(30px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 @keyframes shake {
     0% {
         transform: translateX(0);
    }
     25% {
         transform: translateX(-4px);
    }
     50% {
         transform: translateX(4px);
    }
     75% {
         transform: translateX(-2px);
    }
     100% {
         transform: translateX(0);
    }
}
 @keyframes rippleIn {
     0% {
         opacity: 0;
         transform: scale(0.98) translateY(20px);
         filter: blur(2px);
    }
     50% {
         opacity: 0.5;
         transform: scale(1.02);
         filter: blur(1px);
    }
     100% {
         opacity: 1;
         transform: scale(1) translateY(0);
         filter: blur(0);
    }
}
 .shake {
     animation: shake 0.5s;
}
 .section {
     position: relative;
     right: 0;
     padding: 3rem;
     opacity: 0;
     left:1px;
     transform: translateY(30px);
     transition: all 0.6s ease;
     z-index: 1;
     display:none;
     box-sizing: border-box;
     margin-top: 20px;
     margin-bottom: 5rem;
     padding-bottom: 5rem;
     font-family: 'JetBrains Mono', monospace;
    /* font-family: 'IBM Plex Mono', monospace !important;
     */
}
 .section h2::after {
     content: "";
     display: block;
     width: 60%;
     height: 1px;
     background: linear-gradient(to right, transparent, #aaa, transparent);
     margin: 2rem auto 0;
}
 .section h2 {
     font-family: 'EB Garamond', cursive !important;
     text-align: center;
     font-size: 2rem;
}
 .section h3 {
     font-family: 'EB Garamond', cursive !important;
     z-index: 2;
     text-align: center;
     font-size: 1.5rem;
     line-height: 1.6;
     text-shadow: 1px 1px 6px rgba(168, 242, 255, 0.8);
}
 .section h4 {
     font-family: 'EB Garamond',cursive !important;
     z-index: 2;
     text-align: center;
     font-size: 1.5rem;
     line-height: 1.6;
     border-bottom: 2px solid #ff6ec7;
     box-shadow: 0 2px 8px rgba(255, 110, 199, 0.4);
}
 .section.show {
     opacity: 1;
     transform: translateY(0);
     display: block;
     animation: rippleIn 0.8s ease-out;
}
 .arrow-list {
     list-style: none;
     padding-left: 1em;
     margin-left: 1.5em;
     border-left: 2px solid rgba(255, 110, 199, 0.4);
     gap: 0.8rem;
}
 .arrow-list li::before {
     content: "➜";
     color: #ccc;
     font-size: 1.1em;
     margin-left: -1em;
     display: inline-block;
     width: 1em;
     border-radius: 8px;
     color: #ff6ec7;
    /* неоновый розовый */
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 .quote {
     margin-top: 3em;
     margin-bottom: 3em;
     box-shadow: 0 5px 8px rgba(255, 255, 199, 0.4), 0 0 20px rgba(255, 255, 199, 0.4);
     padding: 1.5rem;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 225, 196, 0.4);
     border-radius: 10px;
     font-style: italic;
     line-height: 1.6;
}
 .cta-final {
     margin-top: 3em;
     margin-bottom: 2em;
     text-align: center;
     font-size: 1.6em;
     font-weight: 500;
     text-align: center;
     display: inline-block;
     border-bottom: 0.5px solid #ffffff;
     padding-bottom: 20px;
}
 .partners-text {
     max-width: 900px;
     margin: 2rem auto;
     padding: 1.5rem 2rem;
     background: rgba(0, 0, 0, 0.4);
     border: 1px solid rgba(110, 255, 238, 0.5);
     border-radius: 12px;
     box-shadow: 0 0 12px rgba(110, 243, 255, 0.4);
     font-size: 1.2rem;
     line-height: 1.8;
     text-align: center;
}
 .info-card {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 1.5rem;
     border-radius: 10px;
     margin-bottom: 2rem;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .info-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
 #services {
     padding: 3rem 0;
     cursor: default;
}
 .services-intro {
     font-size: 1.1rem;
     margin-bottom: 2rem;
     text-align: center;
     justify-content: center;
     display: flex;
}
 .services-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 2rem;
     padding: 0 11rem;
}
 .service-card {
     background-color: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 1rem;
     border-radius: 10px;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     max-width: 400px;
     min-height: 300px;
}
 .service-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
 .service-card h3 {
     margin-top: 0;
     margin-bottom: 0.8rem;
     font-size: 1.2rem;
     color: #ffffff;
}
 .service-card ul {
     list-style: none;
     padding-left: 0;
}
 .service-card ul li::before {
     content: "– ";
     color: #999;
}
 .service-card ul li {
     margin-bottom: 0.5em;
     line-height: 1.5;
}
 .contacts-section {
     flex-direction: column;
     align-items: flex-start;
}
 .contact-invite {
     font-size: 1.4rem;
     margin-bottom: 1.5rem;
}
 .contact-email a {
     font-size: 1.9rem;
     color: #ffffff;
     text-decoration: none;
     border-bottom: 1px dashed #ffffff;
     transition: all 0.3s;
}
 .contact-email a:hover {
     color: #ff66cc;
     border-bottom: 1px solid #ff66cc;
}
 .hidden-title {
     position: absolute;
     left: -9999px;
     top: -9999px;
     visibility: hidden;
}
 .contact-button {
     font-size: 1.9rem;
     color: #ffffff;
     text-decoration: none;
     border-bottom: 1px dashed #ffffff;
     transition: all 0.3s;
}
 .contact-button:hover {
     color: #ff66cc;
     border-bottom: 1px solid #ff66cc;
}
 @media (max-width: 768px) {
     body, html {
         overflow-x: hidden;
    }
     .menu {
         position: fixed;
         top: 0;
         left: 0;
         padding: 5px 0;
         width: 100%;
         height: auto;
         flex-direction: row;
         justify-content: space-around;
         padding: 1rem 0;
         background: rgba(0, 0, 0, 0.9);
         border-bottom: 1px solid #444;
         z-index: 1000;
    }
     .menu ul {
         flex-direction: row;
         display: flex;
         justify-content: space-between;
         gap: 15px;
         padding: 0 10px;
    }
     .menu li {
         margin: 0;
         font-size: 8px;
         padding: 0;
    }
     .background-overlay {
         flex-direction: column;
    }
     .section {
         margin-left: 0;
         padding: 20px;
         text-align: center;
    }
     .content {
         margin-left: 0;
         padding: 1rem;
         padding-top: 5rem;
    }
     .section p {
         font-size: 0.9rem;
         line-height: 1.4;
    }
     .section h2 {
         font-size: 1.4rem;
    }
     .fixed-header {
         margin-top: 2.9rem;
         flex-direction: row;
         height: auto;
         padding: 5px 10px;
         text-align: center;
         width: 100%;
         left: 0;
         justify-content: space-between;
         font-size: 1rem;
    }
     .fixed-header .logo-small {
         order: 2;
    }
     .fixed-header .slogan-small {
         order: 1;
         border-bottom: solid #444;
         font-size: 0.9rem;
    }
     .arrow-list {
         text-align: left !important;
         padding-left: 1.5rem;
    }
     .top-bar {
         flex-direction: column;
         gap: 1rem;
    }
     #services {
         padding: 1rem 0 !important;
    }
     .services-grid {
         display: flex;
         flex-direction: column;
         align-items: center !important;
         padding: 0 1rem;
    }
     .service-card {
         width: 100%;
         max-width: 320px;
         text-align: left;
    }
     .service-card h3, .service-card ul {
         text-align: left;
    }
     .services-intro {
         text-align: center !important;
         margin: 0 auto 2rem auto !important;
         line-height: 1.6 !important;
         padding-left: 0 !important;
         left: 0 !important;
         font-size: 1rem;
         margin-bottom: 0;
    }
     .contact-email a {
         font-size: 1.29rem;
         display: block;
    }
}
 @media (min-width: 769px) and (max-width: 1000px) {
     .services-grid {
         max-width: 800px;
         margin: 0 auto;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 1.5rem;
         padding: 0 2.6rem;
    }
}