/* ============================================================================
   Boothcrate promo site — shared design system
   ----------------------------------------------------------------------------
   Deliberately plain CSS with zero build step and zero JS dependency for
   anything structural — this site is meant to be deployable to any static
   host (including basic shared hosting) with nothing more than "upload the
   files". A handful of small, additive JS enhancements live in script.js
   (mobile menu, FAQ accordion, scroll-reveal) and every one of them degrades
   gracefully to "just show the content" if JS is blocked or fails.

   Visual language is deliberately the SAME system already established in the
   product itself (Client Dashboard / Admin Dashboard / Auth pages): near-
   black background, translucent frosted-glass panels, a violet-to-blue
   ambient glow, Raleway type, a single blue accent. Anyone who signs up here
   and lands in the real dashboard should feel like they're still in the same
   product, not on a different company's website that happens to link to it.
   ========================================================================= */

:root {
  --bg: #030303;
  --bg-elevated: rgba(20, 20, 22, 0.6);
  --bg-elevated-solid: #121214;
  --fg: #f5f5f7;
  --fg-muted: rgba(255, 255, 255, 0.6);
  --fg-subtle: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --primary: #0a84ff;
  --primary-fg: #ffffff;
  --violet: #5e5ce6;
  --amber: #ff9f0a;
  --green: #30d158;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --max: 1180px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { position: relative; padding: 108px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }

/* ── Ambient glow — identical recipe to the dashboard/admin/auth shells ── */
.ambient-glow {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(94, 92, 230, 0.16), transparent 60%),
    radial-gradient(900px 520px at 105% 0%, rgba(10, 132, 255, 0.12), transparent 55%);
}

/* ── Eyebrow / pill badge ─────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 28px;
}
.badge-pill b {
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 160ms ease, background-color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { opacity: 0.9; }
.btn-glass {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  border-color: var(--border);
  backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover { color: var(--fg); }
.btn-lg { padding: 15px 28px; font-size: 15px; }
.btn-sm { padding: 9px 16px; font-size: 12.5px; }

/* ── Glass panel / card ───────────────────────────────────────────────── */
.glass {
  background: var(--bg-elevated);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 200ms ease, transform 200ms var(--ease-out), background-color 200ms ease;
}
.card:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.045); }

/* ── Nav ──────────────────────────────────────────────────────────────── */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 5, 6, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
nav.site-nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; flex-shrink: 0; }
.logo-mark {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.logo-mark svg { width: 14px; height: 14px; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 13.5px; font-weight: 500; color: var(--fg-muted); }
.nav-links a:hover { color: var(--fg); }
.nav-links a.active { color: var(--fg); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-menu-btn { display: none; background: none; border: none; color: var(--fg); padding: 6px; cursor: pointer; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .nav-menu-btn { display: flex; }
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 3, 3, 0.98);
  backdrop-filter: blur(20px);
  flex-direction: column;
  padding: 20px 24px 32px;
}
.mobile-menu.open { display: flex; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.mobile-menu a {
  font-size: 22px; font-weight: 700; padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--fg);
}
.mobile-menu .nav-cta { flex-direction: column; align-items: stretch; margin-top: 28px; gap: 12px; }
.mobile-menu .btn { width: 100%; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 96px 0 40px; text-align: center; }
@media (max-width: 720px) { .hero { padding: 56px 0 24px; } }
.hero-inner { max-width: 780px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.04; }
.hero h1 .accent { color: var(--primary); }
.hero p.lede { font-size: 17px; color: var(--fg-muted); max-width: 560px; margin: 22px auto 34px; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-note { font-size: 12.5px; color: var(--fg-subtle); margin-top: 18px; }

.hero-mockup {
  margin-top: 64px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 120px -30px rgba(10, 132, 255, 0.25), 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.hero-mockup img { width: 100%; display: block; }

/* ── Section heading pattern ──────────────────────────────────────────── */
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.section-head p { color: var(--fg-muted); font-size: 15.5px; margin-top: 14px; }
.section-head.left { text-align: left; margin-left: 0; margin-right: 0; }

/* ── Feature grid ─────────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.feature-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(10, 132, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--primary);
}
.feature-icon svg { width: 19px; height: 19px; }
.card h3 { font-size: 16px; margin-bottom: 8px; }
.card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.6; }

/* ── CTA banner ───────────────────────────────────────────────────────── */
.cta-banner {
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
  background: linear-gradient(135deg, rgba(94, 92, 230, 0.16), rgba(10, 132, 255, 0.12));
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 14px; }
.cta-banner p { color: var(--fg-muted); font-size: 15.5px; margin-bottom: 30px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer.site-footer { border-top: 1px solid var(--border); padding: 64px 0 32px; position: relative; z-index: 1; }
.footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 48px; }
.footer-brand { max-width: 280px; }
.footer-brand p { color: var(--fg-subtle); font-size: 13.5px; margin-top: 14px; line-height: 1.6; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); margin-bottom: 16px; font-weight: 700; }
.footer-col a { display: block; font-size: 13.5px; color: var(--fg-muted); padding: 6px 0; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 28px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--fg-subtle);
}
@media (max-width: 640px) { .footer-top { flex-direction: column; gap: 32px; } .footer-cols { gap: 32px; } }

/* ── Theme grid (Themes page) ─────────────────────────────────────────── */
.filter-bar {
  display: flex; justify-content: center; gap: 8px; margin-bottom: 48px; flex-wrap: wrap;
}
.filter-btn {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); color: var(--fg-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 160ms ease;
}
.filter-btn:hover { border-color: var(--border-strong); color: var(--fg); }
.filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.theme-card {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  background: rgba(255,255,255,0.02); transition: border-color 200ms ease, transform 200ms var(--ease-out);
  display: flex; flex-direction: column;
}
.theme-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.theme-card .thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #0a0a0a; }
.theme-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 400ms var(--ease-out); }
.theme-card:hover .thumb img { transform: scale(1.035); }
.theme-card .thumb .pro-badge {
  position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; background: var(--primary); color: #fff; padding: 4px 9px; border-radius: 999px;
}
.theme-card .thumb .preview-overlay {
  position: absolute; inset: 0; background: rgba(3,3,3,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 200ms ease;
}
.theme-card:hover .preview-overlay { opacity: 1; }
.theme-card .info { padding: 14px 16px 16px; }
.theme-card .info h3 { font-size: 14px; margin-bottom: 3px; }
.theme-card .info p { font-size: 12px; color: var(--fg-subtle); }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .theme-grid { grid-template-columns: 1fr; } }

/* ── FAQ accordion ────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,0.02); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; color: var(--fg); text-align: left; cursor: pointer;
  font-size: 14.5px; font-weight: 600; padding: 20px 22px;
}
.faq-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--fg-muted); transition: transform 220ms var(--ease-out); }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--primary); }
.faq-a {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-out);
}
.faq-a > p { overflow: hidden; padding: 0 22px; font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a > p { padding: 0 22px 22px; }
/* No-JS fallback: without .js on <html>, show every answer expanded so content is never hidden behind JS. */
html:not(.js) .faq-a { display: block; }
html:not(.js) .faq-a > p { padding: 0 22px 22px; }
html:not(.js) .faq-icon { display: none; }

/* ── Legal pages (Terms / Privacy) ───────────────────────────────────── */
.legal { max-width: 720px; margin: 0 auto; }
.legal h2 { font-size: 19px; margin: 44px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--fg-muted); font-size: 14px; line-height: 1.75; margin-bottom: 14px; }
.legal ul { color: var(--fg-muted); font-size: 14px; line-height: 1.75; padding-left: 20px; margin-bottom: 14px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--fg); }
.legal a { color: var(--primary); text-decoration: underline; }
.legal .updated { color: var(--fg-subtle); font-size: 13px; margin-bottom: 40px; }
.legal .callout {
  background: rgba(10,132,255,0.08); border: 1px solid rgba(10,132,255,0.2); border-radius: var(--radius-sm);
  padding: 16px 18px; font-size: 13px; color: var(--fg-muted); margin-bottom: 40px;
}

/* ── Page hero (non-home pages: Features/Themes/FAQ/etc.) ───────────────── */
.page-hero { text-align: center; padding: 84px 0 56px; }
@media (max-width: 720px) { .page-hero { padding: 52px 0 36px; } }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.page-hero p { color: var(--fg-muted); font-size: 16px; max-width: 600px; margin: 18px auto 0; }

/* ── Scroll reveal (progressive enhancement) ─────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { transition: opacity 300ms ease; transform: none; }
}