:root {
  --teal: #22cfc3;
  --sky: #54d8ff;
  --bg: #000;
  --text: #fff;
  --focus-ring: 0 0 0 3px rgba(84, 216, 255, 0.5);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Jura", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container { width: min(1280px, 92%); margin: 0 auto; }
a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
.top-contact-bar {
  background: #000;
  padding: 14px 0;
  position: relative;
  z-index: 30;
}
.top-contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.social-badges { display: flex; gap: .5rem; }
.social-badge {
  width: 58px; height: 58px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; text-decoration: none;
  font-size: 2rem;
}
.social-badge:hover { background: var(--sky); }
.contact-badges { display: flex; gap: 2.4rem; flex-wrap: wrap; }
.contact-badges a { color: var(--teal); text-decoration: none; display: inline-flex; gap: .55rem; align-items: center; font-size: 14px; font-weight: 700; }
.contact-badges a:hover { color: var(--sky); }
.site-header {
  position: absolute;
  top: 92px;
  left: 0;
  width: 100%;
  z-index: 25;
  background: transparent;
}
.site-header.scrolled { background: rgba(0,0,0,.86); backdrop-filter: blur(6px); }
.header-inner { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: .95rem 0; }
.site-logo { display: none; }
.main-nav ul { list-style: none; display: flex; margin: 0; padding: 0; gap: 1.6rem; }
.main-nav a {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--teal);
  font-family: "Jura", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  padding-left: 15px;
  padding-right: 15px;
}
.main-nav a:hover, .main-nav a.active, .main-nav a[aria-current='page'] { color: var(--sky); }
.mobile-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-size: 1.8rem;
  cursor: pointer;
}
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 210px 0 112px;
  background:
    linear-gradient(180deg, rgba(5, 14, 27, 0.56) 0%, rgba(0, 0, 0, 0.62) 100%),
    url('../images/background-home.jpg') center/cover no-repeat;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.1vw, 4rem);
  max-width: 1100px;
  margin: 0 auto 18px;
  font-weight: 500;
  line-height: 1.12;
}
.hero-legacy-brand {
  display: block;
  margin: 0 auto 18px;
  max-width: 370px !important;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
.img-fluid { max-width: 100%; height: auto; display: block; }
.footer-social { margin-top: 1rem; }
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--teal);
  border: 1px solid var(--teal); border-radius: 2px;
  text-decoration: none; padding: 12px 32px; font-size: clamp(1.9rem, 3.5vw, 3.5rem); font-weight: 700; line-height: 1.1;
}
.btn-primary:hover { color: var(--sky); border-color: var(--sky); }
.section-dark {
  background: url('../images/bg-pattern-dark.jpg') center/cover no-repeat;
  position: relative;
}
.section-dark::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.section-dark > .container { position: relative; z-index: 1; }
.section-title { text-align: center; color: var(--teal); margin: 0 0 16px; font-size: clamp(1.8rem,4vw,3.3rem); font-weight: 500; }
.two-col { display: grid; grid-template-columns: 36% 64%; gap: 1.25rem; align-items: center; }
.panel {
  border: 1px solid var(--teal);
  background: rgba(0,0,0,.7);
  padding: 22px;
}
.footer-legacy { background: #070707; color: #fff; padding: 60px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap: 2rem; }
.footer-legacy h4 { margin: 0 0 10px; font-size: 1.9rem; }
.footer-legacy p, .footer-legacy a, .footer-legacy li { font-size: .95rem; line-height: 1.55; color: #fff; text-decoration: none; }
.footer-legacy p { margin: 0 0 .55rem; }
.footer-legacy p i { color: var(--teal); margin-right: .55rem; min-width: 14px; }
.footer-legacy ul { list-style: none; margin: 0; padding: 0; }
.quick-link { color: var(--teal) !important; display: inline-flex; align-items: center; gap: .65rem; }
.quick-link:hover { color: var(--sky) !important; }
.footer-logo-stack { display: flex; gap: 1rem; align-items: center; justify-content: center; }
.footer-logo-stack img { max-width: 140px; height: auto; }
.footer-tn-logo { max-width: 220px !important; }
.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.toggle-shell { margin-top: 16px; border-top: 1px solid var(--teal); padding-top: 10px; }
.elementor-toggle-item { margin-bottom: 8px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); }
.elementor-tab-title { display:flex; justify-content:center; align-items:center; gap:8px; background:#171717; color:#fff; cursor:pointer; padding:10px; font-size: 20px; }
.elementor-tab-title.active { background: var(--teal); color:#fff; font-weight: 600; }
.elementor-tab-content { display:none; background:#e5e5e5; color:#111; padding: 10px 20px 14px; font-size: 20px; }
.elementor-tab-content.active { display:block; }
.elementor-tab-content ul { margin:0; display:inline-block; text-align:left; }
.brands-strip { background:#828282; padding: 26px 0; position: relative; }
.brands-strip::before { content:''; position:absolute; inset:0; background:url('../images/bg-network-gray.jpg') center/cover no-repeat; opacity:.18; }
.brands-strip > .container { position:relative; z-index:1; }
.brands-title-white { color: #fff; }
.brand-slider { display:grid; grid-template-columns: 60px 1fr 60px; align-items:center; min-height: 250px; }
.brand-arrow { border:0; background:transparent; color:#fff; font-size:52px; cursor:pointer; }
.brand-showcase { text-align:center; }
.brand-showcase img { max-width: 500px; width: 72%; display: none; }
.brand-showcase img.active { display:inline-block; }
.coming-soon { min-height: 68vh; display: flex; align-items: center; justify-content: center; text-align:center; padding: 170px 0 100px; }
.coming-soon h1 { color: var(--teal); font-size: clamp(2.2rem, 6vw, 5rem); font-weight: 500; }
.products-page-title {
  font-family: "Jura", sans-serif;
  font-size: 60px;
  line-height: 1;
  margin: 0;
}
.contact-hero {
  min-height: 72vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 168px 0 104px;
  position: relative;
  background: url('../images/bg-contact-network.jpg') center/cover no-repeat;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 22, 34, 0.52), rgba(0, 0, 0, 0.66));
}
.contact-hero > .container {
  position: relative;
  z-index: 1;
}
.hero-badge { max-width: 220px; width: 100%; height: auto; }
.contact-hero p { max-width: 900px; margin: 0 auto; font-size: 20px; line-height: 1.5; }
.contact-hero .section-title {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
}
.privacy-main { padding: 120px 0 70px; }
.privacy-link { color: var(--sky); }
.cliq-page-title {
  margin: 0 0 14px;
  color: var(--teal);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 600;
}
.cliq-video-note {
  margin-top: 10px;
  color: #bdefff;
  font-size: .9rem;
}

.home-intro-split { padding: 0; }
.home-intro-grid {
  display: grid;
  grid-template-columns: 34% 66%;
  gap: 0;
  align-items: stretch;
}
.home-intro-left {
  background: linear-gradient(180deg, rgba(34, 207, 195, 0.95) 0%, rgba(34, 207, 195, 0.95) 68%, rgba(0, 0, 0, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 14px 14px;
}
.home-intro-right {
  background:
    linear-gradient(180deg, rgba(2, 12, 20, 0.5), rgba(2, 12, 20, 0.69)),
    url('../images/bg-pattern-dark.jpg') center/cover no-repeat;
  padding: 22px 22px 8px;
}
.home-intro-heading {
  text-align: center;
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.2vw, 3.85rem);
}
.home-intro-subheading {
  text-align: center;
  margin: 16px 0 10px;
  font-size: clamp(2rem, 3.05vw, 3.55rem);
}
.home-intro-copy {
  margin: 0 0 10px;
  text-align: center;
  font-size: 20px;
  line-height: 1.42;
}

.home-about {
  background: linear-gradient(180deg, rgba(34, 207, 195, 0.96), rgba(34, 207, 195, 0.96));
  padding: 40px 0;
  position: relative;
}
.home-about::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 86px;
  background: #000;
  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
}
.home-about-title {
  font-size: clamp(2.35rem, 3.75vw, 4rem);
  margin: 0 0 12px;
  color: #001822;
  font-weight: 600;
}
.home-about-copy {
  font-size: 20px;
  color: #001822;
  margin: 0 0 12px;
  line-height: 1.55;
}

.home-why {
  padding: 34px 0 26px;
  background:
    linear-gradient(90deg, rgba(34, 207, 195, 0.46), rgba(0, 0, 0, 0.84)),
    url('../images/bg-pattern-dark.jpg') center/cover no-repeat;
}
.home-why-grid {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 1.35rem;
  align-items: center;
}
.home-why-image-wrap {
  display: flex;
  justify-content: center;
}
.home-why-image-wrap img {
  max-width: 95%;
  height: auto;
}
.home-why-title {
  text-align: center;
  margin: 0 0 14px;
  font-size: clamp(2.05rem, 3.2vw, 3.55rem);
}
.home-why-copy {
  margin: 0 0 10px;
  text-align: center;
  font-size: 20px;
  line-height: 1.55;
}

.home-testimonials {
  background: #000;
  padding: 26px 0 38px;
}
.home-testimonials .container {
  position: relative;
}
.home-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.home-testimonial-grid article p {
  margin: 0 0 14px;
  text-align: center;
  font-size: 20px;
  line-height: 1.64;
  font-style: italic;
}
.home-testimonial-grid article h3 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.15rem, 1.8vw, 2rem);
  font-weight: 600;
}
.home-testimonial-controls {
  position: absolute;
  left: 32px;
  top: 64%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-testimonial-controls button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.42);
  font-size: 54px;
  line-height: 1;
  cursor: default;
  padding: 0;
}

.services-hero {
  min-height: 72vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 164px 0 108px;
  background:
    linear-gradient(180deg, rgba(2, 10, 18, 0.62) 0%, rgba(0, 0, 0, 0.68) 100%),
    url("../images/bg-network-gray.jpg") center/cover no-repeat;
}
.services-hero h1 {
  margin: 0 0 14px;
  color: var(--teal);
  font-size: 58px;
  font-weight: 500;
  line-height: 1;
}
.services-hero p {
  margin: 0 auto;
  max-width: 1000px;
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
}

.sets-apart-section {
  padding: 0;
  background:
    linear-gradient(110deg, rgba(22, 190, 202, 0.72), rgba(7, 96, 128, 0.78)),
    url("../images/bg-contact-network.jpg") center/cover no-repeat;
}
.sets-apart-image-wrap {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.sets-apart-image-wrap img { width: min(430px, 100%); }
.sets-apart-title {
  text-align: left;
  color: #fff;
  margin-top: 28px;
}
.sets-apart-list {
  margin: 0 0 28px;
  padding-left: 28px;
  color: #fff;
  font-size: 20px;
  line-height: 1.36;
}
.sets-apart-list li { margin: 0 0 10px; }
.sets-apart-list span { color: var(--teal); }

.services-core { padding: 44px 0 34px; }
.services-core-title {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.15rem);
  margin-bottom: 20px;
}
.services-card-grid { margin-bottom: 14px; }
.service-cliq-summary {
  margin: 6px auto 18px;
  max-width: 1240px;
  text-align: center;
  border-color: rgba(84, 216, 255, 0.65);
  background: rgba(3, 18, 27, 0.8);
}
.service-cliq-summary h3 {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 600;
}
.service-cliq-summary p {
  margin: 0 0 10px;
  color: #fff;
  font-size: 20px;
  line-height: 1.45;
}
.service-cliq-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sky);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
}
.service-cliq-link:hover { color: var(--teal); }
.service-card h3 {
  margin: 2px 0 12px;
  text-align: center;
  color: var(--teal);
  font-size: clamp(1.5rem, 2.2vw, 2.45rem);
  font-weight: 500;
}
.service-card p {
  margin: 0 0 10px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 1.45;
}

.services-cloud-intro {
  max-width: 1240px;
  margin: 6px auto 18px;
  text-align: center;
}
.services-cloud-intro h3 {
  margin: 0 0 14px;
  color: var(--teal);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 500;
}
.services-cloud-intro p {
  margin: 0 0 10px;
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
}
.services-cloud-small {
  margin-top: 16px;
  font-size: 20px !important;
}

.services-toggle .elementor-toggle-item {
  border: 1px solid rgba(84, 216, 255, 0.42);
  background: rgba(0, 0, 0, 0.38);
}
.services-toggle .elementor-tab-title {
  justify-content: space-between;
  background: rgba(6, 20, 29, 0.84);
  color: #ffffff;
  padding: 13px 18px;
  font-size: 20px;
  font-weight: 600;
}
.services-toggle .elementor-tab-title.active {
  background: linear-gradient(90deg, rgba(34, 207, 195, 0.98), rgba(84, 216, 255, 0.94));
  color: #03141d;
}
.services-toggle .elementor-tab-content {
  background: rgba(4, 15, 23, 0.86);
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
  padding: 14px 22px 18px;
}
.services-toggle .elementor-tab-content strong { color: var(--teal); }
.services-toggle .elementor-tab-content ul {
  margin: 0;
  width: 100%;
}
.services-toggle .elementor-tab-content li {
  margin: 0 0 8px;
}

.services-lte-cctv {
  padding: 18px 0 34px;
}
.service-card-feature .service-card-asset {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 10px;
  padding: 6px 12px;
  border: 1px solid rgba(84, 216, 255, 0.58);
  border-radius: 999px;
  background: rgba(10, 40, 55, 0.58);
  color: var(--sky);
  font-size: 14px;
  font-weight: 700;
}
.service-card-feature .service-card-asset i {
  font-size: 15px;
}

@media (max-width: 1024px){
  .site-header { position: static; background:#000; }
  .site-logo { display: inline-flex; }
  .site-logo img { height: 42px; }
  .mobile-toggle { display:block; }
  .main-nav { display:none; position:absolute; right:4%; top:100%; background:#000; padding:12px; border:1px solid rgba(255,255,255,.15); }
  .main-nav ul { min-width: 210px; }
  .main-nav.open { display:block; }
  .main-nav ul { flex-direction:column; gap: 1rem; }
  .main-nav a {
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .top-contact-bar { padding: 8px 0; }
  .social-badge {
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
  }
  .contact-badges {
    gap: 1.1rem;
  }
  .contact-badges a {
    font-size: 12px;
  }
  .two-col, .card-grid-2, .footer-grid { grid-template-columns: 1fr; }
  .home-intro-grid, .home-why-grid, .home-testimonial-grid { grid-template-columns: 1fr; }
  .home-intro-right { padding: 18px 14px 6px; }
  .home-about { padding: 30px 0; }
  .home-about::after { height: 54px; }
  .home-testimonials { padding: 24px 0 30px; }
  .home-testimonial-controls {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
  }
  .hero, .coming-soon, .contact-hero { padding-top: 90px; }
  .btn-primary { font-size: 2rem; }
  .hero h1 { font-size: clamp(1.55rem, 7.4vw, 2.5rem); }
  .products-page-title { font-size: 40px; }
  .services-hero { min-height: 58vh; padding: 92px 0 64px; }
  .services-hero h1 { font-size: 36px; }
  .services-hero p { font-size: 16px; }
  .sets-apart-title { margin-top: 2px; }
  .sets-apart-list { font-size: 18px; line-height: 1.5; margin-bottom: 16px; }
  .services-cloud-intro p { font-size: 18px; }
  .services-toggle .elementor-tab-title { font-size: 17px; }
  .services-toggle .elementor-tab-content { font-size: 17px; padding: 12px 14px; }
  .service-cliq-summary p { font-size: 18px; }
  .service-cliq-link { font-size: 16px; }
  .home-intro-copy,
  .home-about-copy,
  .home-why-copy,
  .home-testimonial-grid article p,
  .service-card p,
  .services-cloud-small { font-size: 18px !important; }
}