/* MAAIHub — shared SaaS stylesheet */
:root {
  --brand: #6366f1;
  --brand-dark: #4f46e5;
  --text: #111827;
  --muted: #6b7280;
  --bg: #ffffff;
  --bg-alt: #f9fafb;
  --border: #e5e7eb;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
a { color: var(--brand); text-decoration: none; }
nav { display:flex; align-items:center; justify-content:space-between; padding:16px 40px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10; }
.nav-logo { font-weight:700; font-size:1.2rem; color:var(--text); }
.nav-logo span { color:var(--brand); }
.nav-links { display:flex; gap:24px; align-items:center; font-size:.9rem; color:var(--muted); }
.btn { display:inline-block; padding:10px 22px; border-radius:var(--radius); font-size:.9rem; font-weight:600; cursor:pointer; border:none; transition:.15s; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-outline { border:1.5px solid var(--brand); color:var(--brand); background:transparent; }
.btn-outline:hover { background:var(--brand); color:#fff; }
.hero { text-align:center; padding:80px 24px 60px; max-width:760px; margin:0 auto; }
.hero h1 { font-size:2.8rem; font-weight:800; line-height:1.2; margin-bottom:20px; }
.hero h1 em { color:var(--brand); font-style:normal; }
.hero p { font-size:1.15rem; color:var(--muted); margin-bottom:32px; max-width:580px; margin-left:auto; margin-right:auto; }
.hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.badge { display:inline-block; padding:4px 12px; border-radius:99px; font-size:.78rem; font-weight:600; background:rgba(99,102,241,.1); color:var(--brand); margin-bottom:16px; }
.features { background:var(--bg-alt); padding:64px 24px; }
.section-title { text-align:center; font-size:1.75rem; font-weight:700; margin-bottom:8px; }
.section-sub { text-align:center; color:var(--muted); margin-bottom:48px; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; max-width:960px; margin:0 auto; }
.card { background:var(--bg); border-radius:12px; padding:28px; border:1px solid var(--border); box-shadow:var(--shadow); }
.card-icon { font-size:1.8rem; margin-bottom:12px; }
.card h3 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.card p { font-size:.9rem; color:var(--muted); }
.how { padding:64px 24px; max-width:800px; margin:0 auto; }
.steps { display:flex; flex-direction:column; gap:24px; margin-top:32px; }
.step { display:flex; gap:20px; align-items:flex-start; }
.step-num { min-width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.step-body h4 { font-weight:700; margin-bottom:4px; }
.step-body p { color:var(--muted); font-size:.9rem; }
.demo { background:var(--bg-alt); padding:64px 24px; }
.demo-inner { max-width:700px; margin:0 auto; }
.demo-form { background:var(--bg); border-radius:12px; padding:32px; border:1px solid var(--border); box-shadow:var(--shadow); }
.form-group { margin-bottom:20px; }
label { display:block; font-size:.88rem; font-weight:600; margin-bottom:6px; }
input, textarea, select { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.9rem; outline:none; font-family:inherit; }
input:focus, textarea:focus, select:focus { border-color:var(--brand); }
.result-box { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-top:20px; font-size:.88rem; min-height:80px; white-space:pre-wrap; font-family:monospace; }
.pricing { padding:64px 24px; }
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; max-width:800px; margin:32px auto 0; }
.price-card { border:1.5px solid var(--border); border-radius:12px; padding:28px; text-align:center; }
.price-card.featured { border-color:var(--brand); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.price-card .plan-name { font-weight:700; margin-bottom:8px; }
.price-card .price { font-size:2rem; font-weight:800; margin-bottom:4px; }
.price-card .price span { font-size:.9rem; font-weight:400; color:var(--muted); }
.price-card ul { list-style:none; text-align:left; margin:20px 0; font-size:.88rem; color:var(--muted); }
.price-card ul li::before { content:"✓  "; color:var(--brand); font-weight:700; }
.price-card ul li { margin-bottom:8px; }
.faq { background:var(--bg-alt); padding:64px 24px; }
.faq-list { max-width:700px; margin:32px auto 0; }
.faq-item { background:var(--bg); border-radius:var(--radius); padding:20px 24px; margin-bottom:12px; border:1px solid var(--border); }
.faq-item h4 { font-size:.95rem; font-weight:700; margin-bottom:6px; }
.faq-item p { font-size:.88rem; color:var(--muted); }
footer { border-top:1px solid var(--border); padding:32px 40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:.85rem; color:var(--muted); }
.footer-logo { font-weight:700; color:var(--text); }
.footer-logo span { color:var(--brand); }
.footer-links { display:flex; gap:20px; }
/* app page */
.app-wrap { max-width:860px; margin:0 auto; padding:40px 24px; }
.app-header { margin-bottom:32px; }
.app-header h1 { font-size:1.6rem; font-weight:800; margin-bottom:6px; }
.app-header p { color:var(--muted); font-size:.95rem; }
.app-panel { background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:28px; box-shadow:var(--shadow); margin-bottom:24px; }
.app-panel h2 { font-size:1rem; font-weight:700; margin-bottom:16px; }
.btn-sample { background:var(--bg-alt); border:1px solid var(--border); color:var(--muted); font-size:.82rem; padding:6px 14px; border-radius:var(--radius); cursor:pointer; margin-bottom:12px; }
.btn-sample:hover { border-color:var(--brand); color:var(--brand); }
.loading { display:none; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; margin-top:12px; }
.loading.visible { display:flex; }
.spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--brand); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.result-section { margin-top:24px; display:none; }
.result-section.visible { display:block; }
.result-section h3 { font-size:1rem; font-weight:700; margin-bottom:12px; }
.tag { display:inline-block; padding:3px 10px; border-radius:99px; font-size:.78rem; font-weight:600; margin:3px; }
.tag-pos { background:rgba(16,185,129,.1); color:#065f46; }
.tag-neg { background:rgba(239,68,68,.1); color:#991b1b; }
.tag-neu { background:rgba(107,114,128,.1); color:#374151; }
.tag-info { background:rgba(99,102,241,.1); color:var(--brand); }
.score-bar-wrap { margin-bottom:12px; }
.score-label { font-size:.82rem; color:var(--muted); margin-bottom:3px; display:flex; justify-content:space-between; }
.score-bar { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.score-fill { height:100%; background:var(--brand); border-radius:4px; transition:width .4s; }
.error-box { background:#fef2f2; border:1px solid #fca5a5; border-radius:var(--radius); padding:12px 16px; color:#991b1b; font-size:.88rem; margin-top:12px; display:none; }
.error-box.visible { display:block; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th { text-align:left; padding:8px 12px; background:var(--bg-alt); border-bottom:2px solid var(--border); font-weight:600; }
td { padding:8px 12px; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
@media(max-width:600px) {
  nav { padding:12px 20px; }
  .hero h1 { font-size:2rem; }
  .hero { padding:60px 20px 40px; }
  footer { flex-direction:column; text-align:center; }
  nav .nav-links { display:none; }
}