:root{
  --bg:#070A13;
  --bg2:#0B1020;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.10);
  --text:#e9eefc;
  --muted: rgba(233,238,252,.70);

  --brand:#7c3aed;     /* violet */
  --brand2:#22c55e;    /* green accent (premium) */
  --ring: rgba(124,58,237,.35);

  --radius: 22px;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --border: 1px solid rgba(255,255,255,.10);
}

html{scroll-behavior:smooth;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(900px 600px at 85% 18%, rgba(34,197,94,.16), transparent 58%),
    radial-gradient(800px 600px at 45% 110%, rgba(59,130,246,.10), transparent 55%),
    var(--bg);
  color: var(--text);
}
/* Make bootstrap toggler icon white */
.navbar .navbar-toggler{
  border-color: rgba(255,255,255,.25);
}

.navbar .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

a{color:inherit; text-decoration:none;}
a:hover{opacity:.97;}
.text-muted-soft{color: var(--muted) !important;}

.navbar{
  background: rgba(7,10,19,.72) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* .navbar-brand img{height:34px;} */
.navbar .nav-link{
  color: rgba(233,238,252,.86) !important;
  font-weight: 700;
  letter-spacing:.1px;
}
.navbar .nav-link.active{color:#fff !important;}
.navbar .btn{font-weight:800;}

.btn-brand{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 16px 40px rgba(124,58,237,.22);
}
.btn-brand:hover{filter:brightness(1.05);}
.btn-outline-glass{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.btn-outline-glass:hover{background: rgba(255,255,255,.08);}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  font-weight: 800;
  letter-spacing: .55px;
  text-transform: uppercase;
  font-size: 12px;
}
.kicker-dot{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 6px rgba(124,58,237,.12);
}

.section{padding: 78px 0;}
.section-sm{padding: 54px 0;}

.hero{
  position:relative;
  overflow:hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(7,10,19,.78), rgba(7,10,19,.40)),
    var(--hero-img);
  background-size: cover;
  background-position:center;
  transform: scale(1.02);
}
.hero .container{position:relative; z-index:1;}
.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 45px rgba(0,0,0,.34);
}
.card-glass:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, border-color .18s ease;
  border-color: rgba(255,255,255,.18);
}

.img-cover{
  width:100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.badge-soft{
  background: rgba(124,58,237,.16);
  border: 1px solid rgba(124,58,237,.28);
  color: rgba(255,255,255,.92);
  font-weight: 800;
}

.icon-pill{
  width:46px; height:46px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.spec-table{
  border: var(--border);
  border-radius: 16px;
  overflow:hidden;
}
.spec-table .row{
  margin:0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.spec-table .row:last-child{border-bottom:0;}
.spec-k{font-weight:800; color: rgba(233,238,252,.80);}
.spec-v{color: rgba(255,255,255,.92);}

.gallery-grid{
  column-count: 3;
  column-gap: 16px;
}
@media (max-width: 992px){ .gallery-grid{column-count:2;} }
@media (max-width: 576px){ .gallery-grid{column-count:1;} }
.gallery-item{
  break-inside: avoid;
  margin-bottom: 16px;
}
.gallery-item img{
  width:100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  cursor: zoom-in;
}

.footer{
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(7,10,19,.55);
}
.small-note{font-size: 13px; color: rgba(233,238,252,.64);}

.form-control, .form-select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}
.form-control::placeholder{color: rgba(233,238,252,.55);}
.form-control:focus{
  box-shadow: 0 0 0 .25rem var(--ring) !important;
}

.hr-soft{
  border-color: rgba(255,255,255,.10) !important;
}
/* Product hero enhancements (more color like theme) */
.hero--product { position: relative; overflow: hidden; }
.hero--product .hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(202,69,255,.55), transparent 55%),
    radial-gradient(900px 500px at 80% 30%, rgba(0,210,255,.35), transparent 55%),
    linear-gradient(180deg, rgba(10,12,18,.35), rgba(10,12,18,.85));
  pointer-events:none;
}
.hero-glow{
  position:absolute; width:520px; height:520px; border-radius:999px;
  filter: blur(55px); opacity:.55; pointer-events:none;
}
.hero-glow--a{ left:-120px; top:-140px; background: rgba(202,69,255,.65); }
.hero-glow--b{ right:-140px; top:-90px; background: rgba(0,210,255,.45); }

.section-alt{
  position:relative;
}
.section-alt::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(202,69,255,.18), transparent 60%),
    radial-gradient(700px 380px at 90% 20%, rgba(0,210,255,.12), transparent 60%);
  pointer-events:none;
}

.mini-stat .mini-stat-icon{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(202,69,255,.35), rgba(0,210,255,.18));
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom:10px;
}

.spec-table--striped .row:nth-child(odd){
  background: rgba(255,255,255,.03);
  border-radius: 14px;
}
.spec-k{ font-weight: 600; opacity:.9; }
.spec-v{ opacity:.85; }

.product-sticky{
  position: sticky;
  top: 92px; /* navbar height */
}

.faq-item{
  background: transparent;
  border: var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.faq-item .accordion-button{
  background: transparent;
  color: var(--text);
}
.faq-item .accordion-button:focus{
  box-shadow: none;
}
.faq-item{ background:transparent; border: var(--border); border-radius:16px; overflow:hidden; }
.faq-btn{ background:transparent !important; color: var(--text) !important; }
.faq-btn:focus{ box-shadow:none !important; }


/* Product page css  */

/* Product Gallery */
.product-gallery { width: 100%; }

.gallery-main{
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  padding: 0;
  background: rgba(255,255,255,.02);
  cursor: zoom-in;
  display: block;
  transition: transform .2s ease, border-color .2s ease;
}
.gallery-main:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }

.gallery-main-img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px){
  .gallery-main-img{ height: 280px; }
}
@media (max-width: 575px){
  .gallery-main-img{ height: 240px; }
}

.gallery-zoom{
  position:absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  font-size: 14px;
}

.gallery-thumbs{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gallery-thumbs::-webkit-scrollbar{ height: 8px; }
.gallery-thumbs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

.thumb{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: rgba(255,255,255,.02);
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 92px;
  height: 70px;
  opacity: .8;
  transition: opacity .15s ease, transform .15s ease, border-color .15s ease;
}
.thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.thumb:hover{ opacity: 1; transform: translateY(-1px); }
.thumb.active{
  opacity: 1;
  border-color: rgba(124,92,255,.65);
  box-shadow: 0 0 0 2px rgba(124,92,255,.15);
}

/* Lightbox */
.lightbox-wrap{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.lightbox-img{
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  display: block;
}
.lightbox-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}






/* latest page  */

/* Breadcrumbs (glass) */
.breadcrumb-glass{
  --bs-breadcrumb-divider: "›";
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 8px 14px;
  backdrop-filter: blur(10px);
}
.breadcrumb-glass a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
.breadcrumb-glass .active{
  color: rgba(255,255,255,.70);
}

/* At-a-glance chips */
.spec-chip{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

/* Table glass */
.table-glass{
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.10);
}
.table-glass thead th{
  color: rgba(255,255,255,.75);
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.table-glass tbody td{
  border-top: 1px solid rgba(255,255,255,.08);
}
.table-responsive{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
}

/* Spec rows list */
.spec-list{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
}
.spec-row{
  border-top: 1px solid rgba(255,255,255,.08);
}
.spec-row:first-child{ border-top: none; }

/* Small callout */
.trust-callout{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

/* Download cards */
.download-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  text-decoration: none;
  color: rgba(255,255,255,.90);
  transition: transform .15s ease, border-color .15s ease;
}
.download-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
}

/* Form glass */
.form-select-glass, .form-control-glass{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
}
.form-select-glass:focus, .form-control-glass:focus{
  box-shadow: 0 0 0 .2rem rgba(124,92,255,.15);
  border-color: rgba(124,92,255,.55);
}

/* Video frame */
.video-frame{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
}

/* Mobile sticky CTA */
.mobile-cta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 999;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.mobile-cta .cta-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 600;
}
.mobile-cta .cta-btn span{ font-size: 14px; }

/* ===================== */
/* Gallery (same as earlier) */
/* ===================== */
.product-gallery { width: 100%; }

.gallery-main{
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  padding: 0;
  background: rgba(255,255,255,.02);
  cursor: zoom-in;
  display: block;
  transition: transform .2s ease, border-color .2s ease;
}
.gallery-main:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }

.gallery-main-img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px){
  .gallery-main-img{ height: 280px; }
}
@media (max-width: 575px){
  .gallery-main-img{ height: 240px; }
}

.gallery-zoom{
  position:absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  font-size: 14px;
}

.gallery-thumbs{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gallery-thumbs::-webkit-scrollbar{ height: 8px; }
.gallery-thumbs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

.thumb{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: rgba(255,255,255,.02);
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 92px;
  height: 70px;
  opacity: .8;
  transition: opacity .15s ease, transform .15s ease, border-color .15s ease;
}
.thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.thumb:hover{ opacity: 1; transform: translateY(-1px); }
.thumb.active{
  opacity: 1;
  border-color: rgba(124,92,255,.65);
  box-shadow: 0 0 0 2px rgba(124,92,255,.15);
}

/* Lightbox */
.lightbox-wrap{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.lightbox-img{
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  display: block;
}
.lightbox-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}



/* more latest  */

/* --- Product Gallery --- */
.product-gallery .gallery-main{
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  position:relative;
  cursor:zoom-in;
}
.product-gallery .gallery-main-img{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  display:block;
}
.product-gallery .gallery-zoom{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter: blur(8px);
}
.gallery-thumbs{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.gallery-thumbs .thumb{
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  padding:0;
  border-radius:14px;
  overflow:hidden;
  width:86px;
  height:62px;
  flex:0 0 auto;
  scroll-snap-align:center;
  opacity:.85;
}
.gallery-thumbs .thumb.active{
  outline:2px solid rgba(255,255,255,.35);
  opacity:1;
}
.gallery-thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lightbox-wrap{
  position:relative;
  border-radius:18px;
  overflow:hidden;
}
.lightbox-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
}
.lightbox-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
}