:root {
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  --glass-bg-strong: rgba(16, 16, 22, 0.78);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-hover: rgba(6, 216, 137, 0.6);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --glass-glow: 0 18px 50px rgba(6, 216, 137, 0.28);
  --glass-blur: blur(18px) saturate(170%);
  --glass-edge: linear-gradient(135deg, rgba(6, 216, 137, 0.75), rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.04) 60%, rgba(122, 60, 255, 0.6));
  --glass-shine: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
}

::selection {
  background: rgba(6, 216, 137, 0.85);
  color: #000;
}

html {
  scrollbar-color: rgba(6, 216, 137, 0.6) #050507;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #050507; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(6, 216, 137, 0.8), rgba(122, 60, 255, 0.7));
  border-radius: 10px;
  border: 2px solid #050507;
}

body {
  background-color: #000;
}
body::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(30vmax 30vmax at 12% 18%, rgba(6, 216, 137, 0.32), transparent 70%),
    radial-gradient(28vmax 28vmax at 88% 28%, rgba(122, 60, 255, 0.30), transparent 70%),
    radial-gradient(34vmax 34vmax at 65% 92%, rgba(30, 111, 217, 0.28), transparent 70%),
    radial-gradient(20vmax 20vmax at 30% 70%, rgba(255, 0, 170, 0.12), transparent 70%);
  animation: glass-orbs 28s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

@keyframes glass-orbs {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-4%, 3%, 0) rotate(-6deg) scale(1); }
}

.hero-banner { background: rgba(10, 10, 14, 0.25); }
.bg-dark-secondary { background-color: rgba(30, 28, 34, 0.30); }

.header {
  background: transparent;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 14, 0.7), rgba(10, 10, 14, 0.45));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
}
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(6, 216, 137, 0.9), rgba(122, 60, 255, 0.8), transparent);
  opacity: 0;
  transition: opacity .4s ease;
}
.header.sticked::after { opacity: 1; }

.navbar .dropdown ul,
.navbar .megamenu ul,
.dropdown-menu {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-highlight), var(--glass-shadow), 0 0 0 1px rgba(6, 216, 137, 0.08);
  border-radius: 14px;
}

.navbar .dropdown ul li a,
.navbar .megamenu ul li a {
  color: rgba(255, 255, 255, 0.8);
  transition: color .2s ease, padding-left .2s ease;
}

.navbar .dropdown ul li:hover > a,
.navbar .dropdown ul li a:hover,
.navbar .dropdown ul li .active {
  color: var(--color-primary, #06d889);
  background: none;
  text-shadow: 0 0 12px rgba(6, 216, 137, 0.6);
}

.navbar .megamenu ul li:hover > a {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

.navbar .megamenu ul li:hover > a:hover,
.navbar .megamenu ul li > a.active {
  color: var(--color-primary, #06d889);
  text-shadow: 0 0 12px rgba(6, 216, 137, 0.6);
}

.dropdown-menu .dropdown-item,
.dropdown-menu > li > a,
.dropdown-menu a {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu a:hover {
  color: #000 !important;
  background-color: #06d889 !important;
}

.dropdown-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.12);
}

.card-style-two,
.card-style-four,
.feature-style-five-card,
.cardstyle-one,
.single-testimonial,
.blog-content,
.form-content {
  position: relative;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid transparent;
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, background .35s ease;
}

.card-style-two,
.card-style-four,
.feature-style-five-card,
.single-testimonial,
.blog-content,
.form-content {
  background: var(--glass-bg);
}

.cardstyle-one {
  background-color: rgba(23, 23, 23, 0.35);
}

.card-style-two::before,
.card-style-four::before,
.feature-style-five-card::before,
.cardstyle-one::before,
.single-testimonial::before,
.blog-content::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  opacity: .55;
  transition: opacity .35s ease;
}

.card-style-two::after,
.card-style-four::after,
.feature-style-five-card::after,
.cardstyle-one::after,
.blog-content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-shine);
  background-size: 250% 100%;
  background-position: 130% 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.card-style-two:hover,
.card-style-four:hover,
.feature-style-five-card:hover,
.cardstyle-one:hover,
.blog-content:hover {
  transform: translateY(-8px);
  box-shadow: var(--glass-highlight), var(--glass-glow), inset 0 0 30px rgba(6, 216, 137, 0.12);
}

.card-style-two:hover::before,
.card-style-four:hover::before,
.feature-style-five-card:hover::before,
.cardstyle-one:hover::before,
.blog-content:hover::before {
  opacity: 1;
}

.card-style-two:hover::after,
.card-style-four:hover::after,
.feature-style-five-card:hover::after,
.cardstyle-one:hover::after,
.blog-content:hover::after {
  opacity: 1;
  animation: glass-shine 1s ease forwards;
}

@keyframes glass-shine {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

.feature-style-five-card:hover,
.active.feature-style-five-card {
  background: linear-gradient(135deg, rgba(6, 216, 137, 0.38), rgba(6, 216, 137, 0.12));
}

.feature-style-five-card .icon {
  box-shadow: 0 0 0 6px rgba(6, 216, 137, 0.12), 0 0 30px rgba(6, 216, 137, 0.45);
  transition: box-shadow .35s ease, transform .35s ease;
}
.feature-style-five-card:hover .icon {
  transform: scale(1.08);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15), 0 0 40px rgba(6, 216, 137, 0.8);
}

.card-style-two .icon-top svg,
.card-style-four-icon svg,
.cardstyle-one svg {
  filter: drop-shadow(0 0 8px rgba(6, 216, 137, 0.55));
}

.domain-search-content {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, rgba(6, 216, 137, 0.78), rgba(4, 170, 110, 0.7));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 60px rgba(6, 216, 137, 0.4);
  animation: glass-float 6s ease-in-out infinite;
}
.domain-search-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  background-size: 250% 100%;
  pointer-events: none;
  animation: glass-shine-loop 5s ease-in-out infinite;
}
.domain-search-content > * {
  position: relative;
  z-index: 1;
}

@keyframes glass-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes glass-shine-loop {
  0%, 60% { background-position: 130% 0; }
  100%    { background-position: -30% 0; }
}

.cutome-btn,
.btn-getstarted,
.domain-search-bg form button {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 22px rgba(6, 216, 137, 0.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cutome-btn::after,
.btn-getstarted::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 130% 0;
  pointer-events: none;
}
.cutome-btn:hover,
.btn-getstarted:hover,
.domain-search-bg form button:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 30px rgba(6, 216, 137, 0.6);
}
.cutome-btn:hover::after,
.btn-getstarted:hover::after {
  animation: glass-shine .8s ease forwards;
}

.card,
.modal-content {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: 14px;
}
.modal-content { background: var(--glass-bg-strong); }
.card-header,
.card-footer {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--glass-border);
}

footer {
  position: relative;
  background: rgba(20, 20, 26, 0.45) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
}
footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 216, 137, 0.9), rgba(122, 60, 255, 0.8), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .domain-search-content,
  .domain-search-content::after {
    animation: none;
  }
  .card-style-two:hover,
  .card-style-four:hover,
  .feature-style-five-card:hover,
  .cardstyle-one:hover,
  .blog-content:hover {
    transform: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header::before { background: rgba(0, 0, 0, 0.92); }
  .navbar .dropdown ul,
  .navbar .megamenu ul,
  .dropdown-menu,
  .modal-content { background: #141418 !important; }
  .card-style-two,
  .card-style-four,
  .feature-style-five-card,
  .single-testimonial,
  .blog-content,
  .form-content,
  .card { background: #19191c; }
}