* {margin:0; padding:0}
body {font-display:swap}
.lazy {opacity:0; transition:opacity 0.3s}
.lazy.loaded {opacity:1}
:root {--primary:#180773; --accent:#ffcb05; --bg:#f7f8fb; --surface:#ffffff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb; --nav-height:64px; --radius:12px; --radius-sm:8px; --shadow-sm:0 2px 8px rgba(0,0,0,0.06); --shadow-md:0 8px 24px rgba(0,0,0,0.12)}
* {box-sizing:border-box}
html,body {height:100%}
body {margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif; font-size:18px; line-height:1.6; color:var(--text); background:var(--bg); padding-top:var(--nav-height); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
img {max-width:100%; height:auto; display:block}
a {color:var(--primary); text-decoration:none}
a:hover {color:#0f0a52}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible {outline:3px solid rgba(24,7,115,0.35); outline-offset:2px}
.container {max-width:1200px; margin:0 auto; padding:0 20px}
h1,h2,h3,h4,h5,h6 {color:var(--primary); margin:0 0 12px; line-height:1.25}
p {margin:0 0 12px; color:var(--text)}
.breadcrumbs {padding:12px 0; margin-bottom:16px; font-size:0.95rem; color:var(--muted)}
.breadcrumbs ol {display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; align-items:center}
.breadcrumbs li {display:flex; align-items:center}
.breadcrumbs li:not(:last-child)::after {content:"/"; margin:0 8px; color:var(--muted)}
.breadcrumbs a {color:var(--primary); text-decoration:none; font-weight:500}
.breadcrumbs a:hover {text-decoration:underline}
.hero-description {text-align:justify}
.site-header {position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-height); background:rgba(24,7,115,0.96); backdrop-filter:saturate(150%) blur(8px); box-shadow:0 1px 0 rgba(255,255,255,0.04),var(--shadow-sm)}
.header-container {max-width:1200px; margin:0 auto; padding:0 20px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px}
.header-logo {flex-shrink:0; display:flex; align-items:center}
.header-logo .custom-img {max-height:50px; width:auto}
.header-nav {flex:1 1 auto; display:flex; justify-content:center}
.header-nav ul {list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:5px}
.header-nav ul li {position:relative}
.header-nav ul li > a {display:block; color:#fff; font-weight:600; padding:10px 16px; border-radius:8px; transition:color 0.2s ease,background-color 0.2s ease; font-size:14px; white-space:nowrap}
.header-nav ul li > a:hover {background:rgba(255,255,255,0.08)}
.header-nav ul ul {display:none; position:absolute; top:100%; left:0; min-width:220px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-md); padding:0; z-index:1001}
.header-nav ul li:hover > ul {display:block}
.header-nav ul ul li {width:100%}
.header-nav ul ul a {color:var(--text); padding:10px 12px; border-radius:8px; white-space:normal}
.header-nav ul ul a:hover {background:#f3f4f6; color:var(--primary)}
.header-phone {flex-shrink:0}
.header-phone a {color:var(--accent) !important; font-weight:700 !important; font-size:1.1em; text-shadow:0 1px 2px rgba(0,0,0,0.2); white-space:nowrap}
.header-phone a:hover {color:#ffd700 !important; transform:scale(1.02); transition:transform 0.2s ease,color 0.2s ease}
.hamburger {display:none; color:#fff; font-size:20px; padding:10px 12px; border:1px solid rgba(255,255,255,0.25); border-radius:10px; cursor:pointer; user-select:none}
.side-menu {position:fixed; top:0; left:0; height:100%; width:320px; background:var(--surface); border-right:1px solid var(--border); transform:translateX(-100%); transition:transform 0.3s ease; z-index:1100; overflow-y:auto; box-shadow:var(--shadow-md)}
.side-menu.active {transform:translateX(0)}
.side-menu .close-btn {position:absolute; top:12px; right:12px; font-size:18px; cursor:pointer; color:var(--muted)}
.side-menu ul {list-style:none; margin:0; padding:68px 12px 16px}
.side-menu li a {display:block; padding:10px 12px; color:var(--text); border-radius:8px; font-weight:600}
.side-menu li a:hover {background:#f3f4f6; color:var(--primary)}
.side-menu ul ul {padding:4px 0 8px 8px}
.side-menu ul ul a {font-weight:500; opacity:0.9}
#sp-main-body {padding:8px 0 64px}
.row {display:flex; flex-wrap:wrap; gap:20px; margin:0}
.row > * {flex:1 1 100%}
.productdetails-view .heading-title {margin-bottom:6px}
.productdetails-view h3 {color:var(--text); font-weight:600; opacity:0.9}
.main-image {background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow-sm)}
.product-details-container {background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm)}
.product-short-description p {display:flex; align-items:center; gap:10px; margin:10px 0; color:var(--text)}
.productInfo__content.content {background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin:20px 0; box-shadow:var(--shadow-sm)}
.productInfo__content h2 {margin-bottom:12px}
.product-hero .row {display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px}
.product-hero__image-col,.product-hero__text-col {flex:0 0 100%; max-width:100%}
.product-hero__image-col {margin-bottom:20px}
@media (min-width:768px) {.product-hero .row {flex-wrap:nowrap; gap:30px}
 .product-hero__image-col {flex:0 0 40%; max-width:40%; margin-bottom:0}
 .product-hero__text-col {flex:0 0 60%; max-width:60%}
 .product-hero__image-col img {width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-md)}
}
@media (max-width:767px) {.product-hero__image-col {text-align:center}
 .product-hero__image-col img {max-width:80%; margin:0 auto}
}
.faq-item {border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; background:#fafafa; margin-bottom:10px; transition:background 0.2s ease,border-color 0.2s ease}
.faq-item:hover {background:#f5f6f8; border-color:#dfe3e8}
.faq-item h3 {color:var(--primary); font-size:18px; margin-bottom:8px; cursor:default}
.faq-item p {margin:0; color:var(--text)}
.mobile-link {display:inline-flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); transition:transform 0.15s ease,box-shadow 0.2s ease,border-color 0.2s ease}
.mobile-link:hover {transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#d6dae0}
.mobile-link span {color:var(--text)}
.footer {background:#180773; color:#cbd5e1; padding:40px 0 0 40px; border-top:1px solid rgba(255,255,255,0.06)}
.footer-content {display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-bottom:0}
.footer-section {grid-column:span 3}
.footer-section h4 {color:var(--accent); margin-bottom:12px}
.footer-section ul {list-style:none; margin:0; padding:0}
.footer-section li {margin:8px 0}
.footer-section a {color:#e5e7eb}
.footer-section a:hover {color:var(--accent)}
.footer-bottom {text-align:center; color:#94a3b8; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08)}
.custom-table {width:100%; border-collapse:collapse}
.custom-table td {background:var(--primary); color:#fff; text-align:center; vertical-align:middle; padding:10px 16px}
.custom-table a {color:#fff; text-decoration:underline}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:10px; border:1px solid transparent; font-weight:600; cursor:pointer; transition:transform 0.15s ease,box-shadow 0.2s ease,background-color 0.2s ease,color 0.2s ease}
.btn-primary {background:var(--primary); color:#fff}
.btn-primary:hover {transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn-secondary {background:#f3f4f6; color:var(--text); border-color:var(--border)}
.btn-secondary:hover {background:#eef0f3}
.btn-emergency {background:#dc3545; color:#fff}
.align-right {text-align:right !important; padding:0 !important}
.highlight {background:linear-gradient(120deg,#fff8d6 0,#ffeaa7 100%); padding:0.15rem 0.4rem; border-radius:6px; font-weight:600; color:var(--text)}
.main-content a,#sp-main-body a {color:var(--primary); text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(24,7,115,0.3); transition:all 0.2s ease}
.main-content a:hover,#sp-main-body a:hover {color:#0f0a52; text-decoration-color:var(--primary)}
.main-content p a,.main-content li a,#sp-main-body p a,#sp-main-body li a {font-weight:600}
.main-content .btn,#sp-main-body .btn,#sp-main-body .mobile-link,nav a,.footer a {text-decoration:none}
.product-features {margin:20px 0}
.product-features p {display:flex; align-items:center; gap:10px; margin:8px 0; color:var(--text)}
.product-features img {flex-shrink:0; margin:0}
@media (max-width:1024px) {.footer-section {grid-column:span 6}
}
@media (max-width:768px) {:root {--nav-height:56px}
 .header-nav ul {display:none}
 .hamburger {display:block}
 .footer-section {grid-column:span 12}
:root {font-size:14px}
 nav a,.btn,.header-item a {min-height:44px; padding:12px 16px}
 h1 {font-size:2rem}
 h2 {font-size:1.75rem}
}
.hero-section {padding:10px 0; background:linear-gradient(135deg,#f7f8fb 0,#eef1f7 100%); border-bottom:1px solid var(--border)}
.hero-content {max-width:1200px}
.hero-row {display:flex; flex-wrap:wrap; align-items:flex-start; gap:40px}
.hero-text {flex:1 1 55%; min-width:300px}
.hero-image {flex:1 1 40%; min-width:300px; text-align:center; align-self:flex-start}
.hero-text h1 {font-size:2.5rem; color:var(--primary); margin-bottom:20px; line-height:1.2}
.hero-description {color:var(--text); margin-bottom:30px; line-height:1.6}
.hero-cta {display:flex; gap:16px; flex-wrap:wrap}
.hero-image img {max-width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-md); transition:transform 0.3s ease; display:block}
.hero-image img:hover {transform:translateY(-5px)}
@media (max-width:768px) {.hero-section {padding:40px 0}
 .hero-row {flex-direction:column; gap:30px; align-items:stretch}
 .hero-text,.hero-image {flex:1 1 100%}
 .hero-image {align-self:auto}
 .hero-text h1 {font-size:2rem; text-align:center}
 .hero-description {font-size:1.1rem; text-align:left}
 .hero-cta {justify-content:center}
 .hero-image img {max-width:90%; margin:0 auto}
}
@media (max-width:480px) {.hero-cta {flex-direction:column; align-items:center}
 .hero-cta .btn {width:100%; max-width:280px}
}
h1,h2 {color:var(--primary); margin:0 0 12px; line-height:1.25; text-align:center}
.hero-text h1 {text-align:left}
@media (max-width:768px) {.hero-text h1 {text-align:center}
}
.footer-section h4 {text-align:left}
.benefits-section h2,.modes-section h2,.monitoring-section h2,.analytics-section h2,.faq-section h2,.contact-section h2 {margin-bottom:40px; font-size:2rem}
@media (min-width:1200px) {h1 {font-size:3rem}
 .benefits-section h2,.modes-section h2,.monitoring-section h2,.analytics-section h2,.faq-section h2,.contact-section h2 {font-size:2.5rem}
}
.text-block-section {padding:60px 0; background-color:#f8f9fa; margin:40px 0}
.text-block-section h2 {font-size:28px; margin-bottom:25px; color:#333; text-align:center}
.text-block-section p {font-size:16px; line-height:1.6; margin-bottom:20px; color:#555; text-align:justify}
.text-block-section .container {max-width:900px}
.faq-item {border-bottom:1px solid #e0e0e0; margin-bottom:15px; padding-bottom:15px}
.faq-item:last-child {border-bottom:none}
.faq-question {cursor:pointer; position:relative; padding-right:30px; margin-bottom:10px; color:#333; font-size:18px; transition:color 0.3s ease}
.faq-question:hover {color:#007bff}
.faq-question::after {content:"+"; position:absolute; right:0; top:0; font-size:24px; font-weight:300; transition:transform 0.3s ease}
.faq-item.active .faq-question::after {content:"−"; transform:rotate(180deg)}
.faq-item > p {max-height:0; overflow:hidden; margin:0; padding:0; opacity:0; transition:all 0.3s ease}
.faq-item.active > p {max-height:500px; opacity:1; padding-top:10px}
.header-container {position:relative}
.hamburger {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10; cursor:pointer}
@media (max-width:479px) {.header-nav {display:none}
}
@media (max-width:768px) {body,p,li,.hero-text,.hero-description,.feature-item p,.step-item p,.solution-item p,.faq-item p {font-size:16px}
 .btn,.hero-cta .btn,.header-phone a,.btn-secondary,.contact-form button,.contact-form input[type="submit"] {min-height:48px; min-width:48px; display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; box-sizing:border-box}
 .hamburger {font-size:36px; line-height:1}
 .hero-benefits li {margin-bottom:0.8em}
}
.product-header {display:flex; flex-wrap:wrap; align-items:flex-start; gap:30px; margin-top:20px}
 .contact-form-wrapper {max-width:60%; margin:25px auto 15px auto; padding:0}
 .contact-form .form-label {display:block; margin-bottom:12px; font-weight:600}
 .contact-form .form-input,.contact-form .form-textarea {width:100%; padding:12px 15px; margin-bottom:18px; border:1px solid #ddd; border-radius:6px; font-size:16px; box-sizing:border-box; font-family:inherit}
 .contact-form .form-textarea {margin-bottom:20px; resize:vertical}
 .zakaz-link {display:inline-block; padding:18px 45px; background:#0066aa; color:#ffffff !important; font-size:22px; font-weight:700; text-transform:uppercase; text-decoration:none; border:none; border-radius:8px; letter-spacing:1px; box-shadow:0 4px 15px rgba(255,107,0,0.4); cursor:pointer; transition:background 0.3s,transform 0.2s,box-shadow 0.3s; font-family:inherit}
 .zakaz-link:hover {background:#003355 !important; transform:translateY(-2px); box-shadow:0 8px 25px rgba(255,107,0,0.5) !important; color:#ffffff !important}
 .zakaz-link:active {transform:translateY(0)}
 .btn-submit-wrapper {text-align:center; margin-top:10px}
 @media (max-width:768px) {.contact-form-wrapper {max-width:90%}
 }
 .contact-form-wrapper {max-width:60%; margin:25px auto 15px auto; padding:0}
 .contact-form .form-label {display:block; margin-bottom:12px; font-weight:600}
 .contact-form .form-input,.contact-form .form-textarea {width:100%; padding:12px 15px; margin-bottom:18px; border:1px solid #ddd; border-radius:6px; font-size:16px; box-sizing:border-box; font-family:inherit}
 .contact-form .form-textarea {margin-bottom:20px; resize:vertical}
 .zakaz-link {display:inline-block; padding:18px 45px; background:#0066aa; color:#ffffff !important; font-size:22px; font-weight:700; text-transform:uppercase; text-decoration:none; border:none; border-radius:8px; letter-spacing:1px; box-shadow:0 4px 15px rgba(255,107,0,0.4); cursor:pointer; transition:background 0.3s,transform 0.2s,box-shadow 0.3s; font-family:inherit}
 .zakaz-link:hover {background:#003355 !important; transform:translateY(-2px); box-shadow:0 8px 25px rgba(255,107,0,0.5) !important; color:#ffffff !important}
 .zakaz-link:active {transform:translateY(0)}
 .btn-submit-wrapper {text-align:center; margin-top:10px}
 .product-showcase {display:flex; flex-wrap:wrap; align-items:flex-start; gap:30px; margin-top:20px; margin-bottom:20px}
 .product-showcase .main-image {flex:1 1 300px; max-width:300px}
 .product-showcase .main-image img {width:100%; height:auto}
 .product-showcase .product-details-container {flex:1 1 300px}
 .product-showcase .product-short-description p {margin:0 0 8px 0}
 @media (max-width:768px) {.contact-form-wrapper {max-width:90%}
 .product-showcase {flex-direction:column; align-items:center}
 .product-showcase .main-image {max-width:250px}
 }
.product-header.product-showcase {display:flex; flex-wrap:wrap; align-items:flex-start; gap:30px}
.product-header.product-showcase .product-image {flex:0 0 40%; max-width:40%; min-width:300px}
.product-header.product-showcase .product-description {flex:1 1 55%; min-width:300px}
@media (max-width:768px) {.product-header.product-showcase {flex-direction:column; align-items:center}
 .product-header.product-showcase .product-image {flex:1 1 auto; max-width:80%; min-width:0}
 .product-header.product-showcase .product-description {flex:1 1 100%; min-width:0}
}