.lazy {opacity:0; transition:opacity 0.3s}
.lazy.loaded {opacity:1}
#sp-main-body {padding:28px 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,border-color 0.2s}
.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)}
.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}
.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}
.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}
.faq-item.active > p {max-height:500px; opacity:1; padding-top:10px}
.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,box-shadow 0.2s,border-color 0.2s}
.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 20px 20px; border-top:1px solid rgba(255,255,255,0.06)}
.footer-content {display:grid; grid-template-columns:repeat(12,1fr); gap:20px; max-width:1200px; margin:0 auto}
.footer-section {grid-column:span 3}
.footer-section h4 {color:var(--accent); margin-bottom:12px; text-align:left}
.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); max-width:1200px; margin:20px auto 0}
.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}
.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}
.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}
.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}
.hero-description {text-align:justify}
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}
 }
.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}
}
@media (max-width:1024px) {.footer-section {grid-column:span 6}
}
@media (max-width:768px) {.footer-section {grid-column:span 12}
 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}
 .footer-content {grid-template-columns:1fr; gap:30px}
}
/*@media (max-width:479px) {.header-nav {display:none}
}
.header-container {position:relative}
.hamburger {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10; cursor:pointer}
.btn-emergency {background:#dc3545; color:#fff}*/