: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; }