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

body { font-family: 'Inter', -apple-system, sans-serif !important; }
h1, h2, h3, h4, .font-bold, .font-semibold { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important; }

/* TackHost Hero */
.th-hero {
  background: linear-gradient(135deg, #0f1729 0%, #1A252F 30%, #1648B5 70%, #1496F9 100%);
  border-radius: 1.5rem;
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 3rem;
}
.th-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -15%;
  width: 500px;
  height: 500px;
  background: rgba(56,189,248,0.12);
  border-radius: 50%;
  filter: blur(100px);
}
.th-hero-content { position: relative; z-index: 1; }
.th-hero h1 { color: #fff; font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin-bottom: 1rem; }
.th-hero h1 span { background: linear-gradient(90deg, #60a5fa, #38bdf8, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.th-hero p { color: rgba(255,255,255,0.7); font-size: 1.05rem; max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.75; }
.th-badge { display: inline-block; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 0.35rem 1rem; font-size: 0.78rem; color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; }
.th-btn-white { background: #fff; color: #1496F9; font-weight: 700; padding: 0.9rem 2.4rem; border-radius: 14px; font-size: 0.95rem; text-decoration: none; box-shadow: 0 8px 30px rgba(0,0,0,0.2); display: inline-block; transition: transform 0.15s; }
.th-btn-white:hover { transform: translateY(-2px); color: #1496F9; }
.th-btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.2); font-weight: 600; padding: 0.9rem 2.4rem; border-radius: 14px; font-size: 0.95rem; text-decoration: none; display: inline-block; transition: border-color 0.15s; }
.th-btn-ghost:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

/* Stats Bar */
.th-stats { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 3.5rem; padding: 0 1rem; }
.th-stats .th-stat { text-align: center; }
.th-stats .th-stat-value { font-size: 1.6rem; font-weight: 800; color: hsl(207, 95%, 53%); }
.th-stats .th-stat-label { font-size: 0.7rem; color: hsl(var(--color-muted)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.th-stats .th-divider { width: 1px; background: hsl(var(--color-neutral)); }

/* Feature Cards */
.th-feature { background: hsl(var(--color-background-secondary)); border: 1px solid hsl(var(--color-neutral)); border-radius: 1rem; padding: 1.5rem; transition: box-shadow 0.2s, transform 0.2s; }
.th-feature:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.th-feature-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem; font-size: 1.3rem; }

/* Pricing Cards */
.th-plan { background: hsl(var(--color-background-secondary)); border: 1px solid hsl(var(--color-neutral)); border-radius: 1.25rem; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; height: 100%; }
.th-plan:hover { transform: translateY(-4px); }
.th-plan-popular { border: 2px solid hsl(207, 95%, 53%); box-shadow: 0 8px 30px rgba(20,150,249,0.15); }
.th-plan-badge { background: linear-gradient(135deg, #1496F9, #1648B5); color: #fff; text-align: center; padding: 7px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.th-plan-body { padding: 2rem 1.5rem; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.th-plan-name { font-weight: 700; font-size: 1.15rem; color: hsl(var(--color-base)); margin-bottom: 0.5rem; }
.th-plan-price { font-size: 2rem; font-weight: 800; color: hsl(207, 95%, 53%); }
.th-plan-period { font-size: 0.8rem; color: hsl(var(--color-muted)); }
.th-plan-desc { color: hsl(var(--color-muted)); font-size: 0.82rem; line-height: 1.6; margin: 1rem 0; flex: 1; }

/* CTA Section */
.th-cta { background: linear-gradient(135deg, #0f1729, #1A252F); border-radius: 1.25rem; text-align: center; padding: 3rem 2rem; margin: 2rem 0; }
.th-cta h3 { color: #fff; font-weight: 800; font-size: 1.5rem; margin-bottom: 0.6rem; }
.th-cta p { color: rgba(255,255,255,0.5); margin-bottom: 1.5rem; font-size: 0.95rem; }
.th-cta-btn { background: #1496F9; color: #fff; font-weight: 700; padding: 0.8rem 2.2rem; border-radius: 12px; font-size: 0.95rem; text-decoration: none; display: inline-block; box-shadow: 0 6px 20px rgba(20,150,249,0.3); }

/* Products Page Override */
.th-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }