/* FXCORP Futuristic Theme (public pages)
   Designed to layer on top of existing Bootstrap + inline theme styles. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --fx-primary:#00B030;      /* logo green */
  --fx-secondary:#10A090;    /* logo teal */
  --fx-bg:#05070b;
  --fx-bg-2:#070b13;
  --fx-text:#e9f3ff;
  --fx-muted:rgba(233,243,255,.72);
  --fx-card:rgba(255,255,255,.06);
  --fx-card-2:rgba(255,255,255,.08);
  --fx-border:rgba(255,255,255,.12);
  --fx-border-2:rgba(255,255,255,.18);
  --fx-shadow:0 20px 80px rgba(0,0,0,.55);
  --fx-glow:0 0 0 1px rgba(16,160,144,.25), 0 0 40px rgba(0,176,48,.18);
}

.fx-body{
  font-family:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !important;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(16,160,144,.18), transparent 60%),
              radial-gradient(900px 600px at 85% 15%, rgba(0,176,48,.14), transparent 55%),
              radial-gradient(900px 600px at 30% 85%, rgba(0,176,48,.10), transparent 55%),
              linear-gradient(180deg, var(--fx-bg) 0%, var(--fx-bg-2) 100%) !important;
  color: var(--fx-text) !important;
  overflow-x:hidden;
}

.fx-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.fx-aurora{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(16,160,144,.22), transparent 60%),
    radial-gradient(800px 500px at 80% 30%, rgba(0,176,48,.18), transparent 60%),
    radial-gradient(700px 500px at 40% 85%, rgba(0,176,48,.12), transparent 60%);
  filter: blur(30px);
  animation: fxAurora 14s ease-in-out infinite alternate;
  opacity:.85;
}

@keyframes fxAurora{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.0) rotate(-1deg); }
  100%{ transform: translate3d(2%, 1%, 0) scale(1.05) rotate(1deg); }
}

.fx-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,.55), transparent 70%);
  opacity:.25;
}

/* Typography overrides */
h1,h2,h3,h4,h5,h6{ color: var(--fx-text) !important; letter-spacing:-0.02em; }
p, .text-muted, .para, .para-desc, .para-desck{ color: var(--fx-muted) !important; }
a{ color: inherit; }
a:hover{ color: var(--fx-text); text-decoration:none; }

/* Navbar */
#topnav{
  background: rgba(5,7,11,.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#topnav .navigation-menu > li > a{
  color: rgba(233,243,255,.82) !important;
}
#topnav .navigation-menu > li > a:hover,
#topnav .navigation-menu > li.active > a{
  color: var(--fx-text) !important;
}
#topnav .logo img{
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* Buttons */
.btn{
  border-radius: 14px !important;
}
.btn-primary,
.login-btn-success.btn-primary{
  background: linear-gradient(135deg, var(--fx-secondary), var(--fx-primary)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: var(--fx-glow);
}
.btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.btn-outline-primary{
  color: var(--fx-text) !important;
  border-color: rgba(255,255,255,.20) !important;
}
.btn-outline-primary:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* Cards / surfaces */
.card, .shadow, .rounded, .rounded-md, .roundedd{
  border-radius: 18px !important;
}
.card{
  background: var(--fx-card) !important;
  border: 1px solid var(--fx-border) !important;
  box-shadow: var(--fx-shadow);
}
.bg-light, .bg-soft-primary, .bg-soft{
  background: transparent !important;
}
.alert, .breadcrumb, .bg-white{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--fx-text) !important;
}
.breadcrumb .breadcrumb-item a{ color: rgba(233,243,255,.78) !important; }
.breadcrumb .breadcrumb-item.active{ color: rgba(233,243,255,.92) !important; }

/* Section spacing / wrappers */
.section{ padding: 80px 0 !important; }
.fx-section{ padding: 90px 0 !important; }
.fx-hero{
  padding: 120px 0 70px !important;
}
.fx-hero .fx-hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: var(--fx-shadow);
}
.fx-pill{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.4rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(233,243,255,.82);
  font-weight: 600;
  font-size: .9rem;
}
.fx-kpi{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px 14px;
}
.fx-kpi .fx-kpi-label{ color: rgba(233,243,255,.70); font-size: .85rem; }
.fx-kpi .fx-kpi-value{ color: var(--fx-text); font-size: 1.05rem; font-weight: 700; letter-spacing:-0.01em; }

/* Pricing cards */
.pricing-rates{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.pricing-rates:hover{
  transform: translateY(-3px);
  transition: .2s ease;
  border-color: rgba(255,255,255,.22) !important;
}

/* Forms */
.form-control, .form-select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--fx-text) !important;
  border-radius: 14px !important;
}
.form-control::placeholder{ color: rgba(233,243,255,.55) !important; }

/* Footer */
footer{
  background: rgba(5,7,11,.55) !important;
  border-top: 1px solid rgba(255,255,255,.10);
}
footer, footer p, footer a{ color: rgba(233,243,255,.78) !important; }
footer a:hover{ color: var(--fx-text) !important; }

/* Embedded ticker */
.fx-ticker{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow:hidden;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .fx-aurora{ animation:none !important; }
  .pricing-rates:hover, .btn-primary:hover{ transform:none !important; }
}