:root { --accent: #0284c7; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1e293b; background: #f8fafc; }
a { transition: color 0.2s; }
a:hover { color: var(--accent); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; text-decoration: none; border: none; }
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(2,132,199,0.3); }
.btn-primary:hover { background: #0369a1; box-shadow: 0 4px 16px rgba(2,132,199,0.4); transform: translateY(-1px); }
.btn-outline { background: #fff; color: var(--accent); border: 2px solid var(--accent); }
.btn-outline:hover { background: #f0f9ff; transform: translateY(-1px); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: all 0.25s; }
.card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.10); transform: translateY(-3px); }
.float-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: none; padding: 12px 16px; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border-top: 1px solid rgba(0,0,0,0.06); gap: 10px; }
@media (max-width: 768px) {
  .float-bar { display: flex; }
  h1, h2, h3, p, summary, li { word-break: keep-all; overflow-wrap: break-word; }
  .container { padding: 0 12px; }
  .card { padding: 20px !important; }
}