/* static/css/landing-modern.css */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --neon-cy: #65daff;
  --neon-pu: #9e8fff;
  --bg-obsidian: #0c0e17;
  --surface-low: #11131d;
  --glass-border: rgba(101, 218, 255, 0.15);
  --glass-shadow: 0 24px 48px rgba(101, 218, 255, 0.08);
}

body.landing-page {
  background-color: var(--bg-obsidian) !important;
  color: #f0effd !important;
  position: relative;
  overflow-x: hidden;
}

/* Override existing background to pure transparent */
.landing-page::before, .landing-page::after {
  display: none !important;
}

/* Canvas background */
#network-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}

/* Typography Overrides */
h1.landing-title, h2, h3, .landing-section-kicker, .landing-hero-actions {
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Glassmorphism Classes for Cards */
.modern-glass-card {
  background: rgba(17, 19, 29, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.modern-glass-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 48px rgba(101, 218, 255, 0.15) !important;
  border-color: rgba(101, 218, 255, 0.3) !important;
}

/* Neon Trace Borders */
.neon-trace-border {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  border-radius: 12px;
}

.neon-trace-border rect {
  fill: none;
  stroke: var(--neon-cy);
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  rx: 12;
  ry: 12;
}

.modern-glass-card:hover .neon-trace-border rect {
  animation: dashHover 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes dashHover {
  to { stroke-dashoffset: 0; }
}

/* Button Overrides */
.landing-btn--primary {
  background: linear-gradient(135deg, var(--neon-cy), #04cffb) !important;
  color: #002c38 !important;
  box-shadow: 0 0 15px rgba(101, 218, 255, 0.4) !important;
  border: none !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
}

.landing-btn--primary:hover {
  box-shadow: 0 0 25px rgba(101, 218, 255, 0.7) !important;
  transform: scale(1.02) !important;
}

.landing-btn--ghost {
  border: 1px solid var(--neon-pu) !important;
  color: var(--neon-pu) !important;
  transition: all 0.3s ease !important;
}

.landing-btn--ghost:hover {
  background: rgba(158, 143, 255, 0.1) !important;
  box-shadow: 0 0 15px rgba(158, 143, 255, 0.2) !important;
}

/* Animate On Scroll (AOS) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.plans-feature-board {
  background: rgba(17, 19, 29, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
}

.plans-feature-grid {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.requests-code-card {
  box-shadow: 0 0 30px rgba(101, 218, 255, 0.1) !important;
  border: 1px solid var(--glass-border) !important;
}

/* GLOBAL BACKGROUND GRID
Added by user request to apply the SVG diagram across the entire page unconditionally */
body.global-constellation-bg {
  background-color: var(--bg-obsidian) !important;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10L90 90M90 10L10 90' stroke='%2365daff' stroke-opacity='0.25' stroke-width='0.15'/%3E%3Ccircle cx='10' cy='10' r='0.6' fill='%2365daff' fill-opacity='0.4'/%3E%3Ccircle cx='90' cy='90' r='0.6' fill='%2365daff' fill-opacity='0.4'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 10%, #171924 0%, #0c0e17 80%) !important;
  background-size: 200px 200px, 100vw 100vh !important;
  background-attachment: fixed, fixed !important;
  background-position: center top, center top !important;
}

/* Hide local overlays that clash with the new global background */
.constellation-overlay, .wireframe-grid {
  display: none !important;
}
.constellation-bg {
  background-image: none !important;
  background-color: transparent !important;
}