/* DNS Proxyon — professional digital surfaces
   Chosen assets: hex mesh (hero), LED grid, wireframe, tech grid, flow streaks, pillars, stars */

:root {
  --bg: #060b12;
  --bg-elevated: #0c1420;
  --bg-card: #101a28;
  --border: #1c2d42;
  --border-hover: #2a4564;
  --text: #edf4fb;
  --text-muted: #9bb0c4;
  --text-dim: #6d8298;
}

html, body {
  background-color: #060b12 !important;
  background-image: none !important;
  background-attachment: scroll !important;
  pointer-events: auto !important;
}
/* Fixed wallpaper as a non-interactive layer so it never steals taps */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(6,11,18,.72) 0%, rgba(6,11,18,.82) 100%),
    url('/img/bg/bg-stars.png') center / cover no-repeat;
}

/* Glass header */
.site-header {
  background: rgba(6, 12, 20, .85) !important;
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid rgba(74, 222, 128, .14) !important;
}

.site-footer {
  background:
    linear-gradient(180deg, rgba(6,11,18,.78), rgba(4,8,14,.9)),
    url('/img/bg/bg-tech-grid.png') center / cover no-repeat !important;
  border-top: 1px solid rgba(74, 222, 128, .12) !important;
}

.main-content {
  background: transparent;
}

/* Hero — hexagonal network, copy on the dark left */
.hero {
  text-align: left !important;
  padding: 108px 0 96px !important;
  min-height: 72vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(105deg, rgba(5,10,18,.94) 0%, rgba(5,10,18,.78) 42%, rgba(5,10,18,.28) 100%),
    url('/img/bg/bg-hex.png') right center / cover no-repeat !important;
  border-bottom: 1px solid rgba(74,222,128,.12) !important;
}
.hero .container { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }
@media (min-width: 980px) {
  .hero .container.hero-grid { margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
}

.trial-band {
  background:
    linear-gradient(135deg, rgba(4,18,28,.88) 0%, rgba(6,22,36,.78) 100%),
    url('/img/bg/bg-led.png') center / cover no-repeat !important;
}

.why-section {
  background:
    linear-gradient(180deg, rgba(6,11,18,.82) 0%, rgba(6,11,18,.7) 50%, rgba(6,11,18,.86) 100%),
    url('/img/bg/bg-wire.png') center bottom / cover no-repeat !important;
}

.cta-band {
  background:
    linear-gradient(120deg, rgba(5,12,22,.82) 0%, rgba(8,16,32,.7) 100%),
    url('/img/bg/bg-flow.png') center / cover no-repeat !important;
}

.page-hero {
  background:
    linear-gradient(180deg, rgba(6,11,18,.78) 0%, rgba(6,11,18,.92) 100%),
    url('/img/bg/bg-tech-grid.png') center / cover no-repeat !important;
}

.auth-wrapper {
  background:
    linear-gradient(180deg, rgba(6,11,18,.55) 0%, rgba(6,11,18,.82) 100%),
    url('/img/bg/bg-hex.png') center / cover no-repeat !important;
  background-attachment: scroll;
  position: relative;
  z-index: 1;
}

/* Dashboard / admin — no fixed-attachment layers (they steal clicks in Chromium) */
.app .sidebar {
  background:
    linear-gradient(180deg, rgba(8,14,24,.96), rgba(6,11,18,.98)) !important;
  border-right-color: rgba(74,222,128,.12) !important;
}

.app .topbar {
  background: rgba(8, 14, 24, .92) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(74,222,128,.1) !important;
}

.app .main,
.app .content {
  background: transparent !important;
  background-attachment: scroll !important;
  pointer-events: auto !important;
}

.site-footer,
.main-content,
.app,
.hero,
.section,
.section-pad,
.auth-wrapper {
  position: relative;
  z-index: 1;
}

/* Keep header always visible while scrolling (fixed beats sticky when ancestors break it) */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}
/* Only public marketing pages use .site-header — don't pad dashboard/admin */
body.public-site {
  padding-top: 64px !important;
}
@media (min-width: 769px) {
  body.public-site {
    padding-top: 72px !important;
  }
}
/* Hero already had large top padding for old in-flow header — tighten it */
body.public-site .hero {
  padding-top: 48px !important;
}
@media (max-width: 768px) {
  body.public-site .main-nav {
    top: 64px !important;
    z-index: 999 !important;
  }
}

.card,
.product-card,
.feature-card,
.why-card,
.auth-card,
.price-card,
.stat-item,
.faq-item,
.compare-card,
.use-card,
.legal-card {
  background: rgba(12, 20, 32, .88) !important;
  border-color: rgba(74, 222, 128, .12) !important;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

a, button, input, select, textarea, label, .btn, .nav-link, .toggle-switch {
  pointer-events: auto !important;
}

.product-card:hover,
.feature-card:hover,
.why-card:hover,
.price-card:hover,
.compare-card:hover,
.use-card:hover {
  border-color: rgba(74, 222, 128, .45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(74,222,128,.12);
}

.app .sidebar,
.app .topbar,
.app .main,
.app .content {
  --bg: #060b12;
  --bg-2: #0a1018;
  --surface: rgba(14, 22, 34, .78);
  --surface-2: rgba(18, 28, 42, .82);
  --surface-3: #182436;
  --border: #1c2d42;
  --border-2: #2a3f58;
  --text: #edf4fb;
  --text-2: #9bb0c4;
  --text-3: #9bb0c4;
}