body {

          font-family: 'JetBrains Mono', monospace;

          font-weight: 400;

          overflow-x: hidden;

          background-color: #05070a;

          color: #f3f4f6;

          margin: 0;

          padding: 0;

}

/* Заголовки */

h1, h2, h3, h4, .parallax-bg, .parallax-bg-dark {

          font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;

}

/* Навигация */

.menu-link {

          font-family: 'JetBrains Mono', monospace;

          color: #9ca3af;

          font-size: 0.68rem;

          font-weight: 600;

          text-transform: uppercase;

          letter-spacing: 0.08em;

          text-decoration: none;

          transition: all 0.3s ease;

          cursor: pointer;

          position: relative;

          white-space: nowrap;

}

.menu-link:hover { color: #008f86; }

.menu-link.active { color: #f3f4f6; font-weight: 800; }

.menu-link.active::after {

          content: '';

          position: absolute;

          bottom: -6px;

          left: 0;

          width: 100%;

          height: 2px;

          background: #008f86;

          box-shadow: 0 0 8px #008f86, 0 0 16px rgba(0, 143, 134, 0.8);

          border-radius: 2px;

}

/* ЛЕГКИЙ И ПЛАВНЫЙ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ */

@media (min-width: 1024px) {

          .horizontal-scroll-container {

                    display: flex;

                    flex-wrap: nowrap;

                    width: 100vw;

                    height: 100vh;

                    overflow-x: auto;

                    overflow-y: hidden;

                    overscroll-behavior: none;

                    touch-action: pan-x;

                    scroll-snap-type: x mandatory;

                    scroll-behavior: smooth;

                    -webkit-overflow-scrolling: touch;

          }

          .horizontal-scroll-container::-webkit-scrollbar {

                    display: none;

          }

          .panel {

                    width: 100vw;

                    height: 100vh;

                    flex-shrink: 0;

                    scroll-snap-align: start;

                    scroll-snap-stop: always;

                    display: flex;

                    align-items: center;

                    justify-content: center;

                    overflow: hidden;

                    position: relative;

          }

}

@media (max-width: 1023px) {

          .horizontal-scroll-container {

                    display: block;

                    width: 100%;

                    height: auto;

          }

          .panel {

                    width: 100%;

                    min-height: 100vh;

                    padding: 8rem 1.5rem 4rem 1.5rem;

                    display: flex;

                    align-items: center;

                    position: relative;

          }

}

/* Блюр мыши */

.mouse-glow-orb {

          position: fixed;

          width: 35vw;

          height: 35vw;

          background: radial-gradient(circle, rgba(0, 143, 134, 0.15) 0%, transparent 70%);

          border-radius: 50%;

          pointer-events: none;

          z-index: 1;

          transform: translate(-50%, -50%);

          will-change: transform;

}

/* Брендовые цвета */

.text-brand-teal { 

          color: #008f86; 

          text-shadow: 0 0 20px rgba(0, 143, 134, 0.3);

}

.bg-brand-teal { background-color: #008f86; }

.border-brand-teal { border-color: rgba(0, 143, 134, 0.4); }

.text-brand-red { color: #9f0412; }

/* Glassmorphism карточки */

.glass-card {

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

          backdrop-filter: blur(12px);

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

          border: 1px solid rgba(255, 255, 255, 0.05);

          transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;

          isolation: isolate;

}

.glass-card:hover {

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

          border-color: rgba(0, 143, 134, 0.3);

}

/* Параллакс */

.parallax-bg {

          position: absolute;

          font-size: 28vw;

          font-weight: 900;

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

          user-select: none;

          pointer-events: none;

          right: -5%;

          bottom: -5%;

          line-height: 0.8;

}

.parallax-bg-dark {

          position: absolute;

          font-size: 20vw;

          font-weight: 900;

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

          user-select: none;

          pointer-events: none;

          left: 40px;

          top: 0;

}

.cyber-grid {

          position: absolute;

          inset: 0;

          background-image: linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),

                                                       linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);

          background-size: 60px 60px;

          pointer-events: none;

          opacity: 0.7;

}

/* ФОНОВАЯ СХЕМА ДЛЯ СЕКЦИЙ */

.schema-parallax-bg {

          background-image: radial-gradient(circle at 50% 50%, rgba(0, 143, 134, 0.1) 1px, transparent 1px),

                                                       linear-gradient(to right, rgba(0, 143, 134, 0.08) 1px, transparent 1px),

                                                       linear-gradient(to bottom, rgba(0, 143, 134, 0.08) 1px, transparent 1px);

          background-size: 40px 40px, 80px 80px, 80px 80px;

}

/* АНИМИРОВАННАЯ ИНЖЕНЕРНАЯ SVG СХЕМА С ПРЯМЫМИ УГЛАМИ */

.circuit-animated-path {

          stroke-dasharray: 1000;

          stroke-dashoffset: 1000;

          animation: drawCircuit 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;

          filter: drop-shadow(0 0 6px rgba(0, 143, 134, 0.8));

}

@keyframes drawCircuit {

          0% { stroke-dashoffset: 1000; opacity: 0.2; }

          30% { stroke-dashoffset: 0; opacity: 1; }

          80% { stroke-dashoffset: 0; opacity: 1; }

          100% { stroke-dashoffset: -1000; opacity: 0; }

}

.process-step-card {

          transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

}

.process-step-card:hover {

          transform: translateY(3px);

          box-shadow: 0 10px 20px -5px rgba(0, 143, 134, 0.3);

}

/* СЕКЦИЯ КАТАЛОГ: КОМПАКТНЫЕ РАЗМЕРЫ, ЧТОБЫ ВЕСЬ БЛОК ВМЕЩАЛСЯ В ЭКРАН */

#catalog .cyber-prod-card {

          transition: all 0.4s cubic-bezier(0.25, 1, 0.3, 1);

          background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(5, 7, 10, 0.9) 100%);

          backdrop-filter: blur(10px);

          padding: 0.65rem !important; /* Уменьшен внутренний отступ карт */

}

#catalog .cyber-prod-card .cyber-prod-img {

          height: 4.5rem !important; /* Компактные картинки */

          margin-bottom: 0.5rem !important;

}

@media (min-width: 1024px) {

          #catalog .cyber-prod-card .cyber-prod-img {

                    height: 5rem !important;

          }

}

#catalog .cyber-prod-card h3 {

          font-size: 0.85rem !important; /* Компактный заголовок категории */

          line-height: 1.2 !important;

}

#catalog .cyber-prod-card p {

          font-size: 0.72rem !important; /* Читабельный компактный подзаголовок */

          line-height: 1.3 !important;

          margin-top: 0.25rem !important;

}

#catalog .cyber-prod-card:hover {

          transform: translateY(-4px);

          border-color: rgba(0, 143, 134, 0.8);

          box-shadow: 0 10px 25px -5px rgba(0, 143, 134, 0.3), 0 0 15px rgba(0, 143, 134, 0.2);

}

/* ЕДИНЫЙ СТИЛЬ ДЛЯ КНОПОК */

.cyber-site-btn {

          transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

          font-family: 'JetBrains Mono', monospace !important;

          font-weight: 700 !important;

          text-transform: uppercase !important;

          letter-spacing: 0.08em !important;

          text-decoration: none !important;

}

.cyber-site-btn:hover {

          border-color: #008f86 !important;

          background-color: rgba(0, 143, 134, 0.15) !important;

          box-shadow: 0 0 20px rgba(0, 143, 134, 0.6), 0 0 10px rgba(0, 143, 134, 0.4), inset 0 0 10px rgba(0, 143, 134, 0.2) !important;

          transform: translateY(-2px) !important;

}

/* КРЕСТИК ПОП-АПОВ */

.modal-card {

          position: relative !important;

}

.modal-close-btn {

          position: absolute !important;

          top: 1.25rem !important;

          right: 1.25rem !important;

          z-index: 50 !important;

}

.cert-arrow-btn {

          position: absolute;

          top: 50%;

          transform: translateY(-50%);

          z-index: 30;

          width: 42px;

          height: 42px;

          border-radius: 50%;

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

          border: 1px solid rgba(0, 143, 134, 0.4);

          color: #fff;

          display: flex;

          align-items: center;

          justify-content: center;

          cursor: pointer;

          transition: all 0.3s ease;

}

.cert-arrow-btn:hover {

          border-color: #008f86;

          box-shadow: 0 0 15px rgba(0, 143, 134, 0.8);

          background: rgba(0, 143, 134, 0.2);

}

/* Слайдер оборудования */

.slider-image-container {

          position: relative;

          width: 100%;

          height: 180px;

          display: flex;

          align-items: center;

          justify-content: center;

}

.slider-img {

          position: absolute;

          left: 50%;

          top: 50%;

          transform: translate(-50%, -50%);

          max-width: 75%;

          max-height: 100%;

          object-fit: contain;

          transition: opacity 0.4s ease, transform 0.4s ease;

          will-change: opacity, transform;

}

#polygonCanvas {

          mix-blend-mode: screen;

          filter: blur(1px);

}

/* Кнопки */

button, 

.bg-brand-teal, 

.bg-brand-red {

          font-family: 'JetBrains Mono', monospace !important;

          font-weight: 700 !important;

          text-transform: uppercase !important;

          letter-spacing: 0.08em !important;

          transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

          position: relative;

          overflow: hidden;

}

.bg-brand-red {

          background-color: #9f0412 !important;

          box-shadow: 0 4px 15px rgba(159, 4, 18, 0.3) !important;

}

.bg-brand-red:hover {

          background-color: #be0516 !important;

          box-shadow: 0 0 25px rgba(159, 4, 18, 0.85), 0 4px 15px rgba(159, 4, 18, 0.5) !important;

          transform: translateY(-2px) scale(1.02) !important;

}

.bg-brand-teal {

          background-color: #008f86 !important;

          box-shadow: 0 4px 15px rgba(0, 143, 134, 0.25) !important;

}

.bg-brand-teal:hover {

          background-color: #00b3a8 !important;

          box-shadow: 0 0 25px rgba(0, 143, 134, 0.85), 0 4px 15px rgba(0, 143, 134, 0.5) !important;

          transform: translateY(-2px) scale(1.02) !important;

}

.hero-step-number {

          font-family: 'JetBrains Mono', monospace !important;

          font-weight: 900 !important;

          color: #008f86;

          text-shadow: 0 0 35px rgba(0, 143, 134, 0.85), 0 0 12px rgba(0, 143, 134, 1);

          min-width: 3.5rem;

          text-align: center;

          user-select: none;

          line-height: 0.85;

}

.trust-counter-number {

          font-family: 'JetBrains Mono', monospace !important;

          font-weight: 900 !important;

          color: #008f86;

          text-shadow: 0 0 25px rgba(0, 143, 134, 0.8), 0 0 8px rgba(0, 143, 134, 0.9);

          user-select: none;

          white-space: nowrap;

}

/* СЕКЦИЯ: РАСКРЫВАЮЩИЕСЯ БЛОКИ КАСТОН (ТОЧНЫЙ РАЗМЕР И ИДЕАЛЬНОЕ ЗАКРЫТИЕ ПО ГРАНИЦЕ) */

.advantages-grid {

          position: relative;

}

.adv-cell {

          position: relative;

          height: 215px; /* Корректная высота под заголовки и отступы */

}

.adv-card {

          position: absolute;

          left: 0;

          width: 100%;

          height: 215px;

          transition: height 0.8s cubic-bezier(0.25, 1, 0.3, 1), 

                                        border-color 0.6s ease, 

                                        box-shadow 0.6s ease,

                                        opacity 0.6s ease,

                                        filter 0.6s ease !important;

          will-change: height, opacity, filter;

          z-index: 10;

}

.adv-card.top-row { top: 0; }

.adv-card.bottom-row { bottom: 0; }

@media (min-width: 1024px) {

          .advantages-grid:hover .adv-card:not(:hover) {

                    opacity: 0.35 !important;

                    filter: blur(2px) !important;

          }

          .adv-card:hover {

                    /* Высота 454px точно соответствует: 215px (верхний) + 24px (gap) + 215px (нижний) */

                    height: 454px !important; 

                    opacity: 1 !important;

                    filter: blur(0px) !important;

                    z-index: 60 !important;

                    border-color: rgba(0, 143, 134, 0.85) !important;

                    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 143, 134, 0.4) !important;

                    background-color: #0b0e14 !important;

          }

          .adv-expandable-content {

                    max-height: 0;

                    opacity: 0;

                    overflow: hidden;

                    padding-bottom: 0.25rem;

                    transition: max-height 0.8s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.5s ease 0.15s;

          }

          .adv-card:hover .adv-expandable-content {

                    max-height: 220px;

                    opacity: 1;

          }

}

@media (max-width: 1023px) {

          .adv-cell { height: auto !important; }

          .adv-card {

                    position: relative !important;

                    height: auto !important;

                    top: auto !important;

                    bottom: auto !important;

                    padding-bottom: 0.75rem !important;

          }

          .adv-expandable-content {

                    max-height: none;

                    opacity: 1;

                    padding-bottom: 0.25rem;

          }

}

.slider-arrow-btn {

          position: relative;

          z-index: 30;

          width: 36px;

          height: 36px;

          border-radius: 50%;

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

          border: 1px solid rgba(255, 255, 255, 0.1);

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

          display: flex;

          align-items: center;

          justify-content: center;

          cursor: pointer;

          flex-shrink: 0;

          transition: all 0.3s ease !important;

}

.slider-arrow-btn:hover {

          color: #008f86 !important;

          border-color: #008f86 !important;

          box-shadow: 0 0 15px rgba(0, 143, 134, 0.8) !important;

          background: rgba(0, 0, 0, 0.8) !important;

}

.kaston-bg-glitch-logo {

          position: fixed;

          right: 3rem;

          bottom: 3rem;

          z-index: 1;

          pointer-events: none;

          user-select: none;

          opacity: 0;

          animation: kastonSignalCycle 17s ease-in-out infinite;

          will-change: opacity, filter, transform;

}

.glitch-wrapper {

          position: relative;

          width: 180px;

          height: auto;

}

@media (max-width: 1023px) {

          .glitch-wrapper { width: 120px; }

          .kaston-bg-glitch-logo { right: 1.5rem; bottom: 1.5rem; }

}

.glitch-img {

          width: 100%;

          height: auto;

          object-fit: contain;

          display: block;

}

.glitch-main {

          position: relative;

          filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)) brightness(1.2);

}

.glitch-clone {

          position: absolute;

          top: 0;

          left: 0;

          opacity: 0;

          mix-blend-mode: screen;

}

.glitch-red { filter: drop-shadow(-3px 0 #9f0412) brightness(1.3); }

.glitch-teal { filter: drop-shadow(3px 0 #008f86) brightness(1.3); }

.kaston-bg-glitch-logo.glitching .glitch-clone {

          animation: glitchGlitch 0.2s steps(2) infinite;

}

@keyframes kastonSignalCycle {

          0% { opacity: 0; filter: contrast(180%); transform: scale(0.95) skewX(-10deg); }

          3% { opacity: 0.85; filter: contrast(130%); transform: scale(1.02) skewX(8deg); }

          7% { opacity: 0.95; filter: contrast(110%); transform: scale(0.98) skewX(-4deg); }

          15% { opacity: 0.85; filter: contrast(100%); transform: scale(1) skewX(0deg); }

          65% { opacity: 0.85; filter: contrast(100%); transform: scale(1) skewX(0deg); }

          68% { opacity: 0.95; filter: contrast(130%); transform: scale(1.03) skewX(-6deg); }

          72% { opacity: 0.85; filter: contrast(160%); transform: scale(0.97) skewX(10deg); }

          75% { opacity: 0; filter: contrast(180%); transform: scale(0.95) skewX(-10deg); }

          100% { opacity: 0; }

}

@keyframes glitchGlitch {

          0% { opacity: 0.95; clip-path: inset(10% 0 30% 0); transform: translate(-4px, 1px); }

          50% { opacity: 1; clip-path: inset(50% 0 10% 0); transform: translate(4px, -2px); }

          100% { opacity: 0.95; clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); }

}

/* =========================================================

   КРОССБРАУЗЕРНОСТЬ, АДАПТИВНОСТЬ И ДОСТУПНОСТЬ

   ========================================================= */

:root {

    --app-height: 100vh;

    --safe-top: env(safe-area-inset-top, 0px);

    --safe-right: env(safe-area-inset-right, 0px);

    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --safe-left: env(safe-area-inset-left, 0px);

}

@supports (height: 100dvh) {

    :root { --app-height: 100dvh; }

}

html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

    text-size-adjust: 100%;

}

body {

    min-width: 320px;

    min-height: 100%;

    overflow-wrap: break-word;

    -webkit-tap-highlight-color: transparent;

}

button, a, input, textarea { touch-action: manipulation; }

button, input, textarea { font: inherit; }

img, svg, canvas { max-width: 100%; }

:focus-visible {

    outline: 2px solid #00b3a8;

    outline-offset: 3px;

}

.mobile-menu-button {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 12px;

    color: #fff;

    background: rgba(0,0,0,.55);

}

.mobile-menu {

    position: fixed;

    inset: calc(5rem + var(--safe-top)) 1rem auto 1rem;

    z-index: 49;

}

.mobile-menu[hidden] { display: none !important; }

.mobile-menu__panel {

    display: grid;

    gap: .25rem;

    padding: .75rem;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 1rem;

    background: rgba(5,7,10,.96);

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

    backdrop-filter: blur(18px);

    box-shadow: 0 18px 50px rgba(0,0,0,.45);

}

.mobile-menu__panel .menu-link {

    display: block;

    padding: .85rem 1rem;

    border-radius: .75rem;

}

.mobile-menu__panel .menu-link.active { background: rgba(0,143,134,.14); }

.mobile-menu__panel .menu-link::after { display: none; }

@media (min-width: 1024px) {

    .horizontal-scroll-container { height: var(--app-height); scrollbar-width: none; }

    .panel { height: var(--app-height); min-height: var(--app-height); }

}

@media (max-width: 1023px) {

    body { overflow-x: clip; }

    .horizontal-scroll-container {

        overflow: visible;

        scroll-snap-type: none;

    }

    .panel {

        min-height: auto;

        padding: clamp(6.5rem, 13vw, 8rem) clamp(1rem, 4vw, 2rem) clamp(3.5rem, 8vw, 5rem);

        overflow: clip;

    }

    .panel > .max-w-7xl,

    .panel > .max-w-4xl { margin-block: 0; }

    .mouse-glow-orb, #polygonCanvas, .kaston-bg-glitch-logo { display: none !important; }

    .advantages-grid .adv-expandable-content { max-height: none; opacity: 1; }

    .adv-card { height: auto !important; min-height: 100%; }

}

@media (min-width: 640px) and (max-width: 1023px) {

    .panel { padding-inline: 2rem; }

    #catalog .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

@media (max-width: 1024px) {

    /* Главный слайдер занимает всю доступную ширину на планшетах и ниже. */

    #heroSliderColumn {

        grid-column: 1 / -1 !important;

        width: 100%;

        max-width: none;

    }

    #heroSliderCard {

        width: 100%;

        max-width: none !important;

    }

    /* Карта не показывается на планшетах и телефонах. */

    #contactMap {

        display: none !important;

    }

    /* Оставшийся контактный блок занимает всю сетку. */

    #contactDetails {

        grid-column: 1 / -1 !important;

        width: 100%;

    }

}

@media (max-width: 639px) {

    nav { top: calc(.75rem + var(--safe-top)); left: .75rem; right: .75rem; height: 4rem; }

    nav .bg-brand-teal { padding-inline: .75rem !important; font-size: .58rem !important; }

    h1 { font-size: clamp(2rem, 10vw, 3rem) !important; }

    h2 { font-size: clamp(1.75rem, 8.5vw, 2.5rem) !important; }

    .glass-card { -webkit-backdrop-filter: none; backdrop-filter: none; }

    .slider-image-container { height: 155px; }

    .slider-img { max-width: 68%; }

    .step-wrapper { align-items: center !important; gap: .75rem !important; }

    .hero-step-number { font-size: 3rem !important; min-width: 2.4rem; }

    #catalog .grid { grid-template-columns: 1fr; }

    .cyber-prod-img { height: 10rem !important; }

    #trust .grid-cols-2 { grid-template-columns: 1fr 1fr; }

    /* Контакты на телефонах: одна вертикальная колонка во всю ширину. */

    #offer {

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        width: 100%;

    }

    #contactContent {

        width: 100%;

        max-width: none;

        margin: 0;

        padding-inline: 0;

        display: block;

    }

    #contactDetails {

        width: 100%;

        max-width: none;

    }

    #contactDetails > .glass-card {

        width: 100%;

        max-width: none !important;

    }

    #contactDetails > div:last-child,

    #contactDetails > div:last-child button {

        width: 100%;

    }

    #contactDetails > div:last-child button {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    #contactFooter {

        position: static !important;

        inset: auto !important;

        width: 100%;

        margin: 2rem 0 0;

        padding: 1rem 0 calc(1rem + var(--safe-bottom));

        flex: 0 0 auto;

    }

}

@media (max-width: 380px) {

    nav img { max-width: 74px; }

    nav .bg-brand-teal { max-width: 116px; line-height: 1.15; }

    .panel { padding-inline: .875rem; }

    #trust .grid-cols-2 { grid-template-columns: 1fr; }

}

@media (hover: none), (pointer: coarse) {

    .glass-card:hover, .cyber-prod-card:hover, .bg-brand-red:hover, .bg-brand-teal:hover {

        transform: none !important;

        box-shadow: inherit;

    }

    .adv-expandable-content { max-height: none !important; opacity: 1 !important; }

}

@media (prefers-reduced-motion: reduce) {

    html { scroll-behavior: auto; }

    *, *::before, *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

    .mouse-glow-orb, #polygonCanvas, .kaston-bg-glitch-logo { display: none !important; }

}

@media (prefers-contrast: more) {

    .glass-card, .cyber-prod-card { border-color: rgba(255,255,255,.3); }

    .text-gray-300, .text-gray-400 { color: #e5e7eb !important; }

}

@supports not (backdrop-filter: blur(1px)) {

    .glass-card, nav, .mobile-menu__panel { background-color: rgba(5,7,10,.96); }

}



/* MOBILE-ONLY POLISH — desktop styles remain unchanged */

@media (max-width: 639px) {

    /* Еле заметная инженерная сетка на мобильном фоне. */

    .cyber-grid {

        display: block !important;

        position: fixed !important;

        inset: 0 !important;

        z-index: 0 !important;

        background-image:

            linear-gradient(rgba(0,143,134,.055) 1px, transparent 1px),

            linear-gradient(90deg, rgba(0,143,134,.055) 1px, transparent 1px) !important;

        background-size: 34px 34px !important;

        opacity: .72 !important;

        -webkit-mask-image: none !important;

        mask-image: none !important;

    }

    .panel {

        background-color: #05070a;

        background-image:

            linear-gradient(rgba(0,143,134,.045) 1px, transparent 1px),

            linear-gradient(90deg, rgba(0,143,134,.045) 1px, transparent 1px) !important;

        background-size: 34px 34px !important;

        background-position: center top !important;

    }

    /* Компактнее вертикальный ритм секций. */

    .panel {

        padding-top: 5.6rem !important;

        padding-bottom: 2.35rem !important;

    }

    #hero { padding-top: 5.15rem !important; }

    #hero > .max-w-7xl { gap: 1.25rem !important; }

    #hero > .max-w-7xl > div:first-of-type {

        margin-top: 0 !important;

        row-gap: .85rem !important;

    }

    #hero .inline-flex { margin-top: 0 !important; }

    #problems, #advantages, #process, #trust, #solutions, #catalog, #offer {

        margin-top: 0 !important;

    }

    .panel + .panel { border-top: 1px solid rgba(255,255,255,.025); }

    .panel .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }

    .panel .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem !important; }

    .panel .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.35rem !important; }

    /* Кнопки компактнее только на телефонах. */

    button, .cyber-site-btn, .bg-brand-red, .bg-brand-teal {

        font-size: .67rem !important;

        letter-spacing: .055em !important;

    }

    #hero .bg-brand-red,

    #offer .bg-brand-teal,

    .cyber-site-btn { padding-block: .9rem !important; }

    /* Фиксированная высота hero-слайдера, включая самый длинный текст. */

    #heroSliderCard {

        height: 342px !important;

        min-height: 342px !important;

        max-height: 342px !important;

    }

    #heroSliderCard .slider-image-container {

        height: 148px !important;

        min-height: 148px !important;

        margin-block: .65rem !important;

    }

    #heroSliderCard .border-t > div {

        height: 68px !important;

        min-height: 68px !important;

        max-height: 68px !important;

        overflow: hidden !important;

    }

    #heroSliderCard > div:first-child {

        gap: .35rem !important;

    }

    #sliderCategory {

        min-width: 0;

        font-size: .61rem !important;

        line-height: 1.25 !important;

    }

    #sliderCounter {

        flex: 0 0 auto;

        white-space: nowrap !important;

        font-size: .61rem !important;

        letter-spacing: 0 !important;

    }

    /* Шаги в секции «Решение» всегда видимы и неподвижны. */

    #advantages .step-wrapper,

    #advantages .step-final-card {

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

    }

    /* Плавное бургер-меню. */

    .mobile-menu {

        display: block;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-14px) scale(.975);

        pointer-events: none;

        transition: opacity .62s ease, transform .78s cubic-bezier(.16,1,.3,1), visibility 0s linear .82s;

    }

    .mobile-menu[hidden] { display: none !important; }

    .mobile-menu.is-open {

        opacity: 1;

        visibility: visible;

        transform: translateY(0) scale(1);

        pointer-events: auto;

        transition-delay: 0s;

    }

    .mobile-menu__panel .menu-link {

        opacity: 0;

        transform: translateY(-5px);

        transition: opacity .52s ease, transform .68s cubic-bezier(.16,1,.3,1), background-color .4s ease;

    }

    .mobile-menu.is-open .menu-link { opacity: 1; transform: none; }

    .mobile-menu.is-open .menu-link:nth-child(2) { transition-delay: .06s; }

    .mobile-menu.is-open .menu-link:nth-child(3) { transition-delay: .12s; }

    .mobile-menu.is-open .menu-link:nth-child(4) { transition-delay: .24s; }

    .mobile-menu.is-open .menu-link:nth-child(5) { transition-delay: .24s; }

    .mobile-menu.is-open .menu-link:nth-child(6) { transition-delay: .30s; }

    .mobile-menu.is-open .menu-link:nth-child(7) { transition-delay: .36s; }

    .mobile-menu.is-open .menu-link:nth-child(8) { transition-delay: .42s; }

    /* Плавные поп-апы. */

    #contactModal, #certsModal {

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition: opacity .68s ease, visibility 0s linear .78s;

    }

    #contactModal .modal-card, #certsModal .modal-card {

        opacity: 0;

        transform: translateY(18px) scale(.975);

        transition: opacity .58s ease, transform .76s cubic-bezier(.16,1,.3,1);

    }

    #contactModal.is-open, #certsModal.is-open {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transition-delay: 0s;

    }

    #contactModal.is-open .modal-card, #certsModal.is-open .modal-card {

        opacity: 1;

        transform: none;

    }

}

/* ==========================================================

   LAPTOP / TABLET LANDSCAPE COMPACT MODE

   Fixes mobile menu visibility and keeps 100vh panels inside

   smaller MacBook and laptop viewports without touching wide

   desktop layouts (1500px and wider).

   ========================================================== */

/* Custom display rules are declared after Tailwind, therefore the

   desktop state must be explicit. This fixes the burger at all sizes. */

@media (min-width: 1024px) {

    #mobileMenuButton,

    .mobile-menu-button,

    #mobileMenu,

    .mobile-menu {

        display: none !important;

    }

    #mainMenu {

        display: flex !important;

    }

}

@media (max-width: 1023px) {

    #mainMenu { display: none !important; }

    #mobileMenuButton,

    .mobile-menu-button { display: inline-flex !important; }

}

/* Compact horizontal desktop/tablet layout for 1024–1499px. */

@media (min-width: 1024px) and (max-width: 1499px) {

    nav {

        top: 1rem !important;

        left: 1rem !important;

        right: 1rem !important;

        height: 4.25rem !important;

        padding-inline: 1.15rem !important;

        border-radius: 1rem !important;

    }

    nav > div:first-child { gap: .7rem !important; }

    nav img { height: 1.35rem !important; }

    nav > div:first-child > span {

        font-size: .52rem !important;

        line-height: 1.25 !important;

        padding-left: .7rem !important;

        letter-spacing: .075em !important;

    }

    #mainMenu {

        gap: clamp(.65rem, 1.05vw, 1.05rem) !important;

        min-width: 0;

    }

    #mainMenu .menu-link {

        font-size: clamp(.49rem, .57vw, .59rem) !important;

        letter-spacing: .045em !important;

    }

    nav > div:last-child { gap: .5rem !important; }

    nav > div:last-child > button {

        padding: .7rem .95rem !important;

        font-size: .56rem !important;

        letter-spacing: .045em !important;

        white-space: nowrap;

    }

    .panel > .max-w-7xl,

    .panel > .max-w-4xl {

        max-width: min(1180px, calc(100vw - 3rem)) !important;

        padding-inline: clamp(1rem, 2.25vw, 2.25rem) !important;

    }

    .panel h1 {

        font-size: clamp(2.55rem, 4vw, 3.75rem) !important;

        line-height: 1.02 !important;

    }

    .panel h2 {

        font-size: clamp(2rem, 3.15vw, 3rem) !important;

        line-height: 1.06 !important;

    }

    .panel h3 { font-size: clamp(1rem, 1.45vw, 1.35rem) !important; }

    .panel h4 { line-height: 1.2 !important; }

    .panel p { line-height: 1.45 !important; }

    #hero > .max-w-7xl,

    #problems > .max-w-7xl {

        gap: clamp(1.5rem, 3vw, 3rem) !important;

    }

    #hero > .max-w-7xl > div:first-child {

        row-gap: 1.15rem !important;

    }

    #hero p { font-size: .92rem !important; }

    #heroSliderCard {

        max-width: 23rem !important;

        padding: 1.35rem !important;

        border-radius: 1.35rem !important;

    }

    #heroSliderCard .slider-image-container { margin-block: .65rem !important; }

    #heroSliderCard .slider-image-container > div { height: 9.25rem !important; }

    #heroSliderCard .slider-img { max-height: 8.75rem !important; }

    #problems .glass-card { padding: 1.2rem !important; }

    #problems .grid { gap: .9rem !important; }

    #problems h4 { font-size: .9rem !important; }

    #problems p { font-size: .7rem !important; }

    #advantages > .max-w-7xl,

    #solutions > .max-w-7xl,

    #catalog > .max-w-7xl {

        row-gap: 1.15rem !important;

    }

    #advantages .step-wrapper { gap: 1rem !important; }

    #advantages .hero-step-number { font-size: 4.25rem !important; min-width: 2.8rem; }

    #advantages .step-wrapper .glass-card { padding: .8rem 1rem !important; }

    #advantages .step-wrapper .glass-card > div:first-child {

        width: 3.5rem !important;

        height: 3.5rem !important;

    }

    #advantages .step-final-card .glass-card { padding: 1.2rem !important; }

    #advantages .step-final-card ul { row-gap: .55rem !important; }

    #process > .max-w-7xl,

    #trust > .max-w-7xl { row-gap: .9rem !important; }

    #process .process-step-card { padding: .8rem !important; }

    #process .process-step-card p { font-size: .68rem !important; }

    #process .grid.grid-cols-1.lg\:grid-cols-12 { gap: .75rem !important; }

    #process .office-slide-img { height: 100% !important; }

    #trust .glass-card { padding: .85rem !important; }

    #trust .trust-counter-number { font-size: 2.7rem !important; }

    #trust h4 { font-size: .85rem !important; }

    #trust p { font-size: .68rem !important; }

    #solutions .advantages-grid { gap: .85rem !important; }

    #solutions .adv-img-container { height: 5.8rem !important; }

    #solutions .adv-card > div:last-child { padding: .8rem !important; }

    #solutions .adv-card h3 { font-size: .88rem !important; }

    #solutions .adv-card p { font-size: .67rem !important; }

    #catalog .grid { gap: .75rem !important; }

    #catalog .cyber-prod-card { padding: .7rem !important; }

    #catalog .cyber-prod-img { height: 5.65rem !important; margin-bottom: .55rem !important; }

    #catalog .cyber-prod-card h3 { font-size: .83rem !important; }

    #catalog .cyber-prod-card p { font-size: .62rem !important; }

    #contactContent { gap: 2rem !important; }

    #contactDetails { row-gap: 1rem !important; }

    #contactDetails > .glass-card { padding: 1.1rem !important; row-gap: .75rem !important; }

    #contactMap > div { max-width: 25rem !important; }

}

/* Height-driven compression for short laptop displays. Applies only to

   horizontal desktop mode, leaving the stacked mobile layout untouched. */

@media (min-width: 1024px) and (max-height: 849px) {

    .panel {

        height: 100dvh !important;

        min-height: 100dvh !important;

        padding-top: 4.8rem !important;

        padding-bottom: .75rem !important;

    }

    nav {

        top: .65rem !important;

        height: 3.8rem !important;

    }

    .panel > .max-w-7xl,

    .panel > .max-w-4xl {

        max-height: calc(100dvh - 5.7rem);

    }

    .panel h1 { font-size: clamp(2.25rem, 5.2vh, 3.35rem) !important; }

    .panel h2 { font-size: clamp(1.8rem, 4.35vh, 2.7rem) !important; }

    .panel h3 { line-height: 1.08 !important; }

    .panel p { line-height: 1.35 !important; }

    #heroSliderCard { padding: 1.05rem !important; }

    #heroSliderCard .slider-image-container { margin-block: .35rem !important; }

    #heroSliderCard .slider-image-container > div { height: min(17vh, 8.4rem) !important; }

    #heroSliderCard .slider-img { max-height: min(16vh, 8rem) !important; }

    #problems .glass-card { padding: .85rem 1rem !important; row-gap: .4rem !important; }

    #advantages .step-wrapper .glass-card { padding-block: .65rem !important; }

    #advantages .step-final-card .glass-card { padding: 1rem !important; }

    #advantages .step-final-card ul { row-gap: .38rem !important; }

    #advantages .step-final-card .pt-6 { padding-top: .65rem !important; margin-top: .65rem !important; }

    #process .relative.pt-6 { padding-top: 1.5rem !important; }

    #process .process-step-card { padding: .65rem !important; }

    #process .process-step-card .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .4rem !important; }

    #process .w-full.md\:w-1\/2.h-32 { height: 6rem !important; }

    #trust .trust-counter-number { font-size: 2.35rem !important; }

    #trust .glass-card { padding: .65rem !important; }

    #solutions .adv-img-container { height: min(12vh, 5.25rem) !important; }

    #solutions .adv-expandable-content { padding-top: .25rem !important; }

    #solutions .flex.justify-end.pt-2 { padding-top: .15rem !important; }

    #catalog .cyber-prod-img { height: min(12vh, 5rem) !important; }

    #catalog .cyber-prod-card { padding: .6rem !important; }

    #catalog .flex.justify-end.pt-2 { padding-top: 0 !important; }

    #contactDetails > .glass-card { padding: .85rem !important; }

    #contactDetails h2 { font-size: clamp(1.65rem, 3.9vh, 2.35rem) !important; }

    #contactMap > div { max-height: calc(100dvh - 7rem); }

}

/* Extra-safe combined state common on 13-inch MacBooks. */

@media (min-width: 1024px) and (max-width: 1499px) and (max-height: 849px) {

    #mainMenu { gap: clamp(.48rem, .75vw, .75rem) !important; }

    #mainMenu .menu-link { font-size: clamp(.45rem, .49vw, .53rem) !important; }

    nav > div:first-child > span { display: none !important; }

    .panel > .max-w-7xl,

    .panel > .max-w-4xl { max-width: calc(100vw - 2rem) !important; }

}

/* ==========================================================

   FOLLOW-UP: short laptop composition + visible mobile grid

   ========================================================== */

/* 13–14 inch laptops: remove the dead zone in the hero by making

   the slider occupy its whole grid column and reducing the gap. */

@media (min-width: 1024px) and (max-width: 1499px) and (max-height: 849px) {

    #hero > .max-w-7xl {

        column-gap: clamp(.9rem, 1.35vw, 1.25rem) !important;

        align-items: center !important;

    }

    #heroSliderColumn {

        justify-content: flex-start !important;

        align-items: center !important;

    }

    #heroSliderCard {

        width: 100% !important;

        max-width: none !important;

    }

    /* Place the certificates action beside the section heading instead

       of below the cards, where it could leave the 100vh panel. */

    #solutions > .max-w-7xl {

        position: relative !important;

    }

    #solutions > .max-w-7xl > .space-y-2:first-child {

        padding-right: 15.5rem !important;

    }

    #solutions .flex.justify-end.pt-2 {

        position: absolute !important;

        top: .15rem !important;

        right: clamp(1rem, 2.25vw, 2.25rem) !important;

        z-index: 12 !important;

        padding-top: 0 !important;

    }

    #solutions .flex.justify-end.pt-2 .cyber-site-btn {

        padding: .72rem 1rem !important;

        font-size: .58rem !important;

        white-space: nowrap !important;

    }

}

/* Mobile grid: use a panel pseudo-layer rather than relying only on the

   global fixed grid, because opaque section backgrounds can cover it. */

@media (max-width: 639px) {

    body,

    .horizontal-scroll-container {

        background-color: #05070a !important;

    }

    .cyber-grid {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        background-image:

            linear-gradient(rgba(0, 143, 134, .085) 1px, transparent 1px),

            linear-gradient(90deg, rgba(0, 143, 134, .085) 1px, transparent 1px) !important;

        background-size: 32px 32px !important;

    }

    .panel {

        position: relative !important;

        isolation: isolate;

        background-color: #05070a !important;

        background-image: none !important;

    }

    .panel::before {

        content: "";

        position: absolute;

        inset: 0;

        z-index: 0;

        pointer-events: none;

        background-image:

            linear-gradient(rgba(0, 143, 134, .075) 1px, transparent 1px),

            linear-gradient(90deg, rgba(0, 143, 134, .075) 1px, transparent 1px);

        background-size: 32px 32px;

        background-position: center top;

        opacity: .72;

    }

    .panel > * {

        position: relative;

        z-index: 1;

    }

    /* Preserve deliberately positioned decorative layers. */

    .panel > .schema-parallax-bg {

        position: absolute !important;

        z-index: 0 !important;

    }

}

/* FINAL POLISH: JetBrains Mono, softer Chrome PNG rendering, compact mobile certificates */


/* На мобильных поп-ап сертификатов не занимает весь экран. */

@media (max-width: 639px) {

    #certsModal {

        padding: 1rem !important;

        align-items: center !important;

    }

    #certsModal .modal-card {

        width: min(92vw, 26rem) !important;

        max-height: 78dvh !important;

        min-height: 0 !important;

        padding: 1rem 1rem .85rem !important;

        border-radius: 1.25rem !important;

        overflow: hidden !important;

    }

    #certsModal .modal-card > .text-center {

        margin-bottom: .5rem !important;

        padding-inline: 1.75rem !important;

    }

    #certsModal .modal-card > .relative.w-full {

        min-height: 0 !important;

        height: 54dvh !important;

        max-height: 54dvh !important;

    }

    #certsModal .cert-slide-img {

        max-height: 51dvh !important;

        max-width: 100% !important;

        width: auto !important;

        height: auto !important;

        object-fit: contain !important;

    }

    #certsModal .mt-4 {

        margin-top: .5rem !important;

    }

    #certsModal .cert-arrow-btn {

        width: 36px !important;

        height: 36px !important;

    }

}


/* Chrome иногда жёстко растрирует прозрачные PNG при scale/filter/compositing.

   В каталоге оставляем исходную альфу и мягкое браузерное сглаживание. */

#catalog .cyber-prod-img {

    background: transparent !important;

    isolation: isolate;

}

#catalog .cyber-prod-img img {

    object-fit: contain !important;

    filter: none !important;

    image-rendering: auto !important;

    -webkit-font-smoothing: antialiased;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform: none !important;

    will-change: auto !important;

}

#catalog .cyber-prod-card:hover .cyber-prod-img img,

#catalog .cyber-prod-card:focus-visible .cyber-prod-img img {

    transform: none !important;

}


/* На экране контактов убираем декоративную фоновую polygon-анимацию,

   чтобы за картой не пролетали точки/треугольники. */

body.contacts-active #polygonCanvas {

    opacity: 0 !important;

    visibility: hidden !important;

    transition: opacity .45s ease !important;

}

@media (max-width: 639px) {
    /* Другие ваши стили... */

    /* Исправление размера шрифта заголовка в мобильном поп-апе / форме */
    .modal-card h2, 
    .modal-card h3, 
    .modal-card p.text-2xl,
    .modal-card p.text-3xl {
        font-size: 1.15rem !important; /* Уменьшаем крупный шрифт до читаемого размера */
        line-height: 1.35 !important;  /* Делаем нормальный интервал между строками */
        letter-spacing: normal !important;
    }
    
    /* Дополнительно отступ справа для текста, чтобы он не залезал на крестик закрытия */
    .modal-card {
        padding-top: 2.5rem !important;
    }
}