:root{
  --brand-500:#6366F1; --brand-600:#4F46E5; --brand-700:#4338CA;
  --accent:#FF6B35; --gray-900:#111827; --gray-700:#374151; --gray-500:#6B7280; --gray-100:#F3F4F6; --white:#ffffff;
  --radius:8px; --shadow:0 4px 10px rgba(17,24,39,.06);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

html,body{margin:0;color:var(--gray-900);background:#fff}
main{max-width:1200px;margin:0 auto;padding:2rem 1rem}

/* Top Nav */
.nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #eee}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--gray-900)}
.brand .dot{width:12px;height:12px;border-radius:9999px;background:var(--brand-600)}
.nav-links{margin-left:auto;display:flex;gap:12px}
.nav-links a{color:var(--gray-700);text-decoration:none;font-weight:600}
.nav-links a:hover{color:var(--brand-600)}

/* Footer links */
footer a{color:var(--brand-600);text-decoration:none}
footer a:hover{text-decoration:underline}

/* Landing-only additions */
.gradient-hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 45%,#8b5cf6 100%);color:#fff;border-radius:16px;padding:40px 28px;box-shadow:0 10px 35px rgba(67,56,202,.25)}
.gradient-hero .title{font-size:42px;line-height:1.1;margin:0 0 10px}
.gradient-hero .subtitle{color:#E9EAFB;max-width:720px}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn-white{background:#fff;color:#4338CA;border:2px solid transparent}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28);padding:6px 10px;border-radius:9999px;font-weight:600;font-size:13px}

.section-header{margin:26px 0 10px}
.section-header h3{margin:0;font-size:22px}
.section-sub{color:var(--gray-500);margin-top:4px}

.logo-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.logo-pill{background:#fff;border:1px solid #eee;border-radius:9999px;padding:8px 12px;font-weight:700;color:#374151;box-shadow:var(--shadow)}

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feature-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 12px 28px rgba(17,24,39,.08)}
.feature-card h4{margin:8px 0}
.feature-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#EEF2FF;color:#4338CA;font-weight:800}

.comparison{width:100%;border-collapse:separate;border-spacing:0 8px}
.comparison th,.comparison td{padding:10px 12px;background:#fff}
.comparison th{background:#F3F4F6;text-align:left}
.comparison tr{box-shadow:0 1px 0 #eee}
.yes{color:#10B981;font-weight:700}
.no{color:#EF4444;font-weight:700}

.faq{display:grid;gap:10px}
.faq-item{background:#fff;border:1px solid #eee;border-radius:10px}
.faq-q{margin:0;padding:12px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600}
.faq-a{margin:0;padding:0 14px 14px 14px;color:var(--gray-700);display:none}
.faq-item.open .faq-a{display:block}

/* Cards & layout */
.row{display:flex;gap:16px;flex-wrap:wrap}
.card{flex:1 1 240px;background:var(--gray-100);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card.white{background:#fff}
.section{margin-top:16px}

/* Buttons */
.btn{padding:.55rem 1rem;border-radius:9999px;font-weight:600;border:none;cursor:pointer;transition:transform .08s ease,background .15s ease}
.btn:active{transform:scale(.99)}
.btn-primary{background:var(--brand-600);color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-secondary{background:var(--gray-700);color:#fff}
.btn-secondary:hover{background:#1F2937}
.btn-outline{background:#fff;color:var(--brand-600);border:2px solid var(--brand-600)}
.btn-outline:hover{background:var(--brand-600);color:#fff}

/* Compact icon buttons */
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--brand-600);background:#fff;color:var(--brand-600);border-radius:9999px;font-weight:700;font-size:16px;cursor:pointer;line-height:1;padding:0}
.icon-btn:hover{background:var(--brand-600);color:#fff}
.icon-btn[title]{position:relative}

/* Forms */
input,select{padding:10px;border:1px solid #D1D5DB;border-radius:var(--radius);outline:none}
input:focus,select:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(99,102,241,.15)}

/* Tables */
table{border-collapse:collapse;width:100%}
th,td{border-bottom:1px solid #eee;padding:10px;text-align:left}
thead th{background:#FAFAFA;position:sticky;top:0}
tbody tr:hover{background:#FAFAFA}
.table-center td:nth-last-child(2), .table-center th:nth-last-child(2),
.table-center td:last-child, .table-center th:last-child { text-align:center }

/* Hero */
.hero{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:12px 0 16px}
.hero .title{font-size:36px;margin:0}
.hero .subtitle{color:var(--gray-500);margin:4px 0 8px}
.cta{display:flex;gap:8px;flex-wrap:wrap}

/* Utilities */
.muted{color:var(--gray-500)}
.center{display:flex;align-items:center;justify-content:center}
.hidden{display:none}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .25s ease}

/* Multiselect (inspo) */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:#EEF2FF;color:#4338CA;border:1px solid #E5E7EB;border-radius:9999px;padding:6px 10px;font-weight:600}
.chip .x{cursor:pointer;font-weight:800}
.dropdown{position:relative}
.dropdown-panel{position:absolute;z-index:30;top:42px;left:0;min-width:340px;background:#fff;border:1px solid #E5E7EB;border-radius:10px;box-shadow:var(--shadow);padding:10px;max-height:320px;overflow:auto}
.dropdown-panel input[type="text"]{width:100%;margin-bottom:8px}
.options{display:flex;flex-direction:column;gap:6px}
.options label{display:flex;align-items:center;gap:8px}

/* Preview thumbnails */
.thumb{width:100%;height:100%;object-fit:cover;border-radius:6px}
.thumb-wrap{position:relative;width:100%;height:100%}
.dist-badge{position:absolute;right:4px;bottom:4px;background:rgba(17,24,39,.75);color:#fff;padding:2px 6px;border-radius:10px;font-size:12px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:center;justify-content:center;z-index:60}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(17,24,39,.25);width:720px;max-width:95vw;padding:16px}
.modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal .body{max-height:60vh;overflow:auto}
.modal .footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}