/* FROM home.html */
@media(max-width:900px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* FROM home.html */
@media(max-width:500px) {
.postid-509 .feature-pills{flex-direction:column;}
.postid-509 .spec-item{width:45%;}
  .prod-grid {
    grid-template-columns: 1fr
  }
  .hero{padding-top:0;padding-bottom:0;}
  .hero-inner{padding:0;}
}

/* VIDEO */
.vid-section {
  background: linear-gradient(135deg, #111 0%, #222 100%);
  padding: 5.5rem 2rem;
  position: relative;
  overflow: hidden
}

.vid-section::before,
.vid-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.vid-section::before {
  width: 500px;
  height: 500px;
  border: 1px solid rgba(204, 0, 0, .12);
  top: -150px;
  right: -150px
}

.vid-section::after {
  width: 280px;
  height: 280px;
  border: 1px solid rgba(204, 0, 0, .08);
  top: -70px;
  right: -70px
}

.vid-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: center
}

.vid-text .sec-title {
  color: #fff
}

.vid-text .sec-sub {
  color: #999;
  max-width: 400px
}

.vid-tabs {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 1.6rem 0
}

.vtab {
  padding: .42rem 1.05rem;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  border: 1.5px solid rgba(255, 255, 255, .15);
  color: #888
}

.vtab:hover,
.vtab.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff
}

.vid-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin:0;
}

.vid-bullets li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: #bbb;
  font-size: .87rem
}

.vdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  margin-top: .5em;
}

.vid-frame {
  position: relative;
  border-radius: 1.4rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  cursor: pointer;
  background: #0a0a0a
}

.vid-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .65;
  transition: opacity .3s;
  display: block
}

.vid-frame:hover img {
  opacity: .8
}

.play-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.play-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(204, 0, 0, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, background .2s
}

.vid-frame:hover .play-btn {
  transform: scale(1.08);
  background: var(--red)
}

.play-btn svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  margin-left: 4px
}

.vid-duration {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .73rem;
  padding: .28rem .7rem;
  border-radius: 50px;
  backdrop-filter: blur(4px)
}

/* VIDEO/IMAGES CAROUSEL */
/* .vidimg-frame owns the 16:9 box; .vidimg-swiper fills it via absolute
   positioning so Swiper's nested 100%-height children can't take part in
   the grid track's intrinsic-size calculation (that circular dependency
   otherwise blows the box up to millions of px in Chromium). Same split
   as .ind-visual/.ind-swiper above. */
.vidimg-frame {
  position: relative;
  border-radius: 1.4rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #0a0a0a
}

.vidimg-swiper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important
}

.vidimg-swiper .swiper-wrapper { width: 100%; height: 100% }
.vidimg-swiper .swiper-slide { width: 100%; height: 100% }
.vidimg-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.vidimg-swiper .vidimg-slide { position: relative; cursor: pointer }
.vidimg-swiper .vidimg-slide img { opacity: .65; transition: opacity .3s }
.vidimg-swiper .vidimg-slide:hover img { opacity: .8 }
.vidimg-swiper .vidimg-slide .play-btn:hover { transform: scale(1.08); background: var(--red) }

.vidimg-swiper .swiper-pagination { bottom: 1.3rem !important; z-index: 3 }
.vidimg-swiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #fff;
  opacity: .65;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
  margin: 0 4px !important;
  transition: transform .2s, background .2s, opacity .2s
}
.vidimg-swiper .swiper-pagination-bullet-active { opacity: 1; background: var(--red); transform: scale(1.2) }

.vidimg-swiper .swiper-button-prev,
.vidimg-swiper .swiper-button-next {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, .25);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  color: #fff;
  z-index: 3;
  transition: background .2s
}
.vidimg-swiper .swiper-button-prev:hover,
.vidimg-swiper .swiper-button-next:hover { background: rgba(255, 255, 255, .4) }
.vidimg-swiper .swiper-button-prev::after,
.vidimg-swiper .swiper-button-next::after { font-size: 14px; font-weight: 700; color: #fff }
.vidimg-swiper .swiper-button-prev { left: .85rem }
.vidimg-swiper .swiper-button-next { right: .85rem }
.vidimg-swiper .swiper-button-disabled { opacity: 0 !important; pointer-events: none }

/* WHY */
.why-section {
  background: #fff
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 3rem
}

.why-card {
  border-radius: 1.3rem;
  padding: 1.8rem;
  border: 1px solid #efefef;
  transition: transform .25s, box-shadow .2s, border-color .2s
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
  border-color: #ddd
}

.why-icon {
  width: 48px;
  height: 48px;
  border-radius: .85rem;
  background: rgba(204, 0, 0, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem
}

.why-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.why-card h3 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .5rem
}

.why-card p {
  font-size: .84rem;
  color: var(--gray3);
  line-height: 1.72
}

/* CONTACT */
.contact-section {
  background: linear-gradient(135deg, var(--red) 0%, #8a0000 100%);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden
}

.contact-section::before {
  content: '';
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  top: -150px;
  left: -100px;
  pointer-events: none
}

.contact-section::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  bottom: -100px;
  right: -80px;
  pointer-events: none
}

.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative
}

.contact-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.12;
  margin-bottom: .85rem
}

.contact-text p {
  color: rgba(255, 255, 255, .78);
  line-height: 1.8;
  font-size: .97rem;
  max-width: 420px
}

.contact-info {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem
}

.cinfo {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255, 255, 255, .82);
  font-size: .88rem
}

.cinfo-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.cinfo-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.contact-form {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  padding: 2rem
}

.form-head {
  margin-bottom: 1.3rem
}

.form-head h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800
}

.form-head p {
  color: rgba(255, 255, 255, .55);
  font-size: .8rem;
  margin-top: .25rem
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem
}

.fg {
  margin-bottom: .8rem
}

.fg label {
  display: block;
  font-size: .73rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .35rem
}

.fg input,
.fg select,
.fg textarea {
  width: 100%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .6rem;
  padding: .65rem .95rem;
  color: #fff;
  font-size: .88rem;
  transition: border-color .2s, background .2s;
  font-family: inherit
}

.fg input::placeholder,
.fg textarea::placeholder {
  color: rgba(255, 255, 255, .35)
}

.fg select option {
  color: #222;
  background: #fff
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .16)
}

.fg textarea {
  resize: vertical;
  min-height: 85px
}

.submit {
  width: 100%;
  background: #fff;
  color: var(--red);
  padding: .82rem;
  border-radius: 50px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
  margin-top: .3rem
}

.submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .18)
}

/* FOOTER */
footer {
  background: #111;
  padding: 3rem 2rem 1.5rem
}

.ft {
  max-width: 1200px;
  margin: 0 auto
}

.ft-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.3fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  align-items: start
}

.ft-brand .logo-text {
  font-size: 1.5rem;
  display: block;
  margin-bottom: .75rem
}

.ft-brand p {
  color: #666;
  font-size: .83rem;
  line-height: 1.72;
  max-width: 230px
}

.ft-socials {
  display: flex;
  gap: .6rem;
  margin-top: 1.1rem
}

.soc {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s
}

.soc:hover {
  border-color: var(--red);
  background: var(--red)
}

.soc svg {
  width: 13px;
  height: 13px;
  fill: #666;
  transition: fill .2s
}

.soc:hover svg {
  fill: #fff
}

.ft-col h4 {
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .9rem
}

.ft-col ul {
  list-style: none;
  margin-left: 0;
}

.ft-col li {
  margin-bottom: .5rem
}

.ft-col a {
  color: #666;
  font-size: .83rem;
  transition: color .2s
}

.ft-col a:hover {
  color: var(--red)
}

.ft-col p {
  color: #666;
  font-size: .83rem;
  line-height: 1.8;
  margin-bottom: .45rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem
}

.ft-col p svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #555;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 6px
}

.ft-bottom {
  padding-top: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem
}

.ft-bottom p {
  color: #444;
  font-size: .78rem
}

/* RESPONSIVE */

/* FROM home.html */
@media(max-width:900px) {

  .hero-inner,
  .ind-grid,
  .vid-grid,
  .contact-inner,
  .ft-top {
    grid-template-columns: 1fr
  }

  .hero-visual {
    display: none
  }

  .why-grid {
    grid-template-columns: 1fr 1fr
  }

  .stats-inner {
    grid-template-columns: 1fr 1fr
  }

  .ind-right {
    position: static
  }
}

/* FROM home.html */
@media(max-width:600px) {
  .nav-links {
    display: none
  }

  .why-grid,
  .form-row {
    grid-template-columns: 1fr
  }

  .ft-top {
    grid-template-columns: 1fr 1fr
  }
}

/* FROM product.html */
@media(max-width:960px) {

  .hero-inner,
  .overview-grid,
  .ff-grid,
  .cta-inner {
    grid-template-columns: 1fr
  }

  .hero-visual,
  .ov-ring,
  .ov-ring2 {
    display: none
  }

  .tech-grid {
    grid-template-columns: 1fr 1fr
  }

  .apps-grid {
    grid-template-columns: 1fr 1fr
  }

  .widths-grid {
    grid-template-columns: 1fr
  }

  .related-grid {
    grid-template-columns: 1fr 1fr
  }
}

/* FROM product.html */
@media(max-width:600px) {
  .nav-links {
    display: none
  }

  .specs-inner {
    grid-template-columns: 1fr 1fr
  }

  .tech-grid {
    grid-template-columns: 1fr
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .ft-top {
    grid-template-columns: 1fr 1fr
  }
}

/* FROM contact.html */
@media(max-width:900px) {
  .contact-grid {
    grid-template-columns: 1fr
  }

  .info-sidebar {
    position: static
  }

  .ft-top {
    grid-template-columns: 1fr 1fr
  }
}

/* FROM contact.html */
@media(max-width:600px) {
  .nav-links {
    display: none
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .ft-top {
    grid-template-columns: 1fr
  }
}

/* FROM catalog.html */
@media(max-width:1000px) {
  .prod-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* FROM catalog.html */
@media(max-width:700px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .nav-links {
    display: none
  }

  .ft-top {
    grid-template-columns: 1fr 1fr
  }
}

/* FROM catalog.html */
@media(max-width:420px) {
  .prod-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 768px) {
  .nav-inner {
    padding: 0 1.25rem !important;
  }

  nav .nav-links {
    display: none !important;
  }

  nav .nav-cta {
    margin-left: auto !important;
  }

  .page-template-template-blocks .site-main>p,
  .page-template-template-blocks .site-main>h1,
  .page-template-template-blocks .site-main>h2,
  .page-template-template-blocks .site-main>h3,
  .page-template-template-blocks .site-main>h4,
  .page-template-template-blocks .site-main>h5,
  .page-template-template-blocks .site-main>h6,
  .page-template-template-blocks .site-main>ul,
  .page-template-template-blocks .site-main>ol,
  .page-template-template-blocks .site-main>figure,
  .page-template-template-blocks .site-main>table,
  .page-template-template-blocks .site-main>blockquote,
  .page-template-template-blocks .site-main>[class^="wp-block-"]:not([class*="wp-block-acf-"]):not(.alignwide):not(.alignfull),
  .entry-content>*:not([class*="wp-block-acf-"]):not(.alignwide):not(.alignfull),
  .entry-header,
  .post-thumbnail {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
  .hero-list li {
    font-size: 0.9rem;
  }
  .home .hero p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 767px){
  .home .hero-list{
    display:none;
  }
}