/* Author: DEEP_DEV */
:root {
  --deep-dev-atd-top: clamp(12px, 2.2cqw, 28px);
  --deep-dev-atd-bar-width: min(1280px, calc(100% - clamp(20px, 4cqw, 80px)));
  --deep-dev-atd-bar-height: clamp(52px, 3.8cqw, 64px);
  --deep-dev-atd-bar-pad: clamp(4px, 0.4cqw, 8px);
  --deep-dev-atd-bar-lead: clamp(14px, 1.2cqw, 22px);
  --deep-dev-atd-item-height: clamp(34px, 2.4cqw, 42px);
  --deep-dev-atd-item-pad: clamp(10px, 0.8cqw, 16px);
  --deep-dev-atd-label: clamp(12px, 0.8cqw, 13.5px);
  --deep-dev-atd-icon: clamp(14px, 0.95cqw, 17px);
  --deep-dev-atd-gap: clamp(6px, 0.45cqw, 8px);
  --deep-dev-atd-brand: clamp(15px, 1cqw, 18px);
  --deep-dev-atd-action-height: clamp(36px, 2.6cqw, 44px);
  --deep-dev-atd-bar-bg: rgba(255, 255, 255, 0.85);
  --deep-dev-atd-bar-border: rgba(226, 232, 240, 0.8);
  --deep-dev-atd-bar-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  --deep-dev-atd-text-main: #0f172a;
  --deep-dev-atd-text-muted: #64748b;
  --deep-dev-atd-item-hover-bg: rgba(241, 245, 249, 0.9);
  --deep-dev-atd-item-active-bg: #2563eb;
  --deep-dev-atd-item-active-text: #ffffff;
  --deep-dev-atd-cta-bg: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --deep-dev-atd-cta-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.45);
}

.atd-modern-wrapper {
  position: relative;
  width: 100%;
  container-type: inline-size;
  isolation: isolate;
  display: flex;
  justify-content: center;
}

.atd-modern__aurora {
  position: absolute;
  top: -30%;
  left: 10%;
  right: 10%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 20% 40%, rgba(59, 130, 246, 0.12), transparent 70%),
    radial-gradient(45% 55% at 80% 30%, rgba(147, 51, 234, 0.09), transparent 70%),
    radial-gradient(40% 50% at 50% 10%, rgba(6, 182, 212, 0.10), transparent 70%);
  filter: blur(24px);
}

.atd-modern__bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: max-content;
  max-width: var(--deep-dev-atd-bar-width);
  height: var(--deep-dev-atd-bar-height);
  padding: var(--deep-dev-atd-bar-pad) var(--deep-dev-atd-bar-pad) var(--deep-dev-atd-bar-pad) var(--deep-dev-atd-bar-lead);
  gap: clamp(16px, 2.5cqw, 36px);
  border: 1px solid var(--deep-dev-atd-bar-border);
  border-radius: 9999px;
  background: var(--deep-dev-atd-bar-bg);
  box-shadow: var(--deep-dev-atd-bar-shadow);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.atd-modern__bar:hover {
  border-color: rgba(191, 219, 254, 0.9);
  box-shadow: 0 24px 50px -15px rgba(37, 99, 235, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.atd-modern__brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: clamp(8px, 0.7cqw, 14px);
  text-decoration: none;
  color: var(--deep-dev-atd-text-main);
}

.atd-modern__brand-img {
  height: clamp(24px, 1.8cqw, 30px);
  max-width: 140px;
  object-fit: contain;
}

.atd-modern__word {
  font-size: var(--deep-dev-atd-brand);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--deep-dev-atd-text-main);
  line-height: 1;
}

.atd-modern__dock {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2px, 0.2cqw, 5px);
  height: var(--deep-dev-atd-item-height);
  padding: 0;
  margin: 0;
}

.atd-modern__item {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--deep-dev-atd-gap);
  height: var(--deep-dev-atd-item-height);
  padding: 0 var(--deep-dev-atd-item-pad);
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  color: var(--deep-dev-atd-text-muted);
  font-size: var(--deep-dev-atd-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  cursor: pointer;
  transform-origin: 50% 0;
  will-change: width, height, transform;
  transition: color 0.16s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.atd-modern__item[data-dock-near="true"],
.atd-modern__item:hover,
.atd-modern__item:focus-visible {
  color: #1e3a8a;
  border-color: rgba(219, 234, 254, 0.9);
  background: rgba(241, 245, 249, 0.9);
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.2);
}

.atd-modern__item[aria-pressed="true"],
.atd-modern__item.active {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.25);
}

.atd-modern__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--deep-dev-atd-icon);
  height: var(--deep-dev-atd-icon);
  font-size: var(--deep-dev-atd-icon);
  color: #64748b;
  opacity: 0.85;
  transition: color 0.16s, opacity 0.16s;
}

.atd-modern__item[data-dock-near="true"] .atd-modern__icon,
.atd-modern__item:hover .atd-modern__icon,
.atd-modern__item.active .atd-modern__icon {
  color: #2563eb;
  opacity: 1;
}

.atd-modern__actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: clamp(6px, 0.5cqw, 10px);
}

.atd-modern__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--deep-dev-atd-action-height);
  padding: 0 clamp(12px, 0.9cqw, 18px);
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  color: var(--deep-dev-atd-text-muted);
  font-size: var(--deep-dev-atd-label);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  transition: color 0.16s, background 0.16s, border-color 0.16s;
  cursor: pointer;
}

.atd-modern__ghost:hover {
  color: #1d4ed8;
  background: rgba(241, 245, 249, 0.85);
  border-color: rgba(226, 232, 240, 0.7);
}

.atd-modern__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--deep-dev-atd-gap);
  height: var(--deep-dev-atd-action-height);
  padding: 0 var(--deep-dev-atd-bar-pad) 0 clamp(14px, 1.1cqw, 20px);
  border: 0;
  border-radius: 9999px;
  background: var(--deep-dev-atd-cta-bg);
  box-shadow: var(--deep-dev-atd-cta-shadow);
  color: #ffffff;
  font-size: var(--deep-dev-atd-label);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s;
  cursor: pointer;
}

.atd-modern__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(37, 99, 235, 0.6);
}

.atd-modern__cta-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--deep-dev-atd-action-height) - clamp(10px, 0.8cqw, 14px));
  height: calc(var(--deep-dev-atd-action-height) - clamp(10px, 0.8cqw, 14px));
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 11px;
}

.atd-modern__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--deep-dev-atd-action-height);
  height: var(--deep-dev-atd-action-height);
  border-radius: 9999px;
  border: 1px solid var(--deep-dev-atd-bar-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--deep-dev-atd-text-main);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}

.atd-modern__hamburger:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

@container (max-width: 960px) {
  .atd-modern__ghost {
    display: none;
  }
  .atd-modern__item span:last-child {
    display: none;
  }
  .atd-modern__item {
    padding: 0 clamp(8px, 0.6cqw, 12px);
  }
  .atd-modern__cta span:first-child {
    display: none;
  }
  .atd-modern__cta {
    padding: 0 var(--deep-dev-atd-bar-pad);
  }
}

@media (max-width: 680px) {
  .atd-modern__dock {
    display: none;
  }
  .atd-modern__actions .atd-modern__cta {
    display: none;
  }
  .atd-modern__hamburger {
    display: inline-flex;
  }
  .atd-modern__bar {
    width: 100%;
    max-width: 100%;
    padding: 6px 10px 6px 14px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atd-modern__item {
    transform: none !important;
  }
  .atd-modern__cta {
    transform: none !important;
  }
}