/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, backdrop-filter 0.3s, border-color 0.3s;
}
#navbar.scrolled {
  background-color: rgba(0,0,0,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,0.06);
}

.nav-item { position: relative; }

.nav-dropdown {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 4px;
  width: 208px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 0;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 50;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
}

/* Mobile menu */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
#mobile-menu.open { max-height: 600px; }

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
#hero-content {
  will-change: opacity, transform;
}

/* ══════════════════════════════════════════════════════════
   BORDER GLOW CARD
══════════════════════════════════════════════════════════ */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --border-radius: 16px;
  --glow-padding: 40px;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0,0,0.01px);
  display: grid;
  border: 1px solid rgba(255,255,255,0.15);
  background: #000;
  overflow: visible;
  box-shadow:
    rgba(0,0,0,0.1) 0 1px 2px,
    rgba(0,0,0,0.1) 0 2px 4px,
    rgba(0,0,0,0.1) 0 4px 8px,
    rgba(0,0,0,0.1) 0 8px 16px,
    rgba(0,0,0,0.1) 0 16px 32px,
    rgba(0,0,0,0.1) 0 32px 64px;
}

.border-glow-card .edge-light {
  position: absolute;
  inset: calc(var(--glow-padding) * -1);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: plus-lighter;
  transition: opacity 0.75s ease-in-out;
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
}
.border-glow-card .edge-light::before {
  content: '';
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0  1px  var(--glow-color,    hsl(270deg 70% 70% / 100%)),
    inset 0 0 1px  0  var(--glow-color-60, hsl(270deg 70% 70% /  60%)),
    inset 0 0 3px  0  var(--glow-color-50, hsl(270deg 70% 70% /  50%)),
    inset 0 0 6px  0  var(--glow-color-40, hsl(270deg 70% 70% /  40%)),
    inset 0 0 15px 0  var(--glow-color-30, hsl(270deg 70% 70% /  30%)),
    inset 0 0 25px 2px var(--glow-color-20,hsl(270deg 70% 70% /  20%)),
    inset 0 0 50px 2px var(--glow-color-10,hsl(270deg 70% 70% /  10%)),
          0 0 1px  0  var(--glow-color-60, hsl(270deg 70% 70% /  60%)),
          0 0 3px  0  var(--glow-color-50, hsl(270deg 70% 70% /  50%)),
          0 0 6px  0  var(--glow-color-40, hsl(270deg 70% 70% /  40%)),
          0 0 15px 0  var(--glow-color-30, hsl(270deg 70% 70% /  30%)),
          0 0 25px 2px var(--glow-color-20,hsl(270deg 70% 70% /  20%)),
          0 0 50px 2px var(--glow-color-10,hsl(270deg 70% 70% /  10%));
}
.border-glow-card:hover .edge-light {
  transition: opacity 0.25s ease-out;
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT TABS
══════════════════════════════════════════════════════════ */
.tab-underline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: #8b5cf6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}
.tab-btn.active .tab-underline {
  transform: scaleX(1);
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   FEATURE CARDS
══════════════════════════════════════════════════════════ */
.feature-card { }

.feat-icon {
  transition: background 0.3s, transform 0.3s;
}
.feature-card:hover .feat-icon {
  background: rgba(124,58,237,0.2) !important;
  transform: scale(1.1);
}
.feat-num { transition: color 0.3s; }
.feature-card:hover .feat-num { color: rgba(124,58,237,0.4) !important; }

.feat-title { transition: color 0.2s; }
.feature-card:hover .feat-title { color: rgba(238,230,255,1) !important; }

/* ══════════════════════════════════════════════════════════
   ABOUT — tag pills
══════════════════════════════════════════════════════════ */
.tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.tag-item:hover {
  border-color: rgba(124,58,237,0.3);
  background: rgba(124,58,237,0.08);
  color: rgba(255,255,255,0.8);
}

/* ══════════════════════════════════════════════════════════
   CONTACT FORM
══════════════════════════════════════════════════════════ */
.contact-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff;
  font-size: 14px;
  font-family: var(--font-sans, 'Geist', sans-serif);
  transition: border-color 0.3s, background 0.3s;
  outline: none;
}
.contact-input::placeholder { color: rgba(255,255,255,0.25); }
.contact-input:focus {
  border-color: rgba(124,58,237,0.6);
  background: rgba(255,255,255,0.06);
}