/* Premium Flagship SaaS product portfolio */
.saas-products-page { --sp-ink:#10223e; --sp-muted:#6d7f98; --sp-line:#e1e8f2; --sp-blue:#326cf0; max-width:1510px; margin:0 auto; padding:28px 26px 48px; color:var(--sp-ink); }
.sp-page-header,.sp-button,.sp-hero,.sp-hero__actions,.sp-hero__portfolio,.sp-metric,.sp-catalog-panel__header,.sp-result-count,.sp-filter-bar,.sp-search-field>div,.sp-filter-context,.sp-product-card__top,.sp-product-card__badges,.sp-product-card__architecture>a,.sp-setup-callout,.sp-activity-note,.sp-product-card__footer,.sp-card-action,.sp-empty>div,.sp-catalog-footer { display:flex; align-items:center; }
.sp-page-header { justify-content:space-between; gap:24px; margin-bottom:22px; }.sp-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:7px; color:#8898ad; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.sp-breadcrumb a { color:#71839e; text-decoration:none; }.sp-breadcrumb i { font-size:.5rem; }.sp-breadcrumb strong { color:var(--sp-blue); }.sp-page-header h1 { margin:0; color:#0b1930; font-size:clamp(1.85rem,2.4vw,2.45rem); font-weight:800; letter-spacing:-.045em; }.sp-page-header p { margin:6px 0 0; color:var(--sp-muted); font-size:.95rem; }
.sp-button { min-height:42px; justify-content:center; gap:8px; padding:0 16px; border:1px solid transparent; border-radius:12px; font-size:.78rem; font-weight:800; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }.sp-button:hover { transform:translateY(-1px); }.sp-button--primary { border:0; background:linear-gradient(135deg,#3d79f5,#275bdd); color:#fff; box-shadow:0 9px 20px rgba(49,107,240,.2); }.sp-button--primary:hover { color:#fff; box-shadow:0 12px 28px rgba(49,107,240,.29); }.sp-button--quiet { border-color:#dbe3ee; background:#fff; color:#40536e; }.sp-button--quiet:hover { border-color:#abc1f4; color:#285edc; }

.sp-hero { position:relative; overflow:hidden; justify-content:space-between; gap:35px; min-height:220px; margin-bottom:15px; padding:35px 40px; border:1px solid rgba(111,145,217,.24); border-radius:23px; background:radial-gradient(circle at 88% 5%,rgba(88,128,255,.29),transparent 34%),linear-gradient(125deg,#0d1931,#152a55 58%,#193a78); color:#fff; box-shadow:0 18px 46px rgba(18,38,77,.17); }.sp-hero::before { position:absolute; right:30%; bottom:-135px; width:270px; height:270px; border:1px solid rgba(255,255,255,.08); border-radius:50%; content:""; }.sp-hero__content { position:relative; z-index:1; max-width:760px; }.sp-eyebrow { color:#8fb1ff; font-size:.66rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }.sp-eyebrow span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#4be3a1; box-shadow:0 0 0 5px rgba(75,227,161,.12); }.sp-hero h2 { margin:10px 0 8px; color:#fff; font-size:clamp(1.6rem,2.3vw,2.25rem); font-weight:800; letter-spacing:-.035em; }.sp-hero__content>p { max-width:680px; margin:0; color:#afbed9; font-size:.9rem; line-height:1.65; }.sp-hero__actions { gap:8px; flex-wrap:wrap; margin-top:24px; }.sp-hero__actions a { padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:rgba(255,255,255,.055); color:#c7d5ee; font-size:.63rem; font-weight:700; text-decoration:none; transition:background .16s,border-color .16s; }.sp-hero__actions a:hover { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.1); }.sp-hero__actions i { margin-right:6px; color:#83a8ff; }
.sp-hero__portfolio { position:relative; z-index:1; gap:15px; min-width:360px; padding:18px 20px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(255,255,255,.075); backdrop-filter:blur(12px); }.sp-portfolio-ring { position:relative; display:grid; flex:0 0 82px; height:82px; place-items:center; border-radius:50%; background:conic-gradient(#4fe0a3 0 82%,rgba(255,255,255,.12) 82% 100%); }.sp-portfolio-ring::before { position:absolute; inset:6px; border-radius:50%; background:#18305f; content:""; }.sp-portfolio-ring>span { position:relative; z-index:1; text-align:center; }.sp-portfolio-ring strong,.sp-portfolio-ring small { display:block; }.sp-portfolio-ring strong { color:#fff; font-size:1.25rem; font-weight:850; }.sp-portfolio-ring small { color:#9fb1d2; font-size:.52rem; text-transform:uppercase; }.sp-portfolio-copy { min-width:0; }.sp-portfolio-copy>span,.sp-portfolio-copy>strong,.sp-portfolio-copy>small { display:block; }.sp-portfolio-copy>span { color:#92a7cc; font-size:.58rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.sp-portfolio-copy>strong { margin-top:3px; color:#fff; font-size:.88rem; }.sp-portfolio-copy>small { margin-top:3px; color:#a9b8d4; font-size:.62rem; }

.sp-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:15px; }.sp-metric { gap:12px; min-width:0; padding:15px 16px; border:1px solid var(--sp-line); border-radius:15px; background:#fff; box-shadow:0 7px 20px rgba(23,43,78,.045); }.sp-metric>span { display:grid; flex:0 0 38px; height:38px; place-items:center; border-radius:11px; }.sp-metric>div { min-width:0; }.sp-metric small,.sp-metric strong,.sp-metric em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sp-metric small { color:#7d8da3; font-size:.57rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }.sp-metric strong { color:#172b47; font-size:1.12rem; font-weight:800; }.sp-metric em { color:#909db0; font-size:.61rem; font-style:normal; }.sp-metric--blue>span { background:#edf3ff; color:#3269eb; }.sp-metric--green>span { background:#eafaf3; color:#0c9961; }.sp-metric--violet>span { background:#f2efff; color:#7859dc; }.sp-metric--amber>span { background:#fff6e2; color:#ca7d00; }.sp-metric--teal>span { background:#eaf9f8; color:#078c89; }

.sp-catalog-panel { overflow:hidden; border:1px solid var(--sp-line); border-radius:20px; background:#fff; box-shadow:0 12px 32px rgba(24,44,79,.065); }.sp-catalog-panel__header { justify-content:space-between; gap:18px; padding:22px 24px 17px; }.sp-catalog-panel__header>div:first-child>span { color:#3569df; font-size:.58rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.sp-catalog-panel__header h2 { margin:2px 0 0; color:#172a46; font-size:1.07rem; font-weight:800; }.sp-catalog-panel__header p { margin:2px 0 0; color:#8392a6; font-size:.67rem; }.sp-result-count { gap:8px; padding:8px 10px; border-radius:10px; background:#f3f6fa; color:#73849b; font-size:.62rem; }.sp-result-count i { color:#3a6ee2; }.sp-result-count strong { color:#29415e; font-size:.76rem; }
.sp-filter-bar { gap:9px; margin:0 24px; padding:11px; border:1px solid #dfe7f2; border-radius:14px; background:#f8fafd; }.sp-search-field { flex:1 1 480px; margin:0; }.sp-sort-field { flex:0 1 245px; margin:0; }.sp-search-field>span,.sp-sort-field>span { display:block; margin:0 0 4px 2px; color:#7889a0; font-size:.55rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.sp-search-field>div { position:relative; }.sp-search-field i { position:absolute; left:12px; color:#91a1b7; font-size:.68rem; }.sp-search-field input,.sp-sort-field select { width:100%; height:42px; border:1px solid #d8e1ed; border-radius:10px; outline:0; background:#fff; color:#263a55; font-size:.73rem; }.sp-search-field input { padding:0 55px 0 36px; }.sp-search-field kbd { position:absolute; right:9px; padding:3px 6px; border:1px solid #dfe6ef; border-radius:5px; background:#f6f8fb; color:#95a2b4; font-size:.53rem; box-shadow:none; }.sp-sort-field select { padding:0 36px 0 11px; }.sp-search-field input:focus,.sp-sort-field select:focus { border-color:#77a0fb; box-shadow:0 0 0 3px rgba(49,107,240,.08); }.sp-filter-bar>.sp-button { align-self:flex-end; min-height:42px; }.sp-icon-button { display:grid; align-self:flex-end; flex:0 0 42px; height:42px; place-items:center; border:1px solid #d8e1ed; border-radius:10px; background:#fff; color:#667993; text-decoration:none; transition:transform .18s,border-color .18s; }.sp-icon-button:hover { border-color:#aac2f6; color:#3267dc; transform:translateY(-1px); }
.sp-filter-context { justify-content:space-between; gap:12px; min-height:41px; padding:8px 25px; color:#8593a7; font-size:.63rem; }.sp-filter-context i { margin-right:5px; color:#6385d1; }.sp-filter-active { padding:5px 8px; border-radius:999px; background:#edf3ff; color:#315fca; font-weight:750; }

.sp-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; padding:4px 24px 24px; }.sp-product-card { position:relative; overflow:hidden; min-width:0; padding:18px; border:1px solid #dfe7f1; border-radius:17px; background:linear-gradient(180deg,#fff,#fbfcfe); box-shadow:0 7px 18px rgba(24,44,79,.04); transition:transform .18s,box-shadow .18s,border-color .18s; }.sp-product-card:hover { border-color:#cbd9ec; box-shadow:0 13px 29px rgba(24,44,79,.09); transform:translateY(-2px); }.sp-product-card::before { position:absolute; top:0; left:0; width:100%; height:3px; background:#3e77ed; content:""; }.sp-product-card.is-inactive::before { background:#9ca9b9; }.sp-product-card__top { justify-content:space-between; gap:12px; margin-bottom:15px; }.sp-product-icon { display:grid; flex:0 0 44px; height:44px; place-items:center; border-radius:13px; font-size:.95rem; }.sp-product-icon--blue { background:#edf3ff; color:#3269eb; }.sp-product-icon--violet { background:#f1efff; color:#7758d7; }.sp-product-icon--green { background:#eaf9f2; color:#0b9860; }.sp-product-icon--teal { background:#e9f8f7; color:#068b88; }.sp-product-card__badges { gap:5px; flex-wrap:wrap; justify-content:flex-end; }.sp-type-badge,.sp-status { display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; font-size:.55rem; font-weight:850; line-height:1; }.sp-type-badge { border:1px solid #c7d9fa; background:#eef4ff; color:#3564cd; }.sp-status { gap:5px; border:1px solid transparent; }.sp-status i { width:5px; height:5px; border-radius:50%; background:currentColor; }.sp-status--active { border-color:#b9ead5; background:#edfaf5; color:#0b8d5b; }.sp-status--inactive { border-color:#dce3eb; background:#f3f5f8; color:#6c7b90; }
.sp-product-card__identity { min-height:58px; }.sp-product-card__identity h3 { margin:0; color:#172d49; font-size:.94rem; font-weight:800; letter-spacing:-.015em; }.sp-product-card__identity code { display:inline-block; margin-top:5px; padding:3px 6px; border-radius:5px; background:#f1f4f8; color:#637690; font-size:.58rem; }
.sp-product-card__architecture { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }.sp-product-card__architecture>a { position:relative; gap:8px; min-width:0; padding:10px; border:1px solid #e1e7f0; border-radius:11px; background:#f9fafc; color:inherit; text-decoration:none; transition:border-color .16s,background .16s; }.sp-product-card__architecture>a:hover { border-color:#bfd1f7; background:#f2f6ff; }.sp-product-card__architecture>a>span { display:grid; flex:0 0 28px; height:28px; place-items:center; border-radius:8px; background:#eaf1ff; color:#356bea; font-size:.62rem; }.sp-product-card__architecture>a>div { min-width:0; }.sp-product-card__architecture small,.sp-product-card__architecture strong,.sp-product-card__architecture em { display:block; }.sp-product-card__architecture small { overflow:hidden; color:#8290a4; font-size:.5rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }.sp-product-card__architecture strong { color:#263d5a; font-size:.78rem; }.sp-product-card__architecture em { color:#8b99aa; font-size:.52rem; font-style:normal; }.sp-product-card__architecture>a>i { position:absolute; top:7px; right:7px; color:#a4b1c1; font-size:.45rem; }
.sp-setup-callout,.sp-activity-note { gap:8px; min-height:46px; margin-top:11px; padding:9px 10px; border-radius:10px; }.sp-setup-callout { border:1px solid #f0daa5; background:#fff9eb; color:#b87509; }.sp-setup-callout>i { font-size:.72rem; }.sp-setup-callout span { min-width:0; }.sp-setup-callout strong,.sp-setup-callout small { display:block; }.sp-setup-callout strong { color:#8d5b0d; font-size:.6rem; }.sp-setup-callout small { color:#a47d42; font-size:.52rem; }.sp-activity-note { background:#f6f8fb; color:#8695a9; font-size:.54rem; }.sp-activity-note span { flex:1; }.sp-activity-note em { color:#71839d; font-style:normal; font-weight:700; }
.sp-product-card__footer { gap:6px; margin:15px -18px -18px; padding:13px 18px; border-top:1px solid #e8edf3; background:#fafbfd; }.sp-product-card__footer form { margin:0 0 0 auto; }.sp-card-action { min-height:32px; justify-content:center; gap:5px; padding:0 9px; border:1px solid #dbe3ed; border-radius:9px; background:#fff; color:#576a83; font-size:.57rem; font-weight:800; text-decoration:none; white-space:nowrap; transition:transform .16s,border-color .16s; }.sp-card-action:hover { transform:translateY(-1px); }.sp-card-action--primary { border-color:#bfd1fb; background:#eff4ff; color:#2d61d7; }.sp-card-action--quiet:hover { color:#325fbe; }.sp-card-action--danger { border-color:#f3c2c8; color:#cd3c4c; }.sp-card-action--success { border-color:#bce5d2; color:#098455; }.sp-card-action--danger span,.sp-card-action--success span { display:none; }
.sp-empty { padding:60px 20px; text-align:center; }.sp-empty>span { display:grid; width:58px; height:58px; margin:0 auto 13px; place-items:center; border-radius:17px; background:#edf3ff; color:#3970ea; font-size:1.25rem; }.sp-empty h3 { margin:0; color:#233954; font-size:.95rem; font-weight:800; }.sp-empty p { margin:6px auto 16px; color:#7e8da3; font-size:.69rem; }.sp-empty>div { justify-content:center; gap:8px; }.sp-catalog-footer { justify-content:space-between; gap:15px; min-height:54px; padding:10px 24px; border-top:1px solid #e8edf3; background:#fafbfd; color:#8290a4; font-size:.61rem; }.sp-catalog-footer>span i { margin-right:6px; color:#4b75d9; }.sp-catalog-footer .pagination { margin:0; }

@media (max-width:1199.98px) { .saas-products-page{padding:24px 20px 42px}.sp-metrics{grid-template-columns:repeat(3,1fr)}.sp-product-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767.98px) { .saas-products-page{padding:18px 12px 34px}.sp-page-header{align-items:flex-start;flex-direction:column}.sp-page-header>.sp-button{width:100%}.sp-hero{align-items:stretch;flex-direction:column;padding:27px 22px}.sp-hero__portfolio{min-width:0}.sp-metrics{grid-template-columns:repeat(2,1fr)}.sp-metric:last-child{grid-column:1/-1}.sp-filter-bar{flex-wrap:wrap;margin-inline:12px}.sp-search-field{flex-basis:100%}.sp-sort-field{flex:1}.sp-filter-bar>.sp-button{flex:1}.sp-product-grid{grid-template-columns:1fr;padding-inline:12px}.sp-filter-context,.sp-catalog-footer{align-items:flex-start;flex-direction:column}.sp-catalog-footer{padding-block:14px} }
@media (max-width:479.98px) { .sp-metrics{grid-template-columns:1fr}.sp-metric:last-child{grid-column:auto}.sp-hero__portfolio{align-items:flex-start;flex-direction:column}.sp-product-card__architecture{grid-template-columns:1fr}.sp-product-card__footer{flex-wrap:wrap}.sp-product-card__footer form{margin-left:0}.sp-card-action--danger span,.sp-card-action--success span{display:inline}.sp-empty>div{align-items:stretch;flex-direction:column} }