* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin: 0; color:#222; }
.container { width: 100%; margin: 0 auto; padding: 0 20px; }
.container.maxwid { max-width: 1320px !important; }
.section { padding: 0; }
h1 {font-size:32px;}
h2 {font-size:30px;}
h3 {font-size:28px;}
h4 {font-size:26px;}
h5 {font-size:24px;}
h6 {font-size:20px;}
p {font-size:18px; line-height:1.6;}
img.img-responsive { max-width:100%; height:auto; display:block; }

.btn { display:inline-block; text-decoration:none; border-radius:4px; }
.btn.btn-lg {padding: 12px 20px; font-size:16px;}
.btn-call-to-action { color:#fff; }

.bg-green { background-color: #288719; }
.bold { font-weight: bold; }
span.no-break { white-space: nowrap; }

/* image banner */
.image-banner {
    background: url('https://www.zyxel.com/sites/zyxel/files/ua/uk/uploads/img1.jpg') no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    aspect-ratio: 3840 / 1920;
}
.image-banner .area { position: relative; display: flex; width: 100%; height: 100%; }
.image-banner .area .box {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 8vw; color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,1);
}
.image-banner .area .box h1 { font-size: 36px; font-weight:bold; }
.image-banner .area .box h2 { font-size: 18px; font-weight: 300; line-height: 2; margin-bottom: 10px; }

@media screen and (max-width: 768px) {
    .image-banner { background-position: 68% top; background-size: cover; height: 620px; aspect-ratio: auto; }
    .image-banner .area .box { width: 85%; }
    .image-banner .area .box h1 { font-size: 32px; }
    .image-banner .area .box h2 { margin-top: 10px; font-size: 16px; }
}
@media screen and (max-width: 500px) { .image-banner { height:560px; } }

/* highlights */
.highlights-section { background-color: transparent; padding: 40px 0; }
.higtlights p { color:#000; }
.higtlights .box { display: flex; flex-wrap: wrap; width: 85%; justify-content: center; margin: 0 auto; text-align: center; }
.higtlights .box .area { width: calc(100% / 4); padding: 10px; }
.higtlights .box .area .icon { font-size: 40px; color:#43b02a; margin-bottom: 10px; }
.higtlights .box .area p { padding: 0 10px; }
.higtlights .box .area p span { font-weight: bold; }
@media screen and (max-width: 991px) {
    .higtlights .box { width: 90%; }
    .higtlights .box .area { width: calc(100% / 2); }
}

/* feature 1 */
.feature-1 .frame { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; width: 85%; gap: 10%; margin: 0 auto; padding: 5vw 0; }
.feature-1 .content { width: 50%; }
.feature-1 .image { width: 50%; }
.feature-1 .image img { padding: 5%; }
.feature-1 .content h3 { font-weight: bold; padding-bottom: 30px; }
@media screen and (max-width: 1400px) { .feature-1 { padding-top: 60px; padding-bottom: 40px; } }
@media screen and (max-width: 991px) {
    .feature-1 .frame { flex-direction: column; width: 90%; }
    .feature-1 .content { width: 100%; padding: 0; }
    .feature-1 .image { width: 100%; margin-bottom: 30px; }
    .feature-1 .image img { padding: 0; }
}

/* feature 2 (bg image) */
.feature-2 {
    background: url('https://www.zyxel.com/sites/zyxel/files/ua/uk/uploads/img3.jpg') no-repeat center;
    min-height: 700px;
    background-size: cover;
    position: relative;
}
.feature-2 .content {
    position: absolute; right: 6%; width: 42%; height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    background: rgba(255,255,255,0.88); padding: 40px;
}
.feature-2 .content h3 { padding-bottom: 20px; font-weight: bold; }
.feature-2 .content .btn-call-to-action { background-color: #288719; }
.feature-2 .content .btn-call-to-action:hover { background-color: #006e18; }
@media screen and (max-width: 991px) {
  .feature-2 { background: none; height: auto; display: flex; flex-direction: column; align-items: center; }
  .feature-2::before {
    content: ""; display: block; width: 100%; aspect-ratio: 16 / 9;
    background: url('https://www.zyxel.com/sites/zyxel/files/ua/uk/uploads/img3.jpg') no-repeat center;
    background-size: cover;
  }
  .feature-2 .content { position: static; width: 100%; padding: 40px 20px; background-color: #f9f9f9 !important; }
}

/* feature 3 */
.feature-3 .frame { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; width: 85%; gap: 10%; margin: 0 auto; padding: 5vw 0; }
.feature-3 .content { width: 50%; }
.feature-3 .image { width: 50%; }
.feature-3 .image img { padding: 5%; }
.feature-3 .content h3 { font-weight: bold; padding-bottom: 30px; }
@media screen and (max-width: 991px) {
    .feature-3 .frame { flex-direction: column; width: 90%; }
    .feature-3 .content { width: 100%; padding: 0; }
    .feature-3 .image { width: 100%; margin-bottom: 30px; }
    .feature-3 .image img { padding: 0; }
}

/* feature 4 (nebula-app pattern reused for Networked AV wizard) */
.nebula-app .frame { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; width: 85%; gap: 10%; margin: 0 auto; padding: 5vw 0; }
.nebula-app .content { width: 50%; }
.nebula-app .image { width: 50%; }
.nebula-app .content h3 { padding-bottom: 20px; font-weight: bold; }
@media screen and (max-width: 991px) {
    .nebula-app .frame { flex-direction: column; width: 90%; }
    .nebula-app .content { width: 100%; padding: 0; }
    .nebula-app .image { width: 100%; margin-top: 10px; }
}

/* feature 5 (one-platform pattern reused for "Under the Hood" intro) */
.one-platform {
    background: url('https://www.zyxel.com/sites/zyxel/files/ua/uk/uploads/img8.jpg') no-repeat center;
    min-height: 700px;
    background-size: cover;
    position: relative;
}
.one-platform .content {
    position: absolute; left: 6%; width: 42%; height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    background: rgba(0,0,0,0.55); color:#fff; padding: 40px;
}
.one-platform .content h3 { padding-bottom: 20px; font-weight: bold; }
@media screen and (max-width: 1601px) { .one-platform { min-height: 600px; } }
@media screen and (max-width: 991px) {
  .one-platform { background: none; height: auto; display: flex; flex-direction: column; align-items: center; }
  .one-platform::before {
    content: ""; display: block; width: 100%; aspect-ratio: 16 / 9;
    background: url('https://www.zyxel.com/sites/zyxel/files/ua/uk/uploads/img8.jpg') no-repeat center;
    background-size: cover;
  }
  .one-platform .content { position: static; width: 100%; padding: 40px 20px; background-color: #1a1a1a !important; }
}

/* feature 6 - base-view with tooltips */
.base-view { position:relative; }
.base-view .image.desktop {
    background:url('https://www.zyxel.com/sites/zyxel/files/ua/uk/uploads/img13.jpg') no-repeat;
    background-size:100% auto;
    position:relative;
    aspect-ratio: 3024 / 1410;
}
.base-view .image.mobile { display:none; }
.base-view .description .p-01 { position:absolute; top: 30%; left: 20%; }
.base-view .description .p-02 { position:absolute; top: 45%; left: 40%; }
.base-view .description .p-03 { position:absolute; top: 60%; left: 60%; }
.base-view .description .p-04 { position:absolute; top: 35%; left: 78%; }
.base-view .description .circleBG {
    position:absolute; height:30px; width:30px; top: 0; left: 0; text-align:center;
    transform: translate(-50%, -50%); border-radius:100px; z-index:1;
}
.base-view .description .circleBG i { font-size:28px; padding:1px; color:#288719; }
.base-view .description .circleBG .flash {
    position:absolute; width:100px; height:100px; z-index:-1; left:50%; top:50%; opacity:0;
    margin:-50px 0 0 -50px; border-radius:100px; animation:flash 1.8s infinite;
}
@keyframes flash { 0%{ opacity:1; transform:scale(0); } 100%{ opacity:0; transform:scale(1); } }
.base-view .description .white { background-color:rgba(255,255,255,.6); }
.base-view .description .green { background-color:rgba(40, 135, 25, 0.6); }
.base-view .description .look-tooltip .tooltiptext {
    visibility: hidden; width: auto; height: 28px; line-height: 28px; white-space: nowrap;
    background-color: rgba(40, 135, 25, 1); color: #fff; text-align: center;
    position: absolute; top: 1px; transform: translateY(-50%);
    left: 0; border-radius: 0 14px 14px 0; padding: 0 15px 0 25px;
}
.base-view .description .look-tooltip:hover .tooltiptext { visibility: visible; }
@media screen and (max-width: 991px) {
    .base-view .image.desktop { display:none; }
    .base-view .image.mobile {
        display:block;
        background:url('https://www.zyxel.com/sites/zyxel/files/ua/uk/uploads/img13.jpg') no-repeat top center;
        background-size: 145% auto;
        aspect-ratio: 1000 / 700;
        position: relative;
    }
    .base-view .description .look-tooltip .tooltiptext {
        white-space: normal; max-width: 200px; height: auto; line-height: 1.4;
        padding: 12px 14px 12px 18px !important; border-radius: 14px !important;
    }
    .base-view .description .look-tooltip:hover { z-index: 10; }
}

/* resources (configure pattern reused) */
.how-to-configure h3 { font-weight:bold; padding-bottom:40px; text-align: center; }
.nebula_video { display: flex; flex-direction: row; width: 100%; }
.video_area ul { list-style: none; display: flex; justify-content: space-around; padding:0; margin:0; gap: 20px;}
.video_area ul li {
    width:30%; box-shadow: 0px 0px 28px 3px rgb(0 0 0 / 15%); border-radius: 6px; overflow:hidden;
}
.video_area ul li a { display:block; padding: 25px; text-decoration:none; color:#222; background:#f5f5f5; height:100%; }
.video_area ul li a h4 { margin:0 0 10px; color:#288719; font-size:20px; }
.video_area ul li a p { font-size:15px; margin:0; }
@media screen and (max-width: 769px) {
    .video_area ul { flex-direction: column; padding: 20px 20px 0; }
    .video_area ul li { width: 100%; margin-bottom: 30px; }
}

/* note */
div#note { margin-top: 10px; margin-bottom: 60px; }
.spec-note ol { list-style: none; }

/* two-column text block with image below */
.split-text-block { padding: 5vw 0; }
.split-text-block .container { width: 85%; margin: 0 auto; max-width: 1320px; }
.split-text-block h3 { font-weight: bold; padding-bottom: 30px; }
.split-text-block .columns {
    display: flex;
    gap: 6%;
    margin-bottom: 40px;
}
.split-text-block .columns .col { width: 47%; }
.split-text-block .image { text-align: center; }
.split-text-block .image img { max-width: 700px; margin: 0 auto; }
@media screen and (max-width: 800px) {
    .split-text-block .columns { flex-direction: column; gap: 0; }
    .split-text-block .columns .col { width: 100%; }
}

.section-features { padding: 60px 0; }
.author-line { font-size: 12px; text-align:center; padding: 15px 0; color:#666; }

/* plain text-only blocks (no image) */
.text-block { padding: 50px 0; }
.text-block .container { max-width: 900px; }
.text-block h3 { font-weight: bold; padding-bottom: 20px; }
.text-block ul { padding-left: 20px; }
.text-block li { font-size: 18px; line-height: 1.6; margin-bottom: 10px; }

/* allow alternating left/right image blocks */
.frame.normal { flex-direction: row; }
@media screen and (max-width: 991px) {
    .frame.normal { flex-direction: column; }
}

/* simple stacked image + caption block (teardown gallery) */
.teardown-figure { padding: 30px 0; text-align: center; }
.teardown-figure img { max-width: 600px; margin: 0 auto 20px; }
.teardown-figure .container { max-width: 900px; }
.teardown-figure p { text-align: left; }

/* alternating two-column teardown gallery */
.teardown-block { padding: 30px 0; }
.teardown-block .frame {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 85%;
    gap: 8%;
    margin: 0 auto;
}
.teardown-block .frame.reverse { flex-direction: row-reverse; }
.teardown-block .image { width: 45%; }
.teardown-block .image img { width: 100%; }
.teardown-block .content { width: 45%; }
.teardown-block .content h4 { font-weight: bold; padding-bottom: 12px; font-size: 22px; }
.teardown-block .content p { font-size: 17px; }
@media screen and (max-width: 800px) {
    .teardown-block .frame,
    .teardown-block .frame.reverse { flex-direction: column; width: 90%; }
    .teardown-block .image { width: 100%; margin-bottom: 20px; }
    .teardown-block .content { width: 100%; }
}