/* styles/style.css - Neon Blue Dark Theme */

:root{
  --bg-1: #05060a;
  --bg-2: #071028;
  --card-bg: rgba(255,255,255,0.03);
  --muted: #98a8d1;
  --neon: #00d1ff;
  --neon-strong: #00b7ff;
  --glass: rgba(255,255,255,0.04);
  --accent-glow: 0 6px 30px rgba(0, 209, 255, 0.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(0,13,30,0.6), transparent 10%), linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: #e6f0ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Navbar */
.navbar{
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(2,6,12,0.6)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.navbar-brand{ color: var(--neon); font-weight:700; letter-spacing:0.4px; }
.navbar .nav-link{ color:var(--muted) !important; margin-left:8px; }
.navbar .nav-link.active{ color:#fff !important; font-weight:600; }

/* Buttons */
.btn-green, .btn-primary-custom{
  background: linear-gradient(90deg, var(--neon) 0%, var(--neon-strong) 100%);
  color:#00121a;
  border: none;
  box-shadow: var(--accent-glow);
  border-radius:10px;
  padding:10px 16px;
  font-weight:600;
}
.btn-green:hover{ transform:translateY(-2px); box-shadow: 0 12px 40px rgba(0,209,255,0.12); }
.btn-outline-warning{
  border-color: rgba(255,200,50,0.12) !important;
  color: #ffd77a !important;
  background: transparent!important;
}

/* Containers & sections */
.container{
  max-width:1100px;
}
section{ padding-top:3rem; padding-bottom:3rem; }

.display-4{ font-size:2.25rem; color:#fff; }
.text-green{ color:var(--neon) !important; text-shadow: 0 2px 18px rgba(0,209,255,0.08); }

.lead{ color:var(--muted); }

.center-image{ display:block; margin:1.2rem auto; max-width:160px; border-radius:12px; box-shadow: 0 12px 36px rgba(0,0,0,0.6); }

.card{
  background: var(--card-bg);
  border-radius:14px;
  padding:1.25rem;
  border: 1px solid rgba(255,255,255,0.02);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 6px 30px rgba(0,209,255,0.05); }

/* Images */
img.img-fluid{ border-radius:12px; box-shadow: 0 18px 50px rgba(2,6,12,0.6); }

/* Chart */
#cryptoChart{ background: linear-gradient(180deg, rgba(0,0,0,0.06), transparent); border-radius:12px; padding:12px; display:block; width:100%; max-height:380px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); }

/* Footer */
footer{ background: transparent; border-top: 1px solid rgba(255,255,255,0.03); color:var(--muted); }

/* Utilities */
.text-secondary{ color:var(--muted) !important; }
h2{ color:#fff; }
h3{ color:#ddf0ff; }

/* Responsive tweaks */
@media (max-width:768px){
  .display-4{ font-size:1.5rem; }
  .container{ padding-left:16px; padding-right:16px; }
}

/* Small neon badge */
.neon-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,209,255,0.12), rgba(0,183,255,0.08));
  color:var(--neon);
  font-weight:700;
  box-shadow: 0 6px 28px rgba(0,209,255,0.06);
}