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

:root {
  --gold: #F5B800;
  --gold-light: #FFD84D;
  --black: #0A0A0A;
  --dark: #111111;
  --dark2: #1A1A1A;
  --white: #FAFAF5;
  --muted: #888880;
  --accent: #E8341A;
  --green: #2ECC71;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--white); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 200;
  padding: 1rem 5vw;
  display: flex; align-items: center; gap: 1.5rem;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(245,184,0,0.15);
}
.logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: 0.08em; color: var(--gold); text-decoration: none; margin-right: auto; }
.logo span { color: var(--white); }
nav a.nav-link { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s; }
nav a.nav-link:hover { color: var(--gold); }
nav a.nav-link.active { color: var(--gold); }
.nav-sub-btn { background: var(--gold); color: var(--black); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55rem 1.2rem; border-radius: 2px; text-decoration: none; transition: background 0.2s, transform 0.2s; white-space: nowrap; }
.nav-sub-btn:hover { background: var(--gold-light); transform: translateY(-1px); }
.nav-usage { font-size: 0.72rem; color: var(--muted); white-space: nowrap; border: 1px solid rgba(245,184,0,0.2); padding: 0.4rem 0.8rem; border-radius: 100px; }
.nav-usage.low { color: var(--accent); border-color: rgba(232,52,26,0.3); }

/* ── TICKER ── */
.ticker-bar {
  background: var(--gold); height: 34px;
  overflow: hidden; display: flex; align-items: center;
  position: relative; z-index: 10;
}
.ticker-track {
  display: flex; white-space: nowrap;
  animation: ticker 35s linear infinite;
}
.ticker-track span { font-size: 0.75rem; font-weight: 700; color: var(--black); padding: 0 2rem; letter-spacing: 0.04em; }
.ticker-track span.up::before { content: '▲ '; color: #005500; }
.ticker-track span.dn::before { content: '▼ '; color: #8B0000; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── CHAT UI (shared) ── */
.chat-window {
  background: var(--dark2); border: 1px solid rgba(245,184,0,0.2);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; height: 520px;
}
.chat-topbar {
  background: rgba(245,184,0,0.06); border-bottom: 1px solid rgba(245,184,0,0.15);
  padding: 0.85rem 1.3rem; display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0;
}
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--accent)); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.chat-topbar-info .tname { font-weight: 600; font-size: 0.85rem; }
.chat-topbar-info .tstatus { font-size: 0.7rem; color: var(--green); display: flex; align-items: center; gap: 0.3rem; }
.chat-topbar-info .tstatus::before { content:''; width:5px; height:5px; background:var(--green); border-radius:50%; }
.chat-usage-bar { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.usage-label { font-size: 0.68rem; color: var(--muted); }
.usage-pips { display: flex; gap: 3px; }
.pip { width: 10px; height: 10px; border-radius: 2px; background: rgba(245,184,0,0.15); border: 1px solid rgba(245,184,0,0.2); transition: background 0.3s; }
.pip.used { background: var(--gold); border-color: var(--gold); }
.pip.subscribed { background: var(--green); border-color: var(--green); }

.chat-msgs { flex:1; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:0.9rem; scroll-behavior:smooth; }
.chat-msgs::-webkit-scrollbar { width: 3px; }
.chat-msgs::-webkit-scrollbar-thumb { background: rgba(245,184,0,0.2); border-radius: 2px; }

.msg { display: flex; align-items: flex-end; gap: 0.5rem; animation: msgIn 0.3s ease forwards; }
.msg.user { flex-direction: row-reverse; }
@keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.mavatar { width:26px; height:26px; border-radius:50%; background:var(--dark); border:1px solid rgba(245,184,0,0.2); display:flex; align-items:center; justify-content:center; font-size:0.72rem; flex-shrink:0; }
.msg.bot .mavatar { background: linear-gradient(135deg, var(--gold), var(--accent)); border:none; }
.mbubble { max-width:78%; padding:0.8rem 1rem; border-radius:10px; font-size:0.88rem; line-height:1.65; }
.msg.bot .mbubble { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:var(--white); border-bottom-left-radius:3px; }
.msg.user .mbubble { background:var(--gold); color:var(--black); font-weight:500; border-bottom-right-radius:3px; }

.typing-dots { display:flex; align-items:center; gap:4px; padding:0.65rem 0.9rem; }
.typing-dots span { width:5px; height:5px; border-radius:50%; background:var(--muted); animation:tdot 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes tdot { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

.chat-input-row { border-top:1px solid rgba(245,184,0,0.12); padding:0.9rem 1.1rem; display:flex; gap:0.7rem; align-items:flex-end; flex-shrink:0; }
.chat-input { flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:6px; padding:0.7rem 0.9rem; color:var(--white); font-family:'DM Sans',sans-serif; font-size:0.88rem; outline:none; resize:none; max-height:90px; transition:border-color 0.2s; line-height:1.5; }
.chat-input:focus { border-color:rgba(245,184,0,0.5); }
.chat-input::placeholder { color:var(--muted); }
.chat-input:disabled { opacity:0.5; }
.send-btn { width:40px; height:40px; border-radius:6px; background:var(--gold); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:all 0.2s; flex-shrink:0; color:var(--black); font-weight:700; }
.send-btn:hover { background:var(--gold-light); transform:translateY(-2px); }
.send-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }

/* ── PAYWALL OVERLAY ── */
.paywall-overlay {
  position:absolute; inset:0; z-index:50;
  background: linear-gradient(to top, rgba(10,10,10,0.98) 60%, transparent 100%);
  display:flex; align-items:flex-end; justify-content:center;
  padding:2rem;
  border-radius:10px;
  pointer-events:none; opacity:0; transition:opacity 0.4s;
}
.paywall-overlay.visible { opacity:1; pointer-events:all; }
.paywall-card {
  background: var(--dark); border:1px solid rgba(245,184,0,0.3);
  border-radius:10px; padding:2rem; text-align:center;
  max-width:380px; width:100%;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.8);
}
.paywall-icon { font-size:2rem; margin-bottom:0.8rem; }
.paywall-title { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; color:var(--gold); margin-bottom:0.5rem; }
.paywall-sub { font-size:0.85rem; color:var(--muted); line-height:1.6; margin-bottom:1.5rem; }
.paywall-btn { display:block; background:var(--gold); color:var(--black); font-weight:700; font-size:0.88rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.9rem 2rem; border-radius:4px; text-decoration:none; transition:all 0.2s; margin-bottom:0.7rem; }
.paywall-btn:hover { background:var(--gold-light); transform:translateY(-2px); }
.paywall-skip { font-size:0.75rem; color:var(--muted); cursor:pointer; text-decoration:underline; }

/* ── SECTION LABELS ── */
.section-label { font-size:0.72rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.9rem; display:flex; align-items:center; gap:0.5rem; }
.section-label::after { content:''; flex:1; height:1px; background:rgba(245,184,0,0.2); max-width:70px; }
.section-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.2rem,4.5vw,4rem); line-height:0.95; margin-bottom:3rem; }
.section-title em { font-family:'DM Serif Display',serif; font-style:italic; color:var(--gold); }

/* ── BUTTONS ── */
.btn-primary { background:var(--gold); color:var(--black); font-weight:700; font-size:0.88rem; letter-spacing:0.05em; text-transform:uppercase; padding:0.95rem 2rem; border-radius:2px; text-decoration:none; transition:all 0.25s; display:inline-block; }
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,184,0,0.3); }
.btn-outline { border:1.5px solid rgba(245,184,0,0.4); color:var(--gold); font-weight:600; font-size:0.88rem; letter-spacing:0.05em; text-transform:uppercase; padding:0.95rem 2rem; border-radius:2px; text-decoration:none; transition:all 0.25s; display:inline-block; }
.btn-outline:hover { border-color:var(--gold); background:rgba(245,184,0,0.08); }

/* ── PROMPT CHIPS ── */
.prompt-chips { display:flex; flex-direction:column; gap:0.45rem; margin-top:1.2rem; }
.chip { background:rgba(245,184,0,0.06); border:1px solid rgba(245,184,0,0.18); color:var(--gold); font-size:0.78rem; font-weight:500; padding:0.5rem 0.9rem; border-radius:4px; cursor:pointer; transition:all 0.2s; text-align:left; }
.chip:hover { background:rgba(245,184,0,0.14); border-color:var(--gold); transform:translateX(4px); }

/* ── FOOTER ── */
footer { background:var(--dark2); border-top:1px solid rgba(245,184,0,0.1); padding:2rem 5vw; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:auto; }
.footer-logo { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; color:var(--gold); letter-spacing:0.08em; }
.footer-copy { font-size:0.78rem; color:var(--muted); }
.footer-links { display:flex; gap:1.4rem; }
.footer-links a { font-size:0.8rem; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }

@media (max-width:700px) {
  nav { gap:0.8rem; padding:0.8rem 4vw; }
  .nav-link { display:none; }
}