/* LogicMotive service pages (/services/<name>/).
   "Isometric Depth" design approved in Claude Design, Oct 2026: same navy palette as the
   site, but isometric scenes, parallax depth and per-service interactions so the service
   pages do not look like the product pages. */

.sv-page {
  --sv-navy: #003366;
  --sv-blue: #166cc3;
  --sv-sky: #8fc1ff;
  --sv-amber: #f5a623;
  --sv-amber-ink: #1b1300;
  --sv-ink: #0b2a4a;
  --sv-text: #3b5675;
  --sv-muted: #5b7290;
  --sv-line: #dbe7f4;
  --sv-soft: #eef6ff;
  --sv-bg: #f3f7fb;
  --sv-green: #1f8a55;
  --sv-ease: cubic-bezier(.16, 1, .3, 1);
  --sv-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--sv-bg);
}

.sv {
  font-family: Inter, Roboto, 'Segoe UI', Arial, sans-serif;
  color: var(--sv-ink);
  background: var(--sv-bg);
  overflow: hidden;
}

.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }
/* style.css gives every element Roboto; inside service pages text follows the page font. */
.sv :where(*:not(i, [class*="fa-"])) { font-family: inherit; }
.sv :where(h1, h2, h3, p) { margin: 0; }
.sv :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.sv a { color: var(--sv-blue); }
.sv a:hover { color: var(--sv-navy); }
.sv button { font: inherit; }

.sv-shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.sv-kicker { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sv-blue); }
.sv-h2 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.08; font-weight: 900; letter-spacing: -.03em; color: var(--sv-navy); }
.sv-lead-text { font-size: 18px; line-height: 1.7; color: var(--sv-text); }
.sv-section { padding: 80px 0; }
.sv-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.sv-head--center { text-align: center; margin-inline: auto; }
.sv-mono { font-family: var(--sv-mono); }

/* ---------- Buttons ---------- */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 26px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .03em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .35s var(--sv-ease), box-shadow .35s, background .25s;
}

.sv-btn:hover { transform: translateY(-3px); }
.sv-btn:focus-visible { outline: 3px solid var(--sv-sky); outline-offset: 3px; }
.sv .sv-btn--amber { background: var(--sv-amber); color: var(--sv-amber-ink); box-shadow: 0 14px 30px -14px rgba(245, 166, 35, .7); }
.sv .sv-btn--amber:hover { color: var(--sv-amber-ink); }
.sv .sv-btn--ghost { border: 1px solid rgba(255, 255, 255, .35); color: #ffffff; background: transparent; }
.sv .sv-btn--ghost:hover { color: #ffffff; background: rgba(255, 255, 255, .08); }
.sv .sv-btn--navy { background: var(--sv-navy); color: #ffffff; min-height: 44px; padding: 12px 20px; }
.sv .sv-btn--navy:hover { color: #ffffff; background: #0f5a9b; }
.sv .sv-btn--outline { background: #ffffff; color: var(--sv-navy); border: 2px solid var(--sv-navy); min-height: 44px; padding: 11px 20px; }

/* ---------- Keyframes ---------- */
@keyframes sv-wordup { from { translate: 0 105%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes sv-slabup { from { translate: 0 -60px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes sv-pop { from { translate: 0 -40px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes sv-fade { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes sv-flow { to { stroke-dashoffset: -48; } }
@keyframes sv-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sv-heat { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes sv-draw { to { stroke-dashoffset: 0; } }
@keyframes sv-flipin { from { transform: perspective(900px) rotateX(70deg); opacity: 0; } to { transform: perspective(900px) rotateX(0); opacity: 1; } }
@keyframes sv-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes sv-scan { from { translate: 0 0; } to { translate: 0 260px; } }
@keyframes sv-pulse { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes sv-spin { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }
@keyframes sv-flyin { 0% { opacity: 0; translate: var(--fx) var(--fy); rotate: var(--fr); scale: 1; } 20% { opacity: 1; } 75% { opacity: 1; translate: 0 0; rotate: 0deg; scale: .55; } 100% { opacity: 0; translate: 0 0; rotate: 0deg; scale: .3; } }
@keyframes sv-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sv-stamp { 0% { opacity: 0; scale: 2.2; rotate: -25deg; } 60% { opacity: 1; scale: .95; rotate: -12deg; } 100% { opacity: 1; scale: 1; rotate: -12deg; } }
@keyframes sv-tick { from { translate: 0 -6px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

.sv-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.sv-w > span { display: inline-block; animation: sv-wordup .9s var(--sv-ease) both; }
.sv-slab { animation: sv-slabup 1s var(--sv-ease) both; }
.sv-popin { animation: sv-pop .9s var(--sv-ease) both; }
.sv-old { animation: sv-fade 3.2s ease-in-out infinite; }
.sv-flow { stroke-dasharray: 10 14; animation: sv-flow 1.2s linear infinite; }
.sv-float { animation: sv-hover 5s ease-in-out infinite; }
.sv-heat { animation: sv-heat 1.8s ease-in-out infinite; }
.sv-pulse { transform-box: fill-box; transform-origin: center; animation: sv-pulse 2.4s ease-out infinite; }
.sv-tick { animation: sv-tick .35s ease-out both; }

@supports (animation-timeline: view()) {
  .sv-reveal { animation: sv-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  .sv-flipin { animation: sv-flipin linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; transform-origin: 50% 100%; }
  .sv-road { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: sv-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
}

/* ---------- Hero ---------- */
.sv-hero {
  position: relative;
  isolation: isolate;
  color: #ffffff;
  padding: 40px 0 120px;
  background:
    radial-gradient(900px 460px at 80% 10%, rgba(56, 152, 236, .40), transparent 60%),
    linear-gradient(160deg, #001b36 0%, #002b55 50%, #00366b 100%);
}

.sv-hero--countdown { padding-bottom: 170px; }
.sv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(30deg, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(150deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 26px;
}

.sv-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.sv-hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sv-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: #9fc2e8; }
.sv-crumbs li + li::before { content: "/"; margin-right: 6px; color: #6f94bb; }
.sv .sv-crumbs a { color: #cfe0f5; text-decoration: none; }
.sv .sv-crumbs a:hover { color: #ffffff; text-decoration: underline; }
.sv-crumbs [aria-current] { color: #ffffff; font-weight: 700; }

.sv-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 8px;
  color: #8fc1ff;
  border: 1px solid rgba(143, 193, 255, .4);
}

.sv-badge--amber { color: #ffd28a; border-color: rgba(255, 210, 138, .4); background: rgba(245, 166, 35, .12); }
.sv-badge--green { color: #a8f0cf; border-color: rgba(95, 211, 165, .45); background: rgba(95, 211, 165, .10); }
.sv-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-amber); }

.sv-title { display: flex; flex-direction: column; gap: 14px; }
.sv-title-name { font-size: clamp(42px, 5.6vw, 76px); line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.sv-title-accent { color: var(--sv-sky); }
.sv-title-tag { font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; color: #e4efff; }
.sv-hero-lead { font-size: 19px; line-height: 1.6; color: #c9d9ec; max-width: 540px; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Isometric scenes */
.sv-scene { position: relative; width: 100%; aspect-ratio: 660 / 540; max-height: 560px; }
.sv-layer { position: absolute; inset: 0; transition: transform .3s ease-out; }
.sv-layer > svg, .sv-layer-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-layer--1 { transform: translate(calc(var(--sv-mx, 0) * 6px), calc(var(--sv-my, 0) * 4px)); }
.sv-layer--2 { transform: translate(calc(var(--sv-mx, 0) * 14px), calc(var(--sv-my, 0) * 10px)); }
.sv-layer--3 { transform: translate(calc(var(--sv-mx, 0) * 26px), calc(var(--sv-my, 0) * 18px)); pointer-events: none; }
.sv-chip { display: inline-block; font-size: 12px; font-weight: 800; padding: 7px 12px; border-radius: 8px; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); white-space: nowrap; }
.sv-chip--white { background: #ffffff; color: var(--sv-navy); }
.sv-chip--amber { background: #fff3dd; color: #7a4a00; }
.sv-chip--green { background: #e7f6ee; color: #145c37; }
.sv-toast {
  position: absolute;
  background: rgba(255, 255, 255, .96);
  color: var(--sv-ink);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
}

.sv-toast b { display: block; font-size: 14px; }
.sv-toast small { display: block; font-size: 12px; color: var(--sv-muted); }
.sv-toast i { color: var(--sv-green); font-size: 20px; }

/* ERPNext cube */
.sv-cube-wrap { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; transform-style: preserve-3d; transition: transform .3s ease-out; transform: rotateX(calc(var(--sv-my, 0) * -16deg)) rotateY(calc(var(--sv-mx, 0) * 24deg)); }
.sv-scene--cube { perspective: 1200px; }
.sv-cube { position: absolute; inset: 0; transform-style: preserve-3d; animation: sv-spin 18s linear infinite; }
.sv-face {
  position: absolute;
  inset: 0;
  padding: 18px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .08);
}

.sv-face-code { font-family: var(--sv-mono); font-size: 22px; font-weight: 600; opacity: .85; line-height: 1; }
.sv-face b { font-size: 17px; }
.sv-face small { font-size: 12px; opacity: .8; }
.sv-face:nth-child(1) { transform: rotateY(0deg) translateZ(110px); background: #ffffff; color: var(--sv-navy); }
.sv-face:nth-child(2) { transform: rotateY(90deg) translateZ(110px); background: #166cc3; color: #ffffff; }
.sv-face:nth-child(3) { transform: rotateY(180deg) translateZ(110px); background: #ffd28a; color: #3a2600; }
.sv-face:nth-child(4) { transform: rotateY(-90deg) translateZ(110px); background: #003366; color: #ffffff; }
.sv-face:nth-child(5) { transform: rotateX(90deg) translateZ(110px); background: #a8f0cf; color: #0b3d27; }
.sv-face:nth-child(6) { transform: rotateX(-90deg) translateZ(110px); background: #8fc1ff; color: #002b55; }
.sv-fly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  margin: -32px 0 0 -75px;
  padding: 12px;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6);
  animation: sv-flyin 4.2s cubic-bezier(.65, 0, .35, 1) infinite both;
}

.sv-fly b { font-size: 11px; }
.sv-skel { display: block; height: 4px; border-radius: 3px; background: #dbe7f4; }
.sv-cube-shadow { position: absolute; left: 50%; top: 82%; width: 300px; height: 40px; margin-left: -150px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%); }

/* ---------- Countdown ---------- */
.sv-countdown { position: relative; z-index: 3; margin-top: -110px; }
.sv-countdown-card { background: #ffffff; border-radius: 20px; box-shadow: 0 30px 70px -30px rgba(0, 51, 102, .4); display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, .7fr)); overflow: hidden; }
.sv-countdown-intro { padding: 26px 30px; background: linear-gradient(135deg, #fff7ea, #ffffff); display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.sv-countdown-intro b { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #b86e00; }
.sv-countdown-intro span { font-size: 15px; color: var(--sv-text); line-height: 1.5; }
.sv-count { padding: 22px 12px; border-left: 1px solid #e3ebf5; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.sv-count-value { font-family: var(--sv-mono); font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; color: var(--sv-navy); letter-spacing: -.02em; }
.sv-count-label { font-size: 13px; font-weight: 700; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- Chapter bar ---------- */
.sv-chapters-wrap { position: sticky; top: calc(var(--lm-fixed-header-height, 127px) + 10px); z-index: 20; padding-top: 26px; }
.sv-chapters { display: flex; background: #ffffff; border: 1px solid #e3ebf5; border-radius: 12px; overflow-x: auto; scrollbar-width: none; box-shadow: 0 10px 30px -20px rgba(0, 51, 102, .35); }
.sv-chapters::-webkit-scrollbar { display: none; }
.sv .sv-chapters a { flex: 1 0 auto; text-align: center; text-decoration: none; font-weight: 700; font-size: 14px; padding: 14px 16px; border-right: 1px solid #e3ebf5; color: var(--sv-navy); transition: color .25s, background .25s; white-space: nowrap; }
.sv .sv-chapters a:last-child { border-right: 0; }
.sv .sv-chapters a span { font-family: var(--sv-mono); font-size: 12px; opacity: .7; margin-right: 4px; }
.sv .sv-chapters a.is-active { background: var(--sv-navy); color: #ffffff; }
.sv-anchor { scroll-margin-top: calc(var(--lm-fixed-header-height, 127px) + 90px); }

/* ---------- Overview ---------- */
.sv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sv-copy { display: flex; flex-direction: column; gap: 18px; }
.sv-numbered { display: flex; flex-direction: column; gap: 12px; }
.sv-numbered li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.6; }
.sv-num { flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--sv-navy); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-family: var(--sv-mono); font-size: 13px; }
.sv-numbered b { color: var(--sv-navy); }
.sv-numbered li > span:last-child > span { color: var(--sv-text); }

/* Readiness rings */
.sv-check { position: relative; overflow: hidden; background: #0b1f3a; border-radius: 26px; padding: 26px; color: #ffffff; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 40px 80px -40px rgba(0, 27, 54, .8); }
.sv-check-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sv-check-head b { display: block; font-size: 18px; }
.sv-check-head small { display: block; font-size: 13px; color: #8fb3d9; }
.sv-check-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: center; }
.sv-rings { position: relative; width: 240px; height: 240px; }
.sv-rings svg { position: absolute; inset: 0; width: 240px; height: 240px; }
.sv-ring-track { fill: none; stroke: rgba(143, 193, 255, .14); stroke-width: 12; }
.sv-ring { fill: none; stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 120px 120px; transition: stroke-dashoffset 1.4s var(--sv-ease); }
.sv-rings-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sv-rings-center small { font-size: 11px; color: #8fb3d9; }
.sv-rings-center b { font-size: 13px; max-width: 80px; line-height: 1.2; }
.sv-check-list { display: flex; flex-direction: column; gap: 10px; }
.sv-check-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 14px; }
.sv-check-list li > span:first-child { display: flex; align-items: center; gap: 10px; }
.sv-check-dot { width: 10px; height: 10px; border-radius: 3px; }
.sv-check-state { font-size: 12px; font-weight: 800; color: #8fb3d9; }
.sv-check.is-running .sv-check-state { color: #ffd28a; }
.sv-check.is-done .sv-check-state { color: #5fd3a5; }
.sv-scanline { position: absolute; left: 0; right: 0; top: 70px; height: 2px; background: linear-gradient(90deg, transparent, rgba(143, 193, 255, .7), transparent); display: none; animation: sv-scan 2.6s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
.sv-check.is-running .sv-scanline { display: block; }

/* One-system stack */
.sv-stack-box { position: relative; height: 380px; background: linear-gradient(160deg, #eef6ff, #ffffff); border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--sv-line); }
.sv-sheet {
  position: absolute;
  width: 220px;
  padding: 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--sv-line);
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 16px 30px -18px rgba(0, 51, 102, .5);
  transition: transform 1s var(--sv-ease), top 1s var(--sv-ease), left 1s var(--sv-ease), box-shadow 1s;
}

.sv-sheet b { font-size: 12px; font-weight: 800; color: var(--sv-blue); }
.sv-sheet:nth-child(2) b { color: var(--sv-green); }
.sv-sheet:nth-child(3) b { color: #b86e00; }
.sv-sheet .sv-skel { height: 5px; }
.sv-stack-box.is-merged .sv-sheet { left: calc(50% - 110px) !important; transform: perspective(700px) rotateX(55deg) rotateZ(-30deg) !important; box-shadow: 0 10px 0 -4px var(--sv-navy); }
.sv-stack-after { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; opacity: 0; translate: 0 10px; transition: opacity .6s .5s, translate .6s .5s; }
.sv-stack-box.is-merged .sv-stack-after { opacity: 1; translate: 0 0; }
.sv-stack-after li { background: var(--sv-navy); color: #ffffff; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 8px; }

/* ---------- Roadmap ---------- */
.sv-roadmap { background: linear-gradient(180deg, var(--sv-bg), #e8f0f9); }
.sv-road-svg { width: 100%; height: auto; display: block; margin: 28px 0; }
.sv-phases { display: grid; grid-template-columns: repeat(var(--sv-cols, 4), minmax(0, 1fr)); gap: 16px; }
.sv-phase { background: #ffffff; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 40px -26px rgba(0, 51, 102, .45); border-top: 4px solid var(--sv-amber); }
.sv-phase:nth-child(4n+2) { border-top-color: var(--sv-sky); }
.sv-phase:nth-child(4n+3) { border-top-color: var(--sv-blue); }
.sv-phase:nth-child(4n+4) { border-top-color: var(--sv-green); }
.sv-phase-num { font-family: var(--sv-mono); font-size: 13px; font-weight: 600; color: var(--sv-blue); }
.sv-phase h3 { font-size: 21px; font-weight: 900; color: var(--sv-navy); }
.sv-phase p { color: var(--sv-text); line-height: 1.6; font-size: 15px; }

/* ---------- Spotlight: approach chooser ---------- */
.sv-chooser-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; background: #ffffff; border: 1px solid var(--sv-line); padding: 6px; border-radius: 12px; align-self: flex-start; }
.sv-chooser-tabs button { border: 0; cursor: pointer; min-height: 44px; padding: 10px 18px; border-radius: 8px; font-weight: 800; font-size: 15px; background: transparent; color: var(--sv-navy); transition: background .25s, color .25s; }
.sv-chooser-tabs button[aria-pressed="true"] { background: var(--sv-navy); color: #ffffff; }
.sv-chooser-panel { animation: sv-rise .5s var(--sv-ease) both; }
.sv-chooser-panel[hidden] { display: none; }
.sv-chooser-art { background: #ffffff; border-radius: 26px; padding: 26px; box-shadow: 0 30px 60px -36px rgba(0, 51, 102, .5); }
.sv-chooser-art svg { width: 100%; height: auto; display: block; }
.sv-chooser-art polygon { transition: all .6s var(--sv-ease); }

/* ---------- Spotlight: order flow ---------- */
.sv-flow-card { position: relative; background: #ffffff; border-radius: 24px; padding: 34px 28px 28px; box-shadow: 0 30px 60px -36px rgba(0, 51, 102, .5); }
.sv-flow-track, .sv-flow-progress { position: absolute; left: 10%; top: 74px; height: 6px; border-radius: 6px; }
.sv-flow-track { right: 10%; background: #e3ebf5; }
.sv-flow-progress { width: 0; background: linear-gradient(90deg, var(--sv-navy), var(--sv-amber)); transition: width .9s var(--sv-ease); }
.sv-flow-doc { position: absolute; top: 40px; left: 10%; margin-left: -34px; width: 68px; height: 76px; border-radius: 10px; background: #ffffff; border: 2px solid var(--sv-navy); box-shadow: 0 18px 30px -14px rgba(0, 51, 102, .6); display: flex; flex-direction: column; gap: 5px; padding: 10px; z-index: 2; transition: left .9s var(--sv-ease); }
.sv-flow-doc .sv-skel:first-child { height: 6px; background: var(--sv-amber); width: 70%; }
.sv-flow-doc b { margin-top: auto; font-size: 9px; font-weight: 900; color: var(--sv-navy); font-family: var(--sv-mono); }
.sv-stations { padding-top: 92px; display: grid; grid-template-columns: repeat(var(--sv-cols, 5), minmax(0, 1fr)); gap: 12px; }
.sv-station { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; border: 2px solid transparent; opacity: .55; transition: all .5s; }
.sv-station.is-done { opacity: 1; background: #f8fbff; }
.sv-station.is-now { border-color: var(--sv-amber); }
.sv-station span { font-family: var(--sv-mono); font-size: 12px; font-weight: 600; color: #9fb2c8; }
.sv-station.is-done span { color: #b86e00; }
.sv-station b { font-size: 17px; color: var(--sv-navy); }
.sv-station p { font-size: 14px; color: var(--sv-text); line-height: 1.5; }

/* ---------- Spotlight: GST invoice + licence slider ---------- */
.sv-invoice { position: relative; background: #ffffff; border-radius: 18px; padding: 28px 30px; box-shadow: 0 40px 80px -40px rgba(0, 51, 102, .6); border-top: 6px solid var(--sv-navy); display: flex; flex-direction: column; gap: 12px; min-height: 380px; }
.sv-invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sv-invoice-head b { display: block; font-size: 20px; color: var(--sv-navy); }
.sv-invoice-head small { font-size: 12px; color: var(--sv-muted); font-family: var(--sv-mono); }
.sv-qr { display: grid; grid-template-columns: repeat(21, 4px); padding: 6px; background: #ffffff; border: 1px solid var(--sv-line); border-radius: 6px; }
.sv-qr span { display: block; width: 4px; height: 4px; }
.sv-qr span.on { background: transparent; transition: background .25s; }
.sv-invoice.is-done .sv-qr span.on { background: var(--sv-ink); }
.sv-invoice-lines { display: flex; flex-direction: column; font-family: var(--sv-mono); font-size: 14px; }
.sv-invoice-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--sv-line); visibility: hidden; }
.sv-invoice-lines li.is-printed { visibility: visible; animation: sv-print .7s steps(28, end) both; }
.sv-invoice-lines li:last-child { font-weight: 800; color: var(--sv-navy); }
.sv-stamp { position: absolute; right: 30px; bottom: 30px; border: 3px solid var(--sv-green); color: var(--sv-green); border-radius: 10px; padding: 8px 14px; font-weight: 900; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; background: rgba(231, 246, 238, .92); display: none; }
.sv-stamp small { display: block; font-size: 11px; font-weight: 700; font-family: var(--sv-mono); letter-spacing: 0; }
.sv-invoice.is-done .sv-stamp { display: block; animation: sv-stamp .7s var(--sv-ease) both; }

.sv-licence { margin-top: 70px; background: linear-gradient(135deg, #001b36, #003366 60%, #0f5a9b); color: #ffffff; border-radius: 26px; padding: 40px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.sv-licence h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.sv-licence label { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #d6e6f7; }
.sv-licence output { font-size: 30px; font-weight: 800; color: #ffffff; font-family: var(--sv-mono); }
.sv-licence input[type=range] { accent-color: var(--sv-amber); width: 100%; }
.sv-licence-facts { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-licence-facts div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 14px 18px; }
.sv-licence-facts span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a8f0cf; }
.sv-licence-facts div:last-child span { color: #ffd28a; }
.sv-licence-facts b { font-size: 28px; font-family: var(--sv-mono); }
.sv-seats { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 6px; padding: 20px; background: rgba(255, 255, 255, .05); border-radius: 18px; }
.sv-seats span { display: block; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(255, 255, 255, .12); transform: scale(.6); transition: background .25s, transform .25s; }
.sv-seats span.on { background: var(--sv-sky); transform: scale(1); }
.sv-seats span.on:nth-child(9n+1) { background: var(--sv-amber); }

/* ---------- Deliverables: flip cards ---------- */
.sv-flips { display: grid; grid-template-columns: repeat(var(--sv-cols, 5), minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.sv-flip { perspective: 1100px; height: 300px; }
.sv-flip-inner { position: relative; height: 100%; transition: transform .8s var(--sv-ease); transform-style: preserve-3d; }
.sv-flip:hover .sv-flip-inner, .sv-flip:focus-within .sv-flip-inner, .sv-flip.is-flipped .sv-flip-inner { transform: rotateY(180deg); }
.sv-flip-face { position: absolute; inset: 0; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sv-flip-front { width: 100%; text-align: left; border: 0; cursor: pointer; box-shadow: 0 20px 40px -28px rgba(0, 51, 102, .5); background: #ffffff; color: var(--sv-navy); }
.sv-flip:nth-child(odd) .sv-flip-front { background: linear-gradient(160deg, #002b55, #003a73); color: #ffffff; }
.sv-flip-front .sv-mono { font-size: 13px; opacity: .75; }
.sv-flip-badge { margin-top: auto; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-blue); }
.sv-flip:nth-child(odd) .sv-flip-badge { color: #ffd28a; }
.sv-flip-title { font-size: 22px; font-weight: 900; line-height: 1.2; }
.sv-flip-back { transform: rotateY(180deg); background: #ffffff; border: 2px solid var(--sv-navy); }
.sv-flip-back b { font-size: 16px; color: var(--sv-navy); }
.sv-flip-back p { color: var(--sv-text); line-height: 1.6; font-size: 14px; }
.sv-flip-back ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sv-flip-back li { font-size: 12px; font-weight: 700; color: var(--sv-navy); border: 1px solid #cfe0f2; border-radius: 999px; padding: 4px 10px; }
.sv-flip-hint { font-size: 14px; color: var(--sv-muted); }

/* ---------- Audience ---------- */
.sv-aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.sv-aud-card { position: relative; background: #ffffff; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 40px -28px rgba(0, 51, 102, .5); overflow: hidden; transition: transform .45s var(--sv-ease); }
.sv-aud-card:hover { transform: translateY(-6px); }
.sv-aud-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 20px; background: linear-gradient(145deg, #166cc3, #003366); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sv-aud-card h3 { font-size: 18px; font-weight: 800; color: var(--sv-navy); }
.sv-aud-card p { color: var(--sv-text); font-size: 15px; line-height: 1.6; }

/* ---------- FAQ ---------- */
.sv-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.sv-faq-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--lm-fixed-header-height, 127px) + 96px); }
.sv-faq-list { display: flex; flex-direction: column; gap: 10px; }
.sv-faq-item { background: #ffffff; border-radius: 14px; padding: 18px 22px; border: 1px solid var(--sv-line); }
.sv-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 800; color: var(--sv-navy); font-size: 18px; }
.sv-faq-item summary::-webkit-details-marker { display: none; }
.sv-faq-item summary h3 { font: inherit; }
.sv-plus { flex: 0 0 32px; height: 32px; border-radius: 8px; background: var(--sv-soft); color: var(--sv-navy); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .35s, background .35s, color .35s; }
.sv-faq-item[open] .sv-plus { transform: rotate(45deg); background: var(--sv-navy); color: #ffffff; }
.sv-faq-item p { margin-top: 12px; color: var(--sv-text); line-height: 1.75; }

/* ---------- CTA band ---------- */
.sv-band { border-radius: 24px; padding: 48px 56px; color: #ffffff; background: linear-gradient(135deg, #001b36, #003366 60%, #0f5a9b); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.sv-band > div { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.sv-band .sv-kicker { color: #ffd28a; }
.sv-band h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 900; letter-spacing: -.02em; }
.sv-band p { color: #d6e6f7; font-size: 17px; }

/* ---------- Other services ---------- */
.sv-more-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.sv-more-head h2 { font-size: 28px; font-weight: 900; color: var(--sv-navy); }
.sv .sv-more-head a { font-weight: 800; text-decoration: none; }
.sv-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.sv .sv-more-card { text-decoration: none; background: #ffffff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 16px 34px -26px rgba(0, 51, 102, .5); transition: transform .45s var(--sv-ease); }
.sv-more-card:hover { transform: translateY(-5px); }
.sv-more-card i { color: var(--sv-blue); font-size: 20px; }
.sv-more-card small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-blue); }
.sv-more-card b { font-size: 18px; color: var(--sv-navy); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sv-flips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-countdown-card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-countdown-intro { grid-column: 1 / -1; }
  .sv-count:nth-child(2) { border-left: 0; }
}

@media (max-width: 1000px) {
  .sv-hero { padding-bottom: 80px; }
  .sv-hero--countdown { padding-bottom: 140px; }
  .sv-hero-grid, .sv-two, .sv-faq, .sv-licence { grid-template-columns: minmax(0, 1fr); }
  .sv-scene { max-width: 560px; margin-inline: auto; }
  .sv-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-stations { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 24px; }
  .sv-flow-track, .sv-flow-progress, .sv-flow-doc { display: none; }
  .sv-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-faq-side { position: static; }
  .sv-section { padding: 56px 0; }
}

@media (max-width: 640px) {
  .sv-shell { width: calc(100% - 32px); }
  .sv-title-name { font-size: 40px; }
  .sv-hero-lead { font-size: 17px; }
  .sv-actions .sv-btn { flex: 1 1 100%; }
  .sv-cube-wrap { scale: .7; }
  .sv-fly { scale: .8; }
  .sv-toast { max-width: 220px; padding: 10px 12px; }
  .sv-countdown { margin-top: -100px; }
  .sv-count { padding: 12px 4px; }
  .sv-count-value { font-size: 24px; }
  .sv-count-label { font-size: 10px; }
  .sv-countdown-intro { padding: 16px; }
  .sv-check { padding: 18px; }
  .sv-check-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .sv-check-list { width: 100%; }
  .sv-phases, .sv-stations, .sv-aud, .sv-flips { grid-template-columns: minmax(0, 1fr); }
  .sv-flip { height: 210px; }
  .sv-stack-box { height: 420px; }
  .sv-sheet { width: 180px; }
  .sv-stack-box.is-merged .sv-sheet { left: calc(50% - 90px) !important; }
  .sv-licence { padding: 24px; margin-top: 48px; }
  .sv-seats { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .sv-seats span:nth-child(n+101) { display: none; }
  .sv-band { padding: 30px 22px; }
  .sv-band .sv-btn { width: 100%; }
  .sv-invoice { padding: 22px 18px; }
  .sv-stamp { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { animation: none !important; transition: none !important; }
  .sv-road { stroke-dashoffset: 0; }
  .sv-invoice-lines li { visibility: visible; }
}
.sv-scene svg { overflow: visible; }

/* ---------- Case studies (/case-studies/) ---------- */
.sv-cs-hero { padding-bottom: 90px; }
.sv-cs-hero .sv-hero-copy { max-width: 900px; }
.sv-cs-title { font-size: clamp(36px, 4.6vw, 60px); }
.sv-cs-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-cs-facts li { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 10px 14px; }
.sv-cs-facts span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8fc1ff; }
.sv-cs-facts b { font-size: 15px; }
.sv-cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: -50px; position: relative; z-index: 2; }
.sv .sv-cs-card { background: #ffffff; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; box-shadow: 0 24px 50px -30px rgba(0, 51, 102, .55); transition: transform .45s var(--sv-ease); }
.sv-cs-card:hover { transform: translateY(-6px); }
.sv-cs-card h2 { font-size: 22px; font-weight: 900; color: var(--sv-navy); line-height: 1.25; }
.sv-cs-card p { color: var(--sv-text); line-height: 1.6; }
.sv-cs-meta { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-blue); }
.sv-cs-go { margin-top: auto; font-weight: 800; color: var(--sv-navy); }
.sv-cs-iso { position: relative; width: 64px; height: 56px; }
.sv-cs-iso span { position: absolute; left: 8px; width: 48px; height: 26px; background: #8fc1ff; transform: rotateX(55deg) rotateZ(-45deg); border-radius: 4px; box-shadow: 0 6px 0 -1px #166cc3; }
.sv-cs-iso span:nth-child(1) { top: 26px; background: #d6e6f7; }
.sv-cs-iso span:nth-child(2) { top: 14px; }
.sv-cs-iso span:nth-child(3) { top: 2px; background: var(--sv-amber); box-shadow: 0 6px 0 -1px #b86e00; }
.sv-cs-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.sv-cs-step { position: relative; background: #ffffff; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; border-top: 5px solid var(--sv-sky); box-shadow: 0 24px 50px -32px rgba(0, 51, 102, .55); }
.sv-cs-step:nth-child(2) { border-top-color: var(--sv-blue); }
.sv-cs-step h2 { font-size: 24px; font-weight: 900; color: var(--sv-navy); }
.sv-cs-step p { color: var(--sv-text); line-height: 1.75; }
.sv-cs-step--result { background: linear-gradient(160deg, #002b55, #003a73); border-top-color: var(--sv-amber); }
.sv-cs-step--result h2, .sv-cs-step--result p { color: #ffffff; }
.sv-cs-step--result .sv-phase-num { color: #ffd28a; }
.sv-cs-points { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.sv-cs-points li { display: flex; gap: 10px; align-items: baseline; color: #e4efff; font-weight: 700; }
.sv-cs-points i { color: #5fd3a5; }
.sv-cs-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -16px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--sv-amber); color: #1b1300; font-weight: 900; display: flex; align-items: center; justify-content: center; z-index: 2; }
.sv-cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sv-cs-tags li { font-size: 13px; font-weight: 700; color: var(--sv-navy); border: 1px solid #cfe0f2; border-radius: 999px; padding: 6px 12px; background: #ffffff; }
.sv-preview-bar { background: #fff3dd; color: #7a4a00; text-align: center; font-weight: 700; padding: 10px 16px; }
@media (max-width: 1000px) {
  .sv-cs-story { grid-template-columns: minmax(0, 1fr); }
  .sv-cs-step:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -16px; margin: 0 0 0 -14px; }
}