/* ==========================================================================
   PUBLIC LANDING PAGE STYLES (SCOPED GLOW HOVER, FAQ TABS & CUTE YELLOW ROBOT)
   ========================================================================== */

/* Keyframe Animations */
@keyframes radialPulseGlow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

@keyframes spinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}

@keyframes floatRotateWelcome {
  0% { transform: translateY(0px) rotate(0deg); filter: drop-shadow(0 0 15px rgba(15, 189, 241, 0.35)); }
  50% { transform: translateY(-14px) rotate(3deg); filter: drop-shadow(0 0 30px rgba(15, 189, 241, 0.6)); }
  100% { transform: translateY(0px) rotate(0deg); filter: drop-shadow(0 0 15px rgba(15, 189, 241, 0.35)); }
}

/* Cute 3D Yellow Robot Avatar Styling & Seamless Blend */
.robotics-welcome-avatar {
  max-width: 360px;
  width: 100%;
  border-radius: var(--radius-lg);
  animation: floatRotateWelcome 6s ease-in-out infinite;
  mix-blend-mode: screen;
  transition: transform var(--transition-fast);
}

/* Static Background System */
.cyber-grid-animated {
  background-image: none !important;
}

.neural-network-bg {
  position: relative;
  background: radial-gradient(circle at 50% 30%, rgba(15, 189, 241, 0.12) 0%, rgba(5, 7, 12, 0.98) 75%),
              linear-gradient(135deg, rgba(0, 242, 254, 0.05) 0%, rgba(5, 7, 12, 1) 100%);
}

.circuit-bg-section {
  position: relative;
  background: linear-gradient(180deg, rgb(9 13 22 / 23%) 0%, rgba(5, 7, 12, 0.98) 100%), radial-gradient(circle at 50% 50%, rgba(15, 189, 241, 0.1) 0%, transparent 60%);
}

/* Transparent Glass Cards */
.quantum-glow-card {
  position: relative;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: var(--radius-lg);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 1. Live Crypto Terminal Cards (GLOWING ON HOVER ENABLED) */
.terminal-coin-card {
  background: rgba(15, 21, 34, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(15, 220, 241, 0.5) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.5rem !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.terminal-coin-card:hover {
  background: rgba(15, 21, 34, 0.75) !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 25px rgba(15, 189, 241, 0.35) !important;
}

/* Header */
.public-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  padding: 0.85rem 0;
  background: rgba(5, 7, 12, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 189, 241, 0.2);
}

.nav-link-custom {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.45rem 0.9rem !important;
  transition: color var(--transition-fast);
}

.nav-link-custom:hover, .nav-link-custom.active {
  color: var(--gold-primary);
}

/* Hero Section */
.hero-section {
  padding-top: 115px;
  padding-bottom: 75px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.75) 0%, rgba(9, 13, 22, 0.88) 100%),
              url('../images/hero_ai_crypto.png') center/cover no-repeat;
}

#globalBgParticleCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
}

#heroParticleCanvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-content-wrapper {
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem !important;
  background: rgba(15, 210, 241, 0.15);
  border: 1px solid rgba(15, 199, 241, 0.4);
  border-radius: var(--radius-full);
  color: var(--gold-primary);
  font-size: 0.875rem !important;
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: var(--font-size-h1);
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff !important;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.02rem;
  font-weight: 500;
  color: #e2e8f0 !important;
  max-width: 580px;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.hero-ai-img-preview {
  max-width: 420px;
  width: 100%;
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* Live Crypto Terminal Section */
.ticker-terminal-section {
  padding: 75px 0;
  position: relative;
  background: linear-gradient(180deg, rgb(9 13 22 / 30%) 0%, rgb(5 7 12 / 30%) 100%) !important;
}

/* AI Autonomous Mining Section */
.ai-mining-section {
  padding: 75px 0;
  position: relative;
  background: linear-gradient(180deg, rgb(5 7 12 / 86%) 0%, rgba(9, 13, 22, 0.78) 100%),
              url('../images/ai_crypto_mining_bg.png') center / cover no-repeat !important;
}

/* Graphical AI Roadmap Section */
.roadmap-section {
  padding: 75px 0;
  position: relative;
  background: linear-gradient(180deg, rgb(5 7 12 / 30%) 0%, rgba(9, 13, 22, 0.98) 100%) !important;
}

/* AI Multi-Asset Staking Calculator Section with Exchange Graph Background */
#staking,
.staking-calculator-section {
  padding: 75px 0;
  position: relative;
  background: linear-gradient(180deg, rgb(5 7 12 / 76%) 0%, rgba(9, 13, 22, 0.55) 100%),
              url('../images/staking_graph_bg.png') center / cover no-repeat !important;
}

/* Staking Calculator Card */
.staking-calculator-card {
  background: rgb(7 120 150 / 40%) !important;
  border-radius: 5px !important;
}

.staking-calculator-card:hover {
 /* border-color: var(--gold-primary) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 45px rgba(15, 189, 241, 0.45) !important; */
}

.staking-calculator-card .bg-input {
  background: rgba(5, 7, 12, 0.9) !important;
  border: 1px solid rgba(15, 199, 241, 0.4) !important;
  border-radius: var(--radius-md) !important;
}

.staking-calculator-card .form-control-gold,
.staking-calculator-card .form-select-gold {
  background-color: rgba(5, 7, 12, 0.95) !important;
  border: 1px solid rgba(15, 210, 241, 0.45) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.staking-calculator-card .form-control-gold:focus,
.staking-calculator-card .form-select-gold:focus {
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 15px rgba(15, 189, 241, 0.4) !important;
}

/* 5-Step AI Solution Workflow Section */
.ai-workflow-section {
  padding: 85px 0;
  background: linear-gradient(180deg, rgb(9 13 22 / 20%) 0%, rgb(5 7 12 / 40%) 100%);
}

.ai-step-card {
  background: rgba(15, 21, 34, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(15, 189, 241, 0.3) !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-step-card:hover {
  transform: translateY(-10px) scale(1.03) !important;
  border-color: var(--gold-primary) !important;
  background: rgba(22, 30, 48, 0.92) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 35px rgba(15, 189, 241, 0.4) !important;
}

.step-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gold-primary);
  background: rgb(15 189 241 / 15%);
  border: 1px solid rgb(15 178 241 / 50%);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.step-icon-wrapper {
  width: 105px;
  height: 105px;
  margin: 0.5rem auto 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 189, 241, 0.2) 0%, rgba(5, 7, 12, 0.75) 75%);
  border: 2px solid rgba(15, 189, 241, 0.4);
  padding: 10px;
  box-shadow: 0 0 25px rgba(15, 189, 241, 0.25);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.ai-step-card:hover .step-icon-wrapper {
  transform: scale(1.12) rotate(3deg);
  border-color: var(--gold-primary);
  box-shadow: 0 0 35px rgba(15, 189, 241, 0.6);
}

.step-icon-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

/* 2. Graphical AI Roadmap Cards (GLOWING ON HOVER ENABLED) */
.roadmap-step-box {
  background: rgba(15, 21, 34, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 189, 241, 0.25) !important;
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.roadmap-step-box:hover {
  background: rgba(15, 21, 34, 0.65) !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 22px rgba(15, 189, 241, 0.35) !important;
}

.roadmap-step-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--gold-subtle);
  border: none;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 1rem;
}

.icon-spin-animated {
  animation: spinSlow 10s linear infinite;
}

.icon-pulse-animated {
  animation: pulseIcon 2s ease-in-out infinite;
}

/* Custom FAQ Tab Pills */
.btn-tab-gold {
  background: rgba(15, 21, 34, 0.85) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(15, 189, 241, 0.3) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
}

.btn-tab-gold:hover {
  border-color: var(--gold-primary) !important;
  color: var(--gold-primary) !important;
}

.btn-tab-gold.active {
  background: var(--gradient-gold) !important;
  color: #05070c !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(15, 189, 241, 0.3) !important;
}

.accordion-gold .accordion-item {
  background: rgba(15, 21, 34, 0.85);
  border: 1px solid rgb(15 189 241 / 15%) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.accordion-gold .accordion-button {
  background: rgba(15, 21, 34, 0.85);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: none !important;
  padding: 0.95rem 1.15rem;
}

.accordion-gold .accordion-button:not(.collapsed) {
  background: rgba(22, 30, 48, 0.95);
  color: var(--gold-primary) !important;
}

.accordion-gold .accordion-body {
  background: rgba(15, 21, 34, 0.85);
  color: #e2e8f0 !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.95rem 1.15rem;
  line-height: 1.6;
}

.public-footer {
  background: #05070c;
  border-top: 1px solid rgb(15 210 241 / 20%);
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
  color: #e2e8f0;
}

/* Golden Border for Public Contact Form */
#publicContactForm {
  border: 1px solid #f1c40f !important;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: rgba(15, 21, 34, 0.75);
  box-shadow: 0 0 5px rgba(15, 189, 241, 0.4) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#publicContactForm:hover {
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 12px rgba(15, 189, 241, 0.6) !important;
}

/* ==========================================================================
   STATE-OF-THE-ART PUBLIC MOBILE APP NAVIGATION BAR & HEADER DRAWER
   ========================================================================== */
.public-mobile-app-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(10, 15, 26, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(15, 199, 241, 0.4) !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(15, 189, 241, 0.2);
  z-index: 1060 !important;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.25rem;
}

.public-mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cbd5e1 !important;
  font-size: 0.72rem;
  font-weight: 600;
  gap: 0.2rem;
  flex: 1;
  height: 100%;
  text-decoration: none !important;
  transition: all var(--transition-fast);
  border-radius: 8px;
}

.public-mobile-nav-item i {
  font-size: 1.18rem;
  color: #94a3b8;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.public-mobile-nav-item:hover,
.public-mobile-nav-item.active {
  color: var(--gold-primary) !important;
}

.public-mobile-nav-item:hover i,
.public-mobile-nav-item.active i {
  color: var(--gold-primary) !important;
  transform: translateY(-2px);
}

.public-mobile-nav-item.highlight-item {
  color: #05070c !important;
}

.public-mobile-nav-item.highlight-item i {
  color: #05070c !important;
}

.public-mobile-nav-item.highlight-item span {
  background: var(--gradient-gold);
  color: #05070c;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.68rem;
  box-shadow: 0 2px 8px rgba(15, 189, 241, 0.4);
}

@media (max-width: 991.98px) {
  .public-mobile-app-nav {
    display: flex !important;
  }

  body {
    padding-bottom: 64px !important;
  }

  /* Mobile App Drawer Header Navigation Dropdown Styling */
  .public-header .navbar-collapse {
    background: rgba(10, 15, 26, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(15, 199, 241, 0.4) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    margin-top: 0.75rem !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(15, 189, 241, 0.25) !important;
  }

  .public-header .nav-link-custom {
    padding: 0.65rem 0.85rem !important;
    border-radius: 8px !important;
    margin-bottom: 0.25rem !important;
  }

  .public-header .nav-link-custom.active,
  .public-header .nav-link-custom:hover {
    background: rgb(15 189 241 / 15%) !important;
    color: var(--gold-primary) !important;
  }
}

/* ==========================================================================
   PUBLIC LEFT-TO-RIGHT MOBILE SLIDE DRAWER NAVIGATION
   ========================================================================== */
.public-slide-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 290px;
  height: 100vh;
  background: linear-gradient(180deg, rgba(10, 15, 26, 0.98) 0%, rgba(5, 7, 12, 0.99) 100%) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
  border-right: 1px solid rgba(15, 199, 241, 0.4) !important;
  box-shadow: 10px 0 45px rgba(0, 0, 0, 0.95), 0 0 30px rgba(15, 189, 241, 0.25);
  z-index: 1085 !important;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1.25rem;
}

.public-slide-drawer.show {
  left: 0 !important;
}

.public-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 6, 14, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1080 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.public-drawer-backdrop.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.drawer-nav-item {
  display: flex;
  align-items: center;
  padding: 0.7rem 0.9rem;
  color: #cbd5e1 !important;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none !important;
  transition: all var(--transition-fast);
  margin-bottom: 0.35rem;
}

.drawer-nav-item:hover,
.drawer-nav-item.active {
  background: rgb(15 189 241 / 15%) !important;
  color: var(--gold-primary) !important;
  transform: translateX(4px);
}

.drawer-nav-item i {
  font-size: 1.05rem;
  width: 24px;
}