:root {
  --bl-blue-hour:  rgb(0,55,97);
  --bl-blue-sea:   rgb(58,94,145);
  --bl-blue-sky:   rgb(141,162,193);
  --bl-blue-light: rgb(176,188,205);
  --bl-grey:       rgb(189,189,189);
  --bl-orange:     rgb(239,125,0);
}

body { font-family: Calibri, Candara, "Segoe UI", Arial, sans-serif; background:#f6f8fb; }

.text-rm-primary   { color: var(--bl-blue-hour); }
.text-rm-secondary { color: #4d5b71; }
.text-bl-orange    { color: var(--bl-orange); }

.btn-primary { background: var(--bl-blue-hour); border-color: var(--bl-blue-hour); }
.btn-primary:hover, .btn-primary:focus { background: var(--bl-blue-sea); border-color: var(--bl-blue-sea); }
.btn-outline-primary { color: var(--bl-blue-hour); border-color: var(--bl-blue-hour); }
.btn-outline-primary:hover { background: var(--bl-blue-hour); border-color: var(--bl-blue-hour); }

.badge { background: var(--bl-orange); }

/* Landing — namespaced sp- */
.sp-hero { background:linear-gradient(135deg,rgba(176,188,205,.22) 0%,rgba(255,255,255,1) 48%,rgba(141,162,193,.18) 100%); border-radius:1.25rem; overflow:hidden; }
.sp-soft-card { border:0; box-shadow:0 .25rem 1rem rgba(0,0,0,.06); border-radius:1rem; }
.sp-plan-card { border-radius:1rem; overflow:hidden; }
.sp-popular { background:rgb(239,125,0)!important; color:#1f1f1f!important; }
.sp-trial   { background:rgb(58,94,145)!important; color:#fff!important; }
.sp-highlight-box { background:rgba(58,94,145,.10); border-left:4px solid rgb(58,94,145); border-radius:.75rem; }
.sp-feature-icon { width:56px; height:56px; object-fit:contain; }
.sp-muted { color:rgb(58,94,145); }
.sp-testimonial-card { background:rgba(255,255,255,.82); border:1px solid rgba(58,94,145,.10); box-shadow:0 .35rem 1.2rem rgba(0,0,0,.06); border-radius:1rem; }
.sp-stars { color:rgb(239,125,0); letter-spacing:.08em; }
.sp-quote { font-size:1rem; line-height:1.55; }

.sp-persona-card { border-radius:1.25rem; padding:2rem; height:100%; }
.sp-persona-biz  { background:linear-gradient(135deg,rgba(58,94,145,.08) 0%,rgba(58,94,145,.04) 100%); border:1.5px solid rgba(58,94,145,.15); }
.sp-persona-it   { background:linear-gradient(135deg,rgba(239,125,0,.07) 0%,rgba(239,125,0,.03) 100%); border:1.5px solid rgba(239,125,0,.18); }
.sp-persona-icon { width:48px; height:48px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sp-persona-icon-biz { background:rgba(58,94,145,.12); }
.sp-persona-icon-it  { background:rgba(239,125,0,.13); }
.sp-persona-list { list-style:none; padding:0; margin:0; }
.sp-persona-list li { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid rgba(0,0,0,.05); font-size:.93rem; color:#444; }
.sp-persona-list li:last-child { border-bottom:0; }
.sp-persona-list li::before { content:''; display:block; width:18px; height:18px; flex-shrink:0; margin-top:.05rem; background-size:contain; background-repeat:no-repeat; background-position:center; }
.sp-persona-list-biz li::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%233a5e91'/%3E%3Cpath d='M5 8.5l2 2 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sp-persona-list-it  li::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ef7d00'/%3E%3Cpath d='M5 8.5l2 2 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.sp-plan-tagline { font-size:.82rem; color:#6b7c9a; font-style:italic; margin-top:.15rem; }
.sp-section-label { display:inline-block; background:rgba(58,94,145,.08); color:rgb(58,94,145); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:2rem; padding:.25rem .85rem; margin-bottom:1rem; }
.sp-cap-note { font-size:.78rem; color:#6b7c9a; }

.sp-navbar-logo { height:42px; width:auto; max-width:none; display:block; }

/* Mockup screenshot frames */
.sp-mock {
  background: #fff;
  border-radius: .9rem;
  box-shadow: 0 .8rem 2.4rem rgba(0,55,97,.14), 0 .25rem .9rem rgba(0,0,0,.06);
  border: 1px solid rgba(58,94,145,.10);
  overflow: hidden;
}
.sp-mock-bar {
  background: linear-gradient(180deg,#eef2f7 0%, #e3eaf3 100%);
  border-bottom: 1px solid rgba(58,94,145,.13);
  padding: .55rem .9rem;
  display: flex; align-items: center; gap: .4rem;
}
.sp-mock-dot { width:10px; height:10px; border-radius:50%; }
.sp-mock-dot.r { background:#ff6058; }
.sp-mock-dot.y { background:#ffbd2e; }
.sp-mock-dot.g { background:#27c93f; }
.sp-mock-url {
  margin-left:.6rem; flex:1; background:#fff; border:1px solid rgba(58,94,145,.18);
  border-radius:.4rem; padding:.18rem .55rem; font-size:.72rem; color:#6b7c9a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sp-mock-body { padding: 1rem 1.1rem; }

/* Dashboard mock */
.sp-mock-kpi { background:#f6f8fb; border-radius:.55rem; padding:.7rem .8rem; }
.sp-mock-kpi .label { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#6b7c9a; font-weight:600; }
.sp-mock-kpi .value { font-size:1.35rem; font-weight:700; color:var(--bl-blue-hour); line-height:1.1; }
.sp-mock-kpi .delta { font-size:.72rem; color:#1aa260; }
.sp-mock-kpi .delta.down { color:#c83a3a; }

/* Kanban / pipeline mock */
.sp-kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.sp-kan-col { background:#f0f3f8; border-radius:.5rem; padding:.5rem; }
.sp-kan-col h6 { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#6b7c9a; font-weight:700; margin:0 0 .4rem; display:flex; justify-content:space-between; align-items:center; }
.sp-kan-col h6 .cnt { background:#fff; color:#4d5b71; font-size:.62rem; padding:.05rem .35rem; border-radius:.35rem; font-weight:700; }
.sp-kan-card { background:#fff; border-radius:.4rem; padding:.4rem .5rem; margin-bottom:.35rem; border-left:3px solid var(--bl-blue-sea); box-shadow:0 1px 2px rgba(0,0,0,.05); font-size:.7rem; }
.sp-kan-card .co { color:var(--bl-blue-hour); font-weight:700; display:block; }
.sp-kan-card .val { color:#4d5b71; font-variant-numeric:tabular-nums; }
.sp-kan-card.hot { border-left-color:var(--bl-orange); }
.sp-kan-card.warm { border-left-color:#1aa260; }

/* Contact card mock */
.sp-contact { background:#fff; border:1px solid #e5e9f0; border-radius:.5rem; padding:.85rem; font-size:.78rem; }
.sp-contact .avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#3a5e91,#003761); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.sp-contact .name { font-weight:700; color:var(--bl-blue-hour); }
.sp-contact .meta { color:#6b7c9a; font-size:.7rem; }
.sp-contact-row { display:flex; justify-content:space-between; padding:.28rem 0; border-bottom:1px dashed #e5e9f0; font-size:.72rem; color:#4d5b71; }
.sp-contact-row:last-child { border-bottom:0; }
.sp-contact-row .k { color:#6b7c9a; }

/* Forecast bars */
.sp-bar-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; font-size:.78rem; }
.sp-bar-label { width:90px; color:#4d5b71; }
.sp-bar { flex:1; background:#eef2f7; border-radius:.35rem; height:14px; overflow:hidden; position:relative; }
.sp-bar > span { display:block; height:100%; }
.sp-bar > span.b1 { background:linear-gradient(90deg,#3a5e91,#1aa260); }
.sp-bar > span.b2 { background:linear-gradient(90deg,#3a5e91,#ef7d00); }
.sp-bar > span.b3 { background:linear-gradient(90deg,#3a5e91,#c83a3a); }
.sp-bar-pct { width:52px; text-align:right; font-variant-numeric: tabular-nums; color:#4d5b71; }

.sp-mock-tabs { display:flex; gap:.4rem; margin-bottom:.7rem; font-size:.74rem; }
.sp-mock-tab { padding:.25rem .65rem; border-radius:.4rem; background:#f0f3f8; color:#6b7c9a; font-weight:600; }
.sp-mock-tab.active { background:var(--bl-blue-hour); color:#fff; }

/* Activity / quote mock */
.sp-act { border-collapse: collapse; width:100%; font-size:.78rem; }
.sp-act th, .sp-act td { padding:.35rem .45rem; border-bottom:1px solid rgba(58,94,145,.10); }
.sp-act th { background:#f0f3f8; color:#4d5b71; font-weight:600; text-align:left; }
.sp-act td.proj { color:var(--bl-blue-hour); font-weight:600; }
.sp-act td.h { text-align:right; font-variant-numeric: tabular-nums; color:#4d5b71; }
.sp-act tr.total td { font-weight:700; background:rgba(58,94,145,.06); }
.sp-act tr.total td.h { color:var(--bl-blue-hour); }

/* Honeypot — invisible to humans, attractive to bots */
.sp-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}