:root { --bs-primary: #2B6CF0; --bs-secondary: #0B1739; }
html, body { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
.brand-mark { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(120deg, #2B6CF0, #00C2FF, #6AE59E); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.brand-logo { max-height: 28px; width: auto; border-radius: 4px; display: inline-block; }
.brand-title { font-weight: 700; letter-spacing: .2px; }
.hero-section { background: radial-gradient(1200px 400px at 10% 10%, #eef4ff 0%, transparent 60%); }
.hero-visual { min-height: 240px; border-radius: 16px; background: #f7fbff; }
.hero-visual img { width: 100%; height: auto; display: block; border-radius: 12px; }
.trust-badge { display:inline-flex; align-items:center; justify-content:center; border:1px dashed #cdd7e1; border-radius:8px; padding:.5rem .75rem; background:#fff; color:#0B1739; font-weight:600; }
.feature-list li { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; }
.features-table { font-size: .95rem; }
.features-table th { white-space: nowrap; }
.features-table td, .features-table th { vertical-align: top; }
.features-table tbody tr td:first-child { font-weight: 600; color: var(--bs-secondary); }
.capabilities-grid { margin-top: .5rem; }
.capability-card { border: 1px solid #e9eef4; border-radius: 12px; padding: 1rem; background: #fff; height: 100%; transition: box-shadow .2s, transform .2s; }
.capability-card:hover { box-shadow: 0 .75rem 2rem rgba(0,0,0,.08); transform: translateY(-2px); }
.capability-icon { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #eef4ff; color: var(--bs-primary); margin-bottom: .5rem; font-size: 1.25rem; }
.capability-card h6 { margin: 0 0 .25rem 0; font-weight: 600; }
.capability-card p { margin: 0; font-size: .95rem; }
.solutions-grid { margin-top: .5rem; }
.solution-card { border: 1px solid #e9eef4; border-radius: 12px; padding: 1rem; background: #fff; height: 100%; transition: box-shadow .2s, transform .2s; }
.solution-card:hover { box-shadow: 0 .75rem 2rem rgba(0,0,0,.08); transform: translateY(-2px); }
.solution-icon { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #eef4ff; color: var(--bs-primary); margin-bottom: .5rem; font-size: 1.25rem; }
.solutions-list { margin-top: .25rem; }
.solutions-list li { display:flex; align-items:center; gap:.25rem; }
.usecases-grid { margin-top: .5rem; }
.usecase-card { border: 1px solid #e9eef4; border-radius: 12px; padding: 1rem; background: #fff; height: 100%; transition: box-shadow .2s, transform .2s; }
.usecase-card:hover { box-shadow: 0 .75rem 2rem rgba(0,0,0,.08); transform: translateY(-2px); }
.usecase-icon { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #eef4ff; color: var(--bs-primary); margin-bottom: .5rem; font-size: 1.25rem; }
.usecase-list { margin-top: .25rem; }
.usecase-list li { display:flex; align-items:center; gap:.25rem; }
.features-grid { margin-top: .5rem; }
.feature-card { border: 1px solid #e9eef4; border-radius: 12px; padding: 1rem; background: #fff; height: 100%; transition: box-shadow .2s, transform .2s; }
.feature-card:hover { box-shadow: 0 .75rem 2rem rgba(0,0,0,.08); transform: translateY(-2px); }
.feature-icon { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #eef4ff; color: var(--bs-primary); margin-bottom: .5rem; font-size: 1.25rem; }
.feature-card h5 { font-size: 1rem; margin: 0 0 .25rem 0; }
.feature-card p { margin: 0; font-size: .95rem; }
.architecture-diagram { border:1px solid #e9eef4; background:#fff; border-radius:12px; padding:.75rem; }
.architecture-diagram img { width: 100%; height: auto; display: block; border-radius: 8px; }
.about-section { background: #f8fafc; }
.about-card { border: 1px solid #e9eef4; border-radius: 12px; }
.about-values i { font-size: 1.1rem; line-height: 1.2; }
.about-values strong { display: block; }
.pricing-card { transition: box-shadow .2s ease, transform .2s ease; }
.pricing-card:hover { box-shadow: 0 .75rem 2rem rgba(0,0,0,.08); transform: translateY(-2px); }
.code-block { background:#0b1739; color:#e5edff; padding:.75rem 1rem; border-radius:8px; overflow:auto; }
:focus-visible { outline:3px solid #2B6CF0; outline-offset:2px; }
@media (max-width:575.98px){ .display-5{ font-size:2rem; } }
/* Toolkit section */
.toolkit-section{background:#fff}
.toolkit-nav{gap:.25rem;overflow-x:auto;white-space:nowrap}
.toolkit-nav .nav-link{color:#0b1739;opacity:.8;border-radius:0}
.toolkit-nav .nav-link.active{opacity:1;border-bottom:3px solid var(--bs-primary);background:transparent;font-weight:600}
.toolkit-media{border:1px solid #e9eef4;border-radius:12px;padding:.5rem;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.06)}
.toolkit-media video{display:block;width:100%;height:auto;border-radius:10px}
/* Logo slider */
.logo-slider{position:relative;overflow:hidden;border-top:1px solid #e9eef4;border-bottom:1px solid #e9eef4;background:#fff;mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%)}
.logo-track{display:flex;align-items:center;gap:2rem;padding:.75rem 0;min-width:max-content;animation:logo-scroll 28s linear infinite}
.logo-img{height:40px;width:auto;display:block;opacity:.9;transition:opacity .2s}
.logo-img:hover{opacity:1}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:575.98px){.logo-track{gap:1.25rem}}
/* Logo item label */
.logo-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.logo-name{font-size:.8rem;color:#0b1739;opacity:.7;line-height:1}