/* -------------------------
   Reset & Base + Theme
------------------------- */
:root{
  --max-width:1250px;
  --radius:12px;
  --accent:#111827;
  --accent-2:#0d486f;
  --muted:#64748b;
  --surface:#ffffff;
  --glass: rgba(255,255,255,0.10);
  --shadow-sm: 0 6px 20px rgba(2,6,23,0.25);
  --shadow-md: 0 14px 40px rgba(2,6,23,0.30);
  --glass-blur: 10px;
  --space-xs:8px;
  --space-sm:14px;
  --space-md:22px;
  --space-lg:36px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #eef2f7 url('https://cdn.jsdelivr.net/gh/s-yadav/grainy-gradients/noise.svg') repeat;
  background-size:260px;
  color:#0b1e3b;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* LAYOUT HELPERS */
.container { max-width:var(--max-width); margin:0 auto; padding: 0 1.2rem; }
.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }
.center { align-items:center; }

/* TOPBAR */
.topbar { position: sticky; top:0; z-index:80; background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.6)); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(11,22,45,0.04); }
.topbar .container { padding:12px 1.2rem; }
.brand { display:flex; gap:12px; align-items:center; }
.logo { width:56px; height:40px; border-radius:10px; background:linear-gradient(135deg,#fff,#eef6ff); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--accent); box-shadow:var(--shadow-sm); }
.brand-name { font-weight:800; color:#071228; }
.brand-slogan { font-size:0.8rem; color:var(--muted); }

/* NAV */
.nav-list { list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.nav-list a { color:#071228; text-decoration:none; font-weight:700; opacity:0.9; }
.nav-list a:hover { opacity:1; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:none; font-weight:800; cursor:pointer; }
.btn.ghost { background:transparent; border:1px solid rgba(11,22,45,0.06); color:#071228; }
.btn.primary { background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; box-shadow: var(--shadow-md); }
.btn.full { width:100%; }

/* Utilities */
.card { background:var(--surface); border-radius:12px; padding:16px; box-shadow:var(--shadow-sm); border:1px solid rgba(11,22,45,0.04); }

/* HERO */
.container-section { padding:48px 0; }
.hero-grid { display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start; max-width:1100px; margin:0 auto; }
@media (max-width:1100px){ .hero-grid { grid-template-columns:1fr; } }
.hero-left { padding-right:6px; }
.hero-left h1 { margin:0 0 14px; font-size: clamp(1.8rem, 3.8vw, 2.8rem); line-height:1.08; color:#071228; }
.hero-lead { margin:0 0 18px; color:var(--muted); font-size:1.05rem; }
.hero-actions { display:flex; gap:12px; margin-bottom:18px; }
.hero-stats { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.stat { background:var(--surface); padding:12px 14px; border-radius:10px; min-width:110px; box-shadow:var(--shadow-sm); }
.stat .num { font-weight:800; }
.hero-coin-row { margin-top:18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* HERO RIGHT PREVIEW */
.hero-right { display:flex; flex-direction:column; gap:12px; }
.preview-top { display:flex; justify-content:space-between; align-items:center; }
.preview-value { font-weight:800; font-size:1.4rem; }
.preview-chart { height:120px; }

/* TICKER */
.ticker { margin:18px 0; }
.ticker .inner { background:var(--surface); border-radius:12px; padding:12px; border:1px solid rgba(11,22,45,0.04); overflow:hidden; white-space:nowrap; display:block; }

/* MARKET */
.market-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:14px; margin-top:18px; margin-bottom:18px; }
.market-card { display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:12px; background:var(--surface); border:1px solid rgba(11,22,45,0.04); box-shadow:var(--shadow-sm); }
.market-card .meta { display:flex; align-items:center; gap:10px; }
.market-card .meta img { width:28px; height:28px; border-radius:50%; }

/* MARKET VISUALS */
.market-visuals { display:grid; grid-template-columns: 1fr 360px; gap:18px; margin-top:18px; }
@media (max-width:980px) { .market-visuals { grid-template-columns:1fr; } }

/* HEATMAP */
.heatmap { display:flex; flex-wrap:wrap; gap:8px; }

/* FEATURES & PRICING */
.features-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:18px; }
@media (max-width:980px){ .features-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .features-grid{ grid-template-columns:1fr; } }
.pricing-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:18px; }
@media (max-width:1000px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pricing-grid{ grid-template-columns:1fr; } }
.plan.featured { transform: scale(1.02); box-shadow: var(--shadow-md); }

/* ARTICLES */
.article { padding:18px; background:var(--surface); border-radius:12px; margin-top:18px; line-height:1.7; color:#123; }
.article h3 { margin-top:0; }

/* FAQ */
.faq-grid { display:grid; gap:12px; max-width:760px; margin-top:14px; }
.faq-item { background:var(--surface); padding:14px; border-radius:10px; }
.faq-item summary { cursor:pointer; font-weight:700; }

/* CTA CARD & FOOTER */
.cta-card { display:flex; gap:20px; align-items:center; justify-content:space-between; padding:20px; border-radius:12px; background: linear-gradient(90deg, rgba(11,102,255,0.08), rgba(11,158,255,0.04)); border:1px solid rgba(11,22,45,0.04); }
.footer { padding:28px 0; color:var(--muted); }

/* MOBILE NAV */
.mobile-nav {
  position: fixed;
  left: 50%;                  /* REQUIRED for centering */
  bottom: 10px;
  transform: translateX(-50%);
  width: 96%;
  max-width: 720px;

  background: var(--surface);
  padding: 8px 12px;
  border-radius: 14px;

  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;

  box-shadow: var(--shadow-md);
  border: 1px solid rgba(11, 22, 45, 0.04);

  z-index: 80;
}

.mobile-nav a {
  text-decoration: none;
  color: #071228;
  font-weight: 800;
  font-size: 0.9rem;
}


/* GLASS STYLE */
.glass { background: rgba(255,255,255,0.9); box-shadow: var(--shadow-sm); border-radius:12px; border:1px solid rgba(11,22,45,0.04); }

/* AUTH MODAL */
/* /* =====================================================
   MODAL BASE
   ===================================================== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: opacity .25s ease, visibility .25s ease;
  opacity: 0;
  visibility: hidden;
}

.modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

/* BACKDROP */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
}

.modal[aria-hidden="false"] .modal-backdrop {
  opacity: 1;
}

/* =====================================================
   MODAL PANEL (Card)
   ===================================================== */
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #111827;
  backdrop-filter: blur(18px);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
  transform: translateY(30px) scale(.95);
  opacity: 0;
  transition:
    transform .35s cubic-bezier(.16,.84,.44,1),
    opacity .35s ease;
}

.modal[aria-hidden="false"] .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* CLOSE BUTTON */
.modal-close {
  position: absolute;
  right: 16px;
  top: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  padding: 4px 6px;
  transition: 0.2s ease;
}

.modal-close:hover {
  transform: scale(1.2);
  color: #f2f2f2;
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
#authTitle {
  color: #fff;
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 600;
}

/* =====================================================
   FORM ELEMENTS
   ===================================================== */
.auth-form label {
  color: #d1d5db;
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}

.auth-form input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  transition: border-color .2s ease, background .2s ease;
  margin-bottom: 16px;
}

.auth-form input:focus {
  background: rgba(255,255,255,0.18);
  border-color: #6366f1;
}

/* Remember / Forgot row */
.row.between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.checkbox input {
  margin-right: 6px;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn.primary.full {
  width: 100%;
  background: #6366f1;
  padding: 12px 16px;
  color: #fff;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: background .25s ease, transform .2s ease;
}

.btn.primary.full:hover {
  background: #4f46e5;
  transform: translateY(-2px);
}

/* Switch links */
.btn-link {
  background: none;
  color: #93c5fd;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  transition: color .2s ease;
}

.btn-link:hover {
  color: #bfdbfe;
}

/* Small muted text */
.auth-alt {
  margin-top: 12px;
  color: #d1d5db;
}

/* =====================================================
   ERROR BOX
   ===================================================== */
.auth-error {
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 59, 59, 0.15);
  border-left: 3px solid #ff4d4d;
  color: #ffb3b3;
  border-radius: 6px;
  font-size: 14px;
}

/* ANIMATIONS: coin float, fade-in, ticker */
@keyframes float-coin {
  0% { transform: translateY(0) rotate(0); opacity:1; }
  50% { transform: translateY(-8px) rotate(6deg); opacity:0.95; }
  100% { transform: translateY(0) rotate(0); opacity:1; }
}
.coin {
  width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
  transition: transform .2s ease;
}
.coin:hover { transform: translateY(-6px) scale(1.06); }
.coin.animated { animation: float-coin 3s ease-in-out infinite; }

/* FADE-IN helper used by JS intersection observer */
.fade { opacity:0; transform: translateY(14px); transition: all .7s cubic-bezier(.2,.9,.2,1); }
.fade.show { opacity:1; transform:none; }

/* small screens tweaks */
@media (max-width:640px) {
  .nav { display:none; }
  .hero-grid { padding:0 10px; }
  .mobile-nav { display:flex; }
}