/* =========================================================
   Node AI - Polished Custom Styles & Layout Fixes
   ========================================================= */

/* 1. Global Reset, Dark Theme & Typography */
html, body {
  scroll-behavior: smooth;
  background-color: #000000;
  color: #ffffff;
  font-family: __Inter_a13d3b, __Inter_Fallback_a13d3b, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, button, input, select, textarea, .nav-item {
  font-family: __Inter_a13d3b, __Inter_Fallback_a13d3b, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.mono-large, .mono-small, font-mono, [class*="font-mono"] {
  font-family: __Space_Mono_33c22e, __Space_Mono_Fallback_33c22e, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

#node-checkout-modal,
#node-checkout-modal * {
  font-family: __Inter_a13d3b, __Inter_Fallback_a13d3b, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

#node-checkout-modal .font-mono,
#node-checkout-modal [class*="font-mono"] {
  font-family: __Space_Mono_33c22e, __Space_Mono_Fallback_33c22e, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* 2. Fix Double-Text in Rollover Menus and Buttons */
.flex.absolute.top-full {
  display: none !important;
}

div.overflow-hidden.relative > .flex {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.clean-text {
  display: inline-block !important;
  font-weight: 500 !important;
}

/* 3. Header & Navigation */
header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media (min-width: 1024px) {
  nav[aria-label="Main navigation"],
  nav.group\/nav {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    display: flex !important;
    height: auto !important;
    background: transparent !important;
  }

  .relative.group {
    position: relative !important;
  }

  .relative.group > div.lg\:absolute {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding-top: 12px !important;
    height: auto !important;
    z-index: 110 !important;
    min-width: 200px !important;
  }

  .relative.group:hover > div.lg\:absolute,
  .relative.group:focus-within > div.lg\:absolute {
    display: block !important;
    pointer-events: auto !important;
  }

  .relative.group > div.lg\:absolute > ul {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(12, 12, 14, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .relative.group > div.lg\:absolute > ul li a {
    transform: none !important;
    opacity: 0.85 !important;
    padding: 8px 4px !important;
    display: block !important;
    font-size: 14px !important;
    color: #e0e0e0 !important;
    transition: all 0.2s ease !important;
  }

  .relative.group > div.lg\:absolute > ul li a:hover {
    opacity: 1 !important;
    color: #4cc054 !important;
    transform: translateX(4px) !important;
  }
}

/* 4. Hide Incomplete Sticky Floating Section Nav */
.bg-section-nav {
  display: none !important;
}

/* 5. Make Static Content Visible */
.opacity-0 {
  opacity: 1 !important;
}

.translate-y-4,
.translate-y-8,
.translate-y-10,
.translate-y-12,
.translate-y-20,
.translate-y-24,
.translate-y-28 {
  transform: none !important;
}

.scale-0 {
  transform: scale(1) !important;
}

/* 6. Clean Spacing & Eliminate Empty Gaps */
/* Center the 3 deploy blocks & hide sticky image column */
.w-full.hidden.lg\:block.-mt-60 .grid.grid-cols-12.m-auto {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

.w-full.hidden.lg\:block.-mt-60 .col-span-12.lg\:col-span-6.xl\:col-span-5 {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.w-full.hidden.lg\:block.-mt-60 div[class*="xl:col-span-7"] {
  display: none !important;
}

/* Eliminate empty 3D placeholder below hero buttons & empty video blocks */
.h-1\/2.xl\:h-50vh,
div[class*="min-h-96"][class*="md:min-h-4xl"],
div[class*="h-1/2"][class*="xl:h-50vh"],
.h-\[300px\].md\:h-\[700px\],
div[class*="h-[300px]"][class*="md:h-[700px]"],
div[class*="bg-off-black"][style*="opacity:0"],
div[class*="bg-off-black"][style*="opacity: 0"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

div.min-h-screen.flex.flex-col.items-center.justify-center.p-0.px-4.pt-header-lg.overflow-hidden.relative.mb-20.md\:mb-60,
main > div:nth-child(2) > div.min-h-screen,
main > div:nth-child(2) {
  min-height: auto !important;
  height: auto !important;
  padding-top: 1rem !important;
  padding-bottom: 2rem !important;
  margin-bottom: 0 !important;
}

/* Compact all main page sections so they flow smoothly with ~1.5rem to 2rem gap */
main > div.scroll-mt-header,
main > section,
section {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.scroll-mt-header.pt-28,
main > div.scroll-mt-header:nth-child(3) {
  padding-top: 0.5rem !important;
  margin-top: 0 !important;
}

main > div.scroll-mt-header:nth-child(3) .mb-60,
.mb-60, .md\:mb-60, .mb-40, .md\:mb-40, .mb-30, .my-20, .md\:mt-60 {
  margin-top: 0.75rem !important;
  margin-bottom: 1.25rem !important;
}

.min-h-screen, [class*="min-h-screen"], .h-screen {
  min-height: auto !important;
  height: auto !important;
}

.grid.grid-cols-12.gap-3.w-full.max-w-1920.m-auto.px-4.md\:px-16.flex.flex-col.items-center.justify-center.relative.h-full.min-h-screen.mb-60 {
  height: auto !important;
  min-height: auto !important;
  margin-bottom: 1.5rem !important;
  padding-top: 0 !important;
}

.mt-14.md\:mt-40, [class*="md:mt-40"] {
  margin-top: 1.5rem !important;
}

.deploy-body .h-screen {
  height: auto !important;
  min-height: auto !important;
  position: relative !important;
  margin: 1.25rem 0 !important;
  padding: 0 !important;
}

.deploy-body .h-screen > .grid,
.deploy-body .h-screen .absolute {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  width: 100% !important;
}

div[class*="deploy-body"] .col-span-12.h5.text-grey.deploy-body {
  background: rgba(18, 18, 20, 0.9) !important;
  border: 1px solid rgba(76, 192, 84, 0.3) !important;
  border-radius: 20px !important;
  padding: 1.75rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(16px) !important;
  margin-bottom: 1.25rem !important;
  position: relative !important;
}

div[class*="deploy-body"] .col-span-12.h5.text-grey.deploy-body strong {
  color: #4cc054 !important;
  font-weight: 600 !important;
}

.w-full.hidden.lg\:block.-mt-60 {
  margin-top: 0 !important;
}

.mt-96, .mt-60, .mt-40 {
  margin-top: 1.25rem !important;
}

.pt-28 {
  padding-top: 1.5rem !important;
}

/* Compact Section 6 (Build and deploy) and Footer */
main > div:nth-child(7),
main > div:nth-child(7) > div {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

footer {
  margin-top: 2rem !important;
  padding-top: 2rem !important;
}

/* 7. Streamline Platform Section & Host/Rent Compact Cards */
/* Compact Host & Rent cards without heavy glowing backgrounds */
.inset-0.bg-light-leak,
.animate-card-spot-light,
.green-fade-out {
  display: none !important;
}

.aspect-5\/7, .aspect-5\/6, .aspect-square {
  aspect-ratio: auto !important;
  height: auto !important;
}

.px-6.py-10.md\:px-12 {
  padding: 2rem !important;
}

/* Remove spinning figures from Streamline Platform */
svg.animate-spin-slow,
div[class*="animate-spin-slow"],
.left-0.position.absolute.top-0.w-full.h-full.pointer-events-none {
  display: none !important;
}

/* GPU Products section - Keep only GPU Node 1 */
main > div:nth-child(6) .relative.w-full.pt-header > div.relative.w-full:first-child,
main > div:nth-child(6) .relative.w-full.pt-header > div.grid.grid-cols-12:nth-child(2),
main > div:nth-child(6) .gpu-grid > div.h-full.relative:first-child {
  display: none !important;
}

main > div:nth-child(6) .gpu-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

main > div:nth-child(6) .gpu-grid > .hit-box {
  width: 100% !important;
  max-width: 800px !important;
}

.scroll-mt-header .h-screen {
  height: auto !important;
  min-height: auto !important;
}

.encryption-body {
  position: relative !important;
  z-index: 10 !important;
  background: rgba(18, 18, 20, 0.85) !important;
  border: 1px solid rgba(76, 192, 84, 0.25) !important;
  border-radius: 16px !important;
  padding: 1.5rem 2rem !important;
  margin: 1rem 0 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.3s ease !important;
}

.encryption-body:hover {
  border-color: rgba(76, 192, 84, 0.6) !important;
  box-shadow: 0 0 25px rgba(76, 192, 84, 0.2) !important;
  transform: translateY(-2px) !important;
}

.encryption-body strong {
  color: #4cc054 !important;
  font-weight: 600 !important;
}

.h-\[50vh\] {
  height: auto !important;
  min-height: auto !important;
  padding: 0.75rem 0 !important;
  position: relative !important;
}

.h-\[50vh\] .grid.absolute,
.h-\[50vh\] > div.absolute {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  width: 100% !important;
}

div[class*="xl:col-span-7"][class*="sticky"],
div[class*="2xl:col-span-6"][class*="sticky"] {
  height: auto !important;
  max-height: 480px !important;
  position: sticky !important;
  top: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

div[class*="xl:col-span-7"] .h-screen {
  height: auto !important;
}

div[class*="xl:col-span-7"] img {
  max-height: 420px !important;
  width: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
}

/* 8. Hide Empty WebGL Canvas Container */
canvas {
  display: none !important;
}

/* 9. Text Gradients & Contrast */
.text-gradient {
  background: linear-gradient(180deg, #FFFFFF 20%, #909090 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.text-green {
  color: #4cc054 !important;
}

.bg-green {
  background-color: #4cc054 !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

a.group .bg-green,
button .bg-green {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

a.group:hover .bg-green,
button:hover .bg-green {
  box-shadow: 0 0 20px rgba(76, 192, 84, 0.5) !important;
  transform: translateY(-2px) !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   12. Checkout & Registration Modal Popup (Cards & Crypto)
   ========================================================= */
.checkout-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease !important;
}

.checkout-modal-backdrop.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.checkout-modal-dialog {
  background: #0d0d10 !important;
  border: 1px solid rgba(76, 192, 84, 0.35) !important;
  border-radius: 24px !important;
  width: 100% !important;
  max-width: 680px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 2rem !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(76, 192, 84, 0.15) !important;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.checkout-modal-backdrop.is-active .checkout-modal-dialog {
  transform: scale(1) translateY(0) !important;
}

.checkout-input {
  width: 100% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.checkout-input:focus {
  border-color: #4cc054 !important;
  box-shadow: 0 0 10px rgba(76, 192, 84, 0.3) !important;
}

.payment-tab-btn {
  flex: 1 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #a0a0a0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.payment-tab-btn.is-active,
.payment-tab-btn:hover {
  background: rgba(76, 192, 84, 0.12) !important;
  border-color: #4cc054 !important;
  color: #4cc054 !important;
}