/* ============================================================
   Bloxig — Design System v2.1
   Added Day 2: hover animations, plan badges, pricing polish
   ============================================================ */

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

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  --bg-base:     #0c0c0c;
  --bg-subtle:   #111111;
  --bg-muted:    #161616;
  --bg-elevated: #1c1c1c;
  --bg-overlay:  #222222;

  --border-faint:  rgba(255,255,255,0.05);
  --border-subtle: rgba(255,255,255,0.08);
  --border-base:   rgba(255,255,255,0.11);
  --border-strong: rgba(255,255,255,0.20);

  --text-primary:   #efefef;
  --text-secondary: #999999;
  --text-tertiary:  #555555;
  --text-disabled:  #333333;

  --accent:        #4f7bf7;
  --accent-hover:  #6690f9;
  --accent-dim:    rgba(79,123,247,0.10);
  --accent-border: rgba(79,123,247,0.22);

  --success: #3dd68c;
  --danger:  #e5484d;
  --gold:    #f5a623;

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', 'SF Mono', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  60px;

  --r-sm:   5px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:   160ms;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ── Layout ──────────────────────────────────────────────── */
.container    { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.container--sm { max-width: 680px; margin: 0 auto; padding: 0 28px; }

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  background: rgba(12,12,12,0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-faint);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  transition: opacity var(--dur) var(--ease);
}
.navbar__logo:hover { opacity: 0.8; }

.navbar__logo-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.navbar__logo:hover .navbar__logo-mark { transform: rotate(8deg); }

.navbar__logo-mark svg { width: 12px; height: 12px; fill: white; }

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Animated underline on nav links */
.navbar__link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--dur) var(--ease);
  position: relative;
  padding-bottom: 2px;
}
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--text-primary);
  transition: width var(--dur) var(--ease);
}
.navbar__link:hover { color: var(--text-primary); }
.navbar__link:hover::after { width: 100%; }

.navbar__actions { display: flex; align-items: center; gap: 8px; }

/* Plan badge in navbar (logged in) */
.navbar__plan-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--r-full);
  border: 1px solid var(--border-base);
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  letter-spacing: 0.02em;
}
.navbar__plan-badge--pro {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--accent);
}
.navbar__plan-badge--lifetime {
  background: rgba(245,166,35,0.10);
  border-color: rgba(245,166,35,0.25);
  color: var(--gold);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background: var(--text-primary);
  color: var(--bg-base);
  border-color: var(--text-primary);
}
.btn--primary:hover {
  background: #d4d4d4;
  border-color: #d4d4d4;
  color: var(--bg-base);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-base);
}
.btn--ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.btn--accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* Gold button for Lifetime tier */
.btn--gold {
  background: var(--gold);
  color: #1a1200;
  border-color: var(--gold);
}
.btn--gold:hover {
  background: #f7b93e;
  border-color: #f7b93e;
  color: #1a1200;
  transform: translateY(-1px);
}

.btn--lg  { height: 42px; padding: 0 22px; font-size: var(--text-base); border-radius: var(--r-lg); }
.btn--xl  { height: 48px; padding: 0 28px; font-size: var(--text-base); border-radius: var(--r-lg); }
.btn--full { width: 100%; }

/* Active press feel */
.btn:active { transform: translateY(0) !important; }

/* ── Badge ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--r-full);
  border: 1px solid var(--border-base);
  color: var(--text-tertiary);
  background: var(--bg-subtle);
}
.badge--accent  { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); }
.badge--success { background: rgba(61,214,140,0.08); border-color: rgba(61,214,140,0.2); color: var(--success); }
.badge--gold    { background: rgba(245,166,35,0.10); border-color: rgba(245,166,35,0.25); color: var(--gold); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card--interactive:hover {
  border-color: var(--border-subtle);
  transform: translateY(-2px);
}

/* Pricing card hover */
.pricing-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pricing-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-subtle);
}
.pricing-card--accent {
  border-color: var(--accent-border);
  background: linear-gradient(160deg, rgba(79,123,247,0.05), transparent 60%);
}
.pricing-card--accent:hover {
  border-color: rgba(79,123,247,0.4);
  box-shadow: 0 0 0 1px rgba(79,123,247,0.15), 0 8px 32px rgba(79,123,247,0.08);
}
.pricing-card--gold {
  border-color: rgba(245,166,35,0.2);
  background: linear-gradient(160deg, rgba(245,166,35,0.05), transparent 60%);
}
.pricing-card--gold:hover {
  border-color: rgba(245,166,35,0.4);
  box-shadow: 0 0 0 1px rgba(245,166,35,0.12), 0 8px 32px rgba(245,166,35,0.06);
}

/* ── Section spacing ─────────────────────────────────────── */
.section     { padding: 96px 0; }
.section--sm { padding: 64px 0; }
.section--lg { padding: 128px 0; }

/* ── Eyebrow ─────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

/* ── Divider ─────────────────────────────────────────────── */
.divider { border: none; height: 1px; background: var(--border-faint); }

/* ── Forms ───────────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.form-input {
  height: 38px; padding: 0 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-input::placeholder { color: var(--text-disabled); }
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,123,247,0.12);
}
.form-error { font-size: var(--text-xs); color: var(--danger); }
.form-hint  { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ── Code ────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  color: var(--text-secondary);
}

/* ── Footer ──────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border-faint); padding: 48px 0; }
.footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer__left  { display: flex; flex-direction: column; gap: 4px; }
.footer__logo  { font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); }
.footer__tagline { font-size: var(--text-xs); color: var(--text-tertiary); }
.footer__links { display: flex; gap: 24px; align-items: center; }
.footer__link  {
  font-size: var(--text-sm); color: var(--text-tertiary);
  transition: color var(--dur) var(--ease);
  position: relative; padding-bottom: 1px;
}
.footer__link::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--text-tertiary);
  transition: width var(--dur) var(--ease);
}
.footer__link:hover { color: var(--text-secondary); }
.footer__link:hover::after { width: 100%; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar__nav { display: none; }
  .container, .container--sm { padding: 0 20px; }
  .section { padding: 64px 0; }
  .section--lg { padding: 80px 0; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .btn--xl { height: 44px; padding: 0 20px; }
  .navbar__plan-badge { display: none; }
}