/* Marstocks SEO Marketing — custom styles layered on top of Tailwind CDN */

:root {
  --brand: #0ea5e9;
  --brand-dark: #0369a1;
  --ink: #0f172a;
  --gold: #facc15;
}

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01","cv11"; }

/* Brand gradient utility */
.bg-brand-gradient { background-image: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); }
.text-brand-gradient {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 60%, #facc15 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Card */
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.card-hover:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
  transform: translateY(-1px);
  transition: all .2s ease;
}

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.625rem 1rem; border-radius:10px; font-weight:600; font-size:.875rem; transition:all .15s; cursor:pointer; border:1px solid transparent; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1e293b; }
.btn-outline { border-color:#cbd5e1; color:#334155; background:#fff; }
.btn-outline:hover { border-color:#94a3b8; background:#f8fafc; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-gold { background: var(--gold); color:#0f172a; }
.btn-gold:hover { background:#eab308; }
.btn-sm { padding:.375rem .75rem; font-size:.8rem; }
.btn-lg { padding:.875rem 1.5rem; font-size:1rem; }
.btn-block { width:100%; }

/* Forms */
.form-label { display:block; font-size:.875rem; font-weight:600; color:#334155; margin-bottom:.375rem; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:.625rem .875rem; border:1px solid #cbd5e1; border-radius:10px;
  font-size:.9rem; background:#fff; transition:border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
.form-help { font-size:.75rem; color:#64748b; margin-top:.25rem; }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:.125rem .625rem; border-radius:9999px; font-size:.7rem; font-weight:600; }
.badge-info { background:#dbeafe; color:#1e40af; }
.badge-success { background:#dcfce7; color:#166534; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-danger { background:#fee2e2; color:#991b1b; }
.badge-gold { background:#fef9c3; color:#854d0e; }
.badge-muted { background:#f1f5f9; color:#475569; }

/* Tables */
.tbl { width:100%; border-collapse:collapse; font-size:.85rem; }
.tbl th { text-align:left; padding:.625rem .75rem; background:#f8fafc; color:#475569; font-weight:600; border-bottom:1px solid #e2e8f0; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
.tbl td { padding:.625rem .75rem; border-bottom:1px solid #f1f5f9; color:#1e293b; }
.tbl tr:hover td { background:#f8fafc; }

/* Hero */
.hero-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(14,165,233,.18), transparent 50%),
    radial-gradient(circle at 80% 0%, rgba(250,204,21,.15), transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.hero-grid {
  background-image: linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Spin wheel */
.spin-stage {
  position: relative;
  width: 320px; height: 320px;
  margin: 0 auto;
}
.spin-needle {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent;
  border-top:22px solid #dc2626; z-index:10;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.spin-canvas {
  width:320px; height:320px; border-radius:50%;
  box-shadow: 0 12px 36px rgba(15,23,42,.18), 0 0 0 10px #fff, 0 0 0 12px #cbd5e1;
  transition: transform 4s cubic-bezier(.18,.85,.18,1);
  background: #fff;
}
.spin-hub {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background: var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* Chat */
.chat-msg { max-width: 75%; padding:.5rem .75rem; border-radius:12px; font-size:.875rem; }
.chat-msg.me { background: var(--brand); color:#fff; align-self:flex-end; }
.chat-msg.them { background:#fff; border:1px solid #e2e8f0; align-self:flex-start; }
.chat-input { resize:none; }

/* Marquee */
.marquee { display:flex; gap:3rem; animation: marquee 28s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Progress bar */
.progress { width:100%; height:8px; background:#e2e8f0; border-radius:99px; overflow:hidden; }
.progress > span { display:block; height:100%; background: var(--brand); transition: width .4s ease; }

/* Stat tile */
.stat-tile { padding:1.25rem; border-radius:14px; background:#fff; border:1px solid #e2e8f0; }
.stat-num { font-size:1.6rem; font-weight:800; color: var(--ink); }
.stat-lbl { font-size:.75rem; color:#64748b; text-transform:uppercase; letter-spacing:.06em; }

/* Toast */
.toast {
  position:fixed; bottom:24px; right:24px; z-index:60;
  background: #0f172a; color:#fff; padding:.75rem 1rem; border-radius:10px;
  font-size:.85rem; box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0; transform: translateY(10px); transition:all .25s ease;
}
.toast.show { opacity:1; transform: translateY(0); }
.toast.success { background:#16a34a; }
.toast.error { background:#dc2626; }

/* Modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:50; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-card { background:#fff; border-radius:14px; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; }

/* Misc */
.divider { height:1px; background:#e2e8f0; margin:1.25rem 0; }
.hidden-x { display:none !important; }