:root {
--white: #ffffff;
--body: #f8f9fd;
--bg: #0f1114;
--panel: #1b2c43;
--muted: #b1b1b1;
--text: #e6eef6;
--card: #ffffff;
--glass: #15161a;
--accent: #1e90ff;
--accent-2: #8b5cf6;

--radius: 10px;
--gap: 1rem;
--container: min(1100px, 92%);
--shadow: 0 6px 20px #0006;
--transition: 250ms cubic-bezier(0.22, 0.9, 0.33, 1);
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial;
}
.theme-light {
--white: #ffffff;
--body: #f8f9fd;
--bg: #0f1114;
--panel: #1b2c43;
--muted: #b1b1b1;
--text: #e6eef6;
--card: #ffffff;
--glass: #15161a;
--accent: #1e90ff;
--accent-2: #8b5cf6;

--radius: 10px;
--gap: 1rem;
--container: min(1100px, 92%);
--shadow: 0 6px 20px #0006;
--transition: 250ms cubic-bezier(0.22, 0.9, 0.33, 1);
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial;
}
.theme-dark {
--body: #211f25;
--bg: #082d5;
--panel: #211f25;
--card: #ffffff;
--text: #ebebeb;
--glass: #15161a;
--shadow: 0 1px 6px 7px #89898966;
}

/* переопределение темы */
.theme-btn {
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--white);
    padding: 7px;
    border-radius: 50%;
    background: #1b2c43cf;
}

.theme-btn:hover {
    transform: rotate(15deg);
}
.theme-toggle{
    position: absolute;
    right: -50px;
}
.theme-dark .site-header{
    background: var(--panel);
}

/* колористика */
.theme-dark .categories h2,
.theme-dark .clients h2,
.theme-dark .main-nav a,
.theme-dark .categories-grid .category,
.theme-dark .goods h1,
.theme-dark .muted.description,
.theme-dark .category-section h2,
.theme-dark .our-services .page-title,
.theme-dark .our-service-block:nth-child(odd) h2,
.theme-dark .our-service-content,
.theme-dark .about h1,
.theme-dark .about p,
.theme-dark .gos h1,
.theme-dark .gos p,
.theme-dark .serts h1,
.theme-dark .serts h1,
.theme-dark .contact-wrap .links h1,
.theme-dark .contact-wrap .links a,
.theme-dark .swiper-wrapper h4
{
    color: var(--text);
}
.theme-dark .dropdown a{
    color: var(--glass);
}
/* фон */
.theme-dark .index-page .hero{
    background-color: #202227;
}
.theme-dark .text-abs-full{
    opacity: 0.03;
}
/* отступы */
.theme-dark .categories-grid--page.page-section{
    margin-top: 0;
}
.theme-dark .our-service-block:nth-child(odd){
    padding-bottom: 5rem;
}
.theme-dark .adv-grid{
    gap: 2rem
}

/* borders */
.theme-dark .our-service-block,
.theme-dark .page-section.contact
{
    border-bottom: 2px solid #ffffff14;
}
.theme-dark .page-section.photos{
    border-bottom: 2px solid #ffffff14;
    border-top: 2px solid #ffffff14;
}

/* Картинки */

.theme-dark .about-photo{
    background: var(--card);
    padding: 3rem;
    border-radius: 12px;
}


/* ============= BASE ============= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
body {
margin: 0;
background: var(--body);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
line-height: 1.4;
overflow-x: hidden;
}
li {
list-style: none;
}
ol{
padding-left: 2rem;
}
a {
text-decoration: none;
color: var(--text);
}
h1 {
font-size: 3em;
line-height: 100%;
margin-bottom: 1rem;
color: var(--text);
}
h2 {
font-size: 2.8em;
line-height: 100%;
margin-bottom: 1rem;
}
h3 {
font-size: 25px;
line-height: 100%;
margin-bottom: 1rem;
}
h4 {
font-size: 22px;
line-height: 100%;
margin-bottom: 1rem;
}
p {
font-size: 17px;
}
form .textarea-choose{
min-height: 56px;
height: auto !important;
max-height: 100px;
}
#razrabotka,
#service,
#sborka {
scroll-margin-top: 250px; /* высота шапки */
}
.container.goods {
margin-top: 8rem;
}
.goods h1 {
color: var(--glass);
}
.goods p {
font-size: 16px;
color: var(--muted);
}
.page-section {
margin: 2rem 0;
padding: 2rem 0;
padding-top: 5rem;
}
.come-back-products {
border-bottom: 1px solid;
width: fit-content;
color: var(--accent);
}
.muted.description {
color: var(--glass);
}
.container {
width: var(--container);
margin: 0 auto;
position: relative;
max-width: 1300px;
width: 90%;
}
.from-me {
font-size: 12px;
color: var(--muted);
font-weight: 300;
letter-spacing: 3px;
}
/* mark */
.mark {
background: #6cc3ffc2;
padding: 0 2px;
}
/* scroll */
.scroll-top {
position: fixed;
right: 2rem;
bottom: 2rem;
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
border: none;
font-size: 1.5rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 100;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.scroll-top:hover {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
transform: scale(1.05);
}

.scroll-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* text-abs-left and right */
.text-abs{
position: absolute;
width: 100%;
left: -5rem;
top: -6.5rem;
z-index: -1;
padding-top: 0.028em;
font-weight: 700;
font-size: 10.5em;
line-height: 100%;
letter-spacing: -0.055em;
color: #94a4bc8a;
opacity: .1;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
}
.text-abs-left {
margin-right: 43%;
}
.text-abs-full{
position: absolute;
bottom: -5rem;
left: 50%;
transform: translate(-50%);
font-size: 14rem;
z-index: -1;
font-weight: 700;
letter-spacing: -0.055em;
line-height: 100%;
color: #e2e8ea;
opacity: 0.2;
pointer-events: none;
}
/* ============== map =============== */

.map-section {
text-align: center;
flex: 1;
}

.section-title {
font-size: 1.8rem;
color: var(--text);
margin-bottom: 1.5rem;
}

.map-container {
position: relative;
overflow: hidden;
border-radius: 14px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.map-container iframe {
width: 100%;
height: 450px;
border: none;
filter: brightness(0.85) contrast(1.05);
transition: filter 0.4s ease;
border-radius: 10px;
}

.map-container:hover iframe {
filter: brightness(1) contrast(1.1);
}

.map-address {
position: absolute;
top: 70px;
right: 70px;
background: rgb(4 6 8 / 65%);
padding: 1rem 1.25rem;
border-radius: 12px;
color: var(--text);
text-align: left;
max-width: 320px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.map-address h3 {
font-size: 1rem;
margin-bottom: 0.3rem;
font-weight: 600;
}

.map-address p {
font-size: 0.9rem;
line-height: 1.3;
opacity: 0.9;
}
.right-section {
display: flex;
justify-content: space-between;
gap: 6rem;
align-items: flex-start;
flex-direction: row-reverse;
}

[data-animate="fadeInUp"],
.fade-in-up {
opacity: 0;
transform: translate3d(0, 15%, 0);
}

/* Когда элемент попадает в зону видимости */
.animate-visible {
animation: fadeInUp 1s ease forwards;
}

/* COMMON */

/* ============= HEADER ============= */
.site-header {
width: 100%;
position: fixed;
background: var(--white);
top: 0;
z-index: 2;
-webkit-box-shadow:var(--shadow);
-moz-box-shadow:var(--shadow);
box-shadow:var(--shadow) ;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0;
}

.logo {
display: flex;
align-items: center;
color: var(--text);
}
.logo-head {
background-color: var(--panel);
padding: 1rem;
border-radius: 12px;
}
.logo-head img {
height: 1.5rem;
display: flex;
}
.logo-placeholder {
display: none;
}
.logo-placeholder img {
height: 2dvh;
}
.logo-placeholder.small {
font-size: 0.95rem;
}

/* BURGER */
.burger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 38px;
height: 38px;
padding: 6px;
background: transparent;
border: 0;
cursor: pointer;
border-radius: 8px;
z-index: 2;
}
.burger span {
display: block;
height: 2px;
background: var(--glass);
border-radius: 2px;
opacity: 0.9;
transition: all 0.3s ease;
}
/* темная тема */
.theme-dark .burger span{
background: var(--text);
}

.burger.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

/* NAVIGATION */
.main-nav {
display: none;
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.main-nav ul {
display: flex;
gap: 2rem;
margin: 0;
padding: 0;
}
.main-nav a {
padding: 0.45rem 0;
font-weight: 500;
color: var(--glass);
font-size: 18px;
}
.main-nav a:hover {
/* background: #212328; */
border-top: 2px solid;
}

/* MOBILE OPEN */
.main-nav.open {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
text-align: center;
position: fixed;
background: var(--bg);
width: 100%;
top: 55px;
left: 0;
height: 100dvh;
padding: 2rem 0.5rem;
}

/* темная тема */
.theme-dark .main-nav.open{
    background: var(--glass);
}
.main-nav.open a {
    color: white;
    font-size: 25px;
    border: none;
    padding: 0;
}
.main-nav.open .has-dropdown {
    transform: none;
    padding: 0;
    text-align: left;
    width: 100%;
}
.main-nav.open .has-dropdown a {
    font-size: 18px;
    padding: 0;
}

.main-nav.open ul {
    flex-direction: column;
    gap: 0.7rem !important;
    padding-left: 15px;
    align-items: flex-start;
}
.open {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    background: var(--bg);
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    padding-top: 6rem;
    overflow-y: auto; /* теперь меню можно прокручивать */
    z-index: 50;
    animation: fadeIn 0.35s ease-in-out;
}

/* Анимация появления */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* DESKTOP */
@media (min-width: 768px) {
    .burger {
        display: none;
    }
    .main-nav {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        position: static;
        height: auto;
        padding: 0;
        background: transparent;
    }
    .main-nav ul {
        flex-direction: row;
    }
    .main-nav ul.dropdown {
        flex-direction: column;
    }
    }
    @media (max-width: 768px) {
    .main-nav.open .has-dropdown:hover .dropdown {
        transform: none;
        padding: 0;
        padding-left: 15px;
    }
    .main-nav.open .dropdown a {
        color: var(--muted);
    }
    .main-nav.open .has-dropdown > a {
        font-size: 25px;
    }
}

/* ============= BUTTONS ============= */
.btn {
display: flex;
padding: 0.5rem 0.9rem;
border-radius: 8px;
font-weight: 500;
transition: all var(--transition);
align-items: center;
justify-content: center;
}
.btn-primary {
background: linear-gradient(90deg, var(--accent), var(--accent-2));
color: #fff;
box-shadow: 0 6px 18px rgba(30, 144, 255, 0.12);
border: none;
}
.btn-outline {
border: 2px solid #87878780;
color: var(--text);
}
.btn-cta {
background: linear-gradient(90deg, var(--accent), var(--accent-2));
background-size: 200% 100%;
background-position: 0% 0%;
color: var(--white);
font-size: 13px;
padding: 10px 15px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
letter-spacing: 0.03em;
transition: background-position 0.5s ease-in-out, transform 0.5s ease,
box-shadow 0.5s ease;
display: flex;
align-items: center;
text-transform: uppercase;
justify-content: center;
}

/* эффект плавного "перетекания" градиента */
.btn-cta:hover {
background-position: 100% 0%;
box-shadow: 0 0 15px rgba(155, 77, 255, 0.4);
}

.btn-cta:active {
transform: translateY(0);
box-shadow: 0 0 10px rgba(155, 77, 255, 0.3);
}

/* ============= HERO ============= */
.index-page .hero {
background-image: url(../img/index-back1.png);
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: soft-light;
background-color: #2b2e37;
background-position: bottom;
padding: 6rem 2rem;
transition: 0.3s ease-in-out;
height: 80dvh;
display: flex;
align-items: center;
}

.index-page .advantages {
padding-top: 0;
margin-top: -50px;
}
.index-page .advv {
background: var(--card);
}
.index-page .advv p {
color: var(--muted);
}
.index-page .advv h3 {
color: var(--glass);
}
.index-page .hero-inner:hover {
background: none;
}
.hero-inner:hover {
background-color: #373a45;
}
.hero-inner:hover .btn-cta {
background-position: 100% 0%;
box-shadow: 0 0 15px #ffffff66;
}
.hero-title {
font-size: clamp(1.5rem, 4.8vw, 2.8rem);
margin-bottom: 0.6rem;
}
.hero-sub {
color: var(--muted);
margin-bottom: 0.8rem;
font-size: 18px;
}
.hero-ctas {
display: flex;
gap: 0.6rem;
}

/* ============= CLIENTS ============= */
.clients {
padding: 3rem 0;
}
.clients h2 {
text-align: left;
margin: 0;
margin-bottom: 1rem;
color: var(--glass);
}
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 3rem;
align-items: center;
justify-items: center;
/* background: var(--glass); */
/* padding: 2rem; */
border-radius: 12px;
/* box-shadow: var(--shadow); */
}
.client-item {
width: 100%;
height: 100%;
background: var(--card);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 12px;
transition: opacity 0.3s ease;
box-shadow: var(--shadow);
}
.clients img {
width: 100%;
}

/* ============= ADVANTAGES ============= */
.advantages {
    padding: 3rem 0;
}
.adv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.advantages .advv{
    background: var(--card);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: 0.3s ease-in-out;
    animation: fadeInUp 0.9s ease-in-out;
}
.advv {
    background: var(--panel);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: 0.3s ease-in-out;
    animation: fadeInUp 0.9s ease-in-out;
}
.advv h3 {
    color: var(--glass);
}
.advv p {
    color: var(--panel);
    line-height: 113%;
}
.advv h4 {
    margin: 1rem 0;
    color: var(--glass);
}
.advantages .advv:hover {
transform: translateY(-6px) !important;
}

/* ================ SERVICES =============== */

.services {
background: var(--panel);
padding: 3rem 0;
}
.services .grid img {
max-width: 100%;
height: auto;
}
.services .advv{
    background: var(--card);
}
.services .advv p{
    color: var(--glass);
}
.services .advv img {
transition: transform 0.4s ease;
cursor: pointer;
}
.services .advv:hover img {
transform: scale(1.05);
}
/* ============= CATEGORIES ============= */
.categories {
padding: 3rem 0;
}
.categories h2 {
margin-bottom: 1rem;
color: var(--glass);
}
.categories-grid {
display: none;
}
.category-card img {
width: 100%;
/* border: 1px solid; */
}
.categories-grid .category {
border-bottom: 1px solid var(--muted);
font-size: 22px;
opacity: 0.5;
transition: 0.25s ease-in-out;
color: var(--glass);
}

.categories-grid .category:hover {
opacity: 1;
}
/* === CATEGORIES PAGE FIX === */

.categories-grid--cards {
grid-template-columns: repeat(3, 1fr);
display: grid;
width: 100%;
gap: 2rem;
}
.categories-grid--page.page-section {
padding: 4rem 0;
background-color: var(--panel);
margin-bottom: 0;
}
.categories-grid--page .category-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: #fff;
background: #111;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.categories-grid--page .category-card img {
width: 100%;
height: 260px;
object-fit: cover;
transition: transform 0.4s ease;
}

.categories-grid--page .category-info {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(0 0 0 / 72%), #1111113b);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
transition: background 0.3s ease;
}

.categories-grid--page .category-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
background: none;
}

.categories-grid--page .category-card:hover img {
transform: scale(1.05);
}

.categories-grid--page .category-card:hover .category-info {
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
.categories-grid--page {
gap: 1.5rem;
}
.categories-grid--page .category-card img {
height: 200px;
}
.categories-grid--cards {
grid-template-columns: repeat(1, 1fr);
}
}

@media (max-width: 480px) {
.categories-grid--page .category-card img {
height: 160px;
}
}

/* PRODUCTS */
.category-section {
padding: 1rem 0;
}
.page-section.contact-grid {
margin-bottom: 0;
}
.product-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
.product-card,
.product {
background: var(--panel);
border-radius: 10px;
padding: 0.8rem;
box-shadow: var(--shadow);
text-align: center;
transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover,
.product:hover {
transform: translateY(-6px) scale(1.01);
}
.product-card img,
.product img {
max-width: 100%;
border-radius: 6px;
}

/* PRODUCT PAGE */
.product-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.product-media img {
width: 100%;
border-radius: 8px;
}
.product-info h1 {
margin: 0.2rem 0 0.5rem;
}
.product-specs ul {
margin: 0;
padding-left: 1rem;
color: var(--muted);
}

/* ===== УСЛУГИ ===== */
.our-services {
padding: 8rem 0;
padding-bottom: 0;
}

.our-services .page-title {
color: var(--glass);
max-width: 1300px;
width: 90%;
margin: 0 auto;
margin-bottom: 60px;
}

/* Карточка услуги */
.our-service-block {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
background: var(--panel);
padding: 5rem 0;
margin-bottom: 8rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 0;
animation: fadeInUp 1s ease ease-in-out;
}
.our-service-block .contact-grid {
display: flex;
flex-direction: row;
}
.our-service-block:nth-child(2) .contact-grid {
flex-direction: row-reverse;
}
.our-service-block:nth-child(odd) h2 {
color: var(--glass);
}

.our-service-block:last-child .contact-grid {
flex-direction: row-reverse;
}

.our-service-block:nth-child(odd) {
/* animation-delay: 0.8s; */
background: none;
color: var(--glass);
padding: 0;
}
.our-service-block:last-child {
margin-bottom: 0;
}
.our-service-block:hover {
transform: translateY(-5px);
}

.our-service-image {
flex: 1;
}

.our-service-image img {
width: 100%;
border-radius: 16px;
object-fit: cover;
}

.our-service-content {
flex: 2;
}

.our-service-content li {
list-style: auto;
padding: 7px 0;
text-align: left;
}

.our-service-content h2 {
font-size: 1.8rem;
color: var(--white);
margin-bottom: 15px;
}

.our-service-content p {
line-height: 1.6;
margin-bottom: 15px;
}

.our-service-content ul {
list-style: disc;
margin-left: 20px;
}

/* ===== Адаптивность ===== */
@media (max-width: 992px) {
.our-service-block {
flex-direction: column;
text-align: center;
padding: 30px 20px;
}

.our-service-content ul {
text-align: left;
}

.our-service-content h2 {
font-size: 1.6rem;
}
}

@media (max-width: 600px) {
.our-service-block .page-title {
font-size: 1.8rem;
}

.our-service-block {
margin-bottom: 40px;
}
}

/* =========================
CATEGORY PAGE ENHANCEMENTS
========================= */

/* Заголовки и описание */
.category-section {
padding: 2rem 0 4rem 0;
}
.category-section .cta-strip {
padding-top: 0;
}
.category-section .container {
padding-bottom: 4rem;
}
.category-section .section-head {
margin-bottom: 1.5rem;
color: var(--glass);
}

.category-section h2 {
font-size: clamp(1.5rem, 4vw, 2.3rem);
margin: 0;
margin-bottom: 0.3rem;
}

.category-section .muted {
color: var(--muted);
font-size: 1rem;
}
.category-section.production {
background: var(--panel);
margin: 4rem 0;
padding: 4rem 0;
}

.category-section.production .advv {
    background: white;
}
.category-section.production .adv-grid {
padding-top: 3rem;
}
.category-section.production .adv-grid img {
width: 100%;
margin-bottom: 1rem;
}

.category-section.production h2 {
color: white;
margin-bottom: 1rem;
}
.category-section.production p {
color: white;
}
.category-section.production .adv-grid p {
color: var(--glass);
}
/* ======== PRODUCT SWIPER (Mobile) ======== */
.products-swiper {
width: 100%;
padding-bottom: 2rem;
display: none;
}
.swiper-wrapper h4 {
color: var(--glass);
}
.swiper-slide {
margin-right: 24px !important;
}
.products-swiper .swiper-slide {
width: auto;
max-width: 260px;
}

.product-card {
background: var(--panel);
border-radius: 12px;
padding: 1rem;
text-align: center;
transition: transform var(--transition), box-shadow var(--transition);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.prod-link {
height: 100%;
flex-direction: column;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.prod-media {
overflow: hidden;
border-radius: 8px;
margin-bottom: 0.8rem;
width: 100%;
}

.prod-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
background: white;
}

.product-card:hover img {
transform: scale(1.08);
}

.product-grid p{
text-align: left;
}
.prod-title {
font-size: 20px;
margin: 1rem 0;
color: var(--text);
text-align: left;
}

.prod-spec {
font-size: 0.9rem;
color: var(--muted);
text-align: left;
}
.swiper-pagination-bullet {
background: var(--muted);
opacity: 1;
}
.swiper-pagination-bullet-active {
background: var(--swiper-theme-color);
}

/* swiper container */
.categories-swiper,
.products-swiper {
overflow: hidden;
}

/* swiper slides */
.categories-swiper{
overflow: visible;
}
.categories-swiper .swiper-slide {
width: 80%;
max-width: 280px;
overflow: hidden;
transition: transform 0.3s ease;
}

.products-swiper .swiper-slide {
width: 80%;
flex-shrink: 0;
}
/* swiper-button */
.swiper-button-next, .swiper-button-prev{
    background: var(--white);
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    color: var(--muted);
    width: 35px;
    height: 35px;
    border: 2px solid var(--accent);
}
.swiper-button-next:after,
.swiper-button-prev:after{
    font-size: 14px;
}
.swiper-button-next svg{
    width: 8px;
}
.swiper-button-prev svg{
width: 8px;
}
@media (min-width: 420px) {
    .categories-swiper .swiper-slide,
    .products-swiper .swiper-slide {
    width: 45%;
    }
}

@media (min-width: 700px) {
    .categories-swiper .swiper-slide,
    .products-swiper .swiper-slide {
    width: 30%;
    }
}

/* ======== GRID (Desktop) ======== */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2.5rem;
margin-top: 1.5rem;
}

.product-grid .product {
background: var(--panel);
border-radius: 12px;
padding: 2rem;
text-align: center;
box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition);
}

.product-grid .product:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* темная тема */
.theme-dark .product-grid .product:hover {
box-shadow:var(--shadow);
}

/* CONTACT */
.page-section.contact {
padding: 4rem 0;
}
.contact-grid {
display: flex;
flex-direction: column;
gap: 2rem;
width: var(--container);
margin: 0 auto;
max-width: 1300px;
width: 90%;
}
.contact-wrap {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
align-items: flex-end;
}
.contact-wrap .text {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-wrap .muted {
margin: 0;
}

.contact-wrap .links {
display: flex;
flex-direction: column;
gap: 1rem;
}

.contact-wrap .links h1 {
margin: 0;
color: var(--glass);
}
.contact-wrap .links a {
color: var(--glass);
font-size: 18px;
opacity: 0.7;
}
.contact-wrap .links :hover {
opacity: 1;
}
.contact-card {
flex: 1;
}
.contact-card .muted {
margin-top: 1rem;
}
.contact-card a {
margin-bottom: 1rem;
display: block;
width: max-content;
}
.form label {
display: block;
margin-bottom: 0.6rem;
}
.form input,
.form textarea {
width: 100%;
padding: 0.55rem;
border-radius: 8px;
background: #ffffff05;
border: 2px solid #ffffff36;
color: var(--text);
}
.form textarea {
height: 200px;
resize: none;
}
.accent-section {
background: var(--panel);
}
/* ================= CTA ==================== */
.cta-strip {
padding: 3rem 0;
position: relative;
}
.cta-strip.pt {
/* padding-top: 0; */
display: flex;
justify-content: center;
}

.cta-strip.pt .hero-inner{
margin: 0;
width: 100%;
}
.cta-strip .hero-inner {
background-image: url("../img/index-back1.png");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: soft-light;
background-color: #2b2e37;
background-position: top;
border-radius: 12px;
padding: 6rem 2rem;
transition: 0.3s ease-in-out;
}
.cta-strip .hero-inner:hover {
background-image: url("../img/index-back1.png");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: soft-light;
background-color: #2b2e37;
background-position: top;
border-radius: 12px;
padding: 6rem 2rem;
transition: 0.3s ease-in-out;
}
.cta-strip .btn-cta {
max-width: 170px;
margin-left: 0;
}
.cta-inner.hero-inner {
background-position: top;
}
.cta-inner.hero-inner h1 {
margin-bottom: 20px;
font-size: 40px;
}
/* ================= FOOTER ==================*/
.site-footer {
background: var(--glass);
padding: 2rem 0;
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.footer-left {
flex: 2;
}
.footer-right {
flex: 1;
}
.footer-nav {
padding: 0;
margin: 0;
display: flex;
align-items: flex-end;
gap: 10px;
flex-direction: column;
justify-content: flex-end;
}
.footer-nav a {
color: var(--muted);
font-size: 18px;
}
.footer-link {
color: var(--muted);
font-size: 12px;
}

/* UTILITIES */
.muted {
color: var(--muted);
font-size: 18px;
}
.section-head {
margin-bottom: 0.6rem;
}
.back-link {
display: inline-block;
margin-bottom: 0.8rem;
color: var(--muted);
text-decoration: none;
}

/* ================ about page =============== */
.about h1 {
color: var(--glass);
}
.about p {
color: var(--glass);
}
.about .about-wrap {
display: grid;
grid-template-columns: 100%;
gap: 30px;
}
.photos .contact-grid {
display: block;
}
.photos .our-team {
display: grid;
gap: 2rem;
justify-content: space-between;
grid-template-columns: repeat(2, 1fr);
}


.our-team .photo-of-employees{
width: 135px;
height: 135px;
border-radius: 50%;
overflow: hidden;
background: white;
}
.photos img {
height: 100%;
width: 100%;
object-fit: cover;
}

.photos h1 {
margin-bottom: 3rem;
}
.page-section.photos {
padding: 6rem 0;
}

.gos h1 {
color: var(--glass);
}
.gos p {
color: var(--glass);
}
.serts h1 {
color: var(--glass);
}
.about-wrap img {
height: auto;
max-width: unset;
vertical-align: middle;
width: 100%;
}
.serts-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
.serts-grid a {
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--shadow);
opacity: 0.8;
background: white;
transition: 0.3s ease-in-out;
}
.serts-grid img {
width: 100%;
height: auto;
}
.serts-grid a:hover {
transform: translateY(-6px);
opacity: 1;
}
.serts-grid p {
font-size: 18px;
margin: 0;
color: var(--glass);
}
.about-text p {
margin: 0;
margin-bottom: 2rem;
}
.another a {
color: var(--accent);
border-bottom: 1px solid;
}

.has-dropdown {
position: relative;
}

.has-dropdown > a {
position: relative;
padding-right: 5px;
}

.has-dropdown > a::after {
content: "▾";
position: absolute;
right: -9px;
top: 12px;
font-size: 0.9em;
transition: transform 0.3s ease;
line-height: 100%;
}

.has-dropdown:hover > a::after {
transform: rotate(180deg);
top: 10px;
}

.dropdown {
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
border-radius: 8px;
padding: 0.4rem 0;
min-width: 190px;
box-shadow: 0px 5px 20px #00000080;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.25s ease;
z-index: 50;
gap: 1rem !important;
}

.dropdown li {
list-style: none;
}

.dropdown a {
display: block;
color: var(--glass);
font-size: 0.95rem;
transition: background 0.25s ease, color 0.25s ease;
white-space: nowrap;
padding: 0;
font-size: 18px;
}

.dropdown a:hover {
color: var(--glass);
border: none;
}

.has-dropdown:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(5px);
flex-direction: column;
padding: 25px;
}

/* =============== 404 ================ */
.error-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, #0b0f19, #1a2138);
color: #fff;
overflow: hidden;
padding: 40px 20px;
position: relative;
}

.error-title {
font-size: 10rem;
font-weight: 800;
background: linear-gradient(45deg, #e6e6e6, #90e0ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
from {
text-shadow: 0 0 20px rgba(0, 180, 216, 0.4);
}
to {
text-shadow: 0 0 40px rgba(144, 224, 239, 0.8);
}
}

.error-subtitle {
font-size: 1.85rem;
color: var(--text);
}

.error-text {
max-width: 560px;
margin: 10px auto 30px;
color: var(--text);
}

.btn-home {
background: linear-gradient(90deg, var(--accent), var(--accent-2));
background-size: 200% 100%;
background-position: 0% 0%;
color: #fff;
font-size: 13px;
padding: 10px 15px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
letter-spacing: 0.03em;
transition: background-position 0.5s ease-in-out, transform 0.5s ease,
box-shadow 0.5s ease;
display: flex;
align-items: center;
text-transform: uppercase;
justify-content: center;
}

.btn-home:hover {
background-position: 100% 0%;
box-shadow: 0 0 15px rgba(155, 77, 255, 0.4);
transform: translateY(-3px);
}

.error-illustration {
margin-top: 40px;
animation: float 4s ease-in-out infinite;
}

/* CREATE PROCESS */
.create-process{
    background: var(--panel);
    padding: 8rem 0;
    margin: 5rem 0;
    margin-bottom: 0;

}
.create-process .adv-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 3rem;
}

.create-process .adv-grid .item {
background: var(--card);
padding: 2rem;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.create-process .adv-grid .item h4{
color: var(--glass);
text-align: center;
}
.create-process .adv-grid .item p{
color: var(--glass);
}
.create-process .wrapper .item::before {
content: "";
position: absolute;
width: 60%;
height: 25px;
bottom: -25px;
left: 0;
border-radius: 0 0 0 6px;
background: white;
clip-path: polygon(100% 0, 100% 0%, 85% 100%, 0 100%, 0 0);
}
.create-process .wrapper .item .icon {
display: flex;
align-items: center;
width: 100%;
background: #eaeaea;
padding: 40px 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 80%);
}
.create-process .wrapper .item .icon img {
margin: auto;
max-height: 90px;
}

.create-process .wrapper .item .info {
color: black;
}

.create-process .wrapper .item .info h4 {
font-size: 22px;
font-weight: bold;
margin: 0 0 15px;
}
.create-process .wrapper .item .info p {
font-size: 15px;
line-height: 1.2;
margin: auto 0 0;
}
/* CREATE PROCESS END */

@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}

@media (max-width: 768px) {
.error-title {
font-size: 7rem;
}
.error-subtitle {
font-size: 1.5rem;
}
.our-cta-strip .cta-inner{
border-radius: 0;
width: 100%;
}
}

/* ============= MEDIA QUERIES ============= */
@media (min-width: 768px) {
    .create-process .adv-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3rem;
    }
    .hero-sub {
    font-size: 18px;
    width: max-content;
    }
    .adv-grid {
    grid-template-columns: repeat(3, 1fr);
    }
    .categories-swiper {
    display: none;
    }
    .categories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.8rem;
    }
    .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    }
    /* темная тема */
    .theme-dark .product-grid {
    gap: 4rem;
    }
    .product {
    padding: 1rem;
    }
    .product-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    }
    .photos .about-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    }
    .photos img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    }
    .photos .our-team {
    grid-template-columns: repeat(3, 1fr);
    }
    .serts-grid {
    grid-template-columns: repeat(4, 1fr);
    }
    .clients-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    /* .client-item {
    opacity: 0.85;
    } */
    .client-item:hover {
    opacity: 1;
    }
    .clients,
    .advantages,
    .categories,
    .cta-strip,
    .services {
    padding: 8rem 0;
    }
    .page-section {
    margin: 4rem auto;
    padding: 4rem 0;
    }
    /* .categories-grid--page {
    background: var(--panel);
    } */
    .about .about-wrap {
    grid-template-columns: 34% auto;
    gap: 50px;
    }
    .services h1 {
    margin-bottom: 2rem;
    }
    .services .adv-grid {
    grid-template-columns: repeat(3, 1fr);
    }
    .footer-nav {
    flex-direction: row;
    }
}

@media (min-width: 1100px) {
    .product-grid {
    grid-template-columns: repeat(4, 1fr);
    }
    .header-inner {
    gap: 1.2rem;
    }
    .hero {
    padding: 3rem 0;
    }
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
    h1 {
    font-size: 1.8em;
    }
    h2 {
    font-size: 1.5em;
    }
    .site-header .btn-cta{
    font-size: 11px;
    padding: 7px 10px;
    }
    .category-section.production {
    margin-top: 0;
    }
    .our-service-block .contact-grid {
    flex-direction: column !important;
    margin: 0;
    width: 100%;
    }
    .our-service-block:nth-child(odd){
    padding: 30px 20px;
    }
    .our-services{
    padding-top: 7rem;
    }
    .our-services .page-title {
    margin-bottom: 2rem;
    }
    .index-page .hero {
    height: 300px;
    margin-top: 3.5rem;
    }
    .index-page .advantages {
    padding-top: 3rem;
    margin-top: auto;
    }
    .index-page .advv {
        background: var(--card);
    }
    /* темная тема */
    .theme-dark .index-page .adv {
    background: var(--card);
    }
    .theme-dark .our-service-block:nth-child(odd){
    padding-bottom: 2rem;
    }
    .theme-dark .page-section.gos,
    .theme-dark .page-section.serts
    {
    padding-top: 2rem;
    }
    .theme-dark .page-section.about{
    padding-bottom: 0;
    margin-bottom: 0;
    }
    .theme-dark .services .advv {
    background: none;
    border-bottom: 2px solid #ffffff14;
    padding-bottom: 2rem;
    border-radius: 0;
    }
    .theme-dark .services .adv-grid {
        gap: 2rem
    }
    .theme-dark .services .adv-grid {
        gap: 2rem
    }
    .theme-dark .swiper-button-next, .swiper-button-prev {
    background: #ffffff;
    border: 2px solid var(--accent);
    }
    .index-page .advv h3 {
        color: var(--white);
    }
    /* темная тема */
    .theme-dark .index-page .advv h3 {
    color: var(--glass);
    }
    .index-page .advv p {
    color: var(--muted);
    }
    .index-page .hero-inner {
    margin: 0;
    width: 100%;
    padding: 2rem 1rem;
    background-size: cover;
    background-position: bottom;
    border-radius: 0;
    }
    .photos .photo-of-employees {
        flex: 1;
    }
    .photos .photo-text {
        flex: 1;
    }

/* .products-swiper {
display: block;
} */
/* .product-grid {
display: none;
} */

    .right-section {
    flex-direction: column-reverse;
    gap: 1rem;
    }
    .right-section .map-section {
    width: 100%;
    margin: 3rem 0;
    }
    .right-section .map-container iframe {
    filter: none;
    }
    
    .cta-strip .hero-inner:hover {
    padding: 2rem;
    background-position: bottom;
    border-radius: 0;
    }
    
    .page-section.photos {
    padding: 2rem 0;
    }
    
    .products-swiper .swiper-slide {
    height: auto;
    box-shadow: var(--shadow);
    margin-top: 20px;
    margin-left: 10px;
    }
    .services .advv {
    background: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 2rem;
    }
    .services .advv p {
    color: var(--muted);
    }
    .services .advv h4 {
    margin-bottom: 0.5rem;
    font-size: 21px;
    color: white;
    }
    .services .advv:last-child {
    margin-bottom: 0;
    }
    .advantages .advv {
        box-shadow: none;
        background: var(--panel);
    }
    /* темная тема */
    .theme-dark .advantages .advv {
        background: var(--card);
    }
    .prod-link {
    height: 100%;
    display: flex;
    flex-direction: column;
    }
    .serts-grid img {
    width: 100%;
    height: auto;
    }
    .cta-strip.pt .hero-inner{
    border-radius:0;
    background-position: top;
    }
    .footer-inner {
    align-items: flex-start;
    }
    .category-section {
    padding: 0;
    }
    .serts-grid a {
    opacity: 1;
    }
    .serts-grid p {
    font-size: 18px;
    }
    .has-dropdown > a::after {
    display: none;
    }
    .dropdown {
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 45dvh;
    overflow: auto;
    
    }
    .dropdown a {
    padding: 0.4rem 0;
    font-size: 1.4rem;
    color: var(--muted);
    }
    .dropdown a:hover {
    background: none;
    color: var(--accent);
    }
    .categories-page {
    padding: 40px 0 60px;
    }
    .categories-grid--page {
    background: var(--glass);
    margin: 3rem 0;
    padding: 3rem 0;
    }
    .categories-grid--page .category-card img {
    height: 180px;
    }
    
    .logo-head img {
    height: 1rem;
    }
    .hero-inner {
    padding: 4rem 2rem;
    }
    .cta-inner.hero-inner {
    padding: 2rem;
    }
    .cta-inner.hero-inner h1 {
    font-size: 25px;
    }
    .clients-grid {
    gap: 1rem;
    }
    /* темная тема */
    .theme-dark .clients-grid {
    gap: 2rem;
    }
    .theme-dark .client-item {
    box-shadow:none;
    }
    .cta-strip.pt{
    padding-top: 0;
    }
    .text-abs-full{
    display: none;
    }
    .swiper-slide{
    box-shadow: none;
    }
    .container.goods {
    margin-top: 5rem;
    }
    .create-process{
        padding-top: 0;
        margin-top: 0;
        padding-bottom: 3rem;
    }
}

@media (max-width: 500px) {
    h2 {
    font-size: 35px;
    }
    h4 {
    font-size: 18px;
    }
    .text-abs{
    /* font-size: 3.5em;
    left: 0;
    top: -2rem; */
    display: none;
    }
    .clients{
    padding-top: 0;
    }
    .text-abs-left {
    margin-right: 3%;
    }
    p {
    font-size: 15px;
    }
    .adress{
    padding-top: 0;
    }
    .serts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .serts-grid p {
    font-size: 15px;
    }
    .footer-left .muted {
    font-size: 15px;
    }
    .footer-link {
    font-size: 11px;
    }
    .footer-nav {
    gap: 5px;
    }
    .footer-nav a {
    font-size: 15px;
    }
    .muted {
    font-size: 13px;
    }
    .logo-head {
    padding: 0.8rem;
    }
    .logo-head img {
    height: 0.8rem;
    }
}

@media (max-width: 450px) {
    .hero-ctas {
        flex-direction: column;
    }
    .our-team .photo-of-employees{
        margin-bottom: 20px;
        flex: auto;
    }
    .our-team .about-wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .our-team .photo-text{
        text-align: center;
    }
    .our-team .position{
        margin-top: 5px;
        font-size: 14px;
        color: var(--muted);
    }
    .serts-grid {
        grid-template-columns: repeat(1, 1fr);
    }

}

@media (max-width: 350px) {
    .photos .our-team{
        grid-template-columns: repeat(1, 1fr);
    }
}

@keyframes fadeInUp {
0% {
opacity: 0;
-ms-transform: translate3d(0, 15%, 0);
-webkit-transform: translate3d(0, 15%, 0);
transform: translate3d(0, 15%, 0);
}
100% {
opacity: 1;
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}