/* =========================================================
   Service page hero (Oct 2026) — full-height, dark, with an
   animated "product video" player. Scoped to .sh so the
   shared home.css components are untouched.
   Driven by js/service-hero.js (scene cycling + controls).
   ========================================================= */
.sh {
  --sh-ink: #e8edf7;
  --sh-ink-2: #aab6cf;
  --sh-ink-3: #7686a6;
  --sh-line: rgba(255, 255, 255, 0.09);
  --sh-panel: rgba(255, 255, 255, 0.04);
  --sh-accent: #38bdf8;
  --sh-accent-2: #2457d6;
  --sh-ok: #22c55e;
  --sh-dur: 5s;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 150px 0 80px;
  background: #081128;
  color: var(--sh-ink);
}
.sh-bg { position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
}
.sh-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; }
.sh-glow.g1 { width: 520px; height: 520px; right: -120px; top: -140px; background: #1d4ed8; animation: shFloat 14s ease-in-out infinite alternate; }
.sh-glow.g2 { width: 380px; height: 380px; left: -140px; bottom: -160px; background: #0e7490; opacity: 0.35; animation: shFloat 18s ease-in-out infinite alternate-reverse; }
@keyframes shFloat { to { transform: translate(-60px, 50px) scale(1.1); } }

.sh-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

/* ---------- Copy ---------- */
.sh .breadcrumb-nav { color: var(--sh-ink-3); }
.sh-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7dd3fc; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.25); padding: 7px 16px; border-radius: 999px; }
.sh-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sh-accent); box-shadow: 0 0 10px 2px rgba(56, 189, 248, 0.8); }
.sh h1 { margin: 1.2rem 0 1.2rem; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.03; letter-spacing: -0.045em; font-weight: 700; color: #fff; text-wrap: balance; }
.sh h1 span { display: block; background: linear-gradient(90deg, #7dd3fc, #60a5fa 50%, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-lede { color: var(--sh-ink-2); font-size: 1.05rem; line-height: 1.7; max-width: 54ch; margin-bottom: 2rem; }
.sh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.sh .btn-primary { background: #fff; color: #0c1730; box-shadow: 0 12px 30px -12px rgba(56, 189, 248, 0.5); }
.sh .btn-primary:hover { background: #e0f2fe; color: #0c1730; }
.sh-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.sh-link i { font-size: 0.8em; transition: transform 0.25s; }
.sh-link:hover i { transform: translateX(4px); }
.sh-facts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.4rem; }
.sh-facts li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 500; color: var(--sh-ink-2); padding: 7px 12px; border-radius: 9px; background: var(--sh-panel); border: 1px solid var(--sh-line); }
.sh-facts i { color: var(--sh-accent); font-size: 0.8rem; }

/* ---------- Player ---------- */
.sh-player { position: relative; }
.sh-window { border-radius: 18px; overflow: hidden; background: #0d1833; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(56, 189, 248, 0.06), 0 0 80px -20px rgba(36, 87, 214, 0.45); }
.sh-chrome { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--sh-line); }
.sh-chrome > span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.sh-chrome > span:nth-child(1) { background: #f87171; } .sh-chrome > span:nth-child(2) { background: #fbbf24; } .sh-chrome > span:nth-child(3) { background: #4ade80; }
.sh-url { margin-left: 12px; font-size: 0.74rem; font-weight: 500; color: var(--sh-ink-3); padding: 4px 12px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); }
.sh-url i { font-size: 0.65rem; margin-right: 4px; }
.sh-scene-name { margin-left: auto; font-style: normal; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sh-accent); }

.sh-stage { position: relative; height: 380px; }
.sh-scene { position: absolute; inset: 0; padding: 1.4rem 1.5rem; opacity: 0; visibility: hidden; transform: scale(0.98); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.16, 0.8, 0.3, 1), visibility 0s 0.5s; }
.sh-scene.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s, transform 0.6s cubic-bezier(0.16, 0.8, 0.3, 1); }

/* Shared reveal: elements wait until their scene is active */
.sh-scene [style*="--i"] { opacity: 0; }
.sh-scene.is-active [style*="--i"] { animation: shIn 0.5s cubic-bezier(0.16, 0.8, 0.3, 1) forwards; }
@keyframes shIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Scene 1: Plan */
.s-plan { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.sp-row { display: flex; justify-content: center; gap: 0.6rem; }
.sp-roles, .sp-mods { justify-content: space-between; }
.sp-node { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; padding: 0.55rem 0.9rem; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; white-space: nowrap; }
.sp-node i { color: #7dd3fc; font-size: 0.75rem; }
.sp-core { background: linear-gradient(135deg, #2457d6, #0ea5e9); border-color: transparent; box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.7); }
.sp-core i { color: #fff; }
.sp-mod { font-size: 0.76rem; flex: 1; justify-content: center; background: rgba(56, 189, 248, 0.08); border-color: rgba(56, 189, 248, 0.25); color: #bae6fd; }
.sp-db { margin-top: 1rem; font-weight: 500; color: var(--sh-ink-2); border-style: dashed; }
.sp-lines { width: 100%; height: 42px; display: block; }
.sp-lines path { fill: none; stroke: rgba(125, 211, 252, 0.45); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 220; stroke-dashoffset: 220; }
.s-plan.is-active .sp-lines path { animation: shDraw 0.9s ease forwards; }
.s-plan.is-active .sp-lines:first-of-type path { animation-delay: 0.7s; }
.s-plan.is-active .sp-lines:last-of-type path { animation-delay: 1.4s; }
.s-plan.is-active .sp-node { animation-delay: calc(var(--i) * 0.22s); }
.s-plan.is-active .sp-core { animation: shIn 0.5s forwards 0.66s, shPulse 2s ease-in-out 1.4s infinite; }
@keyframes shDraw { to { stroke-dashoffset: 0; } }
@keyframes shPulse { 50% { box-shadow: 0 10px 40px -6px rgba(14, 165, 233, 0.95); } }

/* Scene 2: Build */
.s-build { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 1rem; }
.sb-editor { border-radius: 12px; background: #0a1228; border: 1px solid var(--sh-line); overflow: hidden; min-width: 0; }
.sb-tab { font-size: 0.72rem; color: var(--sh-ink-2); padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--sh-line); background: rgba(255, 255, 255, 0.03); }
.sb-tab i { color: #f59e0b; margin-right: 4px; }
.sb-editor pre { margin: 0; padding: 0.9rem 0.9rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; line-height: 1.85; color: #dbe3f3; white-space: pre; overflow: hidden; }
.sb-editor i { font-style: normal; }
.sb-editor .k { color: #c084fc; } .sb-editor .t { color: #7dd3fc; } .sb-editor .s { color: #86efac; }
.sb-l { display: inline-block; }
.s-build.is-active .sb-l { animation: shType 0.45s steps(18) forwards; animation-delay: calc(var(--i) * 0.32s); clip-path: inset(0 100% 0 0); opacity: 1; }
@keyframes shType { to { clip-path: inset(0 0 0 0); } }
.sb-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #7dd3fc; animation: shBlink 1s steps(1) infinite; }
@keyframes shBlink { 50% { opacity: 0; } }
.sb-mods { display: grid; align-content: start; gap: 0.5rem; }
.sb-mods p { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sh-ink-3); margin-bottom: 0.2rem; }
.sb-mod { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; font-weight: 500; padding: 0.55rem 0.7rem; border-radius: 9px; background: var(--sh-panel); border: 1px solid var(--sh-line); }
.sb-mod b { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); transition: background 0.3s; }
.sb-mod b::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 0.3s; }
.s-build.is-active .sb-mod { animation-delay: calc(0.2s + var(--i) * 0.15s); }
.s-build.is-active .sb-mod b { animation: shToggle 0.3s forwards; animation-delay: calc(1.4s + var(--i) * 0.5s); }
.s-build.is-active .sb-mod b::after { animation: shKnob 0.3s forwards; animation-delay: calc(1.4s + var(--i) * 0.5s); }
@keyframes shToggle { to { background: var(--sh-ok); } }
@keyframes shKnob { to { transform: translateX(12px); } }

/* Scene 3: Run */
.s-run { display: flex; flex-direction: column; gap: 0.9rem; }
.sr-top { display: flex; justify-content: space-between; align-items: center; }
.sr-tenant { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; padding: 0.45rem 0.8rem; border-radius: 9px; background: var(--sh-panel); border: 1px solid var(--sh-line); }
.sr-tenant > i { color: var(--sh-accent); font-size: 0.75rem; }
.sr-tenant .fa-chevron-down { color: var(--sh-ink-3); font-size: 0.6rem; }
.sr-org { position: relative; display: inline-grid; height: 1.3em; overflow: hidden; }
.sr-org b { grid-area: 1 / 1; font-weight: 600; transition: transform 0.4s; }
.sr-org b:last-child { transform: translateY(110%); }
.sr-role { font-size: 0.72rem; font-weight: 600; color: #86efac; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); padding: 0.3rem 0.7rem; border-radius: 999px; }
.sr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.sr-kpi { position: relative; padding: 0.8rem 0.9rem; border-radius: 11px; background: var(--sh-panel); border: 1px solid var(--sh-line); }
.sr-kpi small { display: block; font-size: 0.68rem; color: var(--sh-ink-3); margin-bottom: 0.2rem; }
.sr-kpi strong { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.sr-kpi .sr-b { position: absolute; left: 0.9rem; bottom: 0.8rem; opacity: 0; }
.sr-chart { flex: 1; display: flex; align-items: flex-end; gap: 6%; padding: 0.9rem 1rem 0; border-radius: 11px; background: var(--sh-panel); border: 1px solid var(--sh-line); min-height: 120px; }
.sh-scene .sr-chart span { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #38bdf8, #2457d6); transform-origin: bottom; transform: scaleY(0); opacity: 1; }
.s-run.is-active .sr-chart span { animation: shGrow 0.7s cubic-bezier(0.16, 0.8, 0.3, 1) forwards; animation-delay: calc(0.3s + var(--i) * 0.08s); }
@keyframes shGrow { to { transform: scaleY(1); } }
.sr-note { font-size: 0.72rem; color: var(--sh-ink-3); }
.sr-note i { color: var(--sh-accent); margin-right: 4px; }
/* Tenant switch at ~2.6s: org name, KPIs and chart all change */
.s-run.is-active .sr-org b:first-child { animation: shOutUp 0.4s forwards 2.6s; }
.s-run.is-active .sr-org b:last-child { animation: shInUp 0.4s forwards 2.6s; }
.s-run.is-active .sr-a { animation: shFade 0.3s forwards 2.6s; }
.s-run.is-active .sr-b { animation: shFadeIn 0.3s forwards 2.75s; }
.s-run.is-active .sr-chart span:nth-child(odd) { animation: shGrow 0.7s cubic-bezier(0.16, 0.8, 0.3, 1) forwards calc(0.3s + var(--i) * 0.08s), shSwap 0.6s ease forwards 2.6s; }
@keyframes shOutUp { to { transform: translateY(-110%); } }
@keyframes shInUp { to { transform: translateY(0); } }
@keyframes shFade { to { opacity: 0; } }
@keyframes shFadeIn { to { opacity: 1; } }
@keyframes shSwap { from { transform: scaleY(1); } to { transform: scaleY(0.6); } }

/* Scene 4: Ship */
.s-ship { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
.ss-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.ss-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; color: var(--sh-ink-2); padding: 0.9rem 0.4rem; border-radius: 11px; background: var(--sh-panel); border: 1px solid var(--sh-line); overflow: hidden; }
.ss-step::before { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sh-ok); transform: scaleX(0); transform-origin: left; }
.ss-step b { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(125, 211, 252, 0.3); border-top-color: #7dd3fc; animation: shSpin 0.8s linear infinite; }
.s-ship.is-active .ss-step { animation-delay: calc(var(--i) * 0.12s); }
.s-ship.is-active .ss-step::before { animation: shBar 0.6s ease forwards; animation-delay: calc(0.3s + var(--i) * 0.6s); }
.s-ship.is-active .ss-step b { animation: shSpin 0.8s linear infinite, shDone 0.01s forwards; animation-delay: 0s, calc(0.9s + var(--i) * 0.6s); }
@keyframes shSpin { to { transform: rotate(360deg); } }
@keyframes shBar { to { transform: scaleX(1); } }
@keyframes shDone { to { transform: none; border-color: transparent; background: var(--sh-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; } }
.ss-live { align-self: center; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); opacity: 0; transform: scale(0.9); }
.ss-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sh-ok); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: shRing 1.6s infinite; }
.s-ship.is-active .ss-live { animation: shPop 0.5s cubic-bezier(0.16, 0.8, 0.3, 1) forwards 2.9s; }
@keyframes shPop { to { opacity: 1; transform: none; } }
@keyframes shRing { 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.ss-monitor { padding: 0.8rem 1rem; border-radius: 11px; background: var(--sh-panel); border: 1px solid var(--sh-line); }
.ss-mon-head { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--sh-ink-3); margin-bottom: 0.4rem; }
.ss-mon-head i { color: var(--sh-ok); }
.ss-monitor svg { width: 100%; height: 64px; display: block; }
.ss-line { fill: none; stroke: #38bdf8; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.s-ship.is-active .ss-line { animation: shDraw 1.6s ease forwards 3.1s; }

/* ---------- Controls (video-style chapters) ---------- */
.sh-controls { display: flex; align-items: center; gap: 0.9rem; margin-top: 1rem; }
.sh-play { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; font-size: 0.8rem; transition: background 0.2s; }
.sh-play:hover { background: rgba(255, 255, 255, 0.14); }
.sh-chapters { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.sh-ch { display: grid; gap: 0.45rem; text-align: left; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--sh-ink-3); background: none; border: 0; padding: 0; cursor: pointer; transition: color 0.2s; }
.sh-ch:hover, .sh-ch.is-active { color: #fff; }
.sh-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.sh-bar i { display: block; height: 100%; width: 100%; background: var(--sh-accent); transform: scaleX(0); transform-origin: left; }
.sh-ch.is-done .sh-bar i { transform: scaleX(1); }
.sh-ch.is-active .sh-bar i { animation: shBar var(--sh-dur) linear forwards; }
.sh-player.is-paused .sh-ch.is-active .sh-bar i,
.sh-player.is-paused .sh-scene.is-active *,
.sh-player.is-paused .sh-scene.is-active *::before,
.sh-player.is-paused .sh-scene.is-active *::after { animation-play-state: paused !important; }
.sh-play:focus-visible, .sh-ch:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 3px; }

/* Reduced motion: no autoplay, scenes show their finished state */
@media (prefers-reduced-motion: reduce) {
  .sh-glow { animation: none; }
  .sh-scene *, .sh-scene *::before, .sh-scene *::after { animation-delay: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .sh-ch.is-active .sh-bar i { animation: none; transform: scaleX(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sh { min-height: 0; padding: 130px 0 70px; }
  .sh-grid { grid-template-columns: 1fr; }
  .sh-player { max-width: 680px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  .sh-stage { height: 400px; }
  .sh-scene { padding: 1rem; }
  .s-build { grid-template-columns: 1fr; }
  .sb-mods { grid-template-columns: repeat(2, 1fr); }
  .sb-mods p { grid-column: 1 / -1; }
  .sb-editor pre { font-size: 0.66rem; }
  .sp-node { font-size: 0.7rem; padding: 0.45rem 0.6rem; }
  .sp-roles, .sp-mods { gap: 0.35rem; }
  .sr-kpi strong { font-size: 1.05rem; }
  .sh-url { display: none; }
}