/* NOXAI Landing Pro Overlay
   Professionalizes the landing page: clean SaaS tone, subtle gradients, restrained glows,
   modern buttons, and reveal animations. */

:root{
  --lp-surface: var(--surface, #0e1628);
  --lp-surface-2: var(--surface-2, #121a2c);
  --lp-text: var(--text, #e6edf7);
  --lp-muted: var(--muted, #9fb0c3);
  --lp-primary: var(--primary, #00e5a8);
  --lp-primary-600: var(--primary-600, #00c896);
  --lp-border: var(--border, rgba(255,255,255,0.08));
  --lp-radius: var(--radius, 12px);
  --lp-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,0.35));
}

/* Header */
header{ background: rgba(12,18,36,0.88) !important; border-bottom: 1px solid var(--lp-border) !important; box-shadow: none !important; }
header.scrolled{ background: rgba(12,18,36,0.96) !important; padding: 8px 0 !important; }
nav .nav-links{ display:flex; align-items:center; gap:18px; }
nav .nav-links a{ color: var(--lp-text); text-decoration:none; font-weight:600; opacity:.85; }
nav .nav-links a:hover{ opacity:1; }

/* Logo */
.logo-text{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: var(--lp-text) !important; opacity: .95; }
.logo img{ filter: none !important; }

/* Buttons */
.btn, .btn-primary-cta, .sticky-cta-btn, .telegram-btn{
  border-radius: 10px !important;
  background: var(--lp-primary) !important;
  color: #0b1220 !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
  box-shadow: none !important;
}
.btn:hover, .btn-primary-cta:hover, .sticky-cta-btn:hover, .telegram-btn:hover{ background: var(--lp-primary-600) !important; transform: translateY(-1px) !important; }
.btn-outline{ border: 1px solid var(--lp-border) !important; color: var(--lp-text) !important; background: rgba(255,255,255,0.04) !important; }
.btn-outline:hover{ background: rgba(255,255,255,0.08) !important; }

/* Hero */
.hero{ background: none !important; }
.hero::before{ display: none !important; }
.hero h1{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: var(--lp-text) !important; }
.hero .hero-subtitle{ color: var(--lp-muted) !important; }
.hero-badge, .hero-tag{ border: 1px solid var(--lp-border) !important; box-shadow: none !important; background: transparent !important; }
/* Hide decorative graphics for a crisp hero */
.hero-graphics{ display: none !important; }

/* Hero grid layout */
.hero .container .hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center; }
.hero-media .hero-card{ background: rgba(255,255,255,0.02); border:1px solid var(--lp-border); border-radius: var(--lp-radius); padding:12px; box-shadow: none; }
.hero-media .hero-screenshot{ width:100%; height:auto; display:block; border-radius:8px; }
.hero-media .hero-caption{ margin-top:8px; color: var(--lp-muted); font-size:13px; }

/* Cards (flat) */
.feature-card, .gain-card, .telegram-card{ background: var(--lp-surface) !important; border: 1px solid var(--lp-border) !important; border-radius: 10px !important; box-shadow: none !important; }
.feature-card:hover{ transform: translateY(-2px) !important; box-shadow: none !important; }

/* Sticky CTA & Exit popup - make calmer */
.sticky-cta{ background: rgba(12,18,36,0.95) !important; border-top: 1px solid var(--lp-border) !important; box-shadow: none !important; }
.exit-popup .exit-popup-content{ background: var(--lp-surface) !important; border: 1px solid var(--lp-border) !important; box-shadow: var(--lp-shadow) !important; }
.exit-popup{ background: rgba(0,0,0,0.55) !important; }
/* Hide legacy features popup */
.features-popup-overlay{ display: none !important; }

/* Footer */
.footer, .footer-bottom{ background: var(--lp-surface) !important; border-top: 1px solid var(--lp-border) !important; }
.footer a{ color: var(--lp-text) !important; opacity: .9; }
.footer a:hover{ opacity: 1; }

/* Reveal animations */
.reveal{ opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal.visible{ opacity: 1; transform: none; }
.fade-in{ transform: none; }
.fade-right{ transform: translateX(-12px); }
.fade-left{ transform: translateX(12px); }

/* Trustbar */
.trustbar{ margin-top:18px; }
.trustbar .trust-items{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.trustbar .trust-item{ display:flex; gap:8px; align-items:center; background: transparent; border:1px solid var(--lp-border); padding:8px 12px; border-radius:999px; color: var(--lp-muted); }
.trustbar .trust-item i{ color: var(--lp-primary); }

/* Neutralize legacy gradient span */
.highlight-gradient{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: inherit !important; color: var(--lp-text) !important; }

/* Stagger utility: children animate sequentially */
.stagger > *{ opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.stagger.visible > *{ opacity: 1; transform: none; }
.stagger.visible > *:nth-child(1){ transition-delay: .05s; }
.stagger.visible > *:nth-child(2){ transition-delay: .10s; }
.stagger.visible > *:nth-child(3){ transition-delay: .15s; }
.stagger.visible > *:nth-child(4){ transition-delay: .20s; }
.stagger.visible > *:nth-child(5){ transition-delay: .25s; }

/* Tilt hover (applied to feature-card) */
.feature-card{ transform-style: preserve-3d; transition: transform .18s ease; }
.feature-card[data-tilt="1"]{ transform: perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); }

/* Responsive tweaks */
@media (max-width: 768px){
  .hero h1{ font-size: 40px !important; }
  .hero .hero-buttons{ gap: 12px !important; }
  .nox-alert-card{ padding: 16px !important; }
}

@media (max-width: 992px){
  .hero .container .hero-grid{ grid-template-columns: 1fr; }
  nav .nav-links{ display:none; }
}