/*
 * SmarterBook Custom Theme — v2.8
 * Accent: Emerald #10b981  |  Background: #0f172a  |  Card: #1e293b
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

body { font-family: 'Inter', sans-serif !important; }

/* ── Grid background on hero ─────────────────────────────────────────────── */
.sb-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ── Gradient text ───────────────────────────────────────────────────────── */
.sb-grad-em {
  background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sb-grad-vi {
  background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glow ────────────────────────────────────────────────────────────────── */
.sb-text-glow { text-shadow: 0 0 40px rgba(16,185,129,.4); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.sb-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.sb-card:hover {
  border-color: rgba(16,185,129,.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(16,185,129,.08);
}
.sb-pricing-card { transition: all .25s ease; }
.sb-pricing-card:hover { transform: translateY(-4px); }
.sb-pricing-featured {
  border: 1px solid rgba(16,185,129,.5) !important;
  box-shadow: 0 0 40px rgba(16,185,129,.12);
}
.sb-pricing-elite {
  border: 1px solid rgba(139,92,246,.4) !important;
  background: linear-gradient(135deg, rgba(30,41,59,.7) 0%, rgba(45,26,89,.3) 100%);
}
.sb-pricing-elite:hover { box-shadow: 0 0 40px rgba(139,92,246,.15); }

/* ── Mockup ──────────────────────────────────────────────────────────────── */
.sb-mockup {
  background: rgba(10, 15, 30, 0.98);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 32px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(16,185,129,.1);
}

/* ── Scroll fade-up ──────────────────────────────────────────────────────── */
.sb-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.sb-fade.sb-visible { opacity: 1; transform: translateY(0); }

/* ── Checklist items ─────────────────────────────────────────────────────── */
.sb-chk::before {
  content: '✓';
  color: #10b981;
  font-weight: 700;
  margin-right: 8px;
  font-size: .8em;
}
.sb-chk-v::before {
  content: '✓';
  color: #a78bfa;
  font-weight: 700;
  margin-right: 8px;
  font-size: .8em;
}
.sb-cross::before {
  content: '✕';
  color: #ef4444;
  font-weight: 700;
  margin-right: 8px;
  font-size: .8em;
}

/* ── MOST POPULAR badge ──────────────────────────────────────────────────── */
.sb-popular {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sb-btn-em {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 32px;
  background: #10b981; color: #0f172a;
  font-weight: 800; font-size: .85rem; letter-spacing: .5px;
  text-decoration: none; transition: all .2s; border: none; cursor: pointer;
}
.sb-btn-em:hover { background: #34d399; box-shadow: 0 8px 24px rgba(16,185,129,.3); color: #0f172a; text-decoration: none; }

.sb-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 32px;
  background: transparent; color: #d1d5db;
  font-weight: 600; font-size: .85rem; letter-spacing: .5px;
  text-decoration: none; border: 1px solid rgba(255,255,255,.15); transition: all .2s; cursor: pointer;
}
.sb-btn-outline:hover { border-color: rgba(255,255,255,.35); color: #fff; text-decoration: none; }

.sb-btn-pro {
  display: block; width: 100%; padding: 14px; text-align: center;
  background: #10b981; color: #0f172a !important;
  font-weight: 800; font-size: .82rem; letter-spacing: .5px;
  text-decoration: none !important; transition: all .2s; border: none; cursor: pointer;
}
.sb-btn-pro:hover { background: #34d399; }

.sb-btn-elite {
  display: block; width: 100%; padding: 14px; text-align: center;
  background: #8b5cf6; color: #fff !important;
  font-weight: 800; font-size: .82rem; letter-spacing: .5px;
  text-decoration: none !important; transition: all .2s; border: none; cursor: pointer;
}
.sb-btn-elite:hover { background: #a78bfa; }

.sb-btn-starter {
  display: block; width: 100%; padding: 14px; text-align: center;
  background: transparent; color: #d1d5db !important;
  font-weight: 700; font-size: .82rem; letter-spacing: .5px;
  text-decoration: none !important; transition: all .2s;
  border: 1px solid rgba(255,255,255,.15); cursor: pointer;
}
.sb-btn-starter:hover { border-color: rgba(16,185,129,.4); color: #fff !important; }

/* ── Discord button ──────────────────────────────────────────────────────── */
.sb-btn-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  background: #5865f2; color: #fff;
  font-weight: 700; font-size: .85rem; letter-spacing: .5px;
  text-decoration: none; transition: all .2s; border: none; cursor: pointer;
}
.sb-btn-discord:hover { background: #4752c4; box-shadow: 0 8px 24px rgba(88,101,242,.3); color: #fff; text-decoration: none; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.sb-faq-answer { display: none; }
.sb-faq-answer.open { display: block; }
.sb-faq-icon { transition: transform .2s ease; }
.sb-faq-icon.rotated { transform: rotate(180deg); }

/* ── Hero glow ───────────────────────────────────────────────────────────── */
.sb-hero-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(16,185,129,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Mono font ───────────────────────────────────────────────────────────── */
.sb-mono { font-family: 'JetBrains Mono', monospace; }

/* ── Status dot ──────────────────────────────────────────────────────────── */
.sb-dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981; animation: sbPulse 2s infinite;
}
@keyframes sbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Colors ──────────────────────────────────────────────────────────────── */
.sb-violet { color: #a78bfa; }
.sb-em { color: #10b981; }

/* ── Breakout ────────────────────────────────────────────────────────────── */
.sb-breakout { margin-left: -1rem; margin-right: -1rem; }
@media (min-width: 768px) { .sb-breakout { margin-left: -1.5rem; margin-right: -1.5rem; } }
@media (min-width: 1024px) { .sb-breakout { margin-left: -2rem; margin-right: -2rem; } }

/* ── Grids ───────────────────────────────────────────────────────────────── */
.sb-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .sb-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.sb-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .sb-grid-2 { grid-template-columns: repeat(2, 1fr); } }
.sb-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 1024px) { .sb-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.sb-flex-hero { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
@media (min-width: 1024px) { .sb-flex-hero { flex-direction: row; } }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.sb-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  margin: 0 -2rem;
}

/* ── Trust strip marquee ─────────────────────────────────────────────────── */
.sb-marquee-wrap { overflow: hidden; position: relative; }
.sb-marquee-wrap::before, .sb-marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.sb-marquee-wrap::before { left: 0; background: linear-gradient(90deg, rgb(15,23,42), transparent); }
.sb-marquee-wrap::after  { right: 0; background: linear-gradient(270deg, rgb(15,23,42), transparent); }
.sb-marquee {
  display: flex; gap: 0; width: max-content;
  animation: sbMarquee 32s linear infinite;
}
.sb-marquee:hover { animation-play-state: paused; }
.sb-marquee-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; color: #64748b; letter-spacing: .08em; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.05);
}
.sb-marquee-item svg { flex-shrink: 0; }
@keyframes sbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Reviews wheel ───────────────────────────────────────────────────────── */
.sb-reviews-row { overflow: hidden; }
.sb-reviews-track {
  display: flex; gap: 16px; width: max-content;
  animation: sbReviews 44s linear infinite;
}
.sb-reviews-track:hover { animation-play-state: paused; }
.sb-reviews-track.sb-reviews-rtl { animation-direction: reverse; animation-duration: 52s; }
@keyframes sbReviews { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sb-review-card {
  width: 288px; flex-shrink: 0;
  background: rgba(30,41,59,.7);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px; padding: 20px;
  backdrop-filter: blur(12px);
  transition: border-color .3s, transform .3s;
  cursor: default;
}
.sb-review-card:hover { border-color: rgba(16,185,129,.3); transform: translateY(-3px); }
.sb-review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(139,92,246,.2));
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700;
  color: #10b981; flex-shrink: 0;
}
.sb-review-stars { color: #fbbf24; font-size: .72rem; letter-spacing: 2px; }

/* ── Tier badges ─────────────────────────────────────────────────────────── */
.sb-tier-starter {
  background: rgba(156,163,175,.08); color: #9ca3af;
  border: 1px solid rgba(156,163,175,.2);
  font-family: 'JetBrains Mono', monospace; font-size: .58rem;
  padding: 2px 8px; letter-spacing: .05em;
}
.sb-tier-pro {
  background: rgba(16,185,129,.08); color: #10b981;
  border: 1px solid rgba(16,185,129,.2);
  font-family: 'JetBrains Mono', monospace; font-size: .58rem;
  padding: 2px 8px; letter-spacing: .05em;
}
.sb-tier-elite {
  background: rgba(167,139,250,.1); color: #a78bfa;
  border: 1px solid rgba(167,139,250,.25);
  font-family: 'JetBrains Mono', monospace; font-size: .58rem;
  padding: 2px 8px; letter-spacing: .05em;
}

/* ── Trust badge cards ───────────────────────────────────────────────────── */
.sb-trust-card {
  background: rgba(16,185,129,.04);
  border: 1px solid rgba(16,185,129,.12);
  border-radius: 4px; padding: 20px 16px; text-align: center;
  transition: all .2s;
}
.sb-trust-card:hover { border-color: rgba(16,185,129,.3); transform: translateY(-2px); }

/* ── Announcement bar — force black text so it's readable on green ──────── */
.announcement .text-t-accent,
.announcement p,
.announcement a {
  color: #000 !important;
}