/* ============================================================
   Service page — Software Platforms
   Scoped entirely under .sp-page so it cannot affect global styles.
   Reuses DHP globals: .container .section-eyebrow .section-heading
   .hi .btn .btn--* .reveal .reveal-delay-* .rule-accent
   Adds sp- structural styles for the hero mock-UI, bento, steps,
   case study, trust and FAQ. Accent aligned to the site blue.
   ============================================================ */

.sp-page {
  --sp-blue:    #1a7fd4;          /* matches global --c-accent */
  --sp-blue-hi: #4aa3f5;
  --sp-blue-deep:#0e24b1;         /* DHP brand electric */
  --sp-blue-dim: rgba(26,127,212,0.14);
  --sp-gold:    #f4ce2f;          /* DHP brand gold */
  --sp-peri:    #a1aae4;
  --sp-good:    #38d39f;
  --sp-panel:   #0f1320;
  --sp-panel-2: #151a28;
  --sp-line:    rgba(255,255,255,0.09);
  --sp-line-2:  rgba(255,255,255,0.14);
  --sp-tx-soft: rgba(255,255,255,0.66);
  --sp-tx-mute: rgba(255,255,255,0.42);
  --sp-r: 14px;
  --sp-ease: cubic-bezier(.22,.61,.36,1);
}

.sp-page .sp-section { padding: 96px 0; position: relative; }
.sp-page .sp-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.sp-page .sp-lead { margin-top: 18px; color: var(--sp-tx-soft); font-size: 1.05rem; }

/* ── HERO ──────────────────────────────────────────────────── */
/* generous top padding clears the fixed site header and gives the eyebrow room */
.sp-hero { position: relative; padding: 140px 0 80px; overflow: hidden; }
@media (max-width: 680px) { .sp-hero { padding: 112px 0 56px; } }
.sp-hero__glow {
  position: absolute; top: -240px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(26,127,212,.28), transparent 70%),
    radial-gradient(closest-side, rgba(14,36,177,.20), transparent 70%);
  filter: blur(18px);
}
.sp-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.sp-hero__title { font-size: clamp(2.1rem,4.4vw,3.3rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.sp-hero__sub { margin-top: 22px; font-size: 1.08rem; color: var(--sp-tx-soft); max-width: 560px; }
.sp-hero__actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.sp-hero__trust { margin-top: 34px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.sp-hero__trust li { font-size: .84rem; color: var(--sp-tx-mute); }
.sp-hero__trust strong { color: #fff; font-weight: 600; }
.sp-hero__trust li:not(:last-child)::after { content: "·"; margin-left: 24px; color: var(--sp-line-2); }

/* mock product UI */
.sp-hero__product { position: relative; }
.sp-ui { background: linear-gradient(180deg,var(--sp-panel),#0a0d16); border: 1px solid var(--sp-line-2); border-radius: var(--sp-r); box-shadow: 0 50px 120px -40px rgba(0,0,0,.9); overflow: hidden; transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); transform-origin: left center; }
.sp-ui__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--sp-line); }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sp-ui__url { margin-left: 12px; font-size: .72rem; color: var(--sp-tx-mute); background: rgba(255,255,255,.04); padding: 4px 12px; border-radius: 6px; }
.sp-ui__body { display: grid; grid-template-columns: 46px 1fr; min-height: 330px; }
.sp-side { background: rgba(0,0,0,.25); border-right: 1px solid var(--sp-line); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; }
.sp-side__brand { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg,var(--sp-blue),var(--sp-blue-deep)); display: grid; place-items: center; font-size: .6rem; font-weight: 700; color: #fff; }
.sp-side__item { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.06); }
.sp-side__item.is-active { background: var(--sp-blue-dim); box-shadow: inset 0 0 0 1.5px var(--sp-blue); }
.sp-main { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.sp-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sp-stat { background: var(--sp-panel-2); border: 1px solid var(--sp-line); border-radius: 10px; padding: 12px; }
.sp-stat__label { font-size: .62rem; color: var(--sp-tx-mute); text-transform: uppercase; letter-spacing: .08em; display: block; }
.sp-stat__value { font-size: 1.12rem; font-weight: 600; margin-top: 4px; display: block; color: #fff; }
.sp-stat__delta { font-size: .62rem; color: var(--sp-tx-mute); }
.sp-stat__delta.up { color: var(--sp-good); }
.sp-cal { background: var(--sp-panel-2); border: 1px solid var(--sp-line); border-radius: 10px; padding: 12px; }
.sp-cal__head { display: flex; justify-content: space-between; align-items: center; font-size: .66rem; color: var(--sp-tx-soft); margin-bottom: 10px; }
.sp-cal__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--sp-blue); margin: 0 3px 0 8px; vertical-align: middle; }
.sp-cal__legend i.o { background: rgba(255,255,255,.14); }
.sp-cal__grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; }
.sp-col { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.sp-col b { font-size: .58rem; color: var(--sp-tx-mute); margin-bottom: 3px; font-weight: 600; }
.sp-col .s { width: 100%; height: 14px; border-radius: 4px; background: rgba(255,255,255,.07); }
.sp-col .s.f { background: linear-gradient(180deg,var(--sp-blue),var(--sp-blue-deep)); }
.sp-payrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-pay { display: flex; align-items: center; gap: 8px; background: var(--sp-panel-2); border: 1px solid var(--sp-line); border-radius: 9px; padding: 9px 11px; font-size: .68rem; color: var(--sp-tx-soft); }
.sp-pay strong { color: #fff; }
.sp-pay__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-good); box-shadow: 0 0 0 3px rgba(56,211,159,.18); }
.sp-pay__time { margin-left: auto; color: var(--sp-tx-mute); }
.sp-badge { position: absolute; bottom: -18px; left: -14px; display: flex; align-items: center; gap: 9px; background: var(--sp-panel); border: 1px solid var(--sp-line-2); border-radius: 10px; padding: 11px 15px; font-size: .78rem; color: #fff; box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); }
.sp-badge__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-gold); box-shadow: 0 0 0 0 rgba(244,206,47,.6); animation: sp-pulse 2.2s infinite; }
@keyframes sp-pulse { 0%{box-shadow:0 0 0 0 rgba(244,206,47,.55)} 70%{box-shadow:0 0 0 10px rgba(244,206,47,0)} 100%{box-shadow:0 0 0 0 rgba(244,206,47,0)} }

/* ── CREDIBILITY STRIP ─────────────────────────────────────── */
.sp-strip { border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }
.sp-strip__inner { padding: 30px 0; display: flex; gap: 30px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sp-strip__line { font-size: 1rem; color: var(--sp-tx-soft); max-width: 680px; }
.sp-strip__line strong { color: var(--sp-gold); font-weight: 600; }
.sp-strip__stack { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sp-strip__stack span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-tx-mute); }
.sp-strip__stack b { font-size: .92rem; font-weight: 600; color: var(--sp-tx-soft); }

/* ── PROBLEM ───────────────────────────────────────────────── */
.sp-prob { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: stretch; }
.sp-prob__col { background: var(--sp-panel); border: 1px solid var(--sp-line); border-radius: var(--sp-r); padding: 30px; }
.sp-prob__col--good { border-color: rgba(26,127,212,.35); box-shadow: 0 30px 70px -40px rgba(26,127,212,.4); }
.sp-prob__label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-tx-mute); margin-bottom: 18px; }
.sp-prob__label--good { color: var(--sp-blue-hi); }
.sp-list li { padding: 11px 0 11px 28px; border-bottom: 1px solid var(--sp-line); position: relative; color: var(--sp-tx-soft); font-size: .95rem; }
.sp-list li::before { content: "✕"; position: absolute; left: 0; color: var(--sp-tx-mute); font-size: .8rem; top: 12px; }
.sp-list--good li::before { content: "✓"; color: var(--sp-good); }
.sp-list--good li { color: #fff; }
.sp-list li:last-child { border-bottom: none; }
.sp-prob__cost { margin-top: 20px; font-size: .9rem; color: var(--sp-tx-mute); }
.sp-prob__cost--good { color: var(--sp-tx-soft); }
.sp-prob__arrow { display: grid; place-items: center; font-size: 1.8rem; color: var(--sp-blue); }

/* ── BENTO ─────────────────────────────────────────────────── */
.sp-bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.sp-card { background: var(--sp-panel); border: 1px solid var(--sp-line); border-radius: var(--sp-r); padding: 28px; transition: transform .4s var(--sp-ease), border-color .4s, background .4s; }
.sp-card:hover { transform: translateY(-5px); border-color: var(--sp-line-2); background: var(--sp-panel-2); }
.sp-card--wide { grid-column: span 2; }
.sp-card--accent { background: linear-gradient(160deg,rgba(26,127,212,.12),var(--sp-panel)); border-color: rgba(26,127,212,.3); }
.sp-card__icon { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; color: var(--sp-blue-hi); background: var(--sp-blue-dim); border: 1px solid rgba(26,127,212,.3); margin-bottom: 16px; }
.sp-card h3 { font-size: 1.18rem; font-weight: 600; margin-bottom: 8px; color: #fff; }
.sp-card p { color: var(--sp-tx-soft); font-size: .94rem; }
.sp-chip { display: inline-block; margin-top: 15px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-tx-mute); border: 1px solid var(--sp-line); border-radius: 20px; padding: 5px 12px; }
.sp-chip--gold { color: var(--sp-gold); border-color: rgba(244,206,47,.4); }

/* ── STEPS ─────────────────────────────────────────────────── */
.sp-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.sp-step { background: var(--sp-panel); border: 1px solid var(--sp-line); border-radius: var(--sp-r); padding: 28px; position: relative; }
.sp-step__num { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--sp-blue); }
.sp-step h3 { font-size: 1.12rem; font-weight: 600; margin: 12px 0 8px; color: #fff; }
.sp-step p { color: var(--sp-tx-soft); font-size: .92rem; }

/* ── CASE ──────────────────────────────────────────────────── */
.sp-case { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; background: linear-gradient(160deg,var(--sp-panel),#0a0d16); border: 1px solid var(--sp-line); border-radius: 22px; padding: 48px; position: relative; overflow: hidden; }
.sp-case::before { content: ""; position: absolute; top: -120px; right: -80px; width: 340px; height: 340px; background: radial-gradient(closest-side,rgba(26,127,212,.18),transparent); }
.sp-case__title { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 700; line-height: 1.16; margin: 12px 0 16px; }
.sp-case__text { color: var(--sp-tx-soft); font-size: 1rem; }
.sp-case__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.sp-case__metrics b { display: block; font-size: 1.7rem; font-weight: 700; color: var(--sp-blue-hi); }
.sp-case__metrics span { font-size: .84rem; color: var(--sp-tx-mute); }
.sp-case__visual { position: relative; min-height: 280px; display: grid; place-items: center; }
.sp-vcard { background: var(--sp-panel-2); border: 1px solid var(--sp-line-2); border-radius: 16px; padding: 24px; width: 100%; max-width: 300px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.sp-vcard__label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-tx-mute); }
.sp-vcard__name { display: block; font-size: 1.35rem; font-weight: 600; margin: 6px 0 2px; color: #fff; }
.sp-vcard__meta { font-size: .82rem; color: var(--sp-tx-soft); }
.sp-vcard__bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); margin: 18px 0 10px; overflow: hidden; }
.sp-vcard__bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--sp-blue),var(--sp-blue-hi)); }
.sp-vcard__foot { font-size: .74rem; color: var(--sp-tx-mute); }
.sp-vpill { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--sp-panel); border: 1px solid var(--sp-line-2); border-radius: 10px; padding: 9px 13px; font-size: .73rem; color: #fff; box-shadow: 0 24px 50px -22px rgba(0,0,0,.8); }
.sp-vpill .d { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-good); }
.sp-vpill .d.gold { background: var(--sp-gold); }
.sp-vpill--1 { top: 6px; right: -6px; }
.sp-vpill--2 { bottom: 10px; left: -10px; }

/* ── TRUST ─────────────────────────────────────────────────── */
.sp-trust { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.sp-trust__item { background: var(--sp-panel); border: 1px solid var(--sp-line); border-radius: var(--sp-r); padding: 26px; }
.sp-trust__item h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 8px; color: #fff; }
.sp-trust__item p { color: var(--sp-tx-soft); font-size: .9rem; }

/* ── FAQ (uses page-local styling to match site faq look) ──── */
.sp-faq { max-width: 840px; margin: 0 auto; }
.sp-faq__item { border: 1px solid var(--sp-line); border-radius: 12px; margin-bottom: 12px; background: var(--sp-panel); overflow: hidden; }
.sp-faq__item summary { list-style: none; cursor: pointer; padding: 22px 26px; font-size: 1.04rem; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 18px; color: #fff; }
.sp-faq__item summary::-webkit-details-marker { display: none; }
.sp-faq__plus { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.sp-faq__plus::before,.sp-faq__plus::after { content: ""; position: absolute; background: var(--sp-blue-hi); transition: transform .3s var(--sp-ease); }
.sp-faq__plus::before { top: 7px; left: 0; width: 16px; height: 2px; }
.sp-faq__plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.sp-faq__item[open] .sp-faq__plus::after { transform: rotate(90deg); opacity: 0; }
.sp-faq__item p { padding: 0 26px 24px; color: var(--sp-tx-soft); font-size: .96rem; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .sp-hero__grid { grid-template-columns: 1fr; gap: 54px; }
  .sp-hero__product { max-width: 560px; }
  .sp-ui { transform: none; }
  .sp-prob { grid-template-columns: 1fr; }
  .sp-prob__arrow { transform: rotate(90deg); }
  .sp-bento,.sp-steps,.sp-trust { grid-template-columns: repeat(2,1fr); }
  .sp-card--wide { grid-column: span 2; }
  .sp-case { grid-template-columns: 1fr; padding: 36px; }
}
@media (max-width: 680px) {
  .sp-section { padding: 64px 0; }
  .sp-bento,.sp-steps,.sp-trust,.sp-case__metrics { grid-template-columns: 1fr; }
  .sp-card--wide { grid-column: span 1; }
  .sp-stats { grid-template-columns: repeat(3,1fr); }
  .sp-strip__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sp-case__metrics { grid-template-columns: 1fr 1fr; }
  .sp-hero__trust li:not(:last-child)::after { display: none; }
}