* { 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_0.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/img4.png') 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/img4.png') 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) */
.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_0.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_0.jpg') no-repeat center;
    background-size: cover;
  }
  .one-platform .content { position: static; width: 100%; padding: 40px 20px; background-color: #1a1a1a !important; }
}

/* resources */
.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 h4 { font-weight: bold; padding-bottom: 15px; }
.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%; }
}