/* ═══════════════════════════════════════════════
   AGENTICSTOCKCHARTS.COM — DESIGN SYSTEM
   Change anything here = changes entire site
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ── BRAND ── */
  --gold:           #C9A84C;
  --gold-light:     #E8C87A;
  --gold-dark:      #7A6230;
  --gold-bg:        rgba(201,168,76,0.07);
  --gold-border:    rgba(201,168,76,0.25);

  /* ── BACKGROUNDS ── */
  --bg:             #080A0D;
  --bg2:            #0C0F14;
  --bg3:            #111418;
  --bg4:            #161B22;

  /* ── BORDERS ── */
  --border:         #1C2330;
  --border2:        #242D3A;

  /* ── TEXT ── */
  --text:           #ECF0F8;
  --text2:          #7A8A9E;
  --text3:          #3A4A5C;

  /* ── SIGNAL ── */
  --bull:           #00D084;
  --bull-bg:        rgba(0,208,132,0.08);
  --bull-border:    rgba(0,208,132,0.25);
  --bear:           #FF4757;
  --bear-bg:        rgba(255,71,87,0.08);
  --bear-border:    rgba(255,71,87,0.25);
  --neutral:        #3D8EF0;

  /* ── GRADES ── */
  --legendary:      #FFD700;
  --legendary-bg:   rgba(255,215,0,0.08);
  --premium:        #C9A84C;
  --premium-bg:     rgba(201,168,76,0.08);
  --strong:         #00D084;
  --strong-bg:      rgba(0,208,132,0.08);
  --standard:       #3D8EF0;
  --standard-bg:    rgba(61,142,240,0.08);
  --weak:           #3A4A5C;

  /* ── PATTERNS ── */
  --abcd:           #C9A84C;
  --gartley:        #3D8EF0;
  --bat:            #00D084;
  --butterfly:      #A855F7;
  --crab:           #06B6D4;

  /* ── TYPOGRAPHY ── */
  --font-display:   'Bebas Neue', sans-serif;
  --font-body:      'Outfit', sans-serif;
  --font-mono:      'DM Mono', monospace;

  /* ── SIZES ── */
  --text-xs:        10px;
  --text-sm:        12px;
  --text-base:      14px;
  --text-md:        16px;
  --text-lg:        20px;
  --text-xl:        28px;
  --text-2xl:       40px;
  --text-hero:      72px;

  /* ── SPACING ── */
  --sp-xs:          4px;
  --sp-sm:          8px;
  --sp-md:          16px;
  --sp-lg:          24px;
  --sp-xl:          40px;
  --sp-2xl:         64px;

  /* ── LAYOUT ── */
  --sidebar:        300px;
  --header-h:       54px;
  --ctrl-h:         46px;
  --radius:         8px;
  --radius-sm:      5px;
  --radius-lg:      12px;

  /* ── EFFECTS ── */
  --shadow:         0 4px 24px rgba(0,0,0,0.5);
  --shadow-gold:    0 0 24px rgba(201,168,76,0.12);
  --glow-bull:      0 0 12px rgba(0,208,132,0.3);
  --glow-bear:      0 0 12px rgba(255,71,87,0.3);
  --transition:     all 0.15s ease;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--text-base); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:var(--font-body); }
input, select, textarea { font-family:var(--font-body); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-dark); }

/* ══════════════════════════════════
   SHARED COMPONENTS
══════════════════════════════════ */

/* NAV */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-xl);
  background:rgba(8,10,13,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo-mark {
  width:32px; height:32px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.nav-logo-text { font-family:var(--font-display); font-size:22px; letter-spacing:.06em; color:var(--gold); }
.nav-links { display:flex; align-items:center; gap:var(--sp-xl); }
.nav-link { font-size:var(--text-sm); font-weight:500; color:var(--text2); letter-spacing:.06em; text-transform:uppercase; transition:var(--transition); }
.nav-link:hover { color:var(--gold); }
.nav-link.active { color:var(--text); }
.nav-cta {
  padding:8px 20px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#080A0D; font-size:var(--text-sm); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  transition:var(--transition);
}
.nav-cta:hover { filter:brightness(1.15); transform:translateY(-1px); }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 24px; border-radius:var(--radius-sm);
  font-size:var(--text-sm); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  border:none; transition:var(--transition);
}
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#080A0D; }
.btn-gold:hover { filter:brightness(1.15); transform:translateY(-1px); box-shadow:var(--shadow-gold); }
.btn-outline { background:transparent; border:1px solid var(--gold-border); color:var(--gold); }
.btn-outline:hover { background:var(--gold-bg); border-color:var(--gold); }
.btn-ghost { background:transparent; border:1px solid var(--border2); color:var(--text2); }
.btn-ghost:hover { border-color:var(--gold-dark); color:var(--gold); }
.btn-sm { padding:6px 14px; font-size:var(--text-xs); }
.btn-lg { padding:14px 32px; font-size:var(--text-base); }

/* BADGE */
.badge {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:3px;
  font-family:var(--font-mono); font-size:var(--text-xs);
  font-weight:500; letter-spacing:.05em;
}
.badge-legendary { background:var(--legendary-bg); color:var(--legendary); border:1px solid rgba(255,215,0,.2); }
.badge-premium   { background:var(--premium-bg);   color:var(--premium);   border:1px solid var(--gold-border); }
.badge-strong    { background:var(--strong-bg);    color:var(--strong);    border:1px solid var(--bull-border); }
.badge-standard  { background:var(--standard-bg);  color:var(--standard);  border:1px solid rgba(61,142,240,.2); }
.badge-bull      { background:var(--bull-bg);      color:var(--bull);      border:1px solid var(--bull-border); }
.badge-bear      { background:var(--bear-bg);      color:var(--bear);      border:1px solid var(--bear-border); }

/* CARD */
.card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-lg);
  transition:var(--transition);
}
.card:hover { border-color:var(--border2); }
.card-gold { border-color:var(--gold-border); background:var(--bg2); }

/* SECTION */
.section { padding:var(--sp-2xl) var(--sp-xl); max-width:1200px; margin:0 auto; }
.section-label { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--gold); letter-spacing:.2em; text-transform:uppercase; margin-bottom:var(--sp-sm); }
.section-title { font-family:var(--font-display); font-size:var(--text-2xl); letter-spacing:.04em; color:var(--text); line-height:1.1; margin-bottom:var(--sp-md); }
.section-sub { font-size:var(--text-base); color:var(--text2); max-width:560px; line-height:1.7; }

/* DIVIDER */
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--border2),transparent); margin:var(--sp-xl) 0; }

/* MONO TEXT */
.mono { font-family:var(--font-mono); }

/* STATUS DOT */
.dot-live { width:7px; height:7px; border-radius:50%; background:var(--bull); box-shadow:var(--glow-bull); animation:pulse 2s infinite; display:inline-block; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }

/* FOOTER */
.footer {
  border-top:1px solid var(--border);
  padding:var(--sp-xl);
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--text-xs); color:var(--text3);
  font-family:var(--font-mono);
}
.footer-logo { font-family:var(--font-display); font-size:18px; color:var(--gold-dark); letter-spacing:.06em; }

/* ANIMATIONS */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
.fade-up { animation:fadeUp .5s ease forwards; }
.fade-up-1 { animation-delay:.1s; opacity:0; }
.fade-up-2 { animation-delay:.2s; opacity:0; }
.fade-up-3 { animation-delay:.3s; opacity:0; }
.fade-up-4 { animation-delay:.4s; opacity:0; }

/* LOADING SKELETON */
.skeleton {
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}