/* Long scrolling glow field (site background) */
 html,
 body {
   background: #000 !important;
 }


 html body {
   position: relative;
   min-height: 100vh;
   isolation: isolate;
 }


 html body::before,
 html body::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
 }


 /* Layer A: repeats every 1900px */
 html body::before {
   z-index: -2;
   background-image:
     radial-gradient(circle 320px at 8% 140px, rgba(86, 185, 234, 0.22), transparent 72%),
     radial-gradient(circle 260px at 86% 320px, rgba(86, 185, 234, 0.17), transparent 72%),
     radial-gradient(circle 360px at 72% 720px, rgba(86, 185, 234, 0.24), transparent 74%),
     radial-gradient(circle 220px at 22% 980px, rgba(86, 185, 234, 0.16), transparent 72%),
     radial-gradient(circle 300px at 50% 1260px, rgba(86, 185, 234, 0.14), transparent 72%),
     radial-gradient(circle 260px at 90% 1520px, rgba(86, 185, 234, 0.19), transparent 72%),
     radial-gradient(circle 300px at 6% 1760px, rgba(86, 185, 234, 0.15), transparent 72%);
   background-repeat: repeat-y;
   background-size: 100% 1900px;
   background-position: 0 1300px;
   filter: blur(58px);
   opacity: 0.88;
   will-change: transform, opacity;
   animation: glowFieldBreatheA 8.5s ease-in-out infinite;
 }


 /* Layer B: repeats every 2400px with offset, so pattern does not look identical */
 html body::after {
   z-index: -1;
   background-image:
     radial-gradient(circle 300px at 78% 180px, rgba(86, 185, 234, 0.14), transparent 72%),
     radial-gradient(circle 360px at 14% 560px, rgba(86, 185, 234, 0.18), transparent 73%),
     radial-gradient(circle 240px at 62% 930px, rgba(86, 185, 234, 0.13), transparent 72%),
     radial-gradient(circle 330px at 88% 1320px, rgba(86, 185, 234, 0.20), transparent 74%),
     radial-gradient(circle 250px at 32% 1710px, rgba(86, 185, 234, 0.12), transparent 72%),
     radial-gradient(circle 340px at 55% 2100px, rgba(86, 185, 234, 0.17), transparent 73%);
   background-repeat: repeat-y;
   background-size: 100% 2400px;
   background-position: 0 1750px;
   filter: blur(66px);
   opacity: 0.74;
   will-change: transform, opacity;
   animation: glowFieldBreatheB 11s ease-in-out infinite;
 }


 @keyframes glowFieldBreatheA {
   0% {
     transform: scale(0.985);
     opacity: 0.74;
   }
   50% {
     transform: scale(1.02);
     opacity: 0.9;
   }
   100% {
     transform: scale(0.99);
     opacity: 0.78;
   }
 }


 @keyframes glowFieldBreatheB {
   0% {
     transform: scale(0.99);
     opacity: 0.64;
   }
   50% {
     transform: scale(1.015);
     opacity: 0.82;
   }
   100% {
     transform: scale(0.995);
     opacity: 0.7;
   }
 }


/* Floating Discord button (global) */
.discord-fab {
   position: fixed;
   right: 24px;
   bottom: 96px;
   width: 76px;
   height: 76px;
   border-radius: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #56b9ea;
   color: #ffffff !important;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow:
     0 14px 30px rgba(86, 185, 234, 0.35),
     0 0 28px rgba(86, 185, 234, 0.45);
   z-index: 1200;
   transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }


 .discord-fab i {
   font-size: 38px;
   line-height: 1;
 }


 .discord-fab:hover {
   background: #69c5f0;
   transform: translateY(-3px) scale(1.02);
   box-shadow:
     0 18px 34px rgba(86, 185, 234, 0.42),
     0 0 32px rgba(86, 185, 234, 0.56);
 }


 @media (max-width: 900px) {
   .discord-fab {
     right: 16px;
     bottom: 84px;
     width: 64px;
     height: 64px;
     border-radius: 18px;
   }


   .discord-fab i {
     font-size: 32px;
 }
}


/* Disable legacy duplicate Discord button if present in old footer markup */
.discord-float {
 display: none !important;
}


/* Navbar cart quantity badge force-blue */
.navbar .cart .count,
.cart .count {
   background: #56b9ea !important;
   color: #ffffff !important;
   border: 1px solid rgba(86, 185, 234, 0.7) !important;
   box-shadow:
     0 0 0 2px rgba(0, 0, 0, 0.35),
     0 6px 14px rgba(86, 185, 234, 0.45) !important;
   opacity: 1 !important;
 }


 /* Hide duplicate Discord icon in footer/social sections.
    Keep the floating bottom-right button (.discord-fab). */
 .footer.component.nexus-footer .nexus-social-link[href*="discord"],
 [data-component-id="footer"] .nexus-social-link[href*="discord"],
 .discord-cta .social-icon.discord {
   display: none !important;
 }


 /* FINAL footer override: black/white/gray only */
 .footer.component.nexus-footer,
 .footer.component.nexus-footer * {
   color: #d1d5db !important;
 }


 .footer.component.nexus-footer {
   background: #000 !important;
   border-top: 1px solid #2f2f2f !important;
 }


 .footer.component.nexus-footer .nexus-footer-name,
 .footer.component.nexus-footer .nexus-footer-link:hover,
 .footer.component.nexus-footer .nexus-social-link:hover {
   color: #fff !important;
 }


 .footer.component.nexus-footer .nexus-footer-link::after {
   background: #fff !important;
 }


 .footer.component.nexus-footer .nexus-social-link {
   background: #111 !important;
   border-color: #3a3a3a !important;
   color: #cfcfcf !important;
 }


 .footer.component.nexus-footer .nexus-social-link:hover {
   background: #1a1a1a !important;
   border-color: #666 !important;
 }


 .footer.component.nexus-footer .nexus-footer-copyright {
   color: #9a9a9a !important;
 }


 .footer.component.nexus-footer .nexus-footer-glow {
   background: rgb(255 255 255 / 10%) !important;
 }
 /*
   Monochrome override (black / white / gray)
   Paste this at the VERY BOTTOM of custom.css
 */


 /* Global accent fallback */
 :root {
   --accent: #ffffff !important;
   --accent-2: #d1d5db !important;
 }


 /* ===== Footer ===== */
 .footer.component.nexus-footer,
 [data-component-id="footer"] {
   background: #000000 !important;
   color: #d1d5db !important;
   border-top: 1px solid #2f2f2f !important;
   box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45) !important;
 }


 .footer.component.nexus-footer .nexus-footer-glow,
 [data-component-id="footer"] .nexus-footer-glow {
   background: rgb(255 255 255 / 10%) !important;
 }


 .footer.component.nexus-footer .nexus-footer-name,
 [data-component-id="footer"] .nexus-footer-name {
   color: #ffffff !important;
   background: none !important;
   -webkit-text-fill-color: #ffffff !important;
 }


 .footer.component.nexus-footer .nexus-divider,
 [data-component-id="footer"] .nexus-divider {
   background: rgba(255, 255, 255, 0.2) !important;
 }


 .footer.component.nexus-footer .nexus-footer-link,
 [data-component-id="footer"] .nexus-footer-link {
   color: #c4c4c4 !important;
 }


 .footer.component.nexus-footer .nexus-footer-link:hover,
 [data-component-id="footer"] .nexus-footer-link:hover {
   color: #ffffff !important;
 }


 .footer.component.nexus-footer .nexus-footer-link::after,
 [data-component-id="footer"] .nexus-footer-link::after {
   background: #ffffff !important;
 }


 .footer.component.nexus-footer .nexus-social-link,
 [data-component-id="footer"] .nexus-social-link {
   background: #111111 !important;
   border-color: #3a3a3a !important;
   color: #cfcfcf !important;
 }


 .footer.component.nexus-footer .nexus-social-link:hover,
 [data-component-id="footer"] .nexus-social-link:hover {
   background: #1a1a1a !important;
   border-color: #666666 !important;
   color: #ffffff !important;
 }


 .footer.component.nexus-footer .nexus-footer-copyright,
 [data-component-id="footer"] .nexus-footer-copyright {
   color: #8f8f8f !important;
 }


 /* ===== Product cards ===== */
 .product-card {
   background: #0d0d0d !important;
   border: 1px solid #2f2f2f !important;
 }


 .product-image .image-placeholder {
   background: #111111 !important;
   color: #bdbdbd !important;
 }


 .product-content {
   background: #121212 !important;
 }


 .product-card .title {
   color: #ffffff !important;
 }


 .product-card .price {
   color: #ffffff !important;
 }


 .product-card .price-to,
 .product-card .price-request {
   color: #a3a3a3 !important;
 }


 .product-card .price-old {
   color: #7a7a7a !important;
 }


 .product-card .cta {
   background: #1a1a1a !important;
   border: 1px solid #3a3a3a !important;
   color: #f2f2f2 !important;
 }


 .product-card:hover .cta {
   background: #242424 !important;
   border-color: #5a5a5a !important;
 }


 .product-card .cta::before {
   background: linear-gradient(
     90deg,
     transparent,
     rgb(255 255 255 / 12%),
     transparent
   ) !important;
 }


 /* Stock/badges */
 .stock-in,
 .stock-out,
 .badge {
   background: rgba(0, 0, 0, 0.7) !important;
   color: #d1d5db !important;
 }


 /* Safety net: remove common pink/purple accents in cards/footer */
 .product-card,
 .product-card *,
 .footer.component.nexus-footer,
 .footer.component.nexus-footer *,
 [data-component-id="footer"],
 [data-component-id="footer"] * {
   border-image: none !important;
 }
 /* ===== Product page editor box (black + blue accent) ===== */
 /* Paste at VERY BOTTOM of custom.css */


 .product-wrapper .editor,
 .product-wrapper .product-tabs .content .editor {
   background: #000000 !important;
   border: 1px solid rgba(86, 185, 234, 0.45) !important;
   color: #e5e5e5 !important;
   box-shadow: none !important;
 }


 .product-wrapper .editor h1,
 .product-wrapper .editor h2,
 .product-wrapper .editor h3,
 .product-wrapper .editor h4,
 .product-wrapper .editor h5,
 .product-wrapper .editor h6 {
   color: #ffffff !important;
 }


 .product-wrapper .editor p,
 .product-wrapper .editor li,
 .product-wrapper .editor span,
 .product-wrapper .editor strong,
 .product-wrapper .editor em {
   color: #d1d5db !important;
 }


 .product-wrapper .editor a {
   color: #56b9ea !important;
   text-decoration: underline !important;
 }


 .product-wrapper .editor a:hover {
   color: #8fd3f2 !important;
 }


 /* If old purple gradients/overlays are injected */
 .product-wrapper .editor::before,
 .product-wrapper .editor::after {
   content: none !important;
   background: none !important;
 }
 /* Product image outline -> white */
 .product-wrapper .carousel img,
 .product-wrapper img.card-img-top {
   border: 1px solid rgba(255, 255, 255, 0.7) !important;
   border-radius: 0.5rem !important;
 }


 /* Optional: thumbnail active border white too */
 .product-wrapper .thumbnails button.active {
   outline: 1px solid rgba(255, 255, 255, 0.7) !important;
 }
 /* ===== Status cards: remove pink background, KEEP real status colors ===== */
 /* Paste at bottom of custom.css */


 .status-card {
   background: #111111 !important;
   border: 1px solid #2f2f2f !important;
 }


 .status-card h3,
 .status-group h2 {
   color: #ffffff !important;
 }


 /* IMPORTANT: do NOT override these, they use real status color from backend */
 .status .indicator,
 .status .pulsating,
 .status .label {
   /* keep inline style color */
 }
 /* ===== Feedback cards: remove pink ===== */
 .testimonial {
   background: #111111 !important;
   border: 1px solid #2f2f2f !important;
 }


 .testimonial .header svg {
   color: rgba(255, 255, 255, 0.12) !important;
 }


 .testimonial .content,
 .testimonial .content .message,
 .testimonial .content .message p {
   color: #e5e5e5 !important;
 }


 .testimonial .content .reply {
   background: #1a1a1a !important;
   border: 1px solid #2f2f2f !important;
 }


 .testimonial .content .reply .text {
   border-left: 2px solid #6b7280 !important;
   color: #d1d5db !important;
 }


 .testimonial .content .reply .author {
   color: #9ca3af !important;
 }


 /* ===== Subtle pulsing white glow on spaced sections ===== */
 .scroll-glow-target {
   position: relative;
 }


 .scroll-pulse-glow {
   position: absolute;
   top: 52%;
   width: clamp(180px, 20vw, 300px);
   height: clamp(180px, 20vw, 300px);
   transform: translateY(-50%);
   border-radius: 999px;
   pointer-events: none;
   z-index: 3;
   opacity: 0.24;
   filter: blur(26px);
   mix-blend-mode: screen;
   background: radial-gradient(
     circle,
     rgba(255, 255, 255, 0.30) 0%,
     rgba(255, 255, 255, 0.14) 36%,
     rgba(255, 255, 255, 0) 72%
   );
   animation: scrollPulseGlow 10s ease-in-out infinite;
 }


 .scroll-pulse-glow.glow-left {
   left: clamp(-70px, -4vw, -30px);
 }


 .scroll-pulse-glow.glow-right {
   right: clamp(-70px, -4vw, -30px);
 }


 @keyframes scrollPulseGlow {
   0% {
     opacity: 0.17;
     transform: translateY(-50%) scale(0.96);
   }
   50% {
     opacity: 0.30;
     transform: translateY(-50%) scale(1.04);
   }
   100% {
     opacity: 0.17;
     transform: translateY(-50%) scale(0.96);
   }
 }


 /* ===== Scroll reveal for products/content ===== */
 .scroll-reveal {
   opacity: 0;
   transform: translate3d(0, 10px, 0);
   filter: blur(0);
   transition:
     opacity 0.24s ease,
     transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
     filter 0.24s ease;
   transition-delay: var(--reveal-delay, 0ms);
   will-change: opacity, transform, filter;
 }


 .scroll-reveal.is-visible {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   filter: blur(0);
 }


 @media (prefers-reduced-motion: reduce) {
   .scroll-reveal,
   .scroll-reveal.is-visible {
     opacity: 1;
     transform: none;
     filter: none;
     transition: none;
   }
 }


 .testimonial .content .reply .author span {
   color: #ffffff !important;
 }


 .testimonial .footer {
   background: #161616 !important;
   color: #c4c4c4 !important;
   border-top: 1px solid #2f2f2f !important;
 }


 .testimonial .footer .date {
   color: #ffffff !important;
 }


 /* keep status/check icon green */
 .testimonial .footer svg {
   color: #27ae60 !important;
 }
 .scroll-down {
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translate(-50%, 0);
   cursor: pointer;
   animation: bounceY 1.8s ease-in-out infinite;
 }


 .arrow {
   display: block;
   width: 12px;
   height: 12px;
   border-left: 1.5px solid white;
   border-bottom: 1.5px solid white;
   transform: rotate(-45deg);
 }


 @keyframes bounceY {
   0%, 100% {
     transform: translate(-50%, -4px);
   }
   50% {
     transform: translate(-50%, 4px);
   }
 }
 /* hero art placement */
 .hero-section {
   position: relative;
 }


 .hero-section .hero-art {
   position: absolute;
   right: 6%;
   left: auto;
   top: 50%;
   transform: translateY(-50%);
   width: min(800px, 65vw);
   height: auto;
   pointer-events: none;
   z-index: 3;
   opacity: 0.95;
 }


 /* keep text layers above hero art */
 .hero-content, .hero-left, .hero__content {
   position: relative;
   z-index: 4;
 }


 @media (max-width: 900px) {
   .hero-section .hero-art {
     position: static;
     transform: none;
     display: block;
     margin: 30px auto 0;
     width: min(420px, 85vw);
   }
 }


 /* ===== Footer force-blue override ===== */
 .footer.component.nexus-footer,
 [data-component-id="footer"] {
   color: #56b9ea !important;
   border-top-color: rgba(86, 185, 234, 0.35) !important;
 }


 .footer.component.nexus-footer .nexus-footer-glow,
 [data-component-id="footer"] .nexus-footer-glow {
   background: rgb(86 185 234 / 14%) !important;
 }


 .footer.component.nexus-footer .nexus-footer-name,
 [data-component-id="footer"] .nexus-footer-name {
   color: #56b9ea !important;
   background: none !important;
   -webkit-text-fill-color: #56b9ea !important;
 }


 .footer.component.nexus-footer .nexus-divider,
 [data-component-id="footer"] .nexus-divider {
   background: rgba(86, 185, 234, 0.35) !important;
 }


 .footer.component.nexus-footer .nexus-footer-link,
 [data-component-id="footer"] .nexus-footer-link,
 .footer.component.nexus-footer .nexus-footer-link:hover,
 [data-component-id="footer"] .nexus-footer-link:hover,
 .footer.component.nexus-footer .nexus-social-link,
 [data-component-id="footer"] .nexus-social-link,
 .footer.component.nexus-footer .nexus-social-link:hover,
 [data-component-id="footer"] .nexus-social-link:hover,
 .footer.component.nexus-footer .nexus-footer-copyright,
 [data-component-id="footer"] .nexus-footer-copyright {
   color: #56b9ea !important;
 }


 .footer.component.nexus-footer .nexus-footer-link::after,
 [data-component-id="footer"] .nexus-footer-link::after {
   background: #56b9ea !important;
 }


 .footer.component.nexus-footer .nexus-social-link,
 [data-component-id="footer"] .nexus-social-link {
   border-color: rgba(86, 185, 234, 0.45) !important;
 }


 /* ===== Join CTA force-blue override ===== */
 .discord-cta .discord-cta-box {
   background: rgb(86 185 234 / 8%) !important;
   border-color: rgb(86 185 234 / 40%) !important;
 }


 .discord-cta .discord-cta-title,
 .discord-cta .discord-cta-text,
 .discord-cta .discord-btn,
 .discord-cta .discord-btn-text,
 .discord-cta .discord-btn i {
   color: #56b9ea !important;
 }


 .discord-cta .discord-btn {
   background: #000 !important;
   border-color: rgba(86, 185, 234, 0.5) !important;
 }


 .discord-cta .discord-btn:hover {
   background: rgba(86, 185, 234, 0.14) !important;
   border-color: rgba(86, 185, 234, 0.75) !important;
 }


 /* ===== Products force-blue (bold text only) ===== */
 .products-section .section-title h2,
 #products .section-title h2,
 section[data-component-id="products"] .section-title h2 {
   color: #56b9ea !important;
 }


 .products .product-card {
   border-color: rgba(86, 185, 234, 0.28) !important;
 }


 .products .product-card .cta {
   border-color: rgba(86, 185, 234, 0.4) !important;
 }


 .products .product-card .title,
 .products .product-card .price,
 .products .product-card .cta,
 .products .product-card .cta span,
 .products .product-card .cta svg {
   color: #56b9ea !important;
 }


 /* Slightly lighter gray areas inside product cards */
 .products .product-card .product-content {
   background: #171c22 !important;
 }


 .products .product-card .cta {
   background: #222830 !important;
 }


 .products .product-card:hover .cta {
   background: #2a313a !important;
 }


 /* Neutral gray refresh for product box surfaces (no blue tint) */
 .products .product-card {
   border-color: rgba(255, 255, 255, 0.18) !important;
 }


 .products .product-card .product-content {
   background: linear-gradient(180deg, #1a1c21 0%, #15171b 100%) !important;
 }


 .products .product-card .cta {
   background: linear-gradient(90deg, #2a2d33 0%, #22252b 100%) !important;
   border-color: rgba(255, 255, 255, 0.2) !important;
 }


 .products .product-card:hover .cta {
   background: linear-gradient(90deg, #32363e 0%, #2b2f36 100%) !important;
   border-color: rgba(255, 255, 255, 0.28) !important;
 }


 /* Pure black product box surfaces */
 .products .product-card .product-content,
 .products .product-card .cta,
 .products .product-card:hover .cta {
   background: #000000 !important;
 }


 /* ===== Navbar brand text only (Prism Cheats) ===== */
 [data-component-id="navbar"] .navbar-brand > span {
   color: #56b9ea !important;
   -webkit-text-fill-color: #56b9ea !important;
   background: none !important;
 }


 /* ===== Hero title first line only force-white ===== */
 .hero-section .hero-title {
   color: #ffffff !important;
   -webkit-text-fill-color: #ffffff !important;
 }


 /* Keep second line independent (not forced white) */
 .hero-section .hero-title-accent {
   color: #56b9ea !important;
   -webkit-text-fill-color: #56b9ea !important;
 }


 /* Final: product borders blue while surfaces stay black */
 .products .product-card {
   border-color: rgba(86, 185, 234, 0.38) !important;
 }


 .products .product-card .cta,
 .products .product-card:hover .cta {
   border-color: rgba(86, 185, 234, 0.48) !important;
 }


 /* Status page styling (blue + black, keep live status colors) */
 .status-page-section .section-title h1,
 .status-page-section .status-group h2 {
   color: #56b9ea !important;
 }


 .status-page-section .status-card {
   background: #000000 !important;
   border: 1px solid rgba(86, 185, 234, 0.36) !important;
 }


 .status-page-section .status-card:hover {
   border-color: rgba(86, 185, 234, 0.58) !important;
   box-shadow: 0 0 0 1px rgba(86, 185, 234, 0.22) inset;
 }


 .status-page-section .status-card h3 {
   color: #ffffff !important;
 }


 /* Product page: Venom text + borders blue */
 .product-wrapper .display-6.fw-bolder,
 .product-wrapper .editor h1,
 .product-wrapper .editor h2 {
   color: #56b9ea !important;
   -webkit-text-fill-color: #56b9ea !important;
   background: none !important;
 }


 .product-wrapper .carousel img,
 .product-wrapper img.card-img-top {
   border: 1px solid rgba(86, 185, 234, 0.75) !important;
 }


 .product-wrapper .thumbnails button.active {
   outline: 1px solid rgba(86, 185, 234, 0.75) !important;
 }


 .product-wrapper .variants .variant {
   border-color: rgba(86, 185, 234, 0.35) !important;
 }


 .product-wrapper .variants .variant.active {
   border-color: rgba(86, 185, 234, 0.78) !important;
   box-shadow: inset 0 0 0 1px rgba(86, 185, 234, 0.25) !important;
 }


 .product-wrapper .stock-indicator.btn-outline-primary,
 .product-wrapper .input-group .input-group-btn,
 .product-wrapper .input-group .form-control {
   border-color: rgba(86, 185, 234, 0.65) !important;
 }


 .product-wrapper .stock-indicator.btn-outline-primary,
 .product-wrapper .input-group .input-group-btn {
   color: #56b9ea !important;
 }


 /* Product page buy buttons (Add to Cart / Buy Now) */
 .product-wrapper .buy-buttons .btn-primary {
   background: #56b9ea !important;
   border-color: #56b9ea !important;
   color: #031018 !important;
 }


 .product-wrapper .buy-buttons .btn-primary svg {
   color: #031018 !important;
 }


 .product-wrapper .buy-buttons .btn-primary:hover {
   background: #7acdf3 !important;
   border-color: #7acdf3 !important;
   color: #031018 !important;
 }


 .product-wrapper .buy-buttons .btn-outline-primary {
   background: transparent !important;
   border-color: rgba(86, 185, 234, 0.75) !important;
   color: #56b9ea !important;
 }


 .product-wrapper .buy-buttons .btn-outline-primary svg {
   color: #56b9ea !important;
 }


 .product-wrapper .buy-buttons .btn-outline-primary:hover {
   background: rgba(86, 185, 234, 0.12) !important;
   border-color: #56b9ea !important;
   color: #56b9ea !important;
 }
/* Force Discord button to true bottom-right */
.discord-fab {
 position: fixed !important;
 right: max(16px, env(safe-area-inset-right)) !important;
 bottom: max(16px, env(safe-area-inset-bottom)) !important;
 top: auto !important;
 left: auto !important;
 margin: 0 !important;
 z-index: 99999 !important;
}


@media (max-width: 900px) {
 .discord-fab {
   right: max(12px, env(safe-area-inset-right)) !important;
   bottom: max(12px, env(safe-area-inset-bottom)) !important;
 }
}
/* Homepage load fade-in (updated) */
@keyframes fadeFromTop {
 0% {
   opacity: 0;
   transform: translateY(-18px);
   filter: blur(4px);
 }
 100% {
   opacity: 1;
   transform: translateY(0);
   filter: blur(0);
 }
}


@keyframes fadeFromBottom {
 0% {
   opacity: 0;
   transform: translateY(18px);
   filter: blur(4px);
 }
 100% {
   opacity: 1;
   transform: translateY(0);
   filter: blur(0);
 }
}


/* Navbar: fade from TOP */
body:has(.hero-section) header.sticky-top {
 opacity: 0;
 animation: fadeFromTop 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.03s forwards;
}


/* Hero + homepage sections: fade from BOTTOM */
body:has(.hero-section) .hero-section,
body:has(.hero-section) .hero-section ~ * {
 opacity: 0;
 animation: fadeFromBottom 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s forwards;
}


/* Bottom-right Discord button: fade in too */
body:has(.hero-section) .discord-fab {
 opacity: 0;
 animation: fadeFromBottom 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s forwards;
}


@media (prefers-reduced-motion: reduce) {
 body:has(.hero-section) header.sticky-top,
 body:has(.hero-section) .hero-section,
 body:has(.hero-section) .hero-section ~ *,
 body:has(.hero-section) .discord-fab {
   opacity: 1;
   transform: none;
   filter: none;
   animation: none;
 }
}
/* Bottom-right Discord button: fade in with hero (not late) */
body:has(.hero-section) .discord-fab {
 opacity: 0;
 animation: fadeFromBottom 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s forwards !important;
}
/* Load fade-in: Hero + Status + Feedback */
@keyframes fadeFromTop {
 0% { opacity: 0; transform: translateY(-18px); filter: blur(4px); }
 100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}


@keyframes fadeFromBottom {
 0% { opacity: 0; transform: translateY(18px); filter: blur(4px); }
 100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}


/* Navbar */
body:has(.hero-section) header.sticky-top,
body:has(.status-page-section) header.sticky-top,
body:has(.feedback-page-blue) header.sticky-top {
 opacity: 0;
 animation: fadeFromTop 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.03s forwards;
}


/* Main section per page */
body:has(.hero-section) .hero-section,
body:has(.status-page-section) .status-page-section,
body:has(.feedback-page-blue) .feedback-page-blue .py-5-nav {
 opacity: 0;
 animation: fadeFromBottom 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s forwards;
}


/* Discord button (same timing as navbar so not late) */
body:has(.hero-section) .discord-fab,
body:has(.status-page-section) .discord-fab,
body:has(.feedback-page-blue) .discord-fab {
 opacity: 0;
 animation: fadeFromBottom 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.03s forwards !important;
}


@media (prefers-reduced-motion: reduce) {
 body:has(.hero-section) header.sticky-top,
 body:has(.status-page-section) header.sticky-top,
 body:has(.feedback-page-blue) header.sticky-top,
 body:has(.hero-section) .hero-section,
 body:has(.status-page-section) .status-page-section,
 body:has(.feedback-page-blue) .feedback-page-blue .py-5-nav,
 body:has(.hero-section) .discord-fab,
 body:has(.status-page-section) .discord-fab,
 body:has(.feedback-page-blue) .discord-fab {
   opacity: 1;
   transform: none;
   filter: none;
   animation: none;
 }
}

/* Discord FAB + prompt final override */
.discord-fab {
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  left: auto !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  z-index: 1200 !important;
}

.discord-fab i {
  font-size: 30px !important;
}

.discord-fab-prompt {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 70px);
  width: min(252px, calc(100vw - 20px));
  min-height: 70px;
  padding: 11px 34px 11px 10px;
  border-radius: 12px;
  border: 1px solid rgba(86, 185, 234, 0.25);
  background: rgba(5, 10, 20, 0.92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1199;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.discord-fab-prompt::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: rgba(5, 10, 20, 0.92);
  border-right: 1px solid rgba(86, 185, 234, 0.25);
  border-bottom: 1px solid rgba(86, 185, 234, 0.25);
  transform: rotate(45deg);
}

.discord-fab-prompt.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.discord-fab-prompt-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(86, 185, 234, 0.18);
  color: #56b9ea;
  flex: 0 0 auto;
}

.discord-fab-prompt-copy strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: #eaf6ff;
}

.discord-fab-prompt-copy span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.2;
  color: #9db1bf;
}

.discord-fab-prompt-close {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8395a7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.discord-fab-prompt-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #d9e8f6;
}

@media (max-width: 900px) {
  .discord-fab {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }

  .discord-fab i {
    font-size: 27px !important;
  }

  .discord-fab-prompt {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px);
    width: min(224px, calc(100vw - 16px));
    min-height: 66px;
    padding: 10px 32px 10px 9px;
  }

  .discord-fab-prompt::after {
    right: 24px;
    bottom: -6px;
    width: 12px;
    height: 12px;
  }

  .discord-fab-prompt-icon {
    width: 28px;
    height: 28px;
  }

  .discord-fab-prompt-copy strong {
    font-size: 15px;
  }

  .discord-fab-prompt-copy span {
    font-size: 12.5px;
  }
}
/* Keep hero background layers visible instantly (no fade-in) */
body:has(.hero-section) .hero-section,
body:has(.hero-section) .hero-section .hero-spotlight,
body:has(.hero-section) .hero-section .hero-dots,
body:has(.hero-section) .hero-section::after {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}
/* ===== HERO FINAL FIX ===== */

/* Cancel old section-level fade rules */
.hero-section {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* Keep hero background layers visible instantly */
.hero-section .hero-spotlight,
.hero-section .hero-dots,
.hero-section::after {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* Fade in only hero foreground */
@keyframes heroWrapFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroArtFadeIn {
  from { opacity: 0; }
  to   { opacity: 0.95; }
}

.hero-section .hero-wrap {
  animation: heroWrapFadeIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both !important;
}

.hero-section .hero-art {
  animation: heroArtFadeIn 0.6s ease 0.14s both !important;
}
@keyframes heroArtFadeInUp {
  from {
    opacity: 0;
    transform: translateY(-50%) translateY(18px);
  }
  to {
    opacity: 0.95;
    transform: translateY(-50%) translateY(0);
  }
}

.hero-section .hero-art {
  animation: heroArtFadeInUp 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both !important;
}
/* ===== Website update forced notice ===== */

.website-update-lock {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(86, 185, 234, 0.18), transparent 38%),
    rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.website-update-modal {
  width: min(460px, 100%);
  padding: 28px 24px 24px;
  border-radius: 18px;
  border: 1px solid rgba(86, 185, 234, 0.45);
  background: rgba(3, 8, 14, 0.96);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.65),
    0 0 38px rgba(86, 185, 234, 0.22);
  text-align: center;
}

.website-update-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 54px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(86, 185, 234, 0.16);
  border: 1px solid rgba(86, 185, 234, 0.42);
  color: #56b9ea;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.website-update-modal h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.08;
  font-weight: 800;
}

.website-update-modal p {
  margin: 12px auto 22px;
  max-width: 360px;
  color: #b8c7d3;
  font-size: 15px;
  line-height: 1.5;
}

.website-update-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  max-width: 280px;
  padding: 0 20px;
  border-radius: 12px;
  background: #56b9ea;
  border: 1px solid #7acdf3;
  color: #031018 !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 800;
  box-shadow:
    0 14px 30px rgba(86, 185, 234, 0.28),
    0 0 26px rgba(86, 185, 234, 0.32);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.website-update-button:hover {
  background: #7acdf3;
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(86, 185, 234, 0.34),
    0 0 32px rgba(86, 185, 234, 0.42);
}

@media (max-width: 520px) {
  .website-update-lock {
    padding: 16px;
  }

  .website-update-modal {
    padding: 24px 18px 20px;
    border-radius: 16px;
  }

  .website-update-button {
    max-width: none;
  }
}