/* ZionStar website — responsive layout helpers on top of the design system */

/* AI-first violet accent system + glassmorphism (layered over the ZionStar brand) */
:root {
  --text-eyebrow: 600 12.5px/1.3 var(--font-body);
  --tracking-eyebrow: 0.12em;
  --zs-violet-50:#F4F0FE; --zs-violet-100:#E9E0FD; --zs-violet-200:#D6C6FB; --zs-violet-300:#B99CF7;
  --zs-violet-400:#9B71F0; --zs-violet-500:#8250E6; --zs-violet-600:#6D34D6; --zs-violet-700:#5A27B3; --zs-violet-800:#431C86;
  --zs-label: var(--zs-violet-600);        /* small-label accent on light surfaces */
  --zs-label-on-dark: var(--zs-violet-300); /* small-label accent on dark surfaces */
  /* glassmorphism */
  --zs-glass-bg: rgba(255,255,255,0.55);
  --zs-glass-border: rgba(255,255,255,0.62);
  --zs-glass-blur: saturate(160%) blur(16px);
  --zs-glass-dark-bg: rgba(24,17,64,0.44);
  --zs-glass-dark-border: rgba(183,156,247,0.24);
  /* AI gradient + glow */
  --zs-grad-ai: linear-gradient(120deg, #6D34D6 0%, #2447C9 55%, #0FB5D8 100%);
  --zs-grad-violet: linear-gradient(120deg, #7C3AED, #2447C9);
  --zs-glow-violet: rgba(130,80,230,0.45);
  /* purple-infused ink for all dark sections + footer */
  --gradient-ink: linear-gradient(158deg, #101534 0%, #0B1633 55%, #0A1A40 100%);
  --thread: linear-gradient(90deg, #7C3AED, #2447C9, #0FB5D8);
  /* purple→blue blend accents (replace solid blue UI) */
  --zs-iris-600: #5638DE; --zs-iris-500: #6A52E6; --zs-iris-400: #9B84F2;
  --zs-grad-ib: linear-gradient(120deg, #6D34D6, #2A6BE6);
  /* warm complementary accent — reserved for proof numerals + primary conversion */
  --zs-rose-600: #D6336C;
  --zs-warm-400: #F0975A;
  --zs-grad-warm: linear-gradient(110deg, #F5B85F 0%, #E86A5A 48%, #D6336C 100%);
  --zs-grad-icon: linear-gradient(135deg, #7C3AED 0%, #4653E0 48%, #2A6BE6 78%, #18A8D8 118%);
  --zs-grad-orange: linear-gradient(112deg, #F9B455 0%, #F08A4E 52%, #E8635A 100%);
  /* repoint solid-blue accents + light-blue surfaces to the blend */
  --brand-primary: var(--zs-iris-600);
  --blue-600: #4a53d8;
  --blue-700: #4230b8;
  --surface-subtle: #F4F5FC;
  --surface-brand-tint: #EAEDFB;
  --atmo-base: #ffffff;
  --blue-50: #EBEFFB;
}
.zs-thread { background: var(--thread); }
.zs-sc-tag { color: var(--zs-label) !important; }
/* glass utilities */
.zs-glass { background: var(--zs-glass-bg); backdrop-filter: var(--zs-glass-blur); -webkit-backdrop-filter: var(--zs-glass-blur); border: 1px solid var(--zs-glass-border); }
.zs-glass-dark { background: var(--zs-glass-dark-bg); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border: 1px solid var(--zs-glass-dark-border); }

.zs-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.zs-split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.zs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.zs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1080px) {
  .zs-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .zs-split, .zs-split-even { grid-template-columns: 1fr; gap: 40px; }
  .zs-grid-3 { grid-template-columns: 1fr 1fr; }
  .zs-nav-links { display: none !important; }
}
@media (max-width: 680px) {
  .zs-grid-3, .zs-grid-2, .zs-grid-4 { grid-template-columns: 1fr; }
}

/* Nav dropdown */
.zs-nav-group { position: relative; }
.zs-nav-drop {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 248px;
  background: rgba(252,251,255,0.94); backdrop-filter: saturate(165%) blur(24px); -webkit-backdrop-filter: saturate(165%) blur(24px);
  border: 1px solid rgba(183,156,247,0.32);
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px -24px rgba(24,17,64,0.35), 0 2px 10px rgba(24,17,64,0.06);
  padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 60;
}
.zs-nav-drop a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--text-body); text-decoration: none;
  transition: background var(--duration-fast, 150ms) var(--ease-out);
}
.zs-nav-drop a:hover { background: var(--surface-subtle); color: var(--brand-primary); }
.zs-nav-drop .zs-drop-head {
  padding: 8px 12px 4px; font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}

a { text-decoration: none; color: inherit; }
main a.zs-link { color: var(--zs-iris-600); font-weight: 600; }
main a.zs-link:hover { background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Editorial rows — hover states for hairline lists */
.zs-svc-link { transition: color var(--duration-fast, 150ms) var(--ease-out); }
.zs-svc-link:hover { color: var(--brand-primary) !important; }
/* Home split-canvas: diagonal seam on the bleeding photo */
.zs-canvas-img { clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%); }
/* Services directory tiles */
.zs-dir-tile { transition: transform var(--duration-standard,250ms) var(--ease-out), box-shadow var(--duration-standard,250ms) var(--ease-out), border-color var(--duration-standard,250ms) var(--ease-out); }
.zs-dir-tile:hover { transform: translateY(-3px); }
.zs-dir-link { transition: color var(--duration-fast,150ms) var(--ease-out); }
.zs-dir-link:hover { color: var(--brand-primary) !important; }
/* Home "Horizon" hero — crafted entrance motion + pointer parallax */
.zs-horizon-h1 .zs-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.06em; }
.zs-horizon-h1 .zs-line-in { display: block; transform: translateY(114%); animation: zs-line-rise 0.95s var(--ease-out) forwards; }
.zs-horizon-h1 .zs-line:nth-child(1) .zs-line-in { animation-delay: 0.12s; }
.zs-horizon-h1 .zs-line:nth-child(2) .zs-line-in { animation-delay: 0.26s; }
@keyframes zs-line-rise { to { transform: translateY(0); } }
.zs-rise2 { opacity: 0; transform: translateY(20px); filter: blur(8px); animation: zs-rise2 0.85s var(--ease-out) forwards; }
@keyframes zs-rise2 { to { opacity: 1; transform: none; filter: blur(0); } }
.zs-crest { stroke-dasharray: 1900; stroke-dashoffset: 1900; animation: zs-crest-draw 1.6s var(--ease-out) 0.5s forwards; }
@keyframes zs-crest-draw { to { stroke-dashoffset: 0; } }
.zs-horizon-hero .zs-field, .zs-fg-ridge, .zs-hero-glow, .zs-hero-bg { transition: transform 0.4s var(--ease-out); will-change: transform; }
/* Rotating capability phrase — masked rise on each swap */
.zs-rot-mask { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.06em; }
.zs-rot-word { display: inline-block; color: var(--cyan-300); animation: zs-rot-in 0.6s var(--ease-out); }
@keyframes zs-rot-in { from { transform: translateY(108%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .zs-horizon-h1 .zs-line-in, .zs-marq-h1 .zs-line-in { transform: none; animation: none; }
  .zs-rise2 { opacity: 1; transform: none; filter: none; animation: none; }
  .zs-crest { stroke-dashoffset: 0; animation: none; }
  .zs-rot-word { animation: none; }
}

/* About timeline + team department rows */
.zs-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.zs-dept-row { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; }
/* Footer directory */
.zs-foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 48px; }
.zs-foot-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.zs-foot-sitemap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 28px; }
.zs-foot-dirlink { transition: color var(--duration-fast,150ms) var(--ease-out); }
.zs-foot-dirlink:hover { color: #fff !important; }
.zs-foot-navlink { width: fit-content; transition: opacity var(--duration-fast,150ms) var(--ease-out), transform var(--duration-fast,150ms) var(--ease-out); }
.zs-foot-navlink:hover { opacity: 1 !important; transform: translateX(3px); background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 680px) { .zs-cta-glass { padding: 44px 24px !important; } }
.zs-foot-office { position: relative; overflow: hidden; transition: border-color var(--duration-standard,250ms) var(--ease-out), transform var(--duration-standard,250ms) var(--ease-out); }
.zs-foot-office:hover { border-color: rgba(130,80,230,0.42); transform: translateY(-2px); }
.zs-foot-cta { transition: transform var(--duration-fast,150ms) var(--ease-out), filter var(--duration-fast,150ms) var(--ease-out); }
.zs-foot-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ── Unified pill buttons (no shadows) — shared hover language with the navbar ── */
.zs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; letter-spacing: -0.006em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden; text-decoration: none; white-space: nowrap; transition: background var(--duration-standard,250ms) var(--ease-out), color var(--duration-standard,250ms) var(--ease-out), border-color var(--duration-standard,250ms) var(--ease-out), transform var(--duration-fast,150ms) var(--ease-out); }
.zs-btn:hover { transform: translateY(-2px); }
.zs-btn:active { transform: scale(0.975); }
.zs-btn:focus-visible { outline: 2px solid var(--zs-label); outline-offset: 2px; }
.zs-btn-sm { padding: 8px 16px; font-size: 14px; }
.zs-btn-md { padding: 11px 22px; font-size: 15px; }
.zs-btn-lg { padding: 14px 28px; font-size: 16px; }
.zs-btn-primary { background: var(--zs-grad-violet); color: #fff; }
.zs-btn-primary:hover { background: linear-gradient(120deg, #8250E6, #2E58E6); border-color: var(--zs-violet-300); }
.zs-btn-secondary { background: var(--surface-card); color: var(--text-heading); border-color: var(--border-strong); }
.zs-btn-secondary:hover { background: var(--zs-violet-50); border-color: var(--zs-violet-400); color: var(--zs-violet-700); }
.zs-btn-ghost { background: transparent; color: var(--text-body); }
.zs-btn-ghost:hover { background: var(--zs-violet-50); border-color: var(--zs-violet-400); }
.zs-btn-inverse { background: #fff; color: var(--zs-violet-700); }
.zs-btn-inverse:hover { background: var(--zs-violet-50); border-color: var(--zs-violet-400); }
.zs-btn-ondark { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.28); }
.zs-btn-ondark:hover { background: rgba(183,156,247,0.18); border-color: var(--zs-violet-300); }
.zs-btn-danger { background: var(--red-600); color: #fff; }
.zs-btn-danger:hover { background: var(--red-700); }
/* premium shine sweep — shared by buttons, nav items, footer CTA */
.zs-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 55%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent); transform: translateX(-180%); pointer-events: none; }
.zs-btn:hover .zs-sweep, .zs-foot-cta:hover .zs-sweep { transform: translateX(320%); transition: transform 0.6s var(--ease-out); }

/* ── Minimal, premium nav items (gradient underline, no button fill) ── */
.zs-navitem { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 6px; font-size: 14.5px; font-weight: 600; font-family: var(--font-body); cursor: pointer; color: var(--text-body); background: none; border: none; transition: color var(--duration-standard,250ms) var(--ease-out); }
.zs-navitem::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px; background: var(--zs-grad-ib); transform: scaleX(0); transform-origin: center; transition: transform var(--duration-standard,250ms) var(--ease-out); }
.zs-navitem:hover { color: var(--zs-iris-600); }
.zs-navitem:hover::after, .zs-navitem.active::after { transform: scaleX(1); }
.zs-navitem.active { color: var(--zs-iris-600); }
.zs-navbar-spectrum { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(29,91,230,0.35), rgba(15,181,216,0.35) 45%, rgba(130,80,230,0.4) 70%, transparent); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .zs-sweep { display: none; } }

/* ── AI hero backdrops ── */
.zs-aibd { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zs-aibd-blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.zs-aibd-blob.a { width: 44%; height: 60%; top: -18%; left: -10%; background: radial-gradient(circle, rgba(110,70,220,0.17), transparent 68%); animation: zs-aibd-drift 16s var(--ease-in-out) infinite alternate; }
.zs-aibd-blob.b { width: 48%; height: 64%; bottom: -24%; right: -12%; background: radial-gradient(circle, rgba(42,107,230,0.15), transparent 68%); animation: zs-aibd-drift 20s var(--ease-in-out) infinite alternate-reverse; }
@keyframes zs-aibd-drift { to { transform: translate(4%, 6%) scale(1.08); } }
.zs-aibd-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(86,56,222,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(42,107,230,0.07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(95% 80% at 50% 0%, #000 28%, transparent 76%); mask-image: radial-gradient(95% 80% at 50% 0%, #000 28%, transparent 76%); }
.zs-aibd-orbits { position: absolute; top: -170px; right: -150px; width: 540px; height: 540px; }
.zs-aibd-orbits span { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(86,56,222,0.18); inset: 0; animation: zs-spin 90s linear infinite; }
.zs-aibd-orbits .o2 { inset: 74px; border-color: rgba(42,107,230,0.18); animation-duration: 64s; animation-direction: reverse; }
.zs-aibd-orbits .o3 { inset: 152px; border-color: rgba(15,181,216,0.2); animation-duration: 48s; }
.zs-aibd-mesh { position: absolute; inset: 0; width: 100%; height: 100%; }
.zs-aibd-mesh .drift1 { animation: zs-aibd-sway 14s var(--ease-in-out) infinite alternate; }
.zs-aibd-mesh .drift2 { animation: zs-aibd-sway 18s var(--ease-in-out) infinite alternate-reverse; }
@keyframes zs-aibd-sway { to { transform: translate(-14px, 10px); } }
@media (prefers-reduced-motion: reduce) { .zs-aibd-blob, .zs-aibd-orbits span, .zs-aibd-mesh g { animation: none !important; } }

/* Product demo micro-interactions */
.zs-demo-bar { transform-origin: bottom; animation: zs-demo-bar 3.6s var(--ease-in-out) infinite; }
@keyframes zs-demo-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } }
.zs-meter { animation: zs-meter 1.4s var(--ease-out) both; }
@keyframes zs-meter { from { width: 0; } to { width: 65%; } }
.zs-barw { transform-origin: left; animation: zs-barw 0.9s var(--ease-out) both; }
@keyframes zs-barw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.zs-chartline { stroke-dasharray: 900; stroke-dashoffset: 900; animation: zs-draw 1.5s var(--ease-out) 0.2s forwards; }
.zs-chartline-d { opacity: 0; animation: zs-demo-fade 0.7s var(--ease-out) 0.9s forwards; }
.zs-demo-band { opacity: 0; animation: zs-demo-fade 0.8s var(--ease-out) 1s forwards; }
.zs-scr { position: absolute; inset: 0; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.zs-scr.in { opacity: 1; transform: none; }
.zs-scr.out-l { opacity: 0; transform: translateX(-24px); pointer-events: none; }
.zs-scr.out-r { opacity: 0; transform: translateX(24px); pointer-events: none; }
.zs-cursor { position: absolute; z-index: 5; transition: left 0.85s var(--ease-in-out), top 0.85s var(--ease-in-out); filter: drop-shadow(0 3px 6px rgba(24,17,64,0.4)); pointer-events: none; }
.zs-cursor-ring { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--zs-iris-600); transform: translate(-50%, -50%); animation: zs-cursor-ring 0.5s var(--ease-out); }
@keyframes zs-cursor-ring { from { opacity: 0.8; transform: translate(-50%, -50%) scale(0.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
.wt-stage { position: relative; height: 412px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(86,56,222,0.18); background: linear-gradient(180deg, #fff, #FAFAFE); box-shadow: 0 24px 60px -30px rgba(24,17,64,0.4); }
.wt-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid rgba(86,56,222,0.1); background: #ffffff; }
.wt-dot { width: 9px; height: 9px; border-radius: 50%; }
.wt-url { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-family: var(--font-body); font-size: 11px; color: var(--text-muted); background: var(--surface-subtle); border-radius: 999px; padding: 3px 12px; }
.wt-cam { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; transition: transform 0.95s var(--ease-in-out); }
.wt-screen { position: absolute; inset: 0; padding: 15px 16px; opacity: 0; transform: scale(0.985); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); pointer-events: none; overflow: hidden; }
.wt-screen.in { opacity: 1; transform: none; pointer-events: auto; }
.wt-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: rgba(255,255,255,0.6); border: 1px solid rgba(86,56,222,0.12); transition: border-color 0.25s, background 0.25s; }
.wt-alert { border-color: rgba(229,72,77,0.28); background: rgba(229,72,77,0.05); }
.wt-back { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--zs-iris-600); }
.zs-hl { background: linear-gradient(120deg, rgba(124,58,237,0.18), rgba(42,107,230,0.18)); color: var(--text-heading); border-radius: 4px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.zs-demo-progress { width: 75%; animation: zs-demo-prog 6s var(--ease-in-out) infinite alternate; }
@keyframes zs-demo-prog { from { width: 62%; } to { width: 78%; } }
.zs-demo-msg { animation: zs-demo-fade 0.55s var(--ease-out); }
@keyframes zs-demo-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zs-demo-toast { animation: zs-demo-toast 9s var(--ease-in-out) infinite; opacity: 0; }
@keyframes zs-demo-toast { 0%, 62% { opacity: 0; transform: translateX(26px); } 68%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateX(26px); } }
.zs-demo-pop { animation: zs-demo-fade 0.45s var(--ease-out); }
.zs-typing { display: inline-flex; gap: 5px; align-items: center; min-height: 20px; }
.zs-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--zs-iris-400); animation: zs-typing 1.1s var(--ease-in-out) infinite; }
.zs-typing i:nth-child(2) { animation-delay: 0.18s; }
.zs-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes zs-typing { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.zs-caret { display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--zs-iris-600); animation: zs-caret 0.8s steps(1) infinite; }
@keyframes zs-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zs-demo-bar, .zs-demo-progress, .zs-demo-msg, .zs-demo-toast, .zs-demo-pop, .zs-typing i, .zs-caret { animation: none; } .zs-demo-toast { opacity: 0; } }

/* FlowAccent — same motion system as the home current */
.zs-flowacc { pointer-events: none; animation: zs-lm-bob 11s var(--ease-in-out) infinite alternate; }
.zs-flowacc .fa-rib { transform-origin: 600px 300px; animation: zs-lm-g 22s var(--ease-in-out) infinite alternate; }
.zs-flowacc .fa-g0 { transform-origin: 600px 300px; animation: zs-lm-0 13s var(--ease-in-out) infinite alternate; }
.zs-flowacc .fa-g1 { transform-origin: 600px 300px; animation: zs-lm-1 17s var(--ease-in-out) infinite alternate; }
.zs-flowacc .fa-g2 { transform-origin: 600px 300px; animation: zs-lm-2 21s var(--ease-in-out) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .zs-flowacc, .zs-flowacc .fa-rib, .zs-flowacc .fa-g0, .zs-flowacc .fa-g1, .zs-flowacc .fa-g2 { animation: none; } }

/* "Aurora Loom" v3 — clean current: flow-following ribbon fills + fluid fibers */
.zs-flowbg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform: translate3d(calc(var(--px) * -1), calc(var(--py) * -1), 0); transition: transform 0.4s var(--ease-out); }
.zs-flowbg-edge { position: absolute; inset: 0; width: 100%; height: 100%; animation: zs-lm-bob 11s var(--ease-in-out) infinite alternate; }
.zs-flowbg .ns-rib { transform-origin: 1040px 350px; animation: zs-lm-g 22s var(--ease-in-out) infinite alternate; }
.zs-flowbg .ns-g0 { transform-origin: 1040px 350px; animation: zs-lm-0 13s var(--ease-in-out) infinite alternate; }
.zs-flowbg .ns-g1 { transform-origin: 1040px 350px; animation: zs-lm-1 17s var(--ease-in-out) infinite alternate; }
.zs-flowbg .ns-g2 { transform-origin: 1040px 350px; animation: zs-lm-2 21s var(--ease-in-out) infinite alternate; }
@keyframes zs-lm-bob { to { transform: translate(7px, -9px); } }
@keyframes zs-lm-g { to { transform: translate(18px, -14px) rotate(1.1deg); } }
@keyframes zs-lm-0 { to { transform: translate(-26px, 18px) rotate(-1.7deg) skewX(0.6deg); } }
@keyframes zs-lm-1 { to { transform: translate(20px, -22px) rotate(1.4deg) skewX(-0.5deg); } }
@keyframes zs-lm-2 { to { transform: translate(-16px, 26px) rotate(1.9deg) skewX(0.4deg); } }
@media (prefers-reduced-motion: reduce) { .zs-flowbg .ns-rib, .zs-flowbg .ns-g0, .zs-flowbg .ns-g1, .zs-flowbg .ns-g2, .zs-flowbg-edge { animation: none; } }

/* Home "light-field" hero backdrop */
.zs-aura { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zs-aura-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zs-aura .flow { stroke-dasharray: 130 1500; animation: zs-aura-flow 16s linear infinite; }
.zs-aura .flow.f2 { animation-duration: 21s; animation-delay: -7s; }
@keyframes zs-aura-flow { from { stroke-dashoffset: 1630; } to { stroke-dashoffset: 0; } }
.zs-aura .pt { animation: zs-live 4.5s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .zs-aura .flow, .zs-aura .pt { animation: none; } }

/* Home stage scene-4 glass console */
.zs-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zs-iris-600); animation: zs-live 2s var(--ease-in-out) infinite; }
@keyframes zs-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.zs-sc4-panel { opacity: 0; transform: translateY(18px) scale(0.97); }
.zs-stage[data-scene="4"] .zs-sc4-panel { animation: zs-pop2 0.7s var(--ease-out) 0.3s both; }
.zs-sc4-line { stroke-dasharray: 560; stroke-dashoffset: 560; }
.zs-stage[data-scene="4"] .zs-sc4-line { animation: zs-draw 1.4s var(--ease-out) 0.6s forwards; }
.zs-sc4-area { opacity: 0; }
.zs-stage[data-scene="4"] .zs-sc4-area { animation: zs-fade-in 0.9s var(--ease-out) 1.2s both; }
.zs-sc4-chip { animation: zs-chipfloat 6s var(--ease-in-out) infinite alternate; }
@keyframes zs-chipfloat { to { transform: translateY(-7px); } }
@media (max-width: 1080px) { .zs-sc4-grid { grid-template-columns: 1fr !important; gap: 36px !important; } .zs-sc4-panel { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .zs-sc4-panel, .zs-sc4-area { opacity: 1 !important; transform: none !important; animation: none !important; }
  .zs-sc4-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .zs-sc4-chip, .zs-live-dot { animation: none !important; }
}
.zs-nav-drop a:hover { background: rgba(90,63,224,0.10) !important; color: var(--zs-iris-600) !important; }
@media (max-width: 1080px) { .zs-foot-sitemap { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .zs-foot-sitemap { grid-template-columns: 1fr 1fr; } }
/* The sitemap collapsed for phones but the directory above it never did: at
   375px .zs-foot-top's four tracks need ~456px inside a 311px content box and
   .zs-foot-offices' two tracks are half that again. The footer is
   overflow:hidden, so instead of scrolling the page the last column was simply
   clipped off. Stack both on phones. */
@media (max-width: 720px) {
  .zs-foot-top { grid-template-columns: 1fr; gap: 40px; }
  .zs-foot-offices { grid-template-columns: 1fr; }
}
/* Two 140px sitemap columns can no longer hold link labels like
   "EdTech Software Development" without wrapping every one of them. */
@media (max-width: 460px) { .zs-foot-sitemap { grid-template-columns: 1fr; } }

/* ── Cinematic multi-scene hero stage (white) ── */
.zs-stage { position: relative; overflow: hidden; background: #fff; min-height: max(580px, min(88vh, 760px)); display: flex; }
.zs-stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 36%; opacity: 0.42; filter: saturate(0.98); }
.zs-stage-veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(247,249,254,0.92) 0%, rgba(244,245,253,0.76) 42%, rgba(235,238,251,0.42) 74%, rgba(223,229,248,0.22) 100%); }
.zs-stage-veil::after { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 52% at 82% 12%, rgba(110,70,220,0.10), transparent 70%), radial-gradient(52% 48% at 8% 90%, rgba(29,91,230,0.08), transparent 70%), linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(244,246,254,0.62) 100%); }
.zs-stage-geo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zs-geo-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(29,91,230,0.14); }
.zs-geo-ring-1 { width: 540px; height: 540px; right: -130px; top: -130px; animation: zs-spin 44s linear infinite; }
.zs-geo-ring-2 { width: 360px; height: 360px; right: -46px; top: -34px; border-color: rgba(15,181,216,0.16); animation: zs-spin 34s linear infinite reverse; }
.zs-geo-tri { position: absolute; opacity: 0.8; }
.zs-geo-tri-1 { width: 120px; height: 120px; left: 6%; bottom: 9%; animation: zs-float 9s var(--ease-in-out) infinite alternate; }
.zs-geo-tri-2 { width: 80px; height: 80px; left: 15%; top: 16%; animation: zs-float 12s var(--ease-in-out) infinite alternate; }
@keyframes zs-spin { to { transform: rotate(360deg); } }
@keyframes zs-float { to { transform: translateY(-18px) rotate(8deg); } }

.zs-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 26px; padding: 36px 24px; box-sizing: border-box; opacity: 0; transform: var(--zs-exit, scale(0.985) translateY(10px)); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); pointer-events: none; }
.zs-sc0 { --zs-exit: translateY(-26px) scale(0.98); }
.zs-sc1 { --zs-exit: translateX(-46px); }
.zs-sc2 { --zs-exit: scale(0.9); }
.zs-sc3 { --zs-exit: translateY(26px) scale(0.98); }
.zs-stage[data-scene="0"] .zs-sc0,
.zs-stage[data-scene="1"] .zs-sc1,
.zs-stage[data-scene="2"] .zs-sc2,
.zs-stage[data-scene="3"] .zs-sc3,
.zs-stage[data-scene="4"] .zs-sc4 { opacity: 1; transform: none; }
.zs-stage[data-scene="4"] .zs-sc4 { pointer-events: auto; }
.zs-sc4 { align-items: flex-start; text-align: left; padding-bottom: 96px !important; }
.zs-sc-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--text-heading); font-size: clamp(28px, 3.8vw, 52px); line-height: 1.05; max-width: 860px; }
.zs-sc-tag { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-primary); font-size: 14px; }

/* Scene 0 */
.zs-sc0-mark { width: 100px; filter: drop-shadow(0 12px 34px rgba(29,91,230,0.28)); }
.zs-sc0-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6.2vw, 92px); letter-spacing: -0.03em; color: var(--text-heading); }
.zs-stage[data-scene="0"] .zs-sc0-mark { animation: zs-pop 0.85s var(--ease-out) both; }
.zs-stage[data-scene="0"] .zs-sc0-word { animation: zs-rise 0.7s var(--ease-out) 0.15s both; }
.zs-stage[data-scene="0"] .zs-sc-tag { animation: zs-rise 0.7s var(--ease-out) 0.3s both; }
@keyframes zs-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes zs-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Scene 1 — orbit */
.zs-orbit { position: relative; width: 270px; height: 270px; }
.zs-orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(29,91,230,0.18); }
.zs-orbit-ring-b { inset: 42px; border-color: rgba(15,181,216,0.22); }
.zs-orbit-core { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px; border-radius: 50%; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 34px rgba(29,91,230,0.38); }
.zs-orbit-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--blue-600); }
.zs-od-0 { transform: rotate(0deg) translateX(125px); }
.zs-od-1 { transform: rotate(72deg) translateX(125px); background: var(--cyan-500, #12A5C9); }
.zs-od-2 { transform: rotate(144deg) translateX(125px); background: #F5AF43; }
.zs-od-3 { transform: rotate(216deg) translateX(125px); background: #EF6752; }
.zs-od-4 { transform: rotate(288deg) translateX(125px); }
.zs-stage[data-scene="1"] .zs-orbit { animation: zs-spin 22s linear infinite; }
.zs-stage[data-scene="1"] .zs-orbit-core { animation: zs-spin 22s linear infinite reverse, zs-pop 0.7s var(--ease-out) both; }

/* Scene 2 — constellation */
.zs-const { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 720px; }
.zs-const-node { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 24px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(16px) scale(0.9); }
.zs-const-node em { font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--text-heading); }
.zs-stage[data-scene="2"] .zs-const-node { animation: zs-pop2 0.6s var(--ease-out) both; animation-delay: calc(var(--i) * 0.1s); }
@keyframes zs-pop2 { to { opacity: 1; transform: none; } }

/* Scene 3 — momentum graph */
.zs-graph { position: relative; width: min(520px, 80vw); height: 180px; display: flex; align-items: flex-end; gap: 14px; }
.zs-bar { flex: 1; height: var(--h); background: var(--blue-100); border-radius: 8px 8px 0 0; transform-origin: bottom; }
.zs-graph .zs-bar:nth-child(2) { background: rgba(15,181,216,0.4); }
.zs-graph .zs-bar:nth-child(4) { background: rgba(130,80,230,0.55); }
.zs-graph .zs-bar:nth-child(5) { background: rgba(239,103,82,0.4); }
.zs-bar:last-child { background: var(--gradient-brand); }
.zs-graph-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zs-graph-line path { stroke-dasharray: 700; stroke-dashoffset: 700; }
.zs-stage[data-scene="3"] .zs-bar { animation: zs-bar-grow 0.7s var(--ease-out) both; animation-delay: calc(var(--i) * 0.08s); }
@keyframes zs-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.zs-stage[data-scene="3"] .zs-graph-line path { animation: zs-draw 1.1s var(--ease-out) 0.35s forwards; }
@keyframes zs-draw { to { stroke-dashoffset: 0; } }

/* Scene 4 — final hero accent: shimmering gradient on the rotating phrase */
.zs-sc4 .zs-rot-word { background: linear-gradient(110deg, #6D34D6 20%, #2A6BE6 40%, #0FB5D8 50%, #2A6BE6 60%, #6D34D6 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: zs-rot-in 0.6s var(--ease-out), zs-shimmer 5.5s linear infinite; }
@keyframes zs-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Pointer spotlight + parallax */
.zs-stage { --mx: 50%; --my: 38%; --px: 0px; --py: 0px; }
.zs-spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(340px 300px at var(--mx) var(--my), rgba(110,70,220,0.10), rgba(224,102,140,0.045) 38%, rgba(42,107,230,0.05) 55%, transparent 72%); }
.zs-aura-svg { transform: translate3d(calc(var(--px) * -1), calc(var(--py) * -1), 0); transition: transform 0.35s var(--ease-out); }

/* Border-beam badge */
.zs-beam-badge { position: relative; display: inline-flex; padding: 1.5px; border-radius: 999px; overflow: hidden; background: rgba(86,56,222,0.16); }
.zs-beam { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 68%, #7C3AED 82%, #2A6BE6 92%, transparent 100%); animation: zs-beam-spin 4.5s linear infinite; }
@keyframes zs-beam-spin { to { transform: rotate(360deg); } }
.zs-beam-inner { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(252,251,255,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Scene-4 layered entrance — staggered blur-rise */
.zs-stage[data-scene="4"] .zs-sc4 > div > * { opacity: 0; transform: translateY(16px); filter: blur(6px); animation: zs-hrise2 0.75s var(--ease-out) forwards; }
.zs-stage[data-scene="4"] .zs-sc4 > div > *:nth-child(1) { animation-delay: 0.05s; }
.zs-stage[data-scene="4"] .zs-sc4 > div > *:nth-child(2) { animation-delay: 0.14s; }
.zs-stage[data-scene="4"] .zs-sc4 > div > *:nth-child(3) { animation-delay: 0.26s; }
.zs-stage[data-scene="4"] .zs-sc4 > div > *:nth-child(4) { animation-delay: 0.38s; }
.zs-stage[data-scene="4"] .zs-sc4 > div > *:nth-child(5) { animation-delay: 0.5s; }
@keyframes zs-hrise2 { to { opacity: 1; transform: none; filter: blur(0); } }

/* Scroll cue */
.zs-scrollcue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; opacity: 0; transition: opacity 0.6s var(--ease-out) 0.9s; }
.zs-stage[data-scene="4"] .zs-scrollcue { opacity: 1; }
.zs-scrollcue-line { width: 1.5px; height: 34px; background: rgba(86,56,222,0.18); position: relative; overflow: hidden; border-radius: 2px; }
.zs-scrollcue-line i { position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: var(--zs-grad-ib); animation: zs-cue 2.2s var(--ease-in-out) infinite; }
@keyframes zs-cue { to { transform: translateY(48px); } }
.zs-scrollcue-txt { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
@media (max-height: 760px) { .zs-scrollcue { display: none; } .zs-sc4 { padding-bottom: 36px !important; } }

/* ── Section design language v2 — OPEN compositions (no containers): glass icon accents, layered ghost numerals, strong type ── */
.zs-tile { position: relative; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; height: 100%; }
/* open capability cell — layered ghost index + glass icon accent, no box */
.zs-feat { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding-top: 6px; }
.zs-feat > * { position: relative; z-index: 1; }
.zs-feat-ghost { position: absolute; top: -6px; right: 2px; z-index: 0; font-family: var(--font-display); font-weight: 800; font-size: 58px; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(110,70,220,0.13); pointer-events: none; user-select: none; }
.zs-feat-title { width: fit-content; transition: color var(--duration-standard,250ms) var(--ease-out); }
.zs-feat:hover .zs-feat-title { color: var(--zs-iris-600); }
.zs-feat:hover .zs-tile-ico { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 16px 32px -12px rgba(86,56,222,0.65), 0 8px 20px -8px rgba(224,102,140,0.3); }
.zs-featrow { display: flex; gap: 16px; align-items: flex-start; }
.zs-prob-row { display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: baseline; padding: 13px 0; }
.zs-prob-num { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-tile-ico { transition: transform var(--duration-standard,250ms) var(--ease-out), box-shadow var(--duration-standard,250ms) var(--ease-out); }

.zs-tile-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; color: #fff;
  background: var(--zs-grad-icon);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -6px 12px rgba(20,10,60,0.16), 0 10px 22px -9px rgba(86,56,222,0.55), 0 4px 14px -6px rgba(34,188,224,0.3); }

/* "Ascent" workflow — steps climb upward left→right; big gradient numerals carry the sequence (no horizontal stepper) */
.zs-ascentflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.zs-ascent-step { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.zs-ascent-num { font-family: var(--font-display); font-weight: 800; font-size: 62px; line-height: 0.9; letter-spacing: -0.045em;
  background: var(--zs-grad-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-ascent-bar { width: 34px; height: 3px; border-radius: 3px; background: var(--zs-grad-orange); opacity: 0.8;
  transition: width var(--duration-standard,250ms) var(--ease-out), opacity var(--duration-standard,250ms) var(--ease-out); }
.zs-ascent-title { width: fit-content; transition: color var(--duration-standard,250ms) var(--ease-out); }
.zs-ascent-step:hover .zs-ascent-bar { width: 58px; opacity: 1; }
.zs-ascent-step:hover .zs-ascent-title { color: var(--zs-iris-600); }
@media (max-width: 1080px) { .zs-ascentflow { grid-template-columns: 1fr 1fr; gap: 36px 30px; } .zs-ascent-step { margin-top: 0 !important; } }
@media (max-width: 620px) { .zs-ascentflow { grid-template-columns: 1fr; } }

/* index rows — borderless, hover wash + gradient underline */
.zs-idx-row { position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 20px; padding: 20px 16px; border-radius: 14px;
  transition: background var(--duration-standard,250ms) var(--ease-out); }
.zs-idx-row::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px; border-radius: 2px; opacity: 0.55; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #6D34D6, #2A6BE6 58%, #18A8D8 84%, #E17BA4); transition: transform var(--duration-standard,250ms) var(--ease-out); }
.zs-idx-row:hover { background: linear-gradient(120deg, rgba(124,58,237,0.07), rgba(42,107,230,0.05)); }
.zs-idx-row:hover::after { transform: scaleX(1); }
.zs-idx-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--zs-violet-300), var(--blue-200)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-idx-row:hover .zs-idx-num { background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-idx-arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; color: var(--text-muted);
  background: rgba(110,70,220,0.09); transition: background var(--duration-standard,250ms) var(--ease-out), color var(--duration-standard,250ms) var(--ease-out), transform var(--duration-standard,250ms) var(--ease-out); }
.zs-idx-row:hover .zs-idx-arrow { background: var(--zs-grad-ib); color: #fff; transform: translateX(4px); }

/* soft feature list (replaces hairline check lists) */
.zs-softrow { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.zs-softrow .zs-tick { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 7px; margin-top: 1px; flex-shrink: 0; color: var(--zs-iris-600);
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(42,107,230,0.15)); }

/* de-lined services index link */
.zs-svc-link { border-radius: 11px; transition: background var(--duration-standard,250ms) var(--ease-out); }
.zs-svc-link:hover { background: linear-gradient(120deg, rgba(124,58,237,0.07), rgba(42,107,230,0.05)); }
.zs-svc-link:hover .zs-svc-arrow { transform: translateX(4px); }
.zs-svc-arrow { transition: transform var(--duration-standard,250ms) var(--ease-out); }
.zs-dir-link { transition: background var(--duration-standard,250ms) var(--ease-out); }
.zs-dir-link:hover { background: linear-gradient(120deg, rgba(124,58,237,0.08), rgba(42,107,230,0.06)); }

/* ── Case study cards — minimal premium, glass metric chip, micro-interactions ── */
.zs-case { position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden; border-radius: 22px; text-decoration: none;
  background: var(--surface-card);
  transition: transform var(--duration-standard,250ms) var(--ease-out); }
.zs-case::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(150deg, rgba(155,113,240,0.65), rgba(42,107,230,0.32) 55%, rgba(15,181,216,0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--duration-standard,250ms) var(--ease-out); }
.zs-case:hover { transform: translateY(-6px); }
.zs-case:hover::before { opacity: 1; }
.zs-case-img { position: relative; height: 206px; overflow: hidden; flex-shrink: 0; }
.zs-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 700ms var(--ease-out); }
.zs-case:hover .zs-case-img img { transform: scale(1.06); }
.zs-case-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17,17,48,0) 44%, rgba(17,17,48,0.30)); }
.zs-case-chip { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.74); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border: 1px solid rgba(255,255,255,0.82);
  box-shadow: 0 8px 20px -10px rgba(24,17,64,0.4); font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--zs-iris-600);
  transition: transform var(--duration-standard,250ms) var(--ease-out); }
.zs-case:hover .zs-case-chip { transform: translateY(-3px); }
.zs-case-cat { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
.zs-case-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-subtle); color: var(--text-muted); transition: background var(--duration-standard,250ms) var(--ease-out), color var(--duration-standard,250ms) var(--ease-out), transform var(--duration-standard,250ms) var(--ease-out); }
.zs-case:hover .zs-case-arrow { background: var(--zs-grad-ib); color: #fff; transform: translateX(3px); }
.zs-case-read { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--text-heading); transition: color var(--duration-standard,250ms) var(--ease-out); }
.zs-case:hover .zs-case-read { color: var(--zs-iris-600); }

/* ── Sublime product demos — app frame, cursor, data animations ── */
.sd-frame { position: relative; display: flex; height: 428px; border-radius: 18px; overflow: hidden;
  background: #ffffff; border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 30px 70px -38px rgba(20,12,51,0.55); font-family: var(--font-body); }
.sd-side { width: 156px; flex-shrink: 0; padding: 16px 12px; display: flex; flex-direction: column; gap: 5px; background: #F8FAFF; border-right: 1px solid rgba(86,56,222,0.1); }
.sd-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.sd-nav.on { background: var(--zs-grad-ib); color: #fff; }
.sd-main { position: relative; flex: 1; padding: 18px 20px; overflow: hidden; }
.sd-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); background: linear-gradient(0deg, rgba(244,240,254,0.9), transparent); text-align: center; }
.sd-cursor { position: absolute; z-index: 40; width: 22px; height: 22px; margin: -2px 0 0 -2px; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(24,17,64,0.35)); transition: left 0.72s var(--ease-in-out), top 0.72s var(--ease-in-out); }
.sd-cursor.tap { transform: scale(0.82); }
.sd-ripple { position: absolute; z-index: 19; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(110,70,220,0.35); pointer-events: none; animation: sd-ripple 0.6s var(--ease-out) forwards; }
@keyframes sd-ripple { from { transform: scale(0.2); opacity: 0.7; } to { transform: scale(1.6); opacity: 0; } }
.sd-rise { opacity: 0; animation: sd-rise 0.55s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes sd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sd-pop { opacity: 0; animation: sd-pop 0.5s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes sd-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.sd-fill { width: 0; animation: sd-fill 1.1s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes sd-fill { to { width: var(--w); } }
.sd-ring-v { stroke-dasharray: var(--c); stroke-dashoffset: var(--c); animation: sd-ring 1.2s var(--ease-out) forwards; animation-delay: var(--d, 200ms); }
@keyframes sd-ring { to { stroke-dashoffset: var(--o); } }
.sd-draw { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: sd-draw 1.5s var(--ease-out) forwards; animation-delay: var(--d, 250ms); }
@keyframes sd-draw { to { stroke-dashoffset: 0; } }
.sd-flowpulse { animation: sd-flowpulse 2.4s var(--ease-in-out) infinite; }
@keyframes sd-flowpulse { 0%,100% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 50% { offset-distance: 100%; opacity: 1; } 62%,100% { opacity: 0; } }
@media (max-width: 560px) { .sd-side { display: none; } .sd-frame { height: 456px; } }
@keyframes sd-blink { 50% { opacity: 0; } }
.sd-brandpop { position: absolute; top: 52px; right: 16px; width: 186px; z-index: 30; background: #fff; border: 1px solid rgba(20,20,50,0.08); border-radius: 14px; padding: 13px 14px; box-shadow: 0 10px 24px -14px rgba(24,17,64,0.25), 0 28px 56px -24px rgba(24,17,64,0.35); animation: sd-brandpop-in 0.45s var(--ease-out); transform-origin: top right; }
@keyframes sd-brandpop-in { from { opacity: 0; transform: translateY(-7px) scale(0.94); } to { opacity: 1; transform: none; } }
.sd-brandpop.out { animation: sd-brandpop-out 0.4s var(--ease-out) forwards; }
@keyframes sd-brandpop-out { to { opacity: 0; transform: translateY(-7px) scale(0.95); } }
@media (prefers-reduced-motion: reduce) { .sd-brandpop { animation: none; } .sd-brandpop.out { animation: none; opacity: 0; } }

/* Sublime demo stage — full-surface brand gradients (unique per demo, no blobs, no glass) */
.sd-stage { position: relative; padding: 20px; border-radius: 26px; overflow: hidden; isolation: isolate; }
.sd-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 46%); }
.sd-tone-hero { background: linear-gradient(135deg, #5B27C9 0%, #3B54DE 52%, #2A6BE6 100%); }
.sd-tone-learner { background: linear-gradient(135deg, #2447C9 0%, #2A6BE6 55%, #18A8D8 100%); }
.sd-tone-builder { background: linear-gradient(135deg, #F9A94B 0%, #EF7B4F 52%, #E0557A 100%); }
.sd-tone-ops { background: linear-gradient(135deg, #7C3AED 0%, #B043BF 55%, #E86A5A 100%); }
.sd-tone-dash { background: linear-gradient(135deg, #4653E0 0%, #7C3AED 55%, #A94BD1 100%); }
.sd-tone-mentor { background: linear-gradient(135deg, #0FA8CF 0%, #2A6BE6 48%, #6D34D6 100%); }
.sd-tone-predict { background: linear-gradient(135deg, #2447C9 0%, #5B27C9 55%, #8B3FD9 100%); }
.sd-tone-outreach { background: linear-gradient(135deg, #F9A94B 0%, #E0557A 52%, #B043BF 100%); }
.sd-tone-forecast { background: linear-gradient(135deg, #1B2A78 0%, #2E58E6 55%, #18A8D8 100%); }
.sd-tone-revenue { background: linear-gradient(135deg, #F08A4E 0%, #B043BF 48%, #2A6BE6 100%); }
.sd-stage .sd-frame { position: relative; z-index: 1; }
/* Sublime LMS page — mockups sit clean on the section, no colored stage panels */
.sd-tone-hero, .sd-tone-learner, .sd-tone-builder, .sd-tone-ops { background: none; padding: 0; border-radius: 18px; overflow: visible; }
.sd-tone-hero::before, .sd-tone-learner::before, .sd-tone-builder::before, .sd-tone-ops::before { display: none; }
.sd-tone-hero .sd-frame, .sd-tone-builder .sd-frame { border-color: rgba(20,20,50,0.08); }
.sd-tone-learner .sd-frame, .sd-tone-ops .sd-frame { border: none; box-shadow: none; }
.sd-tone-builder .sd-frame { box-shadow: 0 1px 2px rgba(24,17,64,0.05), 0 10px 22px -10px rgba(24,17,64,0.12), 0 28px 56px -22px rgba(24,17,64,0.2), 0 56px 100px -44px rgba(60,60,160,0.24); }
.pp-hero-front .sd-tone-hero { box-shadow: none; }

/* Hero story — camera zoom between dashboard & profile layers */
.sd-layer { position: absolute; inset: 0; padding: 18px 20px; box-sizing: border-box; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.sd-layer.out { opacity: 0; transform: scale(1.07); pointer-events: none; }
.sd-layer.out.zoomout { transform: scale(0.94); }
.sd-layer.in { opacity: 1; transform: none; }
@keyframes sd-spin { to { transform: rotate(360deg); } }
.sd-spin { animation: sd-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .sd-layer { transition: none !important; } .sd-spin { animation: none !important; } }

/* ── Site assistant (chatbot) ── */
.zc-launch { position: fixed; z-index: 95; left: 50%; bottom: 20px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 11px; padding: 12px 21px 12px 13px; border: none; border-radius: 999px; overflow: hidden; cursor: pointer; font-family: var(--font-body);
  background: rgba(86,56,222,0.16); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 18px 44px -20px rgba(30,22,80,0.5);
  transition: transform var(--duration-standard,250ms) var(--ease-out), box-shadow var(--duration-standard,250ms) var(--ease-out); animation: zc-launch-in 0.5s var(--ease-out) both; }
.zc-launch:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 26px 56px -22px rgba(30,22,80,0.6); }
@keyframes zc-launch-in { from { opacity: 0; transform: translateX(-50%) translateY(16px); } }
.zc-launch::before { content: ""; position: absolute; top: 50%; left: 50%; width: 680px; height: 680px; margin: -340px 0 0 -340px; background: conic-gradient(from 0deg, transparent 0 68%, #7C3AED 82%, #2A6BE6 92%, transparent 100%); animation: zs-beam-spin 4.5s linear infinite; z-index: 0; pointer-events: none; }
.zc-launch::after { content: ""; position: absolute; inset: 1.5px; border-radius: 999px; background: rgba(252,251,255,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1; pointer-events: none; }
.zc-launch-orb, .zc-launch-txt, .zc-launch-sub { position: relative; z-index: 2; }
.zc-launch-orb { width: 30px; height: 30px; border-radius: 50%; background: var(--zs-grad-ib); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 16px -6px rgba(86,56,222,0.7); }
.zc-launch-txt { font-weight: 700; font-size: 14.5px; color: var(--text-heading); }
.zc-launch-sub { font-size: 12px; color: var(--text-muted); border-left: 1px solid var(--border-default); padding-left: 11px; }

.zc-panel { position: fixed; z-index: 96; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(680px, calc(100vw - 28px)); height: min(72vh, 620px); display: flex; flex-direction: column; overflow: hidden; font-family: var(--font-body);
  background: rgba(252,251,255,0.86); backdrop-filter: saturate(170%) blur(22px); -webkit-backdrop-filter: saturate(170%) blur(22px); border: 1px solid rgba(183,156,247,0.34); border-radius: 22px;
  box-shadow: 0 40px 90px -34px rgba(24,17,64,0.55); animation: zc-panel-in 0.42s var(--ease-out) both; }
@keyframes zc-panel-in { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.98); } }
.zc-head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 13px 16px; border-bottom: 1px solid rgba(86,56,222,0.12); }
.zc-head-orb { width: 30px; height: 30px; border-radius: 9px; background: var(--zs-grad-ib); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zc-head-title { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; letter-spacing: -0.01em; color: var(--text-heading); }
.zc-head-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--zs-iris-600); font-weight: 600; }
.zc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zs-iris-600); box-shadow: 0 0 0 3px rgba(110,70,220,0.15); animation: zs-pulse 2s var(--ease-in-out) infinite; }
.zc-icon-btn { width: 32px; height: 32px; border-radius: 9px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--duration-fast,150ms) var(--ease-out); }
.zc-icon-btn:hover { background: var(--surface-subtle); color: var(--text-heading); }
.zc-body { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 14px; }
.zc-turn { display: flex; gap: 9px; max-width: 100%; }
.zc-turn.user { justify-content: flex-end; }
.zc-avatar { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-brand-tint); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.zc-bubble { max-width: 82%; }
.zc-turn.user .zc-bubble { background: var(--zs-grad-ib); color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 14px; }
.zc-turn.bot .zc-bubble .zc-text { background: #fff; border: 1px solid var(--border-default); border-radius: 14px 14px 14px 4px; padding: 11px 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-body); }
.zc-turn.user .zc-text { font-size: 13.5px; line-height: 1.5; }
/* Assistant replies are parsed into paragraphs / lists (see zcRichText), so an
   enumerated answer reads as a scannable list instead of one wall of text. */
.zc-text .zc-p { margin: 0 0 9px; }
.zc-text .zc-p:last-child { margin-bottom: 0; }
.zc-text .zc-list { margin: 0 0 9px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.zc-text .zc-list:last-child { margin-bottom: 0; }
.zc-text .zc-list li { padding-left: 2px; }
.zc-text .zc-list li::marker { color: var(--zs-iris-600); font-weight: 700; }
.zc-text strong { font-weight: 700; color: var(--text-heading); }
.zc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; color: var(--text-heading); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--duration-fast,150ms) var(--ease-out); }
.zc-chip:hover { border-color: var(--zs-violet-400); background: var(--zs-violet-50); color: var(--zs-violet-700); transform: translateY(-1px); }
.zc-chip-primary { background: var(--zs-grad-ib); border-color: transparent; color: #fff; }
.zc-chip-primary:hover { background: var(--zs-grad-ib); border-color: transparent; color: #fff; filter: brightness(1.06); }
.zc-typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--border-default); border-radius: 14px; }
.zc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--zs-violet-300); animation: zc-typing 1.1s var(--ease-in-out) infinite; }
.zc-typing i:nth-child(2) { animation-delay: 0.15s; } .zc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes zc-typing { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.zc-actions { padding: 10px 14px 12px; border-top: 1px solid rgba(86,56,222,0.1); display: flex; flex-direction: column; gap: 10px; }
.zc-composer { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border-strong); border-radius: 13px; padding: 5px 5px 5px 14px; transition: border-color var(--duration-fast,150ms) var(--ease-out); }
.zc-composer:focus-within { border-color: var(--zs-violet-400); }
.zc-input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-body); font-size: 13.5px; color: var(--text-heading); padding: 8px 0; }
.zc-send { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--zs-grad-ib); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: filter var(--duration-fast,150ms) var(--ease-out); }
.zc-send:hover { filter: brightness(1.08); }
.zc-foot { font-size: 10.5px; color: var(--text-faint); text-align: center; }
.zs-cc-card { transition: transform var(--duration-standard,250ms) var(--ease-out), box-shadow var(--duration-standard,250ms) var(--ease-out), border-color var(--duration-standard,250ms) var(--ease-out); }
.zs-cc-card:hover { transform: translateY(-3px); border-color: var(--zs-violet-400); box-shadow: 0 26px 54px -32px rgba(37,28,96,0.5); }

/* ── Contact hero — abstract orbit backdrop + command menu (no cards) ── */
.zc-contact-hero { position: relative; overflow: hidden; padding: 104px 32px 96px; background: linear-gradient(180deg, #FAFBFF 0%, #F4F3FD 58%, #EEF3FD 100%); }
.zc-cbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.zc-cbg .blob { position: absolute; border-radius: 50%; filter: blur(64px); }
.zc-cbg .b1 { width: 440px; height: 440px; left: -140px; top: -160px; background: radial-gradient(circle, rgba(130,80,230,0.5), transparent 70%); animation: zc-drift1 24s var(--ease-in-out) infinite alternate; }
.zc-cbg .b2 { width: 400px; height: 400px; right: -150px; bottom: -180px; background: radial-gradient(circle, rgba(42,107,230,0.42), transparent 70%); animation: zc-drift2 28s var(--ease-in-out) infinite alternate; }
.zc-cbg .b3 { width: 320px; height: 320px; left: 52%; top: -120px; background: radial-gradient(circle, rgba(15,181,216,0.28), transparent 70%); animation: zc-drift3 32s var(--ease-in-out) infinite alternate; }
@keyframes zc-drift1 { to { transform: translate(60px, 44px) scale(1.12); } }
@keyframes zc-drift2 { to { transform: translate(-52px, -40px) scale(1.1); } }
@keyframes zc-drift3 { to { transform: translate(-40px, 50px) scale(1.15); } }
.zc-rings { position: absolute; right: -9%; top: 50%; width: 660px; height: 660px; margin-top: -330px; opacity: 0.4; }
.zc-rings .r { transform-box: fill-box; transform-origin: center; }
.zc-rings .r1 { animation: zc-cspin 70s linear infinite; }
.zc-rings .r2 { animation: zc-cspin 100s linear infinite reverse; }
.zc-rings .r3 { animation: zc-cspin 130s linear infinite; }
@keyframes zc-cspin { to { transform: rotate(360deg); } }
.zc-shape { position: absolute; border: 1.5px solid rgba(110,70,220,0.16); border-radius: 14px; }
.zc-shape.s1 { width: 56px; height: 56px; left: 13%; top: 24%; animation: zc-sfloat1 16s var(--ease-in-out) infinite alternate; }
.zc-shape.s2 { width: 40px; height: 40px; left: 21%; bottom: 20%; border-radius: 50%; border-color: rgba(42,107,230,0.18); animation: zc-sfloat2 20s var(--ease-in-out) infinite alternate; }
.zc-shape.s3 { width: 70px; height: 70px; right: 15%; bottom: 16%; border-color: rgba(15,181,216,0.16); animation: zc-sfloat1 24s var(--ease-in-out) infinite alternate-reverse; }
@keyframes zc-sfloat1 { from { transform: translateY(0) rotate(16deg); } to { transform: translateY(-22px) rotate(24deg); } }
@keyframes zc-sfloat2 { from { transform: translateY(0) rotate(-12deg); } to { transform: translateY(18px) rotate(-20deg); } }
.zc-fauxbar { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 540px; margin-top: 6px; padding: 8px 8px 8px 14px; border-radius: 999px; border: 1px solid rgba(183,156,247,0.4); cursor: pointer; font-family: var(--font-body); font-size: 14px;
  background: rgba(255,255,255,0.75); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 18px 44px -24px rgba(30,22,80,0.5); transition: transform var(--duration-standard,250ms) var(--ease-out), box-shadow var(--duration-standard,250ms) var(--ease-out); }
.zc-fauxbar:hover { transform: translateY(-2px); box-shadow: 0 26px 56px -26px rgba(30,22,80,0.6); }
.zc-fauxbar-orb, .zc-fauxbar-send { width: 32px; height: 32px; border-radius: 50%; background: var(--zs-grad-ib); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zc-intent-list { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.zs-intent { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 15px; border: none; background: transparent; font: inherit; transition: background var(--duration-standard,250ms) var(--ease-out), transform var(--duration-standard,250ms) var(--ease-out), box-shadow var(--duration-standard,250ms) var(--ease-out); }
.zs-intent:hover { background: rgba(255,255,255,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(-2px); box-shadow: 0 18px 38px -26px rgba(30,22,80,0.45); }
.zs-intent-arrow { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); background: rgba(110,70,220,0.08); transition: background var(--duration-standard,250ms) var(--ease-out), color var(--duration-standard,250ms) var(--ease-out), transform var(--duration-standard,250ms) var(--ease-out); }
.zs-intent:hover .zs-intent-arrow { background: var(--zs-grad-ib); color: #fff; transform: translateX(3px); }
.zc-glass-opt { display: flex; align-items: flex-start; gap: 14px; text-align: left; cursor: pointer; padding: 20px 22px; border-radius: 18px; font: inherit;
  background: rgba(255,255,255,0.55); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(255,255,255,0.72);
  transition: transform var(--duration-standard,250ms) var(--ease-out), border-color var(--duration-standard,250ms) var(--ease-out); }
.zc-glass-opt:hover { transform: translateY(-4px); border-color: var(--zs-violet-300); }
@media (prefers-reduced-motion: reduce) { .zc-cbg .blob, .zc-rings .r, .zc-shape { animation: none !important; } }

/* Pure-white hero canvases (site-wide): kill dialect tints/patterns + generic glow washes;
   keep only each page's own animated backdrop (field/ribbon/flow/AI) on top. */
.zs-hero, .zs-stage { background: #ffffff !important; }
.zs-hero > .zs-hero-fx { display: none !important; }
.zs-stage-veil { background: linear-gradient(100deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.75) 42%, rgba(255,255,255,0.4) 74%, rgba(255,255,255,0.2) 100%) !important; }
.zs-stage-veil::after { background: linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(255,255,255,0.5) 100%) !important; }

/* Pinched converging-ribbon backdrop (About hero) */
.zs-about-hero { background: #ffffff !important; }
.zs-about-hero .zs-field, .zs-about-hero .zs-hero-fx, .zs-about-hero .zs-aibd { display: none !important; }
.zs-plain-hero { background: #ffffff !important; }
.zs-plain-hero .zs-field, .zs-plain-hero .zs-hero-fx, .zs-plain-hero .zs-aibd { display: none !important; }
.zs-about-ribbon { pointer-events: none; overflow: hidden; }
.zs-about-ribbon svg { width: 100%; height: 100%; display: block; }
.zs-about-ribbon .ar-lines { will-change: transform; }
.zs-about-ribbon .ar-flow path { stroke-dasharray: 100 1500; stroke-linecap: round; opacity: 0.85; }
.zs-about-ribbon .ar-flow .f1 { animation: ar-flow 9s linear infinite; }
.zs-about-ribbon .ar-flow .f2 { animation: ar-flow 12s linear infinite; animation-delay: -4s; }
.zs-about-ribbon .ar-flow .f3 { animation: ar-flow 15s linear infinite; animation-delay: -8s; }
@keyframes ar-flow { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
.zs-about-ribbon .ar-node { animation: ar-glow 6.5s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ar-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zs-about-ribbon .ar-lines, .zs-about-ribbon .ar-flow path, .zs-about-ribbon .ar-node { animation: none !important; } }
@media (max-width: 560px) {
  .zc-launch-sub { display: none; }
  .zc-panel { width: 100vw; height: 82vh; left: 0; bottom: 0; transform: none; border-radius: 20px 20px 0 0; }
  @keyframes zc-panel-in { from { opacity: 0; transform: translateY(30px); } }
  .zc-launch { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .zc-launch, .zc-panel { animation: none !important; } .zc-dot, .zc-typing i { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .sd-cursor, .sd-rise, .sd-pop, .sd-fill, .sd-ring-v, .sd-draw, .sd-flowpulse { animation: none !important; transition: none !important; opacity: 1 !important; width: var(--w) !important; } }

/* open product block (home) — no container */
.zs-prod-tile { position: relative; display: flex; flex-direction: column; gap: 16px; height: 100%; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) { .zs-timeline .zs-tl-line { transition: none; transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .zs-sc4 .zs-rot-word { animation: none; }
  .zs-beam { animation: none; }
  .zc-launch::before { animation: none; }
  .zs-stage[data-scene="4"] .zs-sc4 > div > * { opacity: 1; transform: none; filter: none; animation: none; }
  .zs-scrollcue-line i { animation: none; }
  .zs-spot { display: none; }
}

/* colorful ambient blobs */
.zs-geo-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.3; pointer-events: none; }
.zs-geo-blob-a { width: 40%; height: 52%; left: -8%; top: -10%; background: radial-gradient(circle, rgba(110,70,220,0.32), transparent 70%); animation: zs-float2 12s var(--ease-in-out) infinite alternate; }
.zs-geo-blob-b { width: 36%; height: 48%; right: -6%; bottom: -12%; background: radial-gradient(circle, rgba(37,71,201,0.42), transparent 70%); animation: zs-float2 15s var(--ease-in-out) infinite alternate; }
.zs-geo-blob-c { width: 30%; height: 42%; right: 20%; top: 6%; background: radial-gradient(circle, rgba(15,181,216,0.26), transparent 70%); animation: zs-float2 18s var(--ease-in-out) infinite alternate; }
@keyframes zs-float2 { to { transform: translate(6%, 8%) scale(1.12); } }

/* per-letter high-end text animation */
.zs-word { display: inline-block; }
.zs-ch { display: inline-block; }
.zs-sc-title, .zs-sc0-word { perspective: 760px; }
.zs-stage[data-scene="0"] .zs-sc0 .zs-ch { animation: zs-ch-blur 0.6s var(--ease-out) both; animation-delay: calc(var(--ci) * 0.026s); }
.zs-stage[data-scene="1"] .zs-sc1 .zs-ch { animation: zs-ch-rise 0.6s var(--ease-out) both; animation-delay: calc(var(--ci) * 0.024s); }
.zs-stage[data-scene="2"] .zs-sc2 .zs-ch { animation: zs-ch-flip 0.66s var(--ease-out) both; animation-delay: calc(var(--ci) * 0.02s); }
.zs-stage[data-scene="3"] .zs-sc3 .zs-ch { animation: zs-ch-zoom 0.62s var(--ease-out) both; animation-delay: calc(var(--ci) * 0.03s); }
/* highlighted keyword per slide */
.zs-word-hi .zs-ch { color: var(--blue-600); }
.zs-stage[data-scene="1"] .zs-word-hi .zs-ch { color: var(--cyan-500, #12A5C9); }
.zs-stage[data-scene="2"] .zs-word-hi .zs-ch { color: #E8983A; }
.zs-stage[data-scene="3"] .zs-word-hi .zs-ch { color: #EF6752; }
@keyframes zs-ch-zoom { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes zs-ch-blur { from { opacity: 0; transform: scale(1.5); filter: blur(9px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes zs-ch-rise { from { opacity: 0; transform: translateY(0.62em) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes zs-ch-flip { from { opacity: 0; transform: rotateX(-92deg); } to { opacity: 1; transform: none; } }

/* ── Premium scene motion graphics ── */
.zs-viz { width: min(360px, 82vw); height: 150px; display: flex; align-items: center; justify-content: center; }
.zs-viz svg { width: 100%; height: 100%; overflow: visible; }
@keyframes zs-node-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes zs-node-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.24); } }
@keyframes zs-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* mesh */
.zs-mesh-lines line { stroke-dasharray: 220; stroke-dashoffset: 220; }
.zs-stage[data-scene="0"] .zs-mesh-lines line { animation: zs-draw 0.9s var(--ease-out) both; }
.zs-mn { opacity: 0; transform-box: fill-box; transform-origin: center; }
.zs-stage[data-scene="0"] .zs-mn { animation: zs-node-in 0.5s var(--ease-out) both, zs-node-pulse 2.6s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * 0.12s), calc(0.7s + var(--i) * 0.2s); }
/* signal */
.zs-ripple circle { fill: none; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.zs-stage[data-scene="1"] .zs-ripple circle { animation: zs-ripple 2.6s var(--ease-out) infinite; }
.zs-stage[data-scene="1"] .zs-ripple circle:nth-child(2) { animation-delay: 0.55s; }
.zs-stage[data-scene="1"] .zs-ripple circle:nth-child(3) { animation-delay: 1.1s; }
@keyframes zs-ripple { 0% { opacity: 0.6; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.16); } }
.zs-wave { stroke-dasharray: 420; stroke-dashoffset: 420; }
.zs-stage[data-scene="1"] .zs-wave { animation: zs-draw 1s var(--ease-out) 0.2s forwards; }
.zs-signal-core { transform-box: fill-box; transform-origin: center; }
.zs-stage[data-scene="1"] .zs-signal-core { animation: zs-node-pulse 2.2s var(--ease-in-out) infinite; }
/* automation flow */
.zs-flow2-move { stroke-dasharray: 62 260; stroke-dashoffset: 322; }
.zs-stage[data-scene="2"] .zs-flow2-move { animation: zs-flow2 2.2s linear infinite; }
@keyframes zs-flow2 { to { stroke-dashoffset: 0; } }
.zs-flow2-dot { offset-path: path("M24 116 C 96 24, 224 24, 296 116"); offset-distance: 0%; opacity: 0; }
.zs-stage[data-scene="2"] .zs-flow2-dot { animation: zs-flow2-dot 2.4s linear infinite; }
.zs-stage[data-scene="2"] .zs-fd-1 { animation-delay: 0.8s; }
.zs-stage[data-scene="2"] .zs-fd-2 { animation-delay: 1.6s; }
@keyframes zs-flow2-dot { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* data */
.zs-data-area { opacity: 0; }
.zs-stage[data-scene="3"] .zs-data-area { animation: zs-fade-in 0.8s var(--ease-out) 0.5s both; }
.zs-data-line { stroke-dasharray: 520; stroke-dashoffset: 520; }
.zs-stage[data-scene="3"] .zs-data-line { animation: zs-draw 1.1s var(--ease-out) 0.2s forwards; }
.zs-data-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.zs-stage[data-scene="3"] .zs-data-dot { animation: zs-node-in 0.4s var(--ease-out) both; animation-delay: calc(0.7s + var(--i) * 0.14s); }

/* premium polish — glass module + luminous strokes */
.zs-viz { width: min(400px, 84vw); height: 168px; padding: 16px 28px; box-sizing: border-box; background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42)); border: 1px solid rgba(29,91,230,0.14); border-radius: 22px; box-shadow: 0 24px 60px -26px rgba(11,22,51,0.34), inset 0 1px 0 rgba(255,255,255,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.zs-viz svg { filter: drop-shadow(0 8px 22px rgba(29,91,230,0.16)); }
.zs-mn { filter: drop-shadow(0 0 5px rgba(29,91,230,0.45)); }
.zs-mesh-lines line { opacity: 0.92; }
.zs-signal-core { filter: drop-shadow(0 0 12px rgba(15,181,216,0.6)); }
.zs-ripple circle { stroke-width: 1.6; }
.zs-flow2-move { filter: drop-shadow(0 0 7px rgba(15,181,216,0.55)); }
.zs-flow2-dot { filter: drop-shadow(0 0 7px rgba(29,91,230,0.55)); }
.zs-data-line { filter: drop-shadow(0 4px 12px rgba(29,91,230,0.3)); }
.zs-data-dot { filter: drop-shadow(0 0 5px rgba(29,91,230,0.5)); }
@media (prefers-reduced-motion: reduce) {
  .zs-mn, .zs-signal-core, .zs-flow2-dot, .zs-ripple circle, .zs-flow2-move { animation: none; }
}

/* Scene 0 — dataflow */
.zs-flow { position: relative; width: min(560px, 84vw); height: 96px; display: flex; align-items: center; justify-content: space-between; }
.zs-flow-line { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 40px; overflow: visible; }
.zs-flow-line path { stroke-dasharray: 620; stroke-dashoffset: 620; }
.zs-stage[data-scene="0"] .zs-flow-line path { animation: zs-draw 1.2s var(--ease-out) 0.1s forwards; }
.zs-flow-node { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 15px; background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); }
.zs-stage[data-scene="0"] .zs-flow-node { animation: zs-pop 0.5s var(--ease-out) both; animation-delay: calc(0.15s + var(--i) * 0.16s); }
/* Scene 1 — product cards */
.zs-prod { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.zs-prod-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 236px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-md); text-align: left; opacity: 0; transform: translateY(20px) scale(0.96); }
.zs-prod-card b { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-heading); }
.zs-prod-card em { font-style: normal; font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }
.zs-prod-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.zs-stage[data-scene="1"] .zs-prod-card { animation: zs-pop2 0.6s var(--ease-out) both; animation-delay: calc(var(--i) * 0.14s); }
/* Scene 2 — lifecycle pipeline */
.zs-pipe { position: relative; width: min(660px, 90vw); display: flex; justify-content: space-between; padding-top: 6px; }
.zs-pipe::before { content: ""; position: absolute; left: 8px; right: 8px; top: 12px; height: 3px; background: var(--border-default); border-radius: 2px; }
.zs-pipe-fill { position: absolute; left: 8px; top: 12px; height: 3px; width: 0; background: var(--gradient-brand); border-radius: 2px; z-index: 1; }
.zs-stage[data-scene="2"] .zs-pipe-fill { animation: zs-pipe-fill 1.7s var(--ease-out) 0.2s forwards; }
@keyframes zs-pipe-fill { to { width: calc(100% - 16px); } }
.zs-pipe-stop { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--text-muted); opacity: 0; }
.zs-pipe-stop i { width: 15px; height: 15px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--blue-400, #3B82F6); }
.zs-stage[data-scene="2"] .zs-pipe-stop { animation: zs-rise 0.5s var(--ease-out) both; animation-delay: calc(0.2s + var(--i) * 0.22s); }
.zs-pipe-stop:last-child i { background: var(--gradient-brand); border-color: transparent; }
/* Scene 3 — connected systems */
.zs-sys { position: relative; display: flex; gap: 48px; align-items: center; padding: 18px 0; }
.zs-sys::before { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 3px; transform: translateY(-50%) scaleX(0); transform-origin: left; background: var(--gradient-brand); border-radius: 2px; }
.zs-stage[data-scene="3"] .zs-sys::before { animation: zs-linex 0.9s var(--ease-out) 0.25s forwards; }
@keyframes zs-linex { to { transform: translateY(-50%) scaleX(1); } }
.zs-sys-tile { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; width: 112px; padding: 20px 0; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--text-heading); opacity: 0; transform: scale(0.7); }
.zs-stage[data-scene="3"] .zs-sys-tile { animation: zs-pop 0.55s var(--ease-out) both; animation-delay: calc(0.15s + var(--i) * 0.16s); }

@media (max-width: 720px) {
  .zs-stage { min-height: max(560px, 78vh); }
  .zs-sc4 { align-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-geo-ring, .zs-geo-tri { animation: none; }
  .zs-scene { transition: none; }
}
.zs-resource-row { transition: background var(--duration-fast, 150ms) var(--ease-out); }
.zs-resource-row:hover { background: var(--surface-subtle); }
.zs-resource-row:hover span:last-child { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
@media (max-width: 960px) {
  .zs-resource-row { grid-template-columns: 1fr auto !important; }
  .zs-resource-row > span:nth-child(3) { display: none; }
  .zs-role-row { grid-template-columns: 1fr auto !important; }
  .zs-role-row > span:nth-child(2), .zs-role-row > span:nth-child(3) { display: none; }
  .zs-product-split > div { padding: 32px 0 !important; border-left: none !important; }
  .zs-product-split > div + div { border-top: 1px solid var(--border-default); }
  .zs-home-hero-grid { grid-template-columns: 1fr !important; }
  .zs-home-hero-photo { min-height: 320px !important; }
  .zs-home-hero-photo img, .zs-home-hero-photo div { clip-path: none !important; }
  .zs-home-hero2-grid { grid-template-columns: 1fr !important; gap: 52px !important; padding-top: 88px !important; }
  .zs-home-collage { padding-left: 0 !important; max-width: 560px; }
  .zs-cat-strip { grid-template-columns: 1fr !important; }
  .zs-cat-strip > div { border-left: none !important; padding: 18px 0 4px !important; border-top: 1px solid rgba(220,230,250,0.18); }
  .zs-flagship-grid { grid-template-columns: 1fr !important; gap: 56px !important; padding-top: 96px !important; padding-bottom: 100px !important; }
  .zs-flagship-visual { justify-self: start !important; max-width: 440px !important; margin-top: 18px; }
  .zs-service-visual { justify-self: start !important; margin-top: 8px; max-width: 560px !important; }
  .zs-collage { grid-template-columns: 1fr 1fr !important; }
  .zs-hero-keywords { display: none !important; }
  .zs-horizon-body { padding-bottom: 168px !important; }
  .zs-horizon-hero { min-height: 0 !important; }
  .zs-arch-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .zs-arch { justify-self: center !important; max-width: 420px !important; }
  .zs-arch-img { height: 440px !important; border-radius: 190px 190px var(--radius-xl) var(--radius-xl) !important; }
  .zs-bento { grid-auto-rows: 150px !important; }
  .zs-bento-a { grid-column: span 12 !important; }
  .zs-bento-b, .zs-bento-c { grid-column: span 6 !important; }
  .zs-dir-grid { grid-template-columns: 1fr !important; }
  .zs-svc-bento { justify-self: stretch !important; max-width: none !important; min-height: 0 !important; }
  .zs-filmstrip { grid-template-columns: 1fr !important; }
  .zs-masthead-meta { min-width: 0 !important; width: 100%; }
  .zs-cover-h1 { font: var(--text-display-xl) !important; }
  .zs-cover-sub { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .zs-cap-band { grid-template-columns: 1fr !important; }
  .zs-cap-col { border-left: none !important; padding: 26px 0 4px !important; border-top: 1px solid var(--border-default); }
  .zs-portrait { justify-self: start !important; max-width: 520px !important; margin-top: 12px; }
  .zs-featurebar { grid-template-columns: 1fr auto !important; }
  .zs-featurebar > img { display: none; }
  .zs-contact-head { grid-template-columns: 1fr !important; align-items: start !important; }
}

/* ── Premium ascent motion ──
   Layered parallax drift + a slow "breathing" luminance on each ridge (offset phases so
   the mountain feels alive), a soft light sweep that fades in and out instead of a hard
   linear pass, and a barely-perceptible dot-grid drift. Transform/opacity only. */
.zs-field .slope-a {
  animation: zs-slope-a 26s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
.zs-field .slope-b {
  animation: zs-slope-b 36s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
.zs-field .ambient { animation: zs-ambient-pan 48s var(--ease-in-out) infinite alternate; }
.zs-field .summit-glow { animation: zs-glow-breathe 14s var(--ease-in-out) infinite alternate; transform-origin: center; }
/* Aurora color-flow — the ridge fills glide between deep blue and cyan-teal, offset phases */
@keyframes zs-aurora {
  from { filter: hue-rotate(0deg) saturate(1) brightness(1); }
  to   { filter: hue-rotate(30deg) saturate(1.35) brightness(1.15); }
}
.zs-field .grid {
  animation: zs-grid-fade 1.4s var(--ease-out) both,
             zs-grid-drift 70s var(--ease-in-out) infinite alternate;
}
@keyframes zs-ridge-breathe { from { opacity: 0.72; } to { opacity: 1; } }
@keyframes zs-grid-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-24px, 16px, 0); } }
@keyframes zs-ambient-pan { from { transform: translate3d(-160px, 14px, 0); } to { transform: translate3d(320px, -18px, 0); } }

/* Double-layered ascent mountain — counter-parallax drift + flowing gradient tide */
.zs-peak-a {
  animation: zs-peak-drift-a 22s var(--ease-in-out) infinite alternate,
             zs-tide 16s linear infinite;
  will-change: transform, background-position;
}
.zs-peak-b {
  animation: zs-peak-drift-b 30s var(--ease-in-out) infinite alternate,
             zs-tide 24s linear -8s infinite reverse;
  will-change: transform, background-position;
}
.zs-peak-glow { animation: zs-glow-breathe 18s var(--ease-in-out) infinite alternate; will-change: transform, opacity; }
@keyframes zs-tide { from { background-position: 0% 0; } to { background-position: 250% 0; } }
@keyframes zs-peak-drift-a { from { transform: translate3d(-2.2%, 0.7%, 0); } to { transform: translate3d(2.2%, -1%, 0); } }
@keyframes zs-peak-drift-b { from { transform: translate3d(1.8%, -0.6%, 0); } to { transform: translate3d(-1.8%, 0.8%, 0); } }
@keyframes zs-glow-breathe { from { opacity: 0.45; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .zs-peak-a, .zs-peak-b, .zs-peak-glow { animation: none; }
  .zs-field .slope-a, .zs-field .slope-b, .zs-field .ambient, .zs-field .summit-glow, .zs-field .grid { animation: none; }
  .zs-inkfx-blob { animation: none !important; }
}

/* Ink-section AI backdrop — violet + blue aurora over a faint dot grid (no mountains) */
.zs-inkfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zs-inkfx-blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.5; will-change: transform; }
.zs-inkfx.boost .zs-inkfx-blob { opacity: 0.7; }
.zs-inkfx-blob.a { width: 540px; height: 440px; left: -130px; bottom: -150px; background: radial-gradient(circle, rgba(124,58,237,0.55), transparent 70%); animation: zs-inkfx-a 26s var(--ease-in-out) infinite alternate; }
.zs-inkfx-blob.b { width: 560px; height: 460px; right: -150px; top: -170px; background: radial-gradient(circle, rgba(42,107,230,0.5), transparent 70%); animation: zs-inkfx-b 32s var(--ease-in-out) infinite alternate; }
.zs-inkfx-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(183,156,247,0.16) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 72% 82% at 82% 16%, #000, transparent 72%); mask-image: radial-gradient(ellipse 72% 82% at 82% 16%, #000, transparent 72%); }
@keyframes zs-inkfx-a { to { transform: translate(64px, -42px) scale(1.12); } }
@keyframes zs-inkfx-b { to { transform: translate(-52px, 46px) scale(1.1); } }

/* Journey timeline (About) — glass milestone cards on a gradient connector */
.zs-jrny { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.zs-jrny-line { position: absolute; top: 8px; left: 9%; right: 9%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--zs-violet-400), var(--brand-primary) 55%, var(--cyan-500, #12A5C9)); }
.zs-jrny-step { position: relative; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.zs-jrny-node { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: var(--zs-grad-ib); box-shadow: 0 0 0 6px var(--surface-subtle), 0 6px 14px -4px rgba(86,56,222,0.6); position: relative; z-index: 1; }
.zs-jrny-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border-radius: 18px; width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border: 1px solid rgba(183,156,247,0.3);
  transition: transform var(--duration-standard,250ms) var(--ease-out), border-color var(--duration-standard,250ms) var(--ease-out); }
.zs-jrny-card:hover { transform: translateY(-5px); border-color: var(--zs-violet-300); }
.zs-jrny-year { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 1080px) { .zs-jrny { grid-template-columns: 1fr 1fr; } .zs-jrny-line { display: none; } }
@media (max-width: 620px) { .zs-jrny { grid-template-columns: 1fr; } }

/* Journey — interactive era explorer (About) */
.zs-jx { display: grid; grid-template-columns: 0.82fr 1.4fr; gap: 26px; align-items: stretch; }
.zs-jx-rail { display: flex; flex-direction: column; gap: 6px; }
.zs-jx-tab { position: relative; overflow: hidden; text-align: left; cursor: pointer; border: none; background: transparent; font: inherit; padding: 15px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 3px; transition: background var(--duration-standard,250ms) var(--ease-out); }
.zs-jx-tab:hover { background: rgba(110,70,220,0.06); }
.zs-jx-tab.on { background: linear-gradient(120deg, rgba(124,58,237,0.1), rgba(42,107,230,0.07)); }
.zs-jx-tab::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--zs-grad-ib); transform: scaleY(0); transform-origin: top; transition: transform var(--duration-standard,250ms) var(--ease-out); }
.zs-jx-tab.on::before { transform: scaleY(1); }
.zs-jx-tab-yr { font-family: var(--font-mono, monospace); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); transition: color var(--duration-standard,250ms) var(--ease-out); }
.zs-jx-tab.on .zs-jx-tab-yr { color: var(--zs-iris-600); }
.zs-jx-tab-t { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--text-heading); }
.zs-jx-prog { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--zs-grad-ib); animation: zs-jx-prog 4.2s linear; }
@keyframes zs-jx-prog { from { width: 0; } to { width: 100%; } }
.zs-jx-stage { position: relative; }
.zs-jx-panel { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 13px; padding: 40px 42px; border-radius: 24px; overflow: hidden;
  background: rgba(255,255,255,0.7); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border: 1px solid rgba(183,156,247,0.3); animation: zs-jx-in 0.5s var(--ease-out); }
.zs-jx-panel::after { content: ""; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle at 32% 32%, rgba(124,58,237,0.12), transparent 68%), radial-gradient(circle at 74% 76%, rgba(224,102,140,0.09), transparent 70%); pointer-events: none; }
@keyframes zs-jx-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.zs-jx-ico { width: 54px; height: 54px; border-radius: 16px; background: var(--zs-grad-ib); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -10px rgba(86,56,222,0.6); animation: zs-jx-pop 0.5s var(--ease-out) 0.05s both; }
@keyframes zs-jx-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.zs-jx-big { font-family: var(--font-display); font-weight: 800; font-size: 62px; line-height: 1; letter-spacing: -0.03em; background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-jx-title { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; color: var(--text-heading); margin: 0; }
.zs-jx-desc { font: var(--text-body-md); color: var(--text-body); margin: 0; max-width: 46ch; }
.zs-jx-dots { display: flex; gap: 8px; margin-top: auto; padding-top: 20px; }
.zs-jx-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(110,70,220,0.22); cursor: pointer; transition: width var(--duration-standard,250ms) var(--ease-out), background var(--duration-standard,250ms) var(--ease-out); }
.zs-jx-dot.on { width: 26px; border-radius: 999px; background: var(--zs-grad-ib); }
@media (max-width: 860px) { .zs-jx { grid-template-columns: 1fr; } .zs-jx-rail { flex-direction: row; overflow-x: auto; } .zs-jx-tab { flex: 1 0 auto; min-width: 120px; } .zs-jx-big { font-size: 48px; } .zs-jx-panel { padding: 30px 26px; } }
@media (prefers-reduced-motion: reduce) { .zs-jx-panel, .zs-jx-ico { animation: none; } .zs-jx-prog { display: none; } }

/* Team collaboration spine (About) — leadership core + department branches */
.zs-tc { display: grid; grid-template-columns: 296px 1fr; gap: 40px; align-items: start; }
.zs-tc-core { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 22px; background: linear-gradient(158deg, rgba(124,58,237,0.07), rgba(42,107,230,0.05)); border: 1px solid rgba(183,156,247,0.26); }
.zs-tc-core-label { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zs-label); }
.zs-tc-leads { display: flex; flex-direction: column; gap: 16px; }
.zs-tc-lead { display: flex; gap: 14px; align-items: center; }
.zs-tc-stats { display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid rgba(110,70,220,0.14); }
.zs-tc-ava { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-body); font-weight: 700; background: linear-gradient(135deg, #EDE8FF, #D6E0FB); color: var(--zs-iris-600); border: 2px solid var(--surface-page); box-sizing: border-box; }
.zs-tc-ava.lead { background: var(--zs-grad-ib); color: #fff; border: none; box-shadow: 0 12px 26px -10px rgba(86,56,222,0.5); }
.zs-tc-spine { position: relative; display: flex; flex-direction: column; gap: 6px; padding-left: 28px; }
.zs-tc-spine::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--zs-violet-400), var(--brand-primary) 55%, var(--cyan-500, #12A5C9)); }
.zs-tc-branch { position: relative; border-radius: 18px; transition: background var(--duration-standard,250ms) var(--ease-out); }
.zs-tc-branch.open { background: linear-gradient(120deg, rgba(124,58,237,0.05), rgba(42,107,230,0.035)); }
.zs-tc-node { position: absolute; left: -28px; top: 27px; width: 12px; height: 12px; border-radius: 50%; background: var(--zs-grad-ib); box-shadow: 0 0 0 5px var(--surface-page); }
.zs-tc-branch.open .zs-tc-node { box-shadow: 0 0 0 5px var(--surface-page), 0 0 0 9px rgba(110,70,220,0.18); }
.zs-tc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; cursor: pointer; border: none; background: transparent; font: inherit; padding: 18px 20px; }
.zs-tc-count { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--zs-iris-600); background: rgba(110,70,220,0.1); border-radius: 999px; padding: 3px 9px; }
.zs-tc-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.zs-tc-cluster { display: flex; align-items: center; }
.zs-tc-cluster .zs-tc-ava:not(:first-child) { margin-left: -12px; transition: margin-left var(--duration-standard,250ms) var(--ease-out); }
.zs-tc-head:hover .zs-tc-cluster .zs-tc-ava:not(:first-child) { margin-left: -3px; }
.zs-tc-more { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 11px; margin-left: -12px; border-radius: 999px; background: var(--zs-grad-ib); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 12px; border: 2px solid var(--surface-page); box-sizing: border-box; }
.zs-tc-chev { color: var(--text-muted); flex-shrink: 0; transition: transform var(--duration-standard,250ms) var(--ease-out); }
.zs-tc-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; padding: 0 20px 20px; animation: zs-jx-in 0.4s var(--ease-out); }
.zs-tc-member { display: flex; gap: 11px; align-items: center; padding: 9px 10px; border-radius: 11px; transition: background var(--duration-standard,250ms) var(--ease-out); }
.zs-tc-member:hover { background: rgba(255,255,255,0.75); }
@media (max-width: 900px) { .zs-tc { grid-template-columns: 1fr; gap: 28px; } .zs-tc-core { position: static; } .zs-tc-right { flex-direction: column-reverse; align-items: flex-end; gap: 8px; } }
@media (max-width: 560px) { .zs-tc-head { flex-direction: column; align-items: flex-start; gap: 14px; } .zs-tc-right { flex-direction: row; align-self: flex-start; } }

/* Generative landing-hero backdrops (footer landing pages) */
.zs-lbg { overflow: hidden; pointer-events: none; }
.zs-lbg > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zs-lbg.flip { transform: scaleX(-1); }
/* alt — re-composed third use of a strand family: raised, tilted, tighter */
.zs-lbg.alt .zs-about-ribbon { transform: translateY(-8%) rotate(-5deg) scale(1.06); }
/* orbits — tilted rings with traveling satellites, right-anchored */
.zs-lbg-orbits > svg { left: auto; right: -16%; width: 72%; top: -6%; height: 118%; }
.zs-lbg-orbits .lo { transform-box: fill-box; transform-origin: center; }
.zs-lbg-orbits .lo0 { animation: lbg-spin 64s linear infinite; }
.zs-lbg-orbits .lo1 { animation: lbg-spin 44s linear infinite reverse; }
.zs-lbg-orbits .lo2 { animation: lbg-spin 30s linear infinite; }
@keyframes lbg-spin { to { transform: rotate(360deg); } }
/* beams — diagonal light rails gliding on offset phases */
.zs-lbg-beams .lb-wrap { position: absolute; right: -4%; top: -22%; width: 58%; height: 144%; transform: rotate(24deg); }
.zs-lbg-beams .lb { position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 3px; left: calc(var(--i) * 14.5%);
  background: linear-gradient(180deg, transparent, rgba(124,58,237,0.38) 30%, rgba(42,107,230,0.38) 62%, transparent);
  animation: lbg-glide 9s var(--ease-in-out) calc(var(--i) * -1.3s) infinite alternate; }
@keyframes lbg-glide { from { transform: translateY(-6%); opacity: 0.35; } to { transform: translateY(6%); opacity: 0.9; } }
/* contours — concentric organic outlines, swaying + luminance pulse */
.zs-lbg-contours > svg { left: auto; right: -20%; width: 78%; top: -10%; height: 124%; }
.zs-lbg-contours .lc-all { transform-box: fill-box; transform-origin: center; animation: lbg-sway 26s var(--ease-in-out) infinite alternate; }
@keyframes lbg-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.zs-lbg-contours .lc { animation: lbg-lum 9s var(--ease-in-out) infinite; }
.zs-lbg-contours .lc1 { animation-delay: -1.8s; } .zs-lbg-contours .lc2 { animation-delay: -3.6s; }
.zs-lbg-contours .lc3 { animation-delay: -5.4s; } .zs-lbg-contours .lc4 { animation-delay: -7.2s; }
@keyframes lbg-lum { 0%, 100% { stroke-opacity: 0.55; } 50% { stroke-opacity: 1; } }
/* pulse — sparse dot field with a soft diagonal luminance sweep */
.zs-lbg-pulse .lp-wrap { position: absolute; inset: 0; overflow: hidden; }
.zs-lbg-pulse .lp-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(86,56,222,0.24) 1.3px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 54% 72% at 80% 38%, #000, transparent 74%); mask-image: radial-gradient(ellipse 54% 72% at 80% 38%, #000, transparent 74%); }
.zs-lbg-pulse .lp-sweep { position: absolute; inset: -22%; background: linear-gradient(115deg, transparent 32%, rgba(124,58,237,0.13) 46%, rgba(42,107,230,0.13) 54%, transparent 68%);
  animation: lbg-sweep 11s var(--ease-in-out) infinite alternate; }
@keyframes lbg-sweep { from { transform: translateX(-24%); } to { transform: translateX(24%); } }
/* arcs — corner arc cascade, dashes drifting along each ring */
.zs-lbg-arcs .la { animation: lbg-arc 46s linear infinite; }
.zs-lbg-arcs .la1 { animation-duration: 62s; animation-direction: reverse; }
.zs-lbg-arcs .la2 { animation-duration: 52s; }
.zs-lbg-arcs .la3 { animation-duration: 36s; animation-direction: reverse; }
@keyframes lbg-arc { to { stroke-dashoffset: -1400; } }
@media (prefers-reduced-motion: reduce) { .zs-lbg * { animation: none !important; } }

/* ArtBG — filled-art landing backdrops */
.zs-abg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zs-abg > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zs-abg.flip { transform: scaleX(-1); }
.zs-lbg.alt .zs-about-ribbon { transform: rotate(-6deg) scale(1.08); }
.zs-abg.alt { filter: hue-rotate(14deg); }
.zs-abg.alt > svg { transform: rotate(-5deg) scale(1.07); }
.zs-abg .ab-orb { position: absolute; border-radius: 50%; filter: blur(46px); }
.zs-abg .ab-orb.o1 { width: 380px; height: 320px; right: 4%; top: -10%; background: radial-gradient(circle, rgba(124,58,237,0.34), transparent 70%); animation: ab-dr1 17s var(--ease-in-out) infinite alternate; }
.zs-abg .ab-orb.o2 { width: 420px; height: 360px; right: 22%; bottom: -16%; background: radial-gradient(circle, rgba(42,107,230,0.3), transparent 70%); animation: ab-dr2 21s var(--ease-in-out) infinite alternate; }
.zs-abg .ab-orb.o3 { width: 300px; height: 260px; right: -6%; bottom: 8%; background: radial-gradient(circle, rgba(15,181,216,0.26), transparent 70%); animation: ab-dr1 25s var(--ease-in-out) infinite alternate-reverse; }
@keyframes ab-dr1 { to { transform: translate(-48px, 36px) scale(1.14); } }
@keyframes ab-dr2 { to { transform: translate(42px, -30px) scale(1.1); } }
.zs-abg .ab-tw { animation: ab-tw 5s var(--ease-in-out) infinite; opacity: 0; }
@keyframes ab-tw { 0%, 100% { opacity: 0; } 45% { opacity: 0.9; } }
.zs-abg .ab-halo { position: absolute; right: -12%; top: 50%; width: 700px; height: 700px; margin-top: -350px; border-radius: 50%;
  background: conic-gradient(from 210deg, transparent 0 18%, rgba(124,58,237,0.5) 34%, rgba(42,107,230,0.45) 52%, rgba(15,181,216,0.35) 66%, transparent 82% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 60% 78%, transparent 80%); mask: radial-gradient(farthest-side, transparent 58%, #000 60% 78%, transparent 80%);
  filter: blur(14px); animation: ab-halo 38s linear infinite; }
@keyframes ab-halo { to { transform: rotate(360deg); } }
.zs-abg .ab-halo-bloom { position: absolute; right: 2%; top: 26%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(155,113,240,0.2), transparent 68%); filter: blur(30px); animation: ab-dr2 19s var(--ease-in-out) infinite alternate; }
.zs-abg-petals .ab-pt { transform-box: fill-box; transform-origin: center; }
.zs-abg-petals .p1 { animation: ab-spin 44s linear infinite; }
.zs-abg-petals .p2 { animation: ab-spin 58s linear infinite reverse; }
.zs-abg-petals .p3 { animation: ab-spin 72s linear infinite; }
.zs-abg-petals .p4 { animation: ab-spin 90s linear infinite reverse; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.zs-abg .ab-mist { position: absolute; border-radius: 50%; filter: blur(52px); }
.zs-abg .ab-mist.m1 { width: 620px; height: 300px; right: -8%; top: 6%; background: radial-gradient(ellipse, rgba(124,58,237,0.22), transparent 70%); animation: ab-dr2 23s var(--ease-in-out) infinite alternate; }
.zs-abg .ab-mist.m2 { width: 700px; height: 320px; right: 10%; bottom: -12%; background: radial-gradient(ellipse, rgba(42,107,230,0.2), transparent 70%); animation: ab-dr1 27s var(--ease-in-out) infinite alternate; }
.zs-abg .ab-sweep { position: absolute; inset: -20%; background: linear-gradient(112deg, transparent 34%, rgba(155,113,240,0.16) 47%, rgba(15,181,216,0.12) 55%, transparent 68%); animation: ab-sweep 12s var(--ease-in-out) infinite alternate; }
@keyframes ab-sweep { from { transform: translateX(-18%); } to { transform: translateX(18%); } }
@media (prefers-reduced-motion: reduce) { .zs-abg .ab-orb, .zs-abg .ab-tw, .zs-abg .ab-halo, .zs-abg .ab-halo-bloom, .zs-abg-petals .ab-pt, .zs-abg .ab-mist, .zs-abg .ab-sweep { animation: none !important; } }

/* ── Category hero dialects (extend the Ascent theme) ──
   meridian · Solutions — cyan-led intelligence light
   firstlight · Company — sun-gold dawn (upgraded with the sun-dialect field) */
.zs-hero-meridian { background-image: var(--pattern-altitude); }
.zs-hero-meridian > .zs-hero-fx > i.cool {
  background: radial-gradient(ellipse 50% 42% at 76% -10%, rgba(15, 181, 216, 0.11), transparent 65%);
  animation: zs-drift-cool 52s var(--ease-in-out) infinite alternate;
}
.zs-hero-meridian > .zs-hero-fx > i.warm {
  background: radial-gradient(ellipse 44% 36% at 16% -6%, rgba(29, 91, 230, 0.06), transparent 62%);
  animation: zs-drift-warm 68s var(--ease-in-out) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .zs-hero-meridian > .zs-hero-fx > i { animation: none; }
}


/* ── Pure-white foundation: all light section surfaces are #fff; dark (ink) sections unchanged ── */
.zs-band-altitude { background: #F8F6FD !important; background-image: none !important; box-shadow: none !important; }
.zs-navbar-spectrum { display: none !important; }
.zs-aibd .zs-aibd-blob { display: none !important; }

/* Warm dusk accent inside dark-section backdrops (background element, not typography) */
.zs-inkfx-blob.c { width: 460px; height: 380px; right: 22%; bottom: -170px; background: radial-gradient(circle, rgba(230,106,90,0.26), rgba(214,51,108,0.13) 55%, transparent 72%); animation: zs-inkfx-b 29s var(--ease-in-out) infinite alternate-reverse; }

/* Dusk cinema wave — signature spectrum wave anchoring every dark section */
.zs-inkwave { position: absolute; left: 0; right: 0; bottom: -2%; width: 100%; height: 46%; pointer-events: none; }
.zs-inkwave g { transform-box: view-box; transform-origin: 50% 100%; animation: zs-iw-sway 21s var(--ease-in-out) infinite alternate; }
@keyframes zs-iw-sway { from { transform: translateX(-26px) translateY(6px); } to { transform: translateX(26px) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .zs-inkwave g { animation: none; } }

/* Premium icon lighting — shared by leadership avatars, index arrows, assistant orbs */
.zs-tc-ava.lead, .zs-idx-row:hover .zs-idx-arrow, .zc-launch-orb, .zc-head-orb, .zc-send, .zs-tl-node, .zs-jrny-node {
  background: var(--zs-grad-icon);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 18px -7px rgba(86,56,222,0.55);
}
.zs-idx-row:hover .zs-idx-arrow { color: #fff; }

/* Dark-section support for open feature cells */
.zs-slope .zs-feat-ghost { -webkit-text-stroke-color: rgba(183,156,247,0.3); }
/* Solution bands — reference layout: heading/lead row, static concept panel + feature blocks (ink) */
.zs-solx { display: flex; flex-direction: column; gap: 58px; }
.zs-solx-head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: start; }
.zs-solx-left { display: flex; flex-direction: column; gap: 18px; }
.zs-solx-title { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.zs-solx-lead { margin: 6px 0 0; font: 400 17.5px/1.7 var(--font-body); color: rgba(231,236,248,0.85); max-width: 52ch; }
.zs-solx-body { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.zs-solx-panel { position: relative; min-height: 400px; border-radius: 20px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); padding: 38px 34px 52px; display: flex; }
.zs-solx-panel > div { flex: 1; }
.zs-solx-feats { display: flex; flex-direction: column; gap: 36px; }
.zs-solx-feat { display: flex; align-items: flex-start; gap: 16px; }
.zs-solx-ftile { width: 40px; height: 40px; border-radius: 11px; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 10px 22px -10px rgba(84,93,231,0.55); }
.zs-solx-ft b { display: block; font: 700 16.5px var(--font-body); color: #fff; margin-bottom: 6px; }
.zs-solx-ft > span { font: 400 14px/1.65 var(--font-body); color: rgba(231,236,248,0.66); }
.sx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font: 600 13.5px var(--font-body); white-space: nowrap; }
.sx-chip.ok { background: rgba(52,211,153,0.13); color: #6EE7B7; border: 1px solid rgba(52,211,153,0.35); }
.sx-chip.risk { background: rgba(248,113,113,0.12); color: #FCA5A5; border: 1px solid rgba(248,113,113,0.32); }
.sx-chip.warn { background: rgba(251,191,36,0.11); color: #FCD34D; border: 1px solid rgba(251,191,36,0.3); }
.sx-chip.ai { background: linear-gradient(90deg, rgba(59,130,246,0.16), rgba(167,139,250,0.18)); color: #C4B5FD; border: 1px solid rgba(167,139,250,0.35); }
.sx-cap { position: absolute; left: 30px; right: 30px; bottom: 20px; text-align: center; font: 500 12.5px var(--font-body); color: rgba(231,236,248,0.5); }
/* Retention — signals enter the AI aperture, interventions come out */
.cvx { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.cvx-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cvx-col:last-child { align-items: flex-end; }
.cvx-colh { font: 700 11px var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; color: rgba(231,236,248,0.5); margin-bottom: 4px; }
.cvx-ring { width: 156px; height: 156px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(#0D1836, #0D1836) padding-box, linear-gradient(135deg, #3B82F6, #22D3EE, #A78BFA) border-box; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 70px rgba(99,102,241,0.35); align-self: center; }
.cvx-ring span { font: 700 11.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(231,236,248,0.92); }
/* Canvas — the AI layer docked above the Canvas slab */
.cnx { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.cnx-slab { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 0 26px; }
.cnx-slab b { font: 700 15px var(--font-body); color: #fff; white-space: nowrap; }
.cnx-slab.base { width: min(480px, 92%); height: 74px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); justify-content: space-between; }
.cnx-sub { font: 400 12.5px var(--font-body); color: rgba(231,236,248,0.55); }
.cnx-slab.ai { width: min(430px, 84%); height: 66px; background: linear-gradient(100deg, rgba(42,107,230,0.5), rgba(123,79,232,0.55)); border: 1px solid rgba(167,139,250,0.55); box-shadow: 0 26px 60px -22px rgba(84,93,231,0.65); position: relative; z-index: 2; transform: translateY(-18px); }
.cnx-tags { margin-left: auto; display: flex; gap: 7px; }
.cnx-tags i { font: 600 11px var(--font-body); font-style: normal; color: #E7ECF8; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.16); white-space: nowrap; }
.cnx-beam { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: 300px; height: 100px; background: radial-gradient(50% 100% at 50% 100%, rgba(34,211,238,0.2), rgba(34,211,238,0) 75%); }
/* Cohort — the pod parked mid-track, milestones flagged */
.chx { position: relative; display: flex; flex-direction: column; justify-content: center; }
.chx-track { display: flex; gap: 10px; }
.chx-week { flex: 1; height: 60px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); display: flex; align-items: center; justify-content: center; font: 600 11.5px var(--font-body); letter-spacing: 0.1em; color: rgba(231,236,248,0.42); }
.chx-week.done { background: linear-gradient(135deg, rgba(42,107,230,0.22), rgba(123,79,232,0.24)); border-color: rgba(167,139,250,0.4); color: rgba(231,236,248,0.85); }
.chx-pod { position: relative; align-self: flex-start; margin: 0 0 18px 24%; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 999px; background: rgba(16,26,56,0.92); border: 1px solid rgba(167,139,250,0.5); box-shadow: 0 20px 50px -18px rgba(84,93,231,0.6); }
.chx-pod b { font: 700 13px var(--font-body); color: #fff; white-space: nowrap; }
.chx-avs { display: flex; }
.chx-avs i { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--font-body); font-style: normal; color: #fff; border: 2px solid #131E42; margin-left: -9px; }
.chx-avs i:first-child { margin-left: 0; }
.chx-flag { align-self: flex-start; font: 600 11.5px var(--font-body); color: #C4B5FD; padding: 5px 12px; border-radius: 999px; background: rgba(123,79,232,0.16); border: 1px solid rgba(167,139,250,0.4); margin-bottom: 12px; }
.chx-flag.f1 { margin-left: 34%; box-shadow: 0 0 26px rgba(139,92,246,0.45); color: #fff; }
.chx-flag.f2 { position: absolute; right: 2%; top: 50%; transform: translateY(-130%); margin: 0; }
/* Drop-off — one learner mid-fall, two landed safely on the layer */
.dpx { position: relative; }
.dpx-air { position: absolute; left: 18%; top: 6%; transform: rotate(-7deg); }
.dpx-net { position: absolute; left: 6%; right: 6%; top: 52%; height: 54px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(90deg, rgba(42,107,230,0.4), rgba(123,79,232,0.45)); border: 1px solid rgba(167,139,250,0.5); box-shadow: 0 24px 60px -20px rgba(84,93,231,0.6); }
.dpx-net b { font: 700 12.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.dpx-land { position: absolute; top: 52%; transform: translateY(-115%); }
.dpx-land.l1 { left: 14%; }
.dpx-land.l2 { right: 12%; }
/* Experience — the old way dims, the new way glows */
.exx { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; max-width: 760px; margin: 0 auto; }
.exx-col { display: flex; flex-direction: column; gap: 13px; align-items: center; }
.exx-colhead { font: 700 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(231,236,248,0.5); margin-bottom: 6px; }
.exx-chip { padding: 10px 20px; border-radius: 999px; font: 600 14px var(--font-body); white-space: nowrap; }
.exx-chip.old { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(231,236,248,0.5); }
.exx-chip.new { background: linear-gradient(100deg, rgba(42,107,230,0.35), rgba(123,79,232,0.4)); border: 1px solid rgba(167,139,250,0.5); color: #fff; box-shadow: 0 0 30px rgba(99,102,241,0.35); }
.exx-core { width: 58px; height: 58px; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 50px rgba(99,102,241,0.4); }
@media (max-width: 960px) {
  .zs-solx-head, .zs-solx-body { grid-template-columns: 1fr; gap: 36px; }
  .zs-solx-panel { min-height: 340px; }
  .cvx { flex-direction: column; align-items: stretch; }
  .cvx-col:last-child { align-items: flex-start; }
  .cvx-ring { width: 118px; height: 118px; }
  .exx { grid-template-columns: 1fr; gap: 24px; }
  .exx-core { margin: 0 auto; transform: rotate(90deg); }
  .chx-week { font-size: 10px; }
  .chx-pod { margin-left: 0; }
  .dpx { min-height: 300px; }
}

/* Consult CTA console (Solutions pages) */
.zs-cx { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.zs-cx-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 680px; }
.zs-cx-head h2 { font: var(--text-h1); letter-spacing: var(--tracking-display); color: var(--text-heading); margin: 0; text-wrap: balance; }
.zs-cx-head p { font: var(--text-body-lg); color: var(--text-body); margin: 0; }
.zs-cx-bar { position: relative; width: 100%; max-width: 780px; border: none; padding: 1.5px; border-radius: 999px; overflow: hidden; cursor: pointer; background: rgba(86,56,222,0.18); display: block; text-align: left; transition: transform 0.25s var(--ease-out, ease); }
.zs-cx-bar:hover { transform: translateY(-2px); }
.zs-cx-spin { position: absolute; top: 50%; left: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; background: conic-gradient(from 0deg, transparent 0 68%, #7C3AED 82%, #2A6BE6 92%, transparent 100%); animation: zs-beam-spin 5s linear infinite; }
.zs-cx-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 11px 11px 11px 18px; border-radius: 999px; background: rgba(252,251,255,0.97); }
.zs-cx-orb { width: 36px; height: 36px; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 18px -8px rgba(84,93,231,0.6); }
.zs-cx-ghost { flex: 1; min-width: 0; font: 500 15px var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-cx-caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 2px; vertical-align: -3px; background: var(--brand-primary, #2A6BE6); animation: zs-cx-caret 1.1s steps(1) infinite; }
@keyframes zs-cx-caret { 50% { opacity: 0; } }
.zs-cx-go { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 22px; border-radius: 999px; background: var(--zs-grad-ib); color: #fff; font: 600 14.5px var(--font-body); white-space: nowrap; transition: filter 0.25s ease; }
.zs-cx-bar:hover .zs-cx-go { filter: brightness(1.09); }
.zs-cx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; max-width: 920px; }
.zs-cx-card { position: relative; display: flex; align-items: flex-start; gap: 13px; text-align: left; padding: 20px 44px 20px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--border-default, #E1E7F0); cursor: pointer; transition: transform 0.25s var(--ease-out, ease), border-color 0.25s ease; font-family: var(--font-body); }
.zs-cx-card:hover { transform: translateY(-3px); border-color: rgba(123,79,232,0.45); }
.zs-cx-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zs-cx-ct b { display: block; font: 700 14.5px var(--font-body); color: var(--text-heading); margin-bottom: 4px; }
.zs-cx-ct > span { font: 400 12.5px/1.55 var(--font-body); color: var(--text-muted); }
.zs-cx-arrow { position: absolute; right: 16px; top: 20px; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s var(--ease-out, ease); }
.zs-cx-card:hover .zs-cx-arrow { opacity: 1; transform: none; }
.zs-cx-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.zs-cx-trust > span { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--font-body); color: var(--text-muted); }
.zs-cx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zs-grad-ib); }
@media (max-width: 860px) {
  .zs-cx-grid { grid-template-columns: 1fr; max-width: 520px; }
  .zs-cx-ghost { display: none; }
  .zs-cx-in { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .zs-cx-spin, .zs-cx-caret { animation: none; } }

/* About v2 — what we do / history rail / mission / leadership / team roster / credentials rail */
.zs-wwd { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
.zs-wwd-l { display: flex; flex-direction: column; gap: 16px; }
.zs-wwd-l h2 { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: clamp(38px, 4.4vw, 58px); letter-spacing: -0.028em; line-height: 1.04; color: var(--text-heading); }
.zs-wwd-r p { font: 400 16.5px/1.75 var(--font-body); color: var(--text-body); margin: 0 0 22px; }
.zs-wwd-r p.zs-wwd-lede { font: 700 19px/1.6 var(--font-body); color: var(--text-heading); margin-bottom: 24px; }
.zs-wwd-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--border-default, #E1E7F0); }
.zs-wwd-vals b { display: block; font: 700 15px var(--font-body); color: var(--text-heading); margin-bottom: 5px; }
.zs-wwd-vals span { font: 400 13.5px/1.6 var(--font-body); color: var(--text-muted); }
.zs-hx-rail { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-top: 54px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.zs-hx-rail::-webkit-scrollbar { display: none; }
.zs-hx-col { position: relative; flex: 0 0 clamp(270px, 26vw, 345px); height: 540px; scroll-snap-align: start; padding: 0 30px; }
.zs-hx-col::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.3); }
.zs-hx-col.sub::before { top: 34%; background: rgba(255,255,255,0.2); }
.zs-hx-year { position: absolute; top: var(--yt, 70px); left: 30px; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 4.2vw, 62px); letter-spacing: -0.03em; line-height: 1; background: linear-gradient(120deg, #B39AF5, #7FDCEF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-hx-txt { position: absolute; left: 30px; right: 26px; bottom: var(--db, 100px); }
.zs-hx-txt b { display: block; font: 700 17px/1.45 var(--font-body); color: #fff; margin-bottom: 8px; }
.zs-hx-txt p { margin: 0; font: 400 13.5px/1.65 var(--font-body); color: rgba(231,236,248,0.68); }
.zs-hx-nav { display: flex; gap: 18px; justify-content: flex-end; margin-top: 24px; }
.zs-hx-nav button { width: 34px; height: 34px; border: none; background: none; padding: 0; color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; }
.zs-hx-nav button:hover { color: #fff; transform: translateY(-2px); }
@media (max-width: 900px) { .zs-hx-col { height: 470px; flex-basis: 260px; } }
.zs-msn { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 920px; }
.zs-msn-line { margin: 4px 0 12px; font-family: var(--font-display); font-weight: 750; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.18; letter-spacing: -0.022em; color: var(--text-heading); text-wrap: balance; }
.zs-msn-line em { font-style: normal; background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-ld { display: flex; flex-direction: column; gap: 76px; margin-top: 8px; }
.zs-ld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zs-ld-row.flip .zs-ld-txt { order: 2; }
.zs-ld-row.flip .zs-ld-port { order: 1; }
.zs-ld-txt h3 { font-family: var(--font-display); font-weight: 750; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.022em; color: var(--text-heading); margin: 0 0 16px; }
.zs-ld-txt p { font: 400 16px/1.7 var(--font-body); color: var(--text-body); margin: 0 0 18px; max-width: 54ch; }
.zs-ld-who { font: 500 14px var(--font-body); color: var(--text-muted); }
.zs-ld-who b { font-weight: 700; color: var(--text-heading); }
.zs-ld-port { position: relative; aspect-ratio: 5 / 4; border-radius: 22px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.zs-ld-port::before { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 95% at 18% 8%, rgba(255,255,255,0.3), rgba(255,255,255,0) 58%); }
.zs-ld-ini { position: relative; font-family: var(--font-display); font-weight: 800; font-size: clamp(84px, 10vw, 144px); letter-spacing: -0.04em; color: rgba(255,255,255,0.92); text-shadow: 0 24px 70px rgba(11,22,51,0.35); }
.zs-ld-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Leader cards with a real photo: a clean portrait frame the image fills edge to
   edge (no letterbox strips), lifted off the page with a soft shadow so the dark
   studio portrait sits well on the light Ascent theme. */
.zs-ld-port--photo { aspect-ratio: 3 / 4; background: var(--slate-100); box-shadow: 0 24px 60px -20px rgba(11,22,51,0.35), 0 2px 8px rgba(11,22,51,0.08); }
.zs-ld-port--photo::before { display: none; }
.zs-ld-port--photo .zs-ld-photo { object-fit: cover; object-position: 50% 16%; }
.zs-ld-chip { position: absolute; left: 18px; bottom: 18px; background: rgba(255,255,255,0.93); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; padding: 11px 17px; }
.zs-ld-chip b { display: block; font: 700 14.5px var(--font-body); color: var(--text-heading); }
.zs-ld-chip em { display: block; font: 500 12px var(--font-body); font-style: normal; color: var(--text-muted); margin-top: 2px; }
.zs-tr { position: relative; }
.zs-tr-stats { display: flex; gap: 44px; margin-bottom: 28px; flex-wrap: wrap; }
.zs-tr-stats span { display: inline-flex; align-items: baseline; gap: 9px; font: 600 13px var(--font-body); color: var(--text-muted); }
.zs-tr-stats b { font-family: var(--font-display); font-weight: 800; font-size: 27px; letter-spacing: -0.02em; color: var(--text-heading); }
.zs-tr-row { border-top: 1px solid var(--border-default, #E1E7F0); }
.zs-tr-row:last-of-type { border-bottom: 1px solid var(--border-default, #E1E7F0); }
.zs-tr-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 6px; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-body); }
.zs-tr-name { font-family: var(--font-display); font-weight: 750; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.022em; color: var(--text-heading); transition: opacity 0.2s ease; }
.zs-tr-head:hover .zs-tr-name, .zs-tr-row.open .zs-tr-name { background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-tr-meta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.zs-tr-avs { display: flex; }
.zs-tr-avs i { width: 34px; height: 34px; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); color: #fff; font: 700 12px var(--font-body); font-style: normal; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -8px; }
.zs-tr-avs i:first-child { margin-left: 0; }
.zs-tr-avs i.more { background: var(--surface-subtle, #F6F8FD); color: var(--text-heading); box-shadow: 0 0 0 1px var(--border-default, #E1E7F0); }
.zs-tr-count { font: 600 13px var(--font-body); color: var(--text-muted); white-space: nowrap; }
.zs-tr-plus { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border-strong, #C9D2E4); flex-shrink: 0; transition: transform 0.3s ease, border-color 0.3s ease; }
.zs-tr-plus::before, .zs-tr-plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--text-heading); }
.zs-tr-plus::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.zs-tr-plus::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.zs-tr-row.open .zs-tr-plus { transform: rotate(45deg); border-color: var(--zs-iris-600, #545DE7); }
.zs-tr-body { max-height: 0; overflow: hidden; transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.zs-tr-row.open .zs-tr-body { max-height: 1100px; }
.zs-tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 4px 6px 28px; }
.zs-tr-chip { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--border-default, #E1E7F0); border-radius: 12px; background: #fff; }
.zs-tr-chip i { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); color: #fff; font: 700 12px var(--font-body); font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.zs-tr-chip b { display: block; font: 700 14px var(--font-body); color: var(--text-heading); }
.zs-tr-chip em { display: block; font: 400 11.5px var(--font-body); font-style: normal; color: var(--text-muted); margin-top: 1px; }
.zs-tr-spot { position: absolute; z-index: 5; width: 280px; pointer-events: none; background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(123,79,232,0.32); border-radius: 14px; padding: 16px 18px; box-shadow: 0 24px 60px -24px rgba(24,17,64,0.35); }
.zs-tr-spot b { display: block; font: 700 15px var(--font-body); color: var(--text-heading); }
.zs-tr-spot span { display: block; font: 400 13px/1.55 var(--font-body); color: var(--text-body); margin: 6px 0 9px; }
.zs-tr-spot em { display: block; font: 600 11.5px var(--font-body); font-style: normal; color: var(--zs-iris-600, #545DE7); }
/* Team orbit — gradient showcase with rings, people, LinkedIn interactions */
.zs-to-sec { background: linear-gradient(180deg, #FFFFFF 0%, #F0F2FE 16%, #C3C6F8 36%, #6F5FE0 60%, #3A2E9E 78%, #10173B 100%); padding-top: 96px !important; padding-bottom: 72px !important; }
.zs-to-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.zs-to-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.05; letter-spacing: -0.028em; color: var(--text-heading); text-wrap: balance; }
.zs-to-head p { margin: 0; max-width: 58ch; font: 400 16px/1.7 var(--font-body); color: var(--text-body); }
.zs-to-wrap { overflow: visible; margin-top: 26px; }
.zs-to-stage { position: relative; width: 1020px; height: 600px; transform-origin: top left; }
.zs-to-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1.5px solid rgba(255,255,255,0.5); border-radius: 999px; opacity: 0; transition: opacity 1s ease 0.2s; }
.zs-to-ring.r1 { width: 950px; height: 490px; border-color: rgba(255,255,255,0.28); }
.zs-to-ring.r2 { width: 750px; height: 375px; border-color: rgba(255,255,255,0.4); }
.zs-to-ring.r3 { width: 550px; height: 260px; border-color: rgba(255,255,255,0.55); }
.zs-to.go .zs-to-ring { opacity: 1; }
.zs-to-core { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 13px; padding: 17px 30px; border-radius: 999px; background: linear-gradient(#0D1330, #0D1330) padding-box, linear-gradient(100deg, rgba(94,134,255,0.9), rgba(167,139,250,0.9), rgba(127,220,239,0.9)) border-box; border: 1.5px solid transparent; box-shadow: 0 30px 70px -24px rgba(9,7,40,0.75), 0 0 44px rgba(99,102,241,0.35); }
.zs-to-core-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #7FDCEF, #A78BFA); box-shadow: 0 0 12px rgba(127,220,239,0.8); }
.zs-to-core b { font-family: var(--font-display); font-weight: 750; font-size: 19px; letter-spacing: -0.015em; color: #fff; white-space: nowrap; background: linear-gradient(100deg, #FFFFFF, #C7D6FF 55%, #DCCDFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-to-pill { position: absolute; transform: translate(-50%, -50%) scale(0.4); width: 56px; height: 42px; border-radius: 999px; background: #0D1330; border: 1px solid rgba(255,255,255,0.14); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 40px -14px rgba(9,7,40,0.7); opacity: 0; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.45, 0.64, 1); }
.zs-to.go .zs-to-pill { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.zs-to-p { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; text-decoration: none; opacity: 0; translate: 0 14px; transition: opacity 0.55s ease, translate 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.zs-to-p:hover { z-index: 6; }
.zs-to.go .zs-to-p { opacity: 1; translate: 0 0; }
.zs-to-av { position: relative; border-radius: 50%; color: #fff; font-family: var(--font-body); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.01em; border: 2.5px solid rgba(255,255,255,0.85); box-shadow: 0 18px 44px -16px rgba(9,7,40,0.5); transition: transform 0.3s cubic-bezier(0.34, 1.45, 0.64, 1), box-shadow 0.3s ease; }
.zs-to-p:hover .zs-to-av { transform: scale(1.1); box-shadow: 0 26px 60px -14px rgba(9,7,40,0.65), 0 0 0 6px rgba(255,255,255,0.22); }
.zs-to-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.zs-to-in { position: absolute; right: -4px; top: -4px; width: 24px; height: 24px; border-radius: 8px; background: #0A66C2; color: #fff; font: 800 11.5px var(--font-body); display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1); box-shadow: 0 6px 16px -4px rgba(9,7,40,0.5); z-index: 2; }
.zs-to-p:hover .zs-to-in { opacity: 1; transform: scale(1); }
.zs-to-tag { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-4px); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 13px; border-radius: 11px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(123,79,232,0.4); box-shadow: 0 12px 30px -12px rgba(9,7,40,0.45); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; z-index: 7; }
.zs-to-p:hover .zs-to-tag { opacity: 1; transform: translateX(-50%) translateY(0); }
.zs-to-tag b { font: 700 12.5px var(--font-body); color: var(--text-heading); white-space: nowrap; }
.zs-to-tag em { font: 500 10.5px var(--font-body); font-style: normal; color: var(--text-muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .zs-to-ring, .zs-to-pill, .zs-to-p { transition: none; opacity: 1; } .zs-to-pill { transform: translate(-50%, -50%); } }

/* Recognition & credentials — two government recognitions + open metrics row (ink) */
.zs-cd { display: flex; flex-direction: column; }
.zs-cd-head h2 { font: var(--text-h2); letter-spacing: var(--tracking-heading); color: #fff; margin: 14px 0 0; }
.zs-cd-recs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.zs-cd-card { position: relative; display: flex; align-items: center; gap: 24px; border-radius: 20px; padding: 30px 32px; background: linear-gradient(140deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03) 60%); border: 1px solid rgba(255,255,255,0.14); overflow: hidden; }
.zs-cd-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 0% 0%, rgba(84,93,231,0.22), transparent 60%); pointer-events: none; }
.zs-cd-logo { position: relative; width: 92px; height: 92px; flex-shrink: 0; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; box-shadow: 0 18px 44px -18px rgba(9,7,40,0.6); }
.zs-cd-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zs-cd-body { position: relative; }
.zs-cd-tag { display: block; font: 700 10.5px var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; color: #7FDCEF; margin-bottom: 7px; }
.zs-cd-body b { display: block; font: 700 19px var(--font-body); color: #fff; }
.zs-cd-body p { margin: 8px 0 0; font: 400 13.5px/1.6 var(--font-body); color: rgba(231,236,248,0.7); max-width: 40ch; }
.zs-cd-seal { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(34,211,238,0.1); border: 1px solid rgba(127,220,239,0.35); display: inline-flex; align-items: center; justify-content: center; }
.zs-cd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 64px; padding-top: 52px; border-top: 1px solid rgba(255,255,255,0.14); }
.zs-cd-stat .zs-cd-v { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.03em; background: linear-gradient(120deg, #B39AF5, #7FDCEF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-cd-stat .zs-cd-l { display: block; font: 700 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(231,236,248,0.85); margin: 16px 0 8px; }
.zs-cd-stat p { margin: 0; font: 400 13px/1.6 var(--font-body); color: rgba(231,236,248,0.6); max-width: 26ch; }
.zs-cd-note { margin: 44px 0 0; font: 400 12.5px var(--font-body); color: rgba(231,236,248,0.45); }
@media (max-width: 900px) { .zs-cd-recs { grid-template-columns: 1fr; } .zs-cd-stats { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 900px) {
  .zs-wwd { grid-template-columns: 1fr; gap: 36px; }
  .zs-ld-row { grid-template-columns: 1fr; gap: 30px; }
  .zs-ld-row.flip .zs-ld-txt { order: 0; }
  .zs-ld-row.flip .zs-ld-port { order: 0; }
  .zs-tr-avs { display: none; }
  .zs-tr-spot { display: none; }
  .zs-cr-head { flex-direction: column; align-items: flex-start; }
}

/* Apply page — application form + assessment confirmation */
.zs-ap-sec { padding: 34px 32px 64px !important; }
.zs-ap-back { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px var(--font-body); color: var(--text-muted); text-decoration: none; }
.zs-ap-back:hover { color: var(--zs-iris-600, #545DE7); }
.zs-ap { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: start; }
.zs-ap-form { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 20px; padding: 28px; }
.zs-ap-form h3 { margin: 0 0 2px; font-family: var(--font-display); font-weight: 750; font-size: 24px; letter-spacing: -0.02em; color: var(--text-heading); }
.zs-ap-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zs-ap-field { display: flex; flex-direction: column; gap: 7px; }
.zs-ap-lab { font: 600 13px var(--font-body); color: var(--text-heading); }
.zs-ap-lab i { font-style: normal; color: var(--zs-iris-600, #545DE7); }
.zs-ap-input { font: 400 14.5px var(--font-body); color: var(--text-heading); background: #fff; border: 1px solid var(--border-strong, #C9D2E4); border-radius: 10px; padding: 11px 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%; box-sizing: border-box; }
.zs-ap-input:focus { border-color: var(--zs-iris-600, #545DE7); box-shadow: 0 0 0 3px rgba(84,93,231,0.14); }
.zs-ap-field.err .zs-ap-input { border-color: #D14343; }
.zs-ap-err { font: 500 12px var(--font-body); font-style: normal; color: #C22F2F; }
.zs-ap-hint { font: 400 12px var(--font-body); font-style: normal; color: var(--text-muted); }
select.zs-ap-input { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%23566%27 stroke-width=%271.6%27 fill=%27none%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
textarea.zs-ap-input { resize: vertical; min-height: 110px; }
.zs-ap-file { position: relative; display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--border-strong, #C9D2E4); border-radius: 10px; padding: 13px 14px; font: 500 13.5px var(--font-body); color: var(--text-body); cursor: pointer; transition: border-color 0.2s ease; }
.zs-ap-file:hover { border-color: var(--zs-iris-600, #545DE7); }
.zs-ap-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zs-ap-consent { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/1.55 var(--font-body); color: var(--text-body); }
.zs-ap-consent input { margin-top: 2px; accent-color: var(--zs-iris-600, #545DE7); }
.zs-ap-consent .zs-ap-err { display: block; margin-top: 3px; }

/* --- Unsubscribe: removable topic chips + danger action --- */
.zs-nl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zs-nl-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: 600 13px var(--font-body); padding: 7px 10px 7px 13px; border-radius: 999px; border: 1px solid var(--border-strong, #C9D2E4); background: #fff; color: var(--text-heading); transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.zs-nl-chip x { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; background: var(--border-default, #E1E7F0); color: var(--text-muted); font-size: 12px; line-height: 1; transition: background 0.15s ease, color 0.15s ease; }
.zs-nl-chip:hover { border-color: #E4B3B3; background: #FDF3F3; color: #B42318; }
.zs-nl-chip:hover x { background: #F3C7C7; color: #B42318; }
.zs-nl-danger { display: inline-flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; font: 650 14.5px var(--font-body); padding: 12px 18px; border-radius: 10px; border: 1px solid #E4B3B3; background: #fff; color: #B42318; transition: background 0.15s ease, border-color 0.15s ease; }
.zs-nl-danger:hover { background: #B42318; border-color: #B42318; color: #fff; }
.zs-nl-danger:disabled { opacity: 0.6; cursor: default; }
/* Topic toggle chips (preferences + subscribe) */
.zs-nl-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.zs-nl-topic { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 13px var(--font-body); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong, #C9D2E4); background: #fff; color: var(--text-body); transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.zs-nl-topic:hover { border-color: var(--zs-iris-600, #545DE7); color: var(--zs-iris-600, #545DE7); }
.zs-nl-topic.on { border-color: var(--zs-iris-600, #545DE7); background: rgba(84,93,231,0.08); color: var(--zs-iris-600, #545DE7); }
.zs-ap-fine { margin: -6px 0 0; font: 400 12px var(--font-body); color: var(--text-muted); }
.zs-ap-side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 16px; }
.zs-ap-side-t { display: block; font: 700 15px var(--font-body); color: var(--text-heading); margin-bottom: 16px; }
.zs-ap-steps { border: 1px solid var(--border-default, #E1E7F0); border-radius: 18px; padding: 22px 24px; background: #fff; }
.zs-ap-step { display: flex; gap: 13px; padding: 10px 0; border-top: 1px solid var(--border-default, #E1E7F0); }
.zs-ap-step:first-of-type { border-top: none; padding-top: 0; }
.zs-ap-step-n { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); color: #fff; font: 700 12px var(--font-body); display: inline-flex; align-items: center; justify-content: center; }
.zs-ap-step b { display: block; font: 700 13.5px var(--font-body); color: var(--text-heading); }
.zs-ap-step em { display: block; font: 400 12.5px/1.55 var(--font-body); font-style: normal; color: var(--text-muted); margin-top: 2px; }
.zs-ap-note { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 18px 20px; background: linear-gradient(100deg, rgba(42,107,230,0.06), rgba(123,79,232,0.08)); border: 1px solid rgba(123,79,232,0.28); }
.zs-ap-note p { margin: 0; font: 400 13px/1.6 var(--font-body); color: var(--text-body); }
.zs-ap-done { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 6px; }
.zs-ap-seal { width: 56px; height: 56px; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 18px 44px -14px rgba(84,93,231,0.55); }
.zs-ap-done h2 { margin: 0; font: var(--text-h2); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.zs-ap-ref { margin: 0; font: 500 13.5px var(--font-body); color: var(--text-muted); }
.zs-ap-ref b { color: var(--text-heading); font-family: var(--font-data, var(--font-body)); }
.zs-ap-next { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; text-align: left; }
.zs-ap-next-item { display: flex; gap: 13px; align-items: flex-start; background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 14px; padding: 15px 18px; }
.zs-ap-next-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: rgba(84,93,231,0.1); display: inline-flex; align-items: center; justify-content: center; }
.zs-ap-next-item p { margin: 0; font: 400 13.5px/1.65 var(--font-body); color: var(--text-body); }
.zs-ap-next-item b { color: var(--text-heading); }
@media (max-width: 900px) { .zs-ap { grid-template-columns: 1fr; } .zs-ap-row2 { grid-template-columns: 1fr; } .zs-ap-side { position: static; } }
/* Opt-out of the diagonal slope: perfectly straight, edge-to-edge horizontal top */
section.zs-flattop { clip-path: none; margin-top: 0; }
section.zs-flattop > * { padding-top: 0; }
/* Global: all ink/dark sections sit perfectly level — no diagonal rise anywhere */
.zs-slope { clip-path: none !important; margin-top: 0 !important; }
.zs-slope > * { padding-top: 0 !important; }

/* AI consult preview chips (formless lead sections) */
.zs-aic-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-heading); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--duration-fast,150ms) var(--ease-out); }
.zs-aic-chip:hover { border-color: var(--zs-violet-400); background: var(--zs-violet-50); color: var(--zs-violet-700); transform: translateY(-1px); }

/* Vignette demo micro-animations */
.zs-vp-in { animation: zs-vp-in 0.45s var(--ease-out) both; }
@keyframes zs-vp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zs-vp-pop { display: inline-block; animation: zs-vp-pop 0.5s var(--ease-out); }
@keyframes zs-vp-pop { 0% { opacity: 0.4; transform: scale(0.92); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zs-vp-in, .zs-vp-pop { animation: none !important; } }

/* Process/steps sections — orange accent on the section label + its tick */
.zs-procsec .zs-thread { background: var(--zs-grad-orange); }
.zs-procsec .zs-thread + span { color: #F5A85F !important; }

/* Stage-based process — three columns w/ gradient lead + supporting pills (dark, compact) */
.zs-procsec:has(.zs-pstages) { padding-top: 76px; padding-bottom: 84px; clip-path: none; margin-top: 0; }
.zs-procsec:has(.zs-pstages) > * { padding-top: 0; }
.zs-pstages { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.8vw, 46px); margin-top: 44px; padding-top: 40px; position: relative; align-items: start; }
.zs-pstages::before { content: ""; position: absolute; top: 0; left: 4px; right: 4px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 12%, rgba(255,255,255,0.22) 88%, transparent); }
.zs-pstage { position: relative; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.85s var(--ease-out); transition-delay: calc(var(--si) * 0.11s); }
.zs-pstages.in .zs-pstage { opacity: 1; transform: none; }
.zs-pstage:not(:first-child)::before { content: ""; position: absolute; top: -40px; bottom: 6px; left: calc(-1 * clamp(10px, 1.4vw, 23px)); width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.02)); }
.zs-pstage:not(:first-child)::after { content: ""; position: absolute; top: -44px; left: calc(-1 * clamp(10px, 1.4vw, 23px)); width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); border-right: 1px solid rgba(255,255,255,0.26); border-bottom: 1px solid rgba(255,255,255,0.26); }
.zs-pstage-h { text-align: center; font-family: var(--font-mono, var(--font-body)); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(220,227,244,0.62); margin-bottom: 8px; }
.zs-pstage-lead { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 15px 20px; border-radius: 999px; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: #fff; box-shadow: 0 14px 34px -18px rgba(10,14,40,0.7), 0 22px 60px -22px var(--sc, transparent); }
.zs-pstage-item { display: flex; align-items: center; justify-content: center; text-align: center; padding: 11px 8px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: rgba(233,238,250,0.82); transition: color var(--duration-standard,250ms) var(--ease-out); }
.zs-pstage-item:hover { color: #fff; }
@media (max-width: 860px) {
  .zs-pstages { grid-template-columns: 1fr; gap: 28px; padding-top: 0; margin-top: 32px; }
  .zs-pstages::before { display: none; }
  .zs-pstage:not(:first-child)::before, .zs-pstage:not(:first-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .zs-pstage { opacity: 1 !important; transform: none !important; } }

/* ── Success-stories globe section ── */
.zs-stories-stage { position: relative; min-height: 780px; }
.zs-globe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; opacity: 1; }
.zs-globe-svg { width: min(940px, 82%); height: auto; }
.zs-globe-grid { transform-origin: 300px 300px; animation: zs-globe-spin 66s linear infinite; }
@keyframes zs-globe-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.zs-stories-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(500px, 92%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.zs-stories-center::before { content: ""; position: absolute; inset: -30px -80px; z-index: -1; background: radial-gradient(ellipse 62% 60% at 50% 47%, rgba(255,255,255,0.88) 32%, rgba(255,255,255,0.55) 60%, transparent 84%); pointer-events: none; }
.zs-stories-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.028em; color: var(--text-heading); margin: 0; text-wrap: balance; }
.zs-stories-hi { background: var(--zs-grad-ib, linear-gradient(90deg,#2447C9,#6D34D6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-stories-sub { font: var(--text-body-lg); color: var(--text-body); margin: 0; max-width: 440px; }
.zs-stmar { width: 100%; max-width: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.zs-stmar-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: zs-stmar 40s linear infinite; }
.zs-stmar-chip { display: flex; align-items: center; white-space: nowrap; }
.zs-stmar-chip img { height: 30px; width: auto; display: block; object-fit: contain; }
@keyframes zs-stmar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.zs-stcard { position: absolute; width: 340px; z-index: 1; opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.7s var(--ease-out), transform 0.85s var(--ease-out); transition-delay: calc(var(--ci) * 0.09s); }
.zs-stories-stage.in .zs-stcard { opacity: 1; transform: none; }
.zs-stcard-in { position: relative; background: var(--surface-card, #fff); border: 1px solid var(--border-default, #E1E7F0); border-radius: 20px; box-shadow: 0 0 0 6px rgba(74,60,196,0.04), var(--shadow-sm, 0 6px 22px -12px rgba(11,22,51,0.18)); padding: 22px 26px; }
@keyframes zs-stbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.zs-stcard-q { position: absolute; top: 14px; right: 20px; font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 0.7; opacity: 0.2; pointer-events: none; background: var(--zs-grad-ib, linear-gradient(90deg,#2447C9,#6D34D6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zs-stcard-quote { font: var(--text-body-md); color: var(--text-body); margin: 0 0 18px; position: relative; z-index: 1; text-wrap: pretty; }
.zs-stcard-foot { display: flex; align-items: center; gap: 12px; }
.zs-stcard-av { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--zs-grad-icon, linear-gradient(135deg,#7C3AED,#2447C9)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.zs-stcard-av img { width: 100%; height: 100%; object-fit: cover; }
.zs-stcard-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zs-stcard-id b { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--text-heading); }
.zs-stcard-id em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.zs-stcard-logo { margin-left: auto; padding-left: 12px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; color: var(--text-faint); text-align: right; white-space: nowrap; }
.zs-stcard.p1 { left: 0; top: 24px; width: 440px; } .zs-stcard.p2 { left: 10px; top: 300px; width: 360px; } .zs-stcard.p3 { left: 0; top: 452px; width: 440px; }
.zs-stcard.p4 { right: 0; top: 120px; width: 440px; } .zs-stcard.p5 { right: 18px; top: 452px; width: 420px; }
@media (max-width: 1475px) {
  .zs-stories-stage { min-height: 0; display: flex; flex-direction: column; align-items: center; }
  .zs-globe { opacity: 0.32; }
  .zs-globe-svg { width: min(520px, 90%); }
  /* min() rather than a bare 560px: the stage is a centered flex column, so a
     fixed max-width lets this block size to its own max-content (the 520px
     logo marquee) and push past a phone viewport. */
  .zs-stories-center { position: relative; transform: none; top: auto; left: auto; width: auto; max-width: min(560px, 100%); margin: 0 auto 44px; }
  .zs-stcard, .zs-stcard.p1, .zs-stcard.p2, .zs-stcard.p3, .zs-stcard.p4, .zs-stcard.p5, .zs-stcard.p6 { position: static; width: 100%; max-width: 520px; margin: 0 auto 20px; top: auto; }
  .zs-stcard-in { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-globe-grid, .zs-stmar-track, .zs-stcard-in { animation: none !important; }
  .zs-stcard { opacity: 1 !important; transform: none !important; }
}

/* Cohort constellation (cohort platform engineering demo) */
.zs-cn-stage { position: relative; height: 196px; }
.zs-cn-node { position: absolute; width: 15px; height: 15px; border-radius: 50%; transition: left 1s var(--ease-in-out), top 1s var(--ease-in-out), background 0.5s var(--ease-out), opacity 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .zs-cn-node { transition: none !important; } }

/* ── Featured case studies — pastel curtain-reveal showcase w/ parallax focus ── */
.zs-csx { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 104px); }
.zs-csx-item { position: relative; }
.zs-csx-card { --e: cubic-bezier(0.22,1,0.36,1); position: relative; overflow: hidden; border-radius: 30px; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(32px, 4vw, 72px); align-items: center; padding: clamp(36px, 4.5vw, 72px); min-height: min(540px, 70vh); box-sizing: border-box; background: var(--csx-bg); border: 1px solid var(--csx-bd); box-shadow: 0 30px 70px -42px rgba(17,17,48,0.34); clip-path: inset(46% 0 46% 0 round 30px); opacity: 0; transition: clip-path 1.5s var(--e), opacity 1.05s var(--e); will-change: clip-path, opacity; }
.zs-csx-item.in .zs-csx-card { clip-path: inset(0 0 0 0 round 30px); opacity: 1; }
.zs-csx-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 30px; pointer-events: none; }
.zs-csx-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.1; mix-blend-mode: luminosity; filter: saturate(0.55) contrast(1.03); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.45) 46%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.45) 46%, #000 100%); }
.zs-csx-item:nth-child(even) .zs-csx-bg img { -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.45) 46%, #000 100%); mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.45) 46%, #000 100%); }
.zs-csx-copy { position: relative; z-index: 2; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 17px; max-width: 540px; opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--e) 0.35s, transform 1s var(--e) 0.35s; }
.zs-csx-item.in .zs-csx-copy { opacity: 1; transform: none; }
.zs-csx-visual { position: relative; z-index: 1; grid-column: 2; grid-row: 1; opacity: 0; transform: scale(1.04); transition: opacity 1s var(--e) 0.42s, transform 1.15s var(--e) 0.42s; }
.zs-csx-item.in .zs-csx-visual { opacity: 1; transform: none; }
.zs-csx-item:nth-child(even) .zs-csx-copy { grid-column: 2; }
.zs-csx-item:nth-child(even) .zs-csx-visual { grid-column: 1; }
.zs-csx-vwrap { background: #fff; border-radius: 18px; padding: clamp(14px, 1.6vw, 22px); }
.zs-csx-vwrap > div { box-shadow: none !important; border: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fff !important; }
.zs-csx-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-body); background: rgba(255,255,255,0.72); border: 1px solid var(--csx-bd); border-radius: 999px; padding: 8px 14px; }
.zs-csx-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--csx-ac); flex-shrink: 0; }
.zs-csx-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(25px, 2.5vw, 37px); line-height: 1.16; letter-spacing: -0.022em; color: var(--text-heading); margin: 0; text-wrap: pretty; }
.zs-csx-meta { font: 500 14px var(--font-body); color: var(--text-muted); }
.zs-csx-outcome { display: flex; flex-direction: column; gap: 5px; padding-top: 18px; border-top: 1px solid var(--csx-bd); max-width: 430px; }
.zs-csx-outcome span { font: 700 11px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.zs-csx-outcome b { font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: var(--text-heading); }
.zs-csx-cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 2px; font: 700 15px var(--font-body); color: var(--text-heading); text-decoration: none; }
.zs-csx-cta .ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--zs-grad-violet); transition: transform var(--duration-standard,250ms) var(--ease-out); }
.zs-csx-cta:hover .ic { transform: translateX(4px); }
@media (max-width: 980px) {
  .zs-csx { gap: 40px; }
  .zs-csx-card { grid-template-columns: 1fr; gap: 28px; min-height: 0; align-items: start; clip-path: inset(42% 0 42% 0 round 30px); }
  .zs-csx-copy, .zs-csx-item:nth-child(even) .zs-csx-copy { grid-column: 1; grid-row: 1; }
  .zs-csx-visual, .zs-csx-item:nth-child(even) .zs-csx-visual { grid-column: 1; grid-row: 2; max-width: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-csx-card { clip-path: none !important; opacity: 1 !important; }
  .zs-csx-copy, .zs-csx-visual { opacity: 1 !important; transform: none !important; }
}

/* ── Capability list — sticky intro + settle-in rows ── */
.zs-capx { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 72px; align-items: start; }
.zs-capx-left { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 14px; }
.zs-capx-list { display: flex; flex-direction: column; }
.zs-capx-item { display: flex; flex-direction: column; gap: 9px; padding: 30px 6px; text-decoration: none; opacity: 0; transform: translateY(34px); will-change: transform, opacity; transition: transform 0.75s var(--ease-out), opacity 0.6s var(--ease-out); transition-delay: var(--d, 0ms); }
.zs-capx-item + .zs-capx-item { border-top: 1px solid var(--border-default); }
.zs-capx-item.on { opacity: 1; transform: none; }
.zs-capx-item:first-child { padding-top: 6px; }
.zs-capx-title { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.2; letter-spacing: -0.018em; color: var(--text-heading); margin: 0; width: fit-content; transition: color var(--duration-standard,250ms) var(--ease-out); }
.zs-capx-item:hover .zs-capx-title { color: var(--zs-iris-600); }
.zs-capx-body { font: var(--text-body-md); color: var(--text-body); margin: 0; max-width: 56ch; }
@media (max-width: 960px) {
  .zs-capx { grid-template-columns: 1fr; gap: 40px; }
  .zs-capx-left { position: static; }
  .zs-capx-item { padding: 22px 2px; }
}
@media (prefers-reduced-motion: reduce) { .zs-capx-item { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ── Capability stack — flow scroll-scrub ── */
.zs-scrub-section { background: var(--surface-page); padding: 96px 32px 110px; overflow-x: clip; }
.zs-scrub-inner { max-width: var(--container-max); margin: 0 auto; }
.zs-scrub-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 92px; }
.zs-scrub-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; padding: 38px 0; border-bottom: 1px solid var(--border-default); text-decoration: none; will-change: transform, opacity; }
.zs-scrub-row:first-child { padding-top: 0; }
@media (max-width: 760px) {
  .zs-scrub-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .zs-scrub-head { padding-bottom: 52px; }
}

/* ── Products showcase — Retool-style sticky nav + scrolling scenes ── */
.zs-px { background: radial-gradient(1100px 700px at 82% 12%, rgba(96,74,222,0.16), transparent 60%), #0A0E24; padding: clamp(84px, 10vh, 132px) clamp(20px, 2.6vw, 44px); overflow-x: clip; }
.zs-px-wrap { max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: 38fr 62fr; gap: clamp(44px, 4.4vw, 84px); align-items: start; }
.zs-px-left { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 74px; padding-left: clamp(4px, 2.4vw, 46px); }
.zs-px-left .zs-eyebrow, .zs-px-left [class*="eyebrow"] { color: #A9B2E8; }
.zs-px-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 3.3vw, 56px); line-height: 1.06; letter-spacing: -0.025em; color: #fff; margin: 0; max-width: 500px; text-wrap: pretty; }
.zs-px-nav { display: flex; flex-direction: column; }
.zs-px-item { padding: 25px 0; }
.zs-px-item:first-child { padding-top: 0; }
.zs-px-title { display: flex; align-items: center; gap: 14px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2vw, 32px); letter-spacing: -0.02em; color: rgba(255,255,255,0.34); filter: blur(1.4px); transition: color 0.55s var(--ease-out), filter 0.55s var(--ease-out); }
.zs-px-item.on .zs-px-title { color: #fff; filter: none; }
.zs-px-dash { display: inline-block; width: 0; overflow: hidden; color: #8E9BFF; font-weight: 800; transition: width 0.45s var(--ease-out); }
.zs-px-item.on .zs-px-dash { width: 22px; }
.zs-px-pill { font: 600 10.5px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 5px 10px; font-style: normal; opacity: 0; transform: translateX(-6px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.zs-px-item.on .zs-px-pill { opacity: 1; transform: none; }
.zs-px-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.65s cubic-bezier(0.22,1,0.36,1); }
.zs-px-item.on .zs-px-body { grid-template-rows: 1fr; }
.zs-px-bodyin { overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding-left: 34px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out) 0.12s, transform 0.5s var(--ease-out) 0.12s; }
.zs-px-item.on .zs-px-bodyin { opacity: 1; transform: none; }
.zs-px-bodyin p { font-family: var(--font-body); font-weight: 400; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.74); margin: 18px 0 0; max-width: 440px; }
.zs-px-feats { display: flex; flex-direction: column; gap: 13px; }
.zs-px-feats span { display: flex; align-items: center; gap: 12px; font: 500 15px var(--font-body); color: rgba(255,255,255,0.84); }
.zs-px-feats i { display: inline-flex; width: 21px; height: 21px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(78,196,140,0.16); flex-shrink: 0; }
.zs-px-ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 12px 0 8px; }
.zs-px-ctas button { padding: 14px 24px !important; font-size: 15px !important; }
.zs-px-demo { font: 600 14.5px var(--font-body); color: rgba(255,255,255,0.78); text-decoration: underline; text-underline-offset: 4px; }
.zs-px-demo:hover { color: #fff; }
/* right column */
.zs-px-right { display: flex; flex-direction: column; gap: 5vh; }
.zs-px-panel { min-height: 97vh; display: flex; align-items: center; opacity: 0.4; transform: scale(0.97); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.zs-px-panel.on { opacity: 1; transform: none; }
.zs-px-scene { position: relative; width: 100%; min-height: min(84vh, 880px); display: flex; flex-direction: column; justify-content: center; border-radius: 28px; padding: clamp(30px, 3.8vw, 76px); box-shadow: 0 46px 110px -34px rgba(2,6,30,0.7); }
/* per-product themes — bright, distinct */
.zs-px-a { --pxa: #5B67E8; --pxa-soft: rgba(91,103,232,0.1); background: linear-gradient(135deg, #EDF1FF 0%, #F6F4FF 45%, #FFFFFF 100%); }
.zs-px-b { --pxa: #199B7E; --pxa-soft: rgba(25,155,126,0.1); background: linear-gradient(135deg, #E3F8F0 0%, #EFFCF6 48%, #E9FAF9 100%); }
.zs-px-c { --pxa: #E8703A; --pxa-soft: rgba(232,112,58,0.11); background: linear-gradient(135deg, #FFF1E4 0%, #FFF8EE 50%, #FFF4EC 100%); }
/* app window */
.zs-px-win { background: #fff; border-radius: 18px; width: 100%; box-shadow: 0 24px 60px -24px rgba(20,26,70,0.35); overflow: hidden; }
.zs-px-winbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(20,24,60,0.08); }
.zs-px-winbar > span { width: 8px; height: 8px; border-radius: 50%; }
.zs-px-winbar em { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font: 500 10.5px var(--font-mono, monospace); color: var(--text-muted); background: var(--surface-subtle); border-radius: 6px; padding: 4px 9px; font-style: normal; }
.zs-px-app { display: grid; grid-template-columns: 168px 1fr; }
.zs-px-side { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid rgba(20,24,60,0.07); }
.zs-px-side span { font: 500 13.5px var(--font-body); color: var(--text-body); padding: 9px 12px; border-radius: 9px; }
.zs-px-side span.on { background: var(--pxa-soft); color: var(--pxa); font-weight: 700; }
.zs-px-main { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.zs-px-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.zs-px-kpis div { border: 1px solid rgba(20,24,60,0.09); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; }
.zs-px-kpis span { font: 500 10.5px var(--font-body); color: var(--text-muted); }
.zs-px-kpis b { font: 800 23px var(--font-display); color: var(--text-heading); letter-spacing: -0.02em; }
.zs-px-block h5 { font: 600 10.5px var(--font-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.zs-px-area { display: flex; align-items: flex-end; gap: 5px; height: 64px; padding: 6px 2px 0; }
.zs-px-area i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--pxa), color-mix(in srgb, var(--pxa) 45%, #fff)); opacity: 0.9; }
.zs-px-area.mint { height: 54px; }
.zs-px-cols2 { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 16px; align-items: start; }
.zs-px-rail { display: flex; flex-direction: column; gap: 10px; }
.zs-px-railcard { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(20,24,60,0.09); background: color-mix(in srgb, var(--pxa) 4%, #fff); border-radius: 12px; padding: 12px 13px; }
.zs-px-railcard b { display: block; font: 700 13px var(--font-body); color: var(--text-heading); }
.zs-px-railcard span:not(.zs-px-fic):not(.zs-px-ava) { font: 500 11.5px var(--font-body); color: var(--text-muted); }
.zs-px-fic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--pxa), color-mix(in srgb, var(--pxa) 60%, #1B2450)); flex-shrink: 0; }
.zs-px-prow { display: grid; grid-template-columns: 1fr 108px 40px; gap: 12px; align-items: center; padding: 8px 0; font: 500 13.5px var(--font-body); color: var(--text-heading); }
.zs-px-prow b { font-weight: 700; text-align: right; }
.zs-px-track { height: 6px; border-radius: 4px; background: rgba(20,24,60,0.08); overflow: hidden; }
.zs-px-track i { display: block; height: 100%; border-radius: 4px; background: var(--pxa); }
.zs-px-arow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid rgba(20,24,60,0.08); border-radius: 11px; font: 500 13.5px var(--font-body); color: var(--text-heading); margin-bottom: 8px; }
.zs-px-arow em { font-style: normal; font: 600 10.5px var(--font-body); color: var(--pxa); background: var(--pxa-soft); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.zs-px-ava { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font: 700 10px var(--font-body); flex-shrink: 0; }
.zs-px-stack { display: flex; }
.zs-px-stack .zs-px-ava { border: 2px solid #fff; }
.zs-px-stack .zs-px-ava + .zs-px-ava { margin-left: -9px; }
/* AI Mentor — chat/timeline workspace */
.zs-px-ment2 { display: grid; grid-template-columns: 1fr 1.1fr; }
.zs-px-chatp { padding: 20px 22px; border-right: 1px solid rgba(20,24,60,0.07); background: color-mix(in srgb, var(--pxa) 3.5%, #fff); display: flex; flex-direction: column; gap: 16px; }
.zs-px-chathead { display: flex; align-items: center; gap: 10px; }
.zs-px-chathead b { font: 700 14.5px var(--font-body); color: var(--text-heading); }
.zs-px-live { font: 600 10.5px var(--font-body); color: var(--pxa); background: var(--pxa-soft); border-radius: 999px; padding: 5px 10px; font-style: normal; margin-left: auto; }
.zs-px-tl { display: flex; flex-direction: column; gap: 14px; position: relative; padding-left: 4px; }
.zs-px-tli { display: flex; gap: 11px; align-items: flex-start; position: relative; }
.zs-px-tli i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--pxa); flex-shrink: 0; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; }
.zs-px-tli.ok i { background: var(--pxa); }
.zs-px-tli p { font: 500 12.5px/1.5 var(--font-body); color: var(--text-body); margin: 0; }
.zs-px-tli p b { color: var(--text-heading); }
.zs-px-reco { border: 1px solid rgba(20,24,60,0.09); background: #fff; border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 24px -14px rgba(20,26,70,0.25); }
.zs-px-reco p { font: 500 12.5px/1.5 var(--font-body); color: var(--text-heading); margin: 0; }
.zs-px-reco > div { display: flex; gap: 8px; }
.zs-px-chip { font: 600 11.5px var(--font-body); color: var(--pxa); border: 1px solid color-mix(in srgb, var(--pxa) 40%, #fff); border-radius: 999px; padding: 6px 12px; }
.zs-px-chip.fill { background: var(--pxa); color: #fff; border-color: var(--pxa); }
.zs-px-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zs-px-insp { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.zs-px-mrow { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 12px; align-items: center; border: 1px solid rgba(20,24,60,0.08); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; }
.zs-px-mrow span { font: 600 14px var(--font-body); color: var(--text-heading); }
.zs-px-mrow b { font: 700 12px var(--font-body); color: var(--text-heading); }
.zs-px-mrow em { font-style: normal; font: 700 10.5px var(--font-body); border-radius: 999px; padding: 4px 9px; }
/* Student Portal — warm learner week */
.zs-px-port2 { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
.zs-px-phead { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.zs-px-phead b { display: block; font: 800 22px var(--font-display); letter-spacing: -0.02em; color: var(--text-heading); }
.zs-px-phead span { font: 500 12.5px var(--font-body); color: var(--text-muted); margin-top: 3px; display: block; }
.zs-px-pheadr { display: flex; align-items: center; gap: 14px; }
.zs-px-streak { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px var(--font-body); color: #8A5A12; background: rgba(232,168,58,0.16); border: 1px solid rgba(232,168,58,0.3); border-radius: 999px; padding: 6px 11px; }
.zs-px-ring { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zs-px-ring i { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font: 800 11px var(--font-display); color: var(--text-heading); font-style: normal; }
.zs-px-cols2p { display: grid; grid-template-columns: 1.22fr 0.78fr; gap: 20px; align-items: start; }
.zs-px-colL { display: flex; flex-direction: column; gap: 18px; }
.zs-px-cont { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb, var(--pxa) 7%, #fff); border: 1px solid color-mix(in srgb, var(--pxa) 22%, #fff); border-radius: 14px; padding: 15px 16px; }
.zs-px-cont > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.zs-px-cont b { font: 800 16px var(--font-display); letter-spacing: -0.015em; color: var(--text-heading); }
.zs-px-cont > div > span { font: 500 11.5px var(--font-body); color: var(--text-muted); }
.zs-px-cont .zs-px-track { margin-top: 5px; }
.zs-px-atl { display: grid; grid-template-columns: 10px 44px 1fr auto; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(80,40,10,0.07); }
.zs-px-atl:last-child { border-bottom: none; padding-bottom: 2px; }
.zs-px-atl i { width: 9px; height: 9px; border-radius: 50%; background: rgba(80,40,10,0.16); }
.zs-px-atl.a1 i { background: var(--pxa); box-shadow: 0 0 0 3px var(--pxa-soft); }
.zs-px-atl.a2 i { background: #E8A83A; }
.zs-px-atl em { font-style: normal; font: 700 10px var(--font-body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.zs-px-atl span { font: 600 13px var(--font-body); color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-px-atl b { font: 600 10.5px var(--font-body); color: var(--pxa); background: var(--pxa-soft); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.zs-px-ann { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; }
.zs-px-ann i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: var(--pxa-soft); flex-shrink: 0; }
.zs-px-ann p { font: 500 11.5px/1.5 var(--font-body); color: var(--text-body); margin: 0; }
.zs-px-ann p b { color: var(--text-heading); font-weight: 700; }
.zs-px-sched { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.zs-px-day { display: flex; flex-direction: column; gap: 7px; }
.zs-px-day > span { font: 600 10.5px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.zs-px-day b { font: 600 10.5px/1.35 var(--font-body); color: var(--text-heading); border: 1px solid rgba(80,40,10,0.1); background: #FFFDF9; border-radius: 9px; padding: 8px 7px; min-height: 52px; text-align: center; display: flex; align-items: center; justify-content: center; }
.zs-px-day b.t1 { background: color-mix(in srgb, var(--pxa) 10%, #fff); border-color: color-mix(in srgb, var(--pxa) 30%, #fff); color: #9A4A1E; }
.zs-px-day b.t2 { background: var(--pxa); border-color: var(--pxa); color: #fff; box-shadow: 0 10px 22px -10px rgba(232,112,58,0.55); }
.zs-px-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.zs-px-step-dot { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; border-top: 3px solid rgba(80,40,10,0.1); padding-top: 8px; }
.zs-px-step-dot.s2 { border-top-color: #3E9E6C; }
.zs-px-step-dot.s1 { border-top-color: var(--pxa); }
.zs-px-step-dot i { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(80,40,10,0.12); }
.zs-px-step-dot.s2 i { background: #3E9E6C; }
.zs-px-step-dot.s1 i { background: var(--pxa); box-shadow: 0 0 0 4px var(--pxa-soft); }
.zs-px-step-dot span { font: 600 10.5px var(--font-body); color: var(--text-body); }
@media (max-width: 980px) {
  .zs-px { padding: 72px 20px; }
  /* minmax(0,1fr), not 1fr: a 1fr track floors at the item's min-content, and
     the mock app frames inside these columns report ~395px of min-content, so
     a plain 1fr column stayed 395px wide in a 335px section and had its right
     edge clipped away. */
  .zs-px-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .zs-px-left, .zs-px-right { min-width: 0; }
  .zs-px-left { position: static; padding-left: 0; }
  .zs-px-right { gap: 40px; }
  .zs-px-panel { min-height: 0; opacity: 1; transform: none; }
  .zs-px-scene { min-height: 0; }
  .zs-px-title { font-size: 23px; }
  .zs-px-app, .zs-px-ment2 { grid-template-columns: 1fr; }
  .zs-px-side { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(20,24,60,0.07); }
  .zs-px-chatp { border-right: none; border-bottom: 1px solid rgba(20,24,60,0.07); }
  .zs-px-cols2, .zs-px-cols2p { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-px-title, .zs-px-body, .zs-px-bodyin, .zs-px-pill, .zs-px-dash, .zs-px-panel { transition: none !important; }
  .zs-px-title { filter: none; }
}

/* ── Services orbit map — hub visualization + positioned pills + hover previews ── */
.zs-svc2-wrap { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 0.36fr 0.64fr; gap: clamp(40px, 4.5vw, 84px); align-items: center; }
.zs-svc2-left { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.zs-svc2-h2 { font: var(--text-h2); letter-spacing: var(--tracking-heading); color: var(--text-heading); margin: 0; max-width: 440px; text-wrap: pretty; }
.zs-svc2-p { font: var(--text-body-md); color: var(--text-body); margin: 0 0 8px; max-width: 420px; }
/* canvas + visualization */
.zs-svc2-canvas { position: relative; height: 640px; --ease-io: cubic-bezier(0.62,0.02,0.16,1); }
/* intro: the final ring system is BUILT from two persistent orbs — they seed as dots on an axis, grow & overlap into an Education ∩ Engineering venn, then hollow out and converge into the two concentric dashed rings while the drained core becomes the hub. Nothing appears or vanishes; the shapes transform in place. */
.zs-svc2-axis { position: absolute; left: 9%; right: 9%; top: 50%; height: 0; border-top: 1.5px dashed rgba(16,20,48,0.16); transform: translateY(-50%) scaleX(0); transform-origin: center; opacity: 0; pointer-events: none; z-index: 0; transition: transform 1s var(--ease-io), opacity 0.7s var(--ease-io); }
.zs-svc2-canvas.is-seed .zs-svc2-axis, .zs-svc2-canvas.is-venn .zs-svc2-axis { transform: translateY(-50%) scaleX(1); opacity: 0.55; }
.zs-svc2-canvas.is-merge .zs-svc2-axis, .zs-svc2-canvas.is-live .zs-svc2-axis { transform: translateY(-50%) scaleX(1); opacity: 0; }
.zs-svc2-orb { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed transparent; background: rgba(16,20,48,0.92); mix-blend-mode: multiply; pointer-events: none; opacity: 0; z-index: 1; transition: transform 1.35s var(--ease-io), width 1.35s var(--ease-io), height 1.35s var(--ease-io), border-radius 1.35s var(--ease-io), background-color 1s var(--ease-io), border-color 0.85s var(--ease-out), opacity 0.7s var(--ease-io); }
.zs-svc2-orb.o1 { transform: translate(calc(-50% - 84px), -50%); }
.zs-svc2-orb.o2 { transform: translate(calc(-50% + 84px), -50%); }
.zs-svc2-canvas.is-seed .zs-svc2-orb { opacity: 1; }
.zs-svc2-canvas.is-venn .zs-svc2-orb { opacity: 1; width: 300px; height: 300px; }
.zs-svc2-canvas.is-merge .zs-svc2-orb, .zs-svc2-canvas.is-live .zs-svc2-orb { opacity: 1; background-color: transparent; border-color: rgba(16,20,48,0.15); transform: translate(-50%, -50%); }
.zs-svc2-canvas.is-merge .zs-svc2-orb.o1, .zs-svc2-canvas.is-live .zs-svc2-orb.o1 { width: 46%; height: 52%; border-radius: 48px; }
.zs-svc2-canvas.is-merge .zs-svc2-orb.o2, .zs-svc2-canvas.is-live .zs-svc2-orb.o2 { width: 82%; height: 92%; border-radius: 84px; }
.zs-svc2-canvas.has .zs-svc2-orb { border-color: color-mix(in srgb, var(--hubc) 38%, #fff); }
.zs-svc2-vlabel { position: absolute; left: 50%; top: 50%; font: 800 clamp(18px,2vw,26px)/1 var(--font-display); letter-spacing: -0.02em; color: #fff; white-space: nowrap; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease-io), transform 0.85s var(--ease-io); }
.zs-svc2-vlabel.l { transform: translate(calc(-50% - 92px), -50%) scale(0.7); }
.zs-svc2-vlabel.r { transform: translate(calc(-50% + 92px), -50%) scale(0.7); }
.zs-svc2-canvas.is-venn .zs-svc2-vlabel.l { opacity: 1; transform: translate(calc(-50% - 92px), -50%) scale(1); }
.zs-svc2-canvas.is-venn .zs-svc2-vlabel.r { opacity: 1; transform: translate(calc(-50% + 92px), -50%) scale(1); }
.zs-svc2-canvas.is-merge .zs-svc2-vlabel { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
.zs-svc2-flash { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; z-index: 2; background: radial-gradient(circle, color-mix(in srgb, var(--hubc) 72%, #fff) 0%, color-mix(in srgb, var(--hubc) 28%, transparent) 45%, transparent 70%); }
.zs-svc2-canvas.is-merge .zs-svc2-flash { animation: svc2flash 1.05s var(--ease-out) forwards; }
@keyframes svc2flash { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0); } 32% { opacity: 0.92; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(3.4); } }
.zs-svc2-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 196px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; pointer-events: none; z-index: 4; }
.zs-svc2-hubic { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 20px; background: linear-gradient(180deg, #fff, #f4f6fd); border: 1px solid rgba(16,20,48,0.07); box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--hubc) 58%, transparent), 0 2px 5px rgba(16,20,48,0.05), inset 0 1px 0 #fff; transform: scale(0.35); opacity: 0; transition: transform 0.85s var(--ease-io) 0.34s, opacity 0.7s var(--ease-io) 0.34s, box-shadow 0.5s var(--ease-out); }
.zs-svc2-canvas.is-merge .zs-svc2-hubic, .zs-svc2-canvas.is-live .zs-svc2-hubic { transform: scale(1); opacity: 1; }
.zs-svc2-canvas.is-ready .zs-svc2-hubic { transition-delay: 0s; }
.zs-svc2-hubic img { width: 44px; height: auto; display: block; }
.zs-svc2-hub b { font: 800 17px var(--font-display); letter-spacing: -0.015em; color: var(--text-heading); opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease-out) 0.16s, transform 0.5s var(--ease-io) 0.16s; }
.zs-svc2-hub em { font-style: normal; font: 500 12px/1.45 var(--font-body); color: var(--text-muted); min-height: 34px; opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease-out) 0.26s, transform 0.5s var(--ease-io) 0.26s; }
.zs-svc2-canvas.is-merge .zs-svc2-hub b, .zs-svc2-canvas.is-live .zs-svc2-hub b { opacity: 1; transform: none; }
.zs-svc2-canvas.is-live .zs-svc2-hub em { opacity: 1; transform: none; }
.zs-svc2-canvas.is-ready .zs-svc2-hub b, .zs-svc2-canvas.is-ready .zs-svc2-hub em { transition-delay: 0s; }
/* pills — independently positioned, centered on their coordinate */
.zs-svc2-pill { position: absolute; transform: translate(-50%, -50%) translate(var(--ex, 0px), var(--ey, 0px)) scale(0.62); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; background: #101430; color: #fff; border-radius: 999px; padding: 13px 20px; font: 600 15px var(--font-body); text-decoration: none; box-shadow: 0 4px 14px -6px rgba(10,14,40,0.35); opacity: 0; transition: opacity 0.7s var(--ease-out), transform 1.05s cubic-bezier(0.22,1,0.36,1), scale 0.3s var(--ease-io), box-shadow 0.35s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out); z-index: 2; }
.zs-svc2-canvas.is-live .zs-svc2-pill { opacity: 1; transform: translate(-50%, -50%) translate(0px, 0px) scale(1); transition-delay: calc(0.2s + var(--i, 0) * 0.075s); }
.zs-svc2-canvas.is-ready .zs-svc2-pill { transition-delay: 0s; }
.zs-svc2-pill i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.zs-svc2-canvas.has .zs-svc2-pill { opacity: 0.32; }
.zs-svc2-canvas.has .zs-svc2-pill.hot { opacity: 1; scale: 1.06; background: #fff; color: #101430; box-shadow: inset 0 0 0 1.6px #101430, 0 18px 38px -14px rgba(10,14,40,0.45); }
.zs-svc2-ghost { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; background: #fff; border: 1px solid rgba(16,20,48,0.14); color: rgba(16,20,48,0.32); border-radius: 999px; padding: 11px 17px; font: 600 13.5px var(--font-body); pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease-out); z-index: 1; }
.zs-svc2-canvas.is-live .zs-svc2-ghost { opacity: 1; transition-delay: 0.72s; }
.zs-svc2-canvas.is-ready .zs-svc2-ghost { transition-delay: 0s; }
.zs-svc2-canvas.has .zs-svc2-ghost { opacity: 0.22; }
/* floating preview */
.zs-svc2-prev { position: absolute; z-index: 5; pointer-events: none; opacity: 1; transition: opacity 0.26s var(--ease-out); }
.zs-svc2-prev.out { opacity: 0; }
.zs-svc2-prev.bot { transform: translate(-50%, 32px); }
.zs-svc2-prev.top { transform: translate(-50%, calc(-100% - 32px)); }
.zs-svc2-prev.left { transform: translate(calc(-100% - 26px), -50%); }
.zs-svc2-prev.right { transform: translate(26px, -50%); }
.zs-svc2-float { position: relative; animation: zs-svc2-in 0.42s cubic-bezier(0.22,1,0.36,1) 0.18s both; }
@keyframes zs-svc2-in { from { opacity: 0; transform: translateY(11px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.zs-svc2-float::before { content: ""; position: absolute; inset: 10px -12px -10px 12px; background: #101430; border-radius: 16px; transform: rotate(3.5deg); }
.zs-svc2-card { position: relative; width: 262px; background: #fff; border: 1px solid rgba(16,20,48,0.1); border-radius: 16px; padding: 15px 16px; box-shadow: 0 26px 54px -20px rgba(10,14,40,0.35); display: flex; flex-direction: column; gap: 10px; }
.zs-svc2-cardhead { display: flex; align-items: center; gap: 9px; }
.zs-svc2-cardhead b { font: 700 14px var(--font-body); color: var(--text-heading); }
.zs-svc2-cardic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
/* ── per-service micro-demos (each a distinct UI concept) ── */
.zs-svc2-card.dark { background: #12162E; border-color: rgba(255,255,255,0.1); box-shadow: 0 26px 54px -20px rgba(10,14,40,0.5); }
.zs-svc2-card.dark .zs-svc2-cardhead b { color: #fff; }
.zs-dm { --ease-out: cubic-bezier(0.22,1,0.36,1); }
@keyframes zs-d-pop { 0% { opacity: 0; transform: translateY(7px); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes zs-d-grow { 0% { transform: scaleY(0); } 28% { transform: scaleY(1); } 84% { transform: scaleY(1); } 94%, 100% { transform: scaleY(0); } }
@keyframes zs-d-sx { 0% { transform: scaleX(0); } 30% { transform: scaleX(1); } 84% { transform: scaleX(1); } 94%, 100% { transform: scaleX(0); } }
@keyframes zs-d-play { 0% { transform: scaleX(0); } 82% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
/* dashboard */
.zs-dash { display: flex; flex-direction: column; gap: 12px; padding: 2px 0; }
.zs-dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zs-dash-kpi { background: rgba(16,20,48,0.04); border: 1px solid rgba(16,20,48,0.06); border-radius: 9px; padding: 8px 10px; opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; }
.zs-dash-kpi span { display: block; font: 500 9.5px var(--font-body); color: var(--text-muted); }
.zs-dash-kpi b { font: 800 16px var(--font-display); color: var(--text-heading); letter-spacing: -0.02em; }
.zs-dash-chart { display: flex; align-items: flex-end; gap: 7px; height: 54px; }
.zs-dash-chart i { flex: 1; border-radius: 4px 4px 2px 2px; transform: scaleY(0); transform-origin: bottom; animation: zs-d-grow 4.6s var(--ease-out) infinite both; }
/* gradebook ring */
.zs-ring { display: flex; align-items: center; gap: 15px; padding: 4px 0; }
.zs-ring-dial { position: relative; width: 66px; height: 66px; flex-shrink: 0; }
.zs-ring-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.zs-ring-track { fill: none; stroke: rgba(16,20,48,0.09); stroke-width: 4; }
.zs-ring-arc { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; animation: zs-d-ring 4.6s var(--ease-out) infinite both; }
@keyframes zs-d-ring { 0% { stroke-dashoffset: 119.4; } 30% { stroke-dashoffset: 11; } 82% { stroke-dashoffset: 11; } 92%, 100% { stroke-dashoffset: 119.4; } }
.zs-ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.zs-ring-mid b { font: 800 17px var(--font-display); color: var(--text-heading); letter-spacing: -0.02em; line-height: 1; }
.zs-ring-mid em { font-style: normal; font: 600 9px var(--font-body); color: var(--text-muted); }
.zs-ring-rows { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.zs-ring-rows div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 11px var(--font-body); color: var(--text-body); opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; }
.zs-ring-rows b { font-size: 12px; font-weight: 800; flex-shrink: 0; }
/* course player */
.zs-play { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }
.zs-play-screen { position: relative; height: 62px; border-radius: 10px; background: linear-gradient(135deg, rgba(16,20,48,0.07), rgba(16,20,48,0.02)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.zs-play-btn { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 2px; box-shadow: 0 6px 16px -6px rgba(10,14,40,0.4); }
.zs-play-bar { position: absolute; left: 10px; right: 10px; bottom: 9px; height: 4px; border-radius: 3px; background: rgba(16,20,48,0.12); overflow: hidden; }
.zs-play-bar i { display: block; height: 100%; border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: zs-d-play 4.6s linear infinite both; }
.zs-play-list { display: flex; flex-direction: column; gap: 7px; }
.zs-play-item { display: flex; align-items: center; gap: 9px; font: 500 11.5px var(--font-body); color: var(--text-body); opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; }
.zs-play-item em { width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid; flex-shrink: 0; }
.zs-play-item span { flex: 1; }
.zs-play-item b { font-size: 12px; font-weight: 800; opacity: 0; animation: zs-d-check 4.6s var(--ease-out) infinite both; }
@keyframes zs-d-check { 0%, 6% { opacity: 0; transform: scale(0.3); } 16% { opacity: 1; transform: scale(1); } 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
/* kanban pipeline */
.zs-kan { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 6px 0 4px; }
.zs-kan-col { display: flex; flex-direction: column; gap: 7px; }
.zs-kan-h { font: 700 8.5px var(--font-body); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.zs-kan-card { background: #fff; border: 1px solid rgba(16,20,48,0.1); border-radius: 8px; padding: 8px 7px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 10px -6px rgba(10,14,40,0.2); opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; }
.zs-kan-card i { width: 13px; height: 13px; border-radius: 50%; }
.zs-kan-card em { height: 4px; border-radius: 3px; background: rgba(16,20,48,0.12); }
.zs-kan-track { position: absolute; left: 12%; right: 12%; top: 15px; height: 2px; background: rgba(16,20,48,0.08); border-radius: 2px; overflow: hidden; }
.zs-kan-track b { display: block; height: 100%; transform: scaleX(0); transform-origin: left; animation: zs-d-play 4.6s linear infinite both; }
/* team squad */
.zs-team { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 2px; }
.zs-team-avs { display: flex; align-items: center; }
.zs-team-avs span { position: relative; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 10px var(--font-body); border: 2px solid #fff; opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; }
.zs-team-avs span + span { margin-left: -9px; }
.zs-team-avs span i { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #34C77B; border: 1.5px solid #fff; }
.zs-team-avs b { margin-left: -9px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 9.5px var(--font-body); color: var(--text-muted); background: rgba(16,20,48,0.07); border: 2px solid #fff; opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; }
.zs-team-sprint { display: flex; flex-direction: column; gap: 6px; }
.zs-team-track { height: 7px; border-radius: 5px; background: rgba(16,20,48,0.09); overflow: hidden; }
.zs-team-track i { display: block; height: 100%; border-radius: 5px; transform: scaleX(0); transform-origin: left; animation: zs-d-sx 4.6s var(--ease-out) infinite both; }
.zs-team-sprint span { font: 500 11px var(--font-body); color: var(--text-muted); }
.zs-team-sprint b { font-weight: 800; color: var(--text-heading); }
/* terminal */
.zs-term { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 2px; font-family: "SF Mono", ui-monospace, monospace; }
.zs-term-line { font-size: 11px; color: rgba(255,255,255,0.82); white-space: nowrap; opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; }
.zs-term-line.ok { color: #5BE3B0; font-weight: 600; }
.zs-term-cur { display: inline-block; width: 8px; height: 14px; border-radius: 1px; animation: zs-d-blink 1.05s steps(1) infinite; }
@keyframes zs-d-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
/* AI gauge */
.zs-gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 2px; }
.zs-gauge-dial { position: relative; width: 108px; height: 60px; }
.zs-gauge-dial svg { width: 100%; height: 100%; overflow: visible; }
.zs-gauge-track { fill: none; stroke: rgba(16,20,48,0.1); stroke-width: 6; stroke-linecap: round; }
.zs-gauge-arc { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 75.4; stroke-dashoffset: 75.4; animation: zs-d-gauge 4.6s var(--ease-out) infinite both; }
@keyframes zs-d-gauge { 0% { stroke-dashoffset: 75.4; } 32% { stroke-dashoffset: 10; } 82% { stroke-dashoffset: 10; } 92%, 100% { stroke-dashoffset: 75.4; } }
.zs-gauge-mid { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.zs-gauge-mid b { font: 800 21px var(--font-display); color: var(--text-heading); letter-spacing: -0.02em; }
.zs-gauge-lbl { font-style: normal; font: 600 10.5px var(--font-body); color: var(--text-muted); }
.zs-gauge-act { display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 700 11.5px var(--font-body); border-radius: 999px; padding: 7px 13px; margin-top: 4px; box-shadow: 0 6px 16px -8px rgba(10,14,40,0.4); opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; animation-delay: 1.4s; }
/* plugin toggles */
.zs-tog { display: flex; flex-direction: column; gap: 11px; padding: 5px 0 3px; }
.zs-tog-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 12px var(--font-body); color: var(--text-heading); }
.zs-tog-sw { position: relative; width: 34px; height: 19px; border-radius: 999px; background: rgba(16,20,48,0.14); flex-shrink: 0; animation: zs-d-togbg 4.6s var(--ease-out) infinite both; }
.zs-tog-sw em { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10,14,40,0.3); animation: zs-d-togkn 4.6s var(--ease-out) infinite both; }
@keyframes zs-d-togbg { 0%, 12% { background: rgba(16,20,48,0.14); } 24%, 84% { background: var(--dc); } 94%, 100% { background: rgba(16,20,48,0.14); } }
@keyframes zs-d-togkn { 0%, 12% { transform: translateX(0); } 24%, 84% { transform: translateX(15px); } 94%, 100% { transform: translateX(0); } }
/* phone */
.zs-phone { display: flex; justify-content: center; padding: 2px 0; }
.zs-phone-frame { position: relative; width: 152px; background: linear-gradient(180deg, #fcfcff, #f3f4fb); border: 1.5px solid rgba(16,20,48,0.12); border-radius: 18px; padding: 17px 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 26px -14px rgba(10,14,40,0.32); }
.zs-phone-notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 34px; height: 4px; border-radius: 3px; background: rgba(16,20,48,0.16); }
.zs-phone-head { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.zs-phone-head b { font: 800 13px var(--font-display); color: var(--text-heading); }
.zs-phone-head i { width: 10px; height: 10px; border-radius: 50%; }
.zs-phone-item { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid rgba(16,20,48,0.08); border-radius: 9px; padding: 7px 9px; opacity: 0; animation: zs-d-pop 4.6s var(--ease-out) infinite both; }
.zs-phone-item em { font-style: normal; align-self: flex-start; color: #fff; font: 700 8.5px var(--font-body); border-radius: 5px; padding: 2px 6px; }
.zs-phone-item span { font: 600 10.5px var(--font-body); color: var(--text-heading); }
.zs-phone-toast { color: #fff; font: 700 10.5px var(--font-body); border-radius: 9px; padding: 8px 10px; text-align: center; opacity: 0; animation: zs-d-toast 4.6s var(--ease-out) infinite both; animation-delay: 1.9s; }
@keyframes zs-d-toast { 0% { opacity: 0; transform: translateY(10px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(6px); } }
/* ripple reveal */
.zs-svc2-ripple { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 1.6px solid; animation: zs-svc2-rip 0.62s cubic-bezier(0.22,1,0.36,1) both; pointer-events: none; will-change: transform, opacity; }
.zs-svc2-ripple.r2 { animation-delay: 0.09s; opacity: 0; }
@keyframes zs-svc2-rip { 0% { transform: scale(0.22); opacity: 0.85; } 100% { transform: scale(1.65); opacity: 0; } }
@media (max-width: 1180px) { .zs-svc2-pill { font-size: 13.5px; padding: 11px 16px; } }
@media (max-width: 960px) {
  .zs-svc2-wrap { grid-template-columns: 1fr; }
  .zs-svc2-canvas { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .zs-svc2-orb, .zs-svc2-axis, .zs-svc2-vlabel, .zs-svc2-hub, .zs-svc2-prev, .zs-svc2-ghost, .zs-svc2-flash { display: none; }
  .zs-svc2-pill { position: static; transform: none; white-space: normal; justify-content: flex-start; opacity: 1; scale: 1; }
  .zs-svc2-canvas.has .zs-svc2-pill { opacity: 1; scale: none; }
  /* The orbit-state rules that place these pills around the hub are
     .zs-svc2-canvas.is-live/.is-ready-scoped (0,3,0) and so outrank the
     transform:none reset above (0,1,0). Once the canvas is a plain 2-up grid
     their translate(-50%,-50%) shifts every pill half its own width to the
     left, clipping the left column. Neutralise them at matching specificity. */
  .zs-svc2-canvas.is-live .zs-svc2-pill,
  .zs-svc2-canvas.is-ready .zs-svc2-pill,
  .zs-svc2-canvas.is-merge .zs-svc2-pill { transform: none; }
}
/* Two 136px pill columns leave ~96px of text width after the 20px pill
   padding, but the longest single word here ("Development") needs ~110px at
   15px — so it ran out past the pill's rounded edge. Trim the pill and allow
   a break as a backstop rather than dropping to one column, which would make
   this a nine-item stack. */
@media (max-width: 700px) {
  .zs-svc2-canvas { gap: 10px; }
  .zs-svc2-pill { font-size: 13px; padding: 11px 13px; gap: 7px; overflow-wrap: anywhere; }
}
@media (hover: none) { .zs-svc2-prev { display: none; } }
@media (prefers-reduced-motion: reduce) { .zs-svc2-float, .zs-svc2-ripple { animation: none !important; } .zs-svc2-ripple { display: none; } .zs-dm *, .zs-dm { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 11 !important; } .zs-svc2-pill, .zs-svc2-orb, .zs-svc2-vlabel, .zs-svc2-axis, .zs-svc2-hubic, .zs-svc2-hub b, .zs-svc2-hub em, .zs-svc2-ghost { transition: none !important; } .zs-svc2-flash { animation: none !important; display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT PAGE REDESIGN — premium layered enterprise composition (pp-*)
   ═══════════════════════════════════════════════════════════════════════ */
.pp-textlink { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--text-heading); transition: gap var(--duration-standard,220ms) var(--ease-out), color var(--duration-standard,220ms) var(--ease-out); }
.pp-textlink:hover { color: var(--zs-iris-600); gap: 11px; }
.pp-textlink-iris { color: var(--zs-iris-600); }
.pp-textlink-dark { color: #fff; } .pp-textlink-dark:hover { color: #fff; opacity: 0.82; }

/* Hero — left copy · right layered floating composition */
.pp-hero { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: center; }
.pp-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pp-hero-h1 { font: var(--text-display-xl); letter-spacing: var(--tracking-display); color: var(--text-heading); margin: 0; text-wrap: balance; }
.pp-hero-sub { font: var(--text-body-lg); color: var(--text-body); margin: 0; max-width: 470px; text-wrap: pretty; }
.pp-hero-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.pp-hero-visual { position: relative; min-height: 540px; }
.pp-grid { position: absolute; width: 130%; height: 130%; z-index: 0; pointer-events: none; }
.pp-hero-back { position: absolute; z-index: 1; top: 104px; right: -76px; width: 560px; }
.pp-hero-front { position: absolute; z-index: 2; top: 0; left: -18px; width: 452px; filter: drop-shadow(0 40px 70px rgba(24,17,64,0.28)); }
.pp-hero-front .sd-stage { box-shadow: 0 30px 80px -30px rgba(24,17,64,0.5); }

/* Roster table — calm back layer, bleeds off the right edge */
.pp-roster { background: #fff; border: 1px solid rgba(20,20,50,0.07); border-radius: 18px; box-shadow: 0 34px 80px -38px rgba(24,17,64,0.45); overflow: hidden; font-family: var(--font-body); }
.pp-roster-head { display: grid; gap: 14px; align-items: center; padding: 15px 22px 13px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid rgba(20,20,50,0.07); }
.pp-roster-row { display: grid; gap: 14px; align-items: center; padding: 12px 22px; border-bottom: 1px solid rgba(20,20,50,0.045); }
.pp-roster-row:last-child { border-bottom: none; }
.pp-roster-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pp-roster-av { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.pp-roster-name { display: flex; flex-direction: column; min-width: 0; }
.pp-roster-name b { font-size: 13.5px; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-roster-name i { font-size: 11.5px; font-style: normal; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-roster-cell { font-size: 13px; color: var(--text-body); white-space: nowrap; }
.pp-roster-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.pp-roster-tdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pp-roster-num { font-weight: 700; color: var(--text-heading); }
.pp-roster-cut { justify-self: end; }

/* Browser / URL pills */
.pp-pills { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.pp-pill { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid rgba(20,20,50,0.08); border-radius: 12px; padding: 10px 14px; box-shadow: 0 12px 34px -22px rgba(24,17,64,0.4); }
.pp-pill-dots { display: inline-flex; gap: 5px; }
.pp-pill-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20,20,50,0.16); }
.pp-pill-dots i:nth-child(1) { background: #E5695B; } .pp-pill-dots i:nth-child(2) { background: #E8B84B; } .pp-pill-dots i:nth-child(3) { background: #4FBE7B; }
.pp-pill-url { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); font-family: var(--font-body); }

/* MockupSplit */
.pp-mocksplit { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: center; }
.pp-mock { position: relative; }
.pp-mock-panel { position: absolute; z-index: 3; left: -30px; top: 76px; width: 236px; }
.pp-mock-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pp-h2 { font: var(--text-h2); letter-spacing: var(--tracking-heading); color: var(--text-heading); margin: 0; }
.pp-p { font: var(--text-body-md); color: var(--text-body); margin: 0; }
.pp-checks { display: flex; flex-direction: column; gap: 10px; }

/* Float settings panel */
.pp-fpanel { background: #fff; border: 1px solid rgba(20,20,50,0.08); border-radius: 16px; box-shadow: 0 28px 64px -28px rgba(24,17,64,0.5); padding: 16px 16px 18px; font-family: var(--font-body); }
.zs-opanel { position: absolute; z-index: 6; top: 30px; right: 0; width: 216px; opacity: 0; transform: scale(0.92) translateY(-8px); transform-origin: top right; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); pointer-events: none; }
.zs-opanel.open { opacity: 1; transform: none; }
.pp-fpanel-h { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-heading); margin-bottom: 12px; }
.pp-fpanel-sec { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 13px 0 8px; }
.pp-fpanel-sec:first-of-type { margin-top: 0; }
.pp-swatches { display: flex; gap: 8px; }
.pp-sw { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.pp-sw.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--zs-iris-600); }
.pp-radi { display: flex; gap: 8px; }
.pp-radi-o { width: 40px; height: 27px; border: 1.6px solid var(--border-strong); }
.pp-radi-o.sel { border-color: var(--zs-iris-600); background: rgba(109,52,214,0.07); }
.pp-fpanel-logo { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-body); background: var(--surface-subtle); border-radius: 9px; padding: 8px 11px; }
.pp-fpanel-mark { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Bento grid of illustrated cards */
.pp-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pp-card { position: relative; background: #fff; border: 1px solid rgba(20,20,50,0.07); border-radius: 26px; box-shadow: 0 30px 64px -44px rgba(24,17,64,0.42); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.pp-card-copy { padding: 34px 34px 18px; display: flex; flex-direction: column; gap: 10px; }
.pp-card-title { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; color: var(--text-heading); margin: 0; }
.pp-card-body { font: var(--text-body-sm); color: var(--text-body); margin: 0; max-width: 40ch; }
.pp-card-visual { position: relative; margin-top: auto; padding: 6px 30px 30px; }
.pp-card-soft { background: linear-gradient(180deg,#FaF9FE,#F4F2FC); }
.pp-bento-flat .pp-card, .pp-bento-flat .zs-demo, .pp-bento-flat div.zs-demo-pop { box-shadow: none !important; }
.pp-bento-flat .zs-demo, .pp-bento-flat div.zs-demo-pop { border: none !important; }
.pp-bento-flat .pp-card-soft { background: #FFFFFF; }
.pp-card-ink { background: var(--gradient-ink); border-color: rgba(255,255,255,0.09); }
.pp-card-ink .pp-card-title { color: #fff; }
.pp-card-ink .pp-card-body { color: rgba(231,236,248,0.82); }
.pp-card-wide { grid-column: span 2; flex-direction: row; align-items: center; }
.pp-card-wide .pp-card-copy { flex: 0 0 44%; padding: 40px 8px 40px 40px; }
.pp-card-wide .pp-card-visual { flex: 1; margin-top: 0; padding: 30px 40px 30px 20px; }

/* Abstract product visuals */
.pp-viz { position: relative; width: 100%; border-radius: 18px; overflow: hidden; min-height: 176px; display: flex; align-items: center; justify-content: center; }
.pp-viz-trio { background: linear-gradient(180deg,#F7F8FE,#EDF0FB); }
.pp-viz-dots { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.pp-viz-line { position: absolute; left: 20%; right: 20%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, rgba(90,63,224,0.3), transparent); }
.pp-tile { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin: 0 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 14px 28px -10px rgba(86,56,222,0.55); }
.pp-tile-0 { background: linear-gradient(140deg,#8B5CF6,#5A3FE0); }
.pp-tile-1 { width: 72px; height: 72px; z-index: 2; background: linear-gradient(140deg,#2A6BE6,#18A8D8); }
.pp-tile-2 { background: linear-gradient(140deg,#1a2450,#3a2a6e); }
.pp-viz-orbit { min-height: 190px; background: radial-gradient(circle at 50% 50%,#F6F4FD,#EDF0FB); }
.pp-orbit-r { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid rgba(90,63,224,0.18); transform: translate(-50%,-50%); animation: pp-pulse 4.5s var(--ease-in-out) infinite; }
.pp-orbit-r1 { width: 82px; height: 82px; } .pp-orbit-r2 { width: 142px; height: 142px; animation-delay: 0.6s; } .pp-orbit-r3 { width: 200px; height: 200px; animation-delay: 1.2s; }
.pp-orbit-core { position: relative; z-index: 3; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(140deg,#6D34D6,#2A6BE6); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 32px -10px rgba(86,56,222,0.7); }
.pp-orbit-sat { position: absolute; z-index: 2; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(90,63,224,0.14), 0 6px 14px -4px rgba(86,56,222,0.5); }
.pp-orbit-s1 { top: calc(50% - 71px); left: 50%; transform: translate(-50%,-50%); }
.pp-orbit-s2 { top: 50%; left: calc(50% + 71px); transform: translate(-50%,-50%); background: #E0557A; box-shadow: 0 0 0 4px rgba(224,85,122,0.16), 0 6px 14px -4px rgba(224,85,122,0.5); }
.pp-viz-radar { min-height: 176px; background: linear-gradient(180deg,#F7F8FE,#EDF0FB); align-items: stretch; }
.pp-viz-radar svg { width: 100%; height: 100%; }
.pp-radar-sweep { transform-origin: 0 0; animation: pp-sweep 4s var(--ease-in-out) infinite alternate; }
.pp-radar-blip { animation: pp-blip 3s var(--ease-in-out) infinite; }
.pp-radar-blip.b2 { animation-delay: 0.9s; } .pp-radar-blip.b3 { animation-delay: 1.7s; }
.pp-viz-stack { min-height: 176px; background: linear-gradient(180deg,#F7F8FE,#EDF0FB); flex-direction: column; gap: 11px; padding: 26px; align-items: stretch; }
.pp-plane { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(20,20,50,0.08); border-radius: 12px; padding: 12px 16px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-heading); box-shadow: 0 10px 22px -16px rgba(24,17,64,0.4); }
.pp-plane-0 { margin-right: 44px; } .pp-plane-1 { margin: 0 22px; } .pp-plane-2 { margin-left: 44px; }
.pp-plane-dot { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg,#6D34D6,#2A6BE6); }
.pp-viz-toggles { min-height: 176px; background: linear-gradient(180deg,#F7F8FE,#EDF0FB); flex-direction: column; gap: 16px; padding: 26px 28px; align-items: stretch; justify-content: center; }
.pp-tog-row { display: flex; align-items: flex-start; gap: 12px; }
.pp-tog { width: 38px; height: 22px; border-radius: 999px; background: rgba(20,20,50,0.16); position: relative; flex-shrink: 0; margin-top: 1px; transition: background 0.2s; }
.pp-tog i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: left 0.2s; }
.pp-tog.on { background: linear-gradient(135deg,#6D34D6,#2A6BE6); } .pp-tog.on i { left: 18px; }
.pp-tog-txt { display: flex; flex-direction: column; gap: 2px; }
.pp-tog-txt b { font-size: 13.5px; font-weight: 700; color: var(--text-heading); }
.pp-tog-txt em { font-size: 12px; font-style: normal; color: var(--text-muted); }

/* Dark API / integration section */
.pp-dark { display: flex; flex-direction: column; }
.pp-dark-head { text-align: center; max-width: 740px; margin: 0 auto 46px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.pp-dark-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,4vw,46px); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: 0; text-wrap: balance; }
.pp-dark-sub { font: var(--text-body-lg); color: rgba(231,236,248,0.82); margin: 0; max-width: 600px; text-wrap: pretty; }
.pp-dark-cta { display: flex; align-items: center; gap: 24px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.pp-dark-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 48px; align-items: center; }
.pp-dark-rows { display: flex; flex-direction: column; gap: 26px; }
.pp-drow { display: flex; gap: 16px; align-items: flex-start; }
.pp-drow-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg,#F5883E,#E0557A 58%,#8B5CF6); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -10px rgba(224,85,122,0.55); }
.pp-drow-txt { display: flex; flex-direction: column; gap: 4px; }
.pp-drow-txt b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; }
.pp-drow-txt span { font-size: 14px; color: rgba(231,236,248,0.75); line-height: 1.5; }

/* VizWeave — AI thread interlaces the journey-stage columns; a light pulse travels it */
.pp-viz-weave, .pp-viz-dock { min-height: 190px; background: #FFFFFF; border: none; align-items: stretch; }
.pp-viz-weave svg, .pp-viz-dock svg { width: 100%; height: 100%; min-height: 190px; }
.pp-wv-th { stroke-dasharray: 100; animation: pp-wv-th 8s var(--ease-in-out) infinite; }
@keyframes pp-wv-th { 0% { stroke-dashoffset: 100; opacity: 0.5; } 14% { stroke-dashoffset: 0; } 93% { stroke-dashoffset: 0; opacity: 0.5; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.pp-wv-pulse { stroke-dasharray: 8 92; stroke-dashoffset: 108; opacity: 0; animation: pp-wv-pulse 8s linear infinite; }
@keyframes pp-wv-pulse { 0%, 18% { stroke-dashoffset: 108; opacity: 0; } 20% { opacity: 1; } 46% { opacity: 1; } 48% { stroke-dashoffset: 8; opacity: 0; } 54% { stroke-dashoffset: 108; opacity: 0; } 56% { opacity: 1; } 84% { opacity: 1; } 86% { stroke-dashoffset: 8; opacity: 0; } 100% { stroke-dashoffset: 108; opacity: 0; } }
.pp-wv-w1 { animation: pp-wv-w1 8s var(--ease-in-out) infinite; }
@keyframes pp-wv-w1 { 0%, 22% { opacity: 0; } 26% { opacity: 0.14; } 31%, 100% { opacity: 0; } }
.pp-wv-w2 { animation: pp-wv-w2 8s var(--ease-in-out) infinite; }
@keyframes pp-wv-w2 { 0%, 29% { opacity: 0; } 33% { opacity: 0.14; } 38%, 100% { opacity: 0; } }
.pp-wv-w3 { animation: pp-wv-w3 8s var(--ease-in-out) infinite; }
@keyframes pp-wv-w3 { 0%, 35% { opacity: 0; } 39% { opacity: 0.14; } 44%, 100% { opacity: 0; } }
.pp-wv-w4 { animation: pp-wv-w4 8s var(--ease-in-out) infinite; }
@keyframes pp-wv-w4 { 0%, 41% { opacity: 0; } 45% { opacity: 0.14; } 50%, 100% { opacity: 0; } }

/* VizDock — fixed experience layer; foundation plates swap through the API seam */
.pp-dk-pA, .pp-dk-pB { transform-box: fill-box; transform-origin: center; }
.pp-dk-pA { animation: pp-dk-pA 10s var(--ease-in-out) infinite; }
@keyframes pp-dk-pA { 0%, 42% { transform: translateX(0); opacity: 1; } 49% { transform: translateX(-46px); opacity: 0; } 50% { transform: translateX(46px); opacity: 0; } 92% { transform: translateX(46px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.pp-dk-pB { animation: pp-dk-pB 10s var(--ease-in-out) infinite; }
@keyframes pp-dk-pB { 0%, 44% { transform: translateX(46px); opacity: 0; } 52% { transform: translateX(0); opacity: 1; } 88% { transform: translateX(0); opacity: 1; } 95%, 100% { transform: translateX(-46px); opacity: 0; } }
.pp-dk-seam { animation: pp-dk-seam 10s var(--ease-in-out) infinite; }
@keyframes pp-dk-seam { 0%, 40% { transform: translateX(-140px); } 52% { transform: translateX(150px); } 53%, 86% { transform: translateX(-140px); } 98% { transform: translateX(150px); } 100% { transform: translateX(-140px); } }
.pp-dk-lsweep { animation: pp-dk-lsweep 10s var(--ease-in-out) infinite; }
@keyframes pp-dk-lsweep { 0%, 42% { transform: translateX(-100px); opacity: 0; } 44% { opacity: 1; } 52% { transform: translateX(340px); opacity: 0; } 88% { transform: translateX(-100px); opacity: 0; } 90% { opacity: 1; } 98%, 100% { transform: translateX(340px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pp-wv-th, .pp-wv-pulse, .pp-wv-w1, .pp-wv-w2, .pp-wv-w3, .pp-wv-w4, .pp-dk-pA, .pp-dk-pB, .pp-dk-seam, .pp-dk-lsweep { animation: none !important; }
  .pp-wv-th { stroke-dashoffset: 0; opacity: 0.5; } .pp-wv-pulse { opacity: 0; }
  .pp-dk-pB { opacity: 0; } .pp-dk-lsweep { opacity: 0; } .pp-dk-seam { transform: translateX(25px); }
}

/* OutcomeCurve — spacious stat section: rising curve + anchored insight card */
.pp-oc { position: relative; background: #fff; overflow: hidden; }
.pp-oc-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: clamp(84px, 9vw, 122px) 24px clamp(130px, 14vw, 190px); z-index: 2; }
.pp-oc-copy { max-width: 560px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.pp-oc h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.025em; color: var(--text-primary, #111130); text-wrap: balance; }
.pp-oc-sub { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-secondary, #4A4A68); }
.pp-oc-stats { display: flex; gap: clamp(36px, 5vw, 72px); margin-top: 26px; flex-wrap: wrap; }
.pp-oc-stats > div { display: flex; flex-direction: column; gap: 10px; }
.pp-oc-stats > div > span { font: 700 11px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted, #6E6E8C); }
.pp-oc-stats > div > b { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.02em; color: var(--text-primary, #111130); font-variant-numeric: tabular-nums; }
.pp-oc-note { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted, #6E6E8C); max-width: 430px; }
.pp-oc-links { display: flex; gap: 28px; margin-top: 20px; flex-wrap: wrap; }
.pp-oc-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--zs-iris-600, #545DE7); text-decoration: none; }
.pp-oc-links a svg:last-child { transition: transform 0.25s var(--ease-out, ease); }
.pp-oc-links a:hover svg:last-child { transform: translateX(3px); }
.pp-oc-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pp-oc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-oc-line { stroke-dasharray: 101 101; stroke-dashoffset: 101; transition: stroke-dashoffset 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
.pp-oc-fill { opacity: 0; transition: opacity 1.4s ease 0.9s; }
.pp-oc.on .pp-oc-line { stroke-dashoffset: 0; }
.pp-oc.on .pp-oc-fill { opacity: 1; }
.pp-oc-stem { position: absolute; width: 1px; background: linear-gradient(to bottom, rgba(17,17,48,0.28), rgba(17,17,48,0)); transform: scaleY(0); transform-origin: top; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.2s; }
.pp-oc.on .pp-oc-stem { transform: scaleY(1); }
.pp-oc-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2.5px solid var(--zs-iris-600, #545DE7); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s; }
.pp-oc.on .pp-oc-dot { transform: translate(-50%, -50%) scale(1); }
.pp-oc-ping { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(84,93,231,0.5); opacity: 0; transform: translate(-50%, -50%); }
.pp-oc.on .pp-oc-ping { animation: pp-oc-ping 3.4s ease-out 1.7s infinite; }
@keyframes pp-oc-ping { 0% { opacity: 0.65; transform: translate(-50%, -50%) scale(1); } 70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); } }
.pp-oc-card { --oc-tx: -50%; position: absolute; pointer-events: auto; min-width: 216px; background: #fff; border: 1px solid rgba(17,17,48,0.08); border-radius: 14px; padding: 15px 20px 14px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 18px 44px -22px rgba(17,17,48,0.24); opacity: 0; transform: translate(var(--oc-tx), calc(-100% - 16px)) translateY(8px); transition: opacity 0.7s ease 1.3s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.3s; }
.pp-oc.on .pp-oc-card { opacity: 1; transform: translate(var(--oc-tx), calc(-100% - 16px)); }
.pp-oc-clabel { font: 700 10.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted, #6E6E8C); white-space: nowrap; }
.pp-oc-crow { display: flex; align-items: center; gap: 10px; }
.pp-oc-crow b { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--text-primary, #111130); font-variant-numeric: tabular-nums; }
.pp-oc-pill { font-size: 12px; font-weight: 700; color: var(--zs-iris-600, #545DE7); padding: 3px 9px; border-radius: 999px; background: linear-gradient(90deg, rgba(42,107,230,0.09), rgba(123,79,232,0.11)); border: 1px solid rgba(84,93,231,0.26); white-space: nowrap; }
@media (max-width: 920px) {
  .pp-oc-inner { padding-bottom: 40px; }
  .pp-oc-art { position: relative; inset: auto; height: 320px; }
  .pp-oc-card { --oc-tx: -62%; min-width: 190px; }
  .pp-oc-crow b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-oc-line, .pp-oc-fill, .pp-oc-card, .pp-oc-stem, .pp-oc-dot { transition: none !important; }
  .pp-oc.on .pp-oc-ping { animation: none; }
}

/* TopologyArt — core → API gateway → hosted/headless/Canvas destinations */
.pp-topo { width: 100%; }
.pp-topo svg { width: 100%; height: auto; display: block; }
.pp-tp-glow { transform-box: fill-box; transform-origin: center; animation: pp-lay-glow 4.5s var(--ease-in-out) infinite alternate; }
.pp-tp-pulse { opacity: 0; stroke-dashoffset: 112; }
.pp-tp-p1 { animation: pp-tp-pulse 9s linear infinite; }
.pp-tp-p2 { animation: pp-tp-pulse 9s linear infinite; animation-delay: 3s; }
.pp-tp-p3 { animation: pp-tp-pulse 9s linear infinite; animation-delay: 6s; }
@keyframes pp-tp-pulse { 0% { stroke-dashoffset: 112; opacity: 0; } 2% { opacity: 1; } 20% { opacity: 1; } 24% { stroke-dashoffset: 12; opacity: 0; } 100% { stroke-dashoffset: 12; opacity: 0; } }
.pp-tp-on1 { animation: pp-tp-on 9s var(--ease-in-out) infinite; }
.pp-tp-on2 { animation: pp-tp-on 9s var(--ease-in-out) infinite; animation-delay: 3s; }
.pp-tp-on3 { animation: pp-tp-on 9s var(--ease-in-out) infinite; animation-delay: 6s; }
@keyframes pp-tp-on { 0%, 18% { opacity: 0; } 24% { opacity: 1; } 34% { opacity: 0.85; } 44%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-tp-glow, .pp-tp-pulse, .pp-tp-on1, .pp-tp-on2, .pp-tp-on3 { animation: none !important; } .pp-tp-pulse { opacity: 0; } .pp-tp-on1, .pp-tp-on2, .pp-tp-on3 { opacity: 0.7; } }

/* LayerDeployArt — floating intelligence layer beaming onto platform slabs */
.pp-lay { width: 100%; }
.pp-lay svg { width: 100%; height: auto; display: block; }
.pp-lay-plane { animation: pp-lay-bob 6s var(--ease-in-out) infinite alternate; }
@keyframes pp-lay-bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.pp-lay-orbglow { transform-box: fill-box; transform-origin: center; animation: pp-lay-glow 4.5s var(--ease-in-out) infinite alternate; }
@keyframes pp-lay-glow { from { opacity: 0.55; transform: scale(1); } to { opacity: 1; transform: scale(1.18); } }
.pp-lay-bm { transform-box: fill-box; transform-origin: center top; }
.pp-lay-bmC { animation: pp-lay-bmC 3.5s var(--ease-in-out) infinite alternate; }
@keyframes pp-lay-bmC { from { opacity: 0.5; } to { opacity: 0.9; } }
.pp-lay-bmL { animation: pp-lay-bmSide 9s var(--ease-in-out) infinite; }
.pp-lay-bmR { animation: pp-lay-bmSide 9s var(--ease-in-out) infinite; animation-delay: -4.5s; }
@keyframes pp-lay-bmSide { 0%, 8% { transform: scaleY(0); opacity: 0; } 12% { opacity: 0.9; } 20% { transform: scaleY(1); opacity: 0.9; } 40% { opacity: 0.85; transform: scaleY(1); } 50%, 100% { opacity: 0; transform: scaleY(1); } }
.pp-lay-fL { animation: pp-lay-flash 9s var(--ease-in-out) infinite; }
.pp-lay-fR { animation: pp-lay-flash 9s var(--ease-in-out) infinite; animation-delay: -4.5s; }
@keyframes pp-lay-flash { 0%, 17% { opacity: 0; } 23% { opacity: 1; } 33% { opacity: 0.45; } 42% { opacity: 0.55; } 52%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-lay-plane, .pp-lay-orbglow, .pp-lay-bm, .pp-lay-fL, .pp-lay-fR { animation: none !important; } .pp-lay-bm { opacity: 0.7; } }

/* Code card */
.pp-code { background: rgba(8,12,30,0.66); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; overflow: hidden; box-shadow: 0 34px 74px -34px rgba(0,0,0,0.6); }
.pp-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pp-code-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: rgba(231,236,248,0.7); }
.pp-code-dots { display: inline-flex; gap: 6px; }
.pp-code-dots i { width: 10px; height: 10px; border-radius: 50%; }
.pp-code-dots i:nth-child(1) { background: #E5695B; } .pp-code-dots i:nth-child(2) { background: #E8B84B; } .pp-code-dots i:nth-child(3) { background: #4FBE7B; }
.pp-code-body { padding: 16px 10px 18px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.75; overflow-x: auto; }
.pp-code-line { display: flex; gap: 14px; white-space: pre; }
.pp-code-ln { color: rgba(255,255,255,0.24); text-align: right; width: 18px; flex-shrink: 0; user-select: none; }
.pp-code code { color: #E7ECF8; font-family: inherit; }
.cc-kw { color: #C792EA; } .cc-str { color: #86D9A6; } .cc-com { color: rgba(231,236,248,0.42); font-style: italic; } .cc-fn { color: #82AAFF; } .cc-var { color: #F5A85F; } .cc-prop { color: #22BCE0; } .cc-punc { color: rgba(231,236,248,0.72); } .cc-num { color: #F78C6C; } .cc-txt { color: #E7ECF8; }

/* Outcomes slider */
.pp-out-head { text-align: center; max-width: 680px; margin: 0 auto 46px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pp-eyebrow-c { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zs-iris-600); }
.pp-grad-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.6vw,44px); line-height: 1.06; letter-spacing: -0.02em; margin: 0; background: linear-gradient(90deg,#6D34D6 0%,#2A6BE6 52%,#18A8D8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-wrap: balance; }
.pp-out-sub { font: var(--text-body-lg); color: var(--text-body); margin: 0; max-width: 560px; text-wrap: pretty; }
.pp-out-card { display: grid; grid-template-columns: 1.3fr 0.7fr; border: 1px solid rgba(20,20,50,0.08); border-radius: 26px; overflow: hidden; box-shadow: 0 34px 74px -46px rgba(24,17,64,0.4); background: #fff; }
.pp-out-left { padding: 40px 44px; display: flex; flex-direction: column; }
.pp-out-read { display: flex; align-items: baseline; gap: 9px; }
.pp-out-read b { font-family: var(--font-display); font-weight: 800; font-size: 46px; letter-spacing: -0.02em; color: var(--text-heading); line-height: 1; }
.pp-out-read span { font-size: 15px; color: var(--text-muted); }
.pp-out-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0 28px; }
.pp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #6D34D6 var(--pp-fill,50%), rgba(20,20,50,0.1) var(--pp-fill,50%)); outline: none; cursor: pointer; }
.pp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 2px 10px rgba(24,17,64,0.35), 0 0 0 1px rgba(20,20,50,0.06); cursor: pointer; }
.pp-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 2px 10px rgba(24,17,64,0.35); cursor: pointer; }
.pp-out-ticks { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.pp-out-right { background: #F7F5FD; padding: 38px 40px; display: flex; flex-direction: column; gap: 22px; border-left: 1px solid rgba(20,20,50,0.06); }
.pp-out-panel-h { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.pp-out-metric { display: flex; flex-direction: column; gap: 4px; }
.pp-out-mlabel { font-size: 13.5px; color: var(--text-body); }
.pp-out-mval { font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -0.02em; color: var(--text-heading); }
.pp-out-note { font-size: 12.5px; color: var(--text-muted); margin-top: auto; }

/* Link cards */
.pp-linkcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.pp-linkcard { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid rgba(20,20,50,0.08); border-radius: 18px; padding: 22px 24px; box-shadow: 0 18px 42px -34px rgba(24,17,64,0.4); transition: transform var(--duration-standard,220ms) var(--ease-out), box-shadow var(--duration-standard,220ms) var(--ease-out), border-color var(--duration-standard,220ms) var(--ease-out); }
.pp-linkcard:hover { transform: translateY(-3px); box-shadow: 0 28px 52px -30px rgba(24,17,64,0.45); border-color: rgba(90,63,224,0.28); }
.pp-linkcard-ico { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg,#6D34D6,#2A6BE6); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -10px rgba(86,56,222,0.6); }
.pp-linkcard-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pp-linkcard-txt b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-heading); }
.pp-linkcard-txt span { font-size: 13.5px; color: var(--text-body); }

@keyframes pp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes pp-sweep { from { transform: rotate(-86deg); } to { transform: rotate(86deg); } }
@keyframes pp-blip { 0%,100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.18); } }

@media (max-width: 1080px) {
  .pp-hero { grid-template-columns: 1fr; gap: 8px; }
  .pp-hero-visual { min-height: 0; margin-top: 26px; }
  .pp-grid, .pp-hero-back { display: none; }
  .pp-hero-front { position: static; width: 100%; max-width: 480px; filter: none; }
  .pp-mocksplit, .pp-dark-grid, .pp-out-card, .pp-linkcards, .pp-bento { grid-template-columns: 1fr; }
  .pp-mocksplit { gap: 40px; }
  .pp-mock-panel { position: static; width: 100%; max-width: 260px; margin-top: 16px; }
  .pp-card-wide { grid-column: span 1; flex-direction: column; }
  .pp-card-wide .pp-card-copy { flex: none; padding: 34px 34px 18px; }
  .pp-card-wide .pp-card-visual { padding: 6px 30px 30px; }
  .pp-out-right { border-left: none; border-top: 1px solid rgba(20,20,50,0.06); }
  .pp-dark-grid { gap: 36px; }
}
@media (prefers-reduced-motion: reduce) { .pp-orbit-r, .pp-radar-sweep, .pp-radar-blip { animation: none !important; } }

/* VizScan — radar sweep catches the fading learner and scores them before the edge */
.pp-viz-scan { min-height: 190px; background: linear-gradient(180deg,#F7F8FE,#EDF0FB); align-items: stretch; }
.pp-viz-scan svg, .pp-viz-bell svg { width: 100%; height: 100%; min-height: 190px; }
.pp-scan-beam { transform-box: view-box; transform-origin: 220px 95px; animation: pp-scan-beam 6.5s linear infinite; }
@keyframes pp-scan-beam { to { transform: rotate(360deg); } }
.pp-scan-hubp { transform-box: fill-box; transform-origin: center; animation: pp-scan-hubp 3.25s var(--ease-out) infinite; }
@keyframes pp-scan-hubp { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.pp-scan-c1, .pp-scan-c2, .pp-scan-c3 { transform-box: fill-box; transform-origin: center; }
.pp-scan-c1 { animation: pp-scan-blip1 6.5s linear infinite; }
@keyframes pp-scan-blip1 { 0%, 63% { opacity: 0.82; } 67% { opacity: 1; } 72%, 100% { opacity: 0.82; } }
.pp-scan-c2 { animation: pp-scan-blip2 6.5s linear infinite; }
@keyframes pp-scan-blip2 { 0%, 7% { opacity: 0.82; } 11% { opacity: 1; } 16%, 100% { opacity: 0.82; } }
.pp-scan-c3 { animation: pp-scan-c3 6.5s var(--ease-in-out) infinite; }
@keyframes pp-scan-c3 { 0% { opacity: 0.92; transform: none; } 27% { opacity: 0.55; transform: translateY(2px); } 31% { opacity: 1; transform: translateY(0) scale(1.14); } 35% { transform: scale(1); } 90% { opacity: 1; } 97%, 100% { opacity: 0.92; } }
.pp-scan-c3bg { animation: pp-scan-c3bg 6.5s linear infinite; }
@keyframes pp-scan-c3bg { 0%, 29% { fill: #fff; } 32%, 90% { fill: #E0557A; } 97%, 100% { fill: #fff; } }
.pp-scan-c3ic { animation: pp-scan-c3ic 6.5s linear infinite; }
@keyframes pp-scan-c3ic { 0%, 29% { stroke: #9AA3C8; } 32%, 90% { stroke: #fff; } 97%, 100% { stroke: #9AA3C8; } }
.pp-scan-ring { animation: pp-scan-ring 6.5s var(--ease-in-out) infinite; }
@keyframes pp-scan-ring { 0%, 30% { stroke-dashoffset: 100; opacity: 0; } 32% { opacity: 0.95; } 44% { stroke-dashoffset: 27; } 88% { stroke-dashoffset: 27; opacity: 0.95; } 96%, 100% { stroke-dashoffset: 27; opacity: 0; } }
.pp-scan-glow { animation: pp-scan-glow 6.5s var(--ease-in-out) infinite; }
@keyframes pp-scan-glow { 0%, 29% { opacity: 0; } 34% { opacity: 0.9; } 50% { opacity: 0.45; } 66% { opacity: 0.75; } 88% { opacity: 0.45; } 96%, 100% { opacity: 0; } }
.pp-scan-bar { transform-box: fill-box; transform-origin: center bottom; animation: pp-scan-bar 6.5s var(--ease-in-out) infinite; }
@keyframes pp-scan-bar { 0% { transform: scaleY(1); opacity: 0.9; } 24% { transform: scaleY(0.18); opacity: 0.45; } 90% { transform: scaleY(0.18); opacity: 0.45; } 100% { transform: scaleY(1); opacity: 0.9; } }

/* VizBell — momentum dips, the bell rings once, one directed signal re-lights that learner only */
.pp-viz-bell { min-height: 190px; background: radial-gradient(circle at 20% 50%,#F6F4FD,#EDF0FB); align-items: stretch; }
.pp-bell-chip { transform-box: fill-box; transform-origin: center; animation: pp-bell-chip 7s var(--ease-in-out) infinite; }
@keyframes pp-bell-chip { 0%, 16% { transform: rotate(0deg); } 19% { transform: rotate(9deg); } 22% { transform: rotate(-8deg); } 25% { transform: rotate(5deg); } 28% { transform: rotate(-3deg); } 31%, 100% { transform: rotate(0deg); } }
.pp-bell-pulse { transform-box: fill-box; transform-origin: center; animation: pp-bell-pulse 7s var(--ease-out) infinite; }
@keyframes pp-bell-pulse { 0%, 17% { transform: scale(0.7); opacity: 0; } 21% { opacity: 0.7; } 34%, 100% { transform: scale(1.7); opacity: 0; } }
.pp-bell-arc { opacity: 0; animation: pp-bell-arc 7s var(--ease-in-out) infinite; }
@keyframes pp-bell-arc { 0%, 24% { opacity: 0; } 29% { opacity: 0.9; } 40% { opacity: 0.7; } 48%, 100% { opacity: 0; } }
.pp-bell-amb { transform-box: fill-box; transform-origin: center; animation: pp-bell-amb 5.6s var(--ease-in-out) infinite alternate; }
@keyframes pp-bell-amb { from { transform: translateY(0); } to { transform: translateY(-3.5px); } }
.pp-bell-amb2 { animation-delay: -1.8s; } .pp-bell-amb3 { animation-delay: -3.4s; }
.pp-bell-t { transform-box: fill-box; transform-origin: center; animation: pp-bell-t 7s var(--ease-in-out) infinite; }
@keyframes pp-bell-t { 0% { opacity: 1; transform: none; } 6% { opacity: 1; } 13% { opacity: 0.52; transform: translateY(4px); } 42% { opacity: 0.52; transform: translateY(4px); } 47% { opacity: 1; transform: translateY(0) scale(1.13); } 52% { transform: scale(1); } 93%, 100% { opacity: 1; } }
.pp-bell-tgrad { opacity: 0; animation: pp-bell-tgrad 7s linear infinite; }
@keyframes pp-bell-tgrad { 0%, 44% { opacity: 0; } 48%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.pp-bell-tic { animation: pp-bell-tic 7s linear infinite; }
@keyframes pp-bell-tic { 0%, 44% { stroke: #9AA3C8; } 48%, 92% { stroke: #fff; } 98%, 100% { stroke: #9AA3C8; } }
.pp-bell-halo { transform-box: fill-box; transform-origin: center; animation: pp-bell-halo 7s var(--ease-out) infinite; }
@keyframes pp-bell-halo { 0%, 44% { transform: scale(0.5); opacity: 0; } 48% { opacity: 0.6; } 60%, 100% { transform: scale(1.8); opacity: 0; } }
.pp-bell-dot { animation: pp-bell-dot 7s linear infinite; }
@keyframes pp-bell-dot { 0%, 8% { opacity: 0; fill: #F5A524; } 13%, 44% { opacity: 1; fill: #F5A524; } 48%, 90% { opacity: 1; fill: #2FA36B; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pp-scan-beam, .pp-scan-hubp, .pp-scan-c1, .pp-scan-c2, .pp-scan-c3, .pp-scan-c3bg, .pp-scan-c3ic, .pp-scan-ring, .pp-scan-glow, .pp-scan-bar, .pp-bell-chip, .pp-bell-pulse, .pp-bell-arc, .pp-bell-amb, .pp-bell-t, .pp-bell-tgrad, .pp-bell-tic, .pp-bell-halo, .pp-bell-dot { animation: none !important; }
  .pp-scan-beam, .pp-scan-hubp, .pp-bell-pulse, .pp-bell-halo { display: none; }
  .pp-scan-c3bg { fill: #E0557A; } .pp-scan-c3ic { stroke: #fff; } .pp-scan-ring { stroke-dashoffset: 27; opacity: 0.95; } .pp-scan-glow { opacity: 0.5; } .pp-scan-bar { transform: scaleY(0.4); opacity: 0.5; }
  .pp-bell-arc { opacity: 0.6; } .pp-bell-tgrad { opacity: 1; } .pp-bell-tic { stroke: #fff; } .pp-bell-dot { opacity: 1; fill: #2FA36B; }
}

/* ═══════════ Hero product illustrations (pp-art-*) ═══════════ */
.pp-hero-art-wrap { display: flex; align-items: center; justify-content: center; overflow: visible; }
.pp-art { position: relative; width: 100%; max-width: 512px; }
.pp-art-glow { position: absolute; z-index: 0; inset: -12% -10%; background: radial-gradient(50% 48% at 74% 24%, rgba(34,188,224,0.20), transparent 72%), radial-gradient(52% 52% at 24% 84%, rgba(109,52,214,0.18), transparent 72%); }
.pp-waves { position: absolute; z-index: 0; pointer-events: none; }
.pp-art-waves { left: -18%; right: -22%; bottom: -16%; width: 140%; height: 78%; opacity: 0.72; }

/* Sublime — animated "cohort momentum" card + living depth layer */
.pp-art-sublime { min-height: 452px; display: flex; align-items: center; }
.pp-art-layer { position: absolute; z-index: 1; right: -1%; top: 52px; width: 78%; height: 80%; border-radius: 26px; background: linear-gradient(156deg,#22BCE0 0%,#2A6BE6 46%,#6D34D6 100%); background-size: 200% 200%; box-shadow: 0 46px 92px -34px rgba(60,60,160,0.55); animation: pp-hue 12s var(--ease-in-out) infinite; }
.pp-art-card { position: relative; z-index: 2; width: 84%; margin-right: auto; background: linear-gradient(180deg,#FFFFFF,#F6F5FC); border: 1px solid rgba(20,20,50,0.06); border-radius: 24px; box-shadow: 0 46px 104px -40px rgba(24,17,64,0.44); padding: 24px 24px 22px; overflow: hidden; }
.pp-art-dots { position: absolute; top: 0; left: 0; right: 0; height: 60px; opacity: 0.8; }
.pp-art-head { position: relative; display: flex; align-items: center; gap: 14px; }
.pp-art-avatar { position: relative; width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pp-art-avatar i { position: absolute; border-radius: 50%; }
.pp-art-avatar i:nth-child(1) { width: 52px; height: 52px; border: 1.6px dashed rgba(90,63,224,0.42); animation: pp-spin 22s linear infinite; }
.pp-art-avatar i:nth-child(2) { width: 37px; height: 37px; border: 1.6px dashed rgba(42,107,230,0.4); animation: pp-spin 15s linear infinite reverse; }
.pp-art-avatar i:nth-child(3) { width: 30px; height: 30px; background: linear-gradient(135deg,#6D34D6,#2A6BE6); box-shadow: 0 6px 14px -4px rgba(86,56,222,0.55); }
.pp-art-avatar b { position: relative; z-index: 1; display: inline-flex; }
.pp-art-htext { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-art-htext b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-heading); }
.pp-art-htext em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.pp-art-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; color: #1E9D57; background: rgba(30,157,87,0.1); padding: 5px 11px; border-radius: 999px; flex-shrink: 0; }
.pp-art-live i { width: 7px; height: 7px; border-radius: 50%; background: #1E9D57; animation: pp-pulsedot 2s var(--ease-in-out) infinite; }
.pp-art-spark { position: relative; margin-top: 16px; height: 62px; border-radius: 12px; background: linear-gradient(180deg, rgba(109,52,214,0.05), rgba(42,107,230,0.015)); box-shadow: inset 0 0 0 1px rgba(20,20,50,0.04); padding: 3px 5px; overflow: hidden; }
.pp-art-spark svg { width: 100%; height: 100%; display: block; }
.pp-art-spark-line { fill: none; stroke: url(#pp-sl); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 480; stroke-dashoffset: 480; animation: pp-draw 2.4s var(--ease-out) 0.3s forwards; }
.pp-art-spark-area { opacity: 0; animation: pp-fade 1.2s ease-out 2.1s forwards; }
.pp-art-spark-dot { transform-box: fill-box; transform-origin: center; animation: pp-pulsedot 2.2s var(--ease-in-out) 2.5s infinite; }
.pp-art-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.pp-art-bar { display: grid; grid-template-columns: 76px 1fr 42px; align-items: center; gap: 12px; }
.pp-art-bar-l { font-family: var(--font-body); font-size: 12.5px; color: var(--text-body); white-space: nowrap; }
.pp-art-bar-t { height: 8px; border-radius: 999px; background: rgba(20,20,50,0.08); overflow: hidden; }
.pp-art-bar-t i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg,#6D34D6,#2A6BE6); animation: pp-barfill 1.5s var(--ease-out) forwards; }
.pp-art-bar-v { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--text-heading); text-align: right; }
.pp-art-enroll { position: relative; margin-top: 18px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 13px; background: #fff; box-shadow: 0 12px 28px -12px rgba(24,17,64,0.3), inset 0 0 0 1px rgba(20,20,50,0.05); font-family: var(--font-body); font-weight: 700; font-size: 14.5px; color: var(--zs-iris-600); overflow: hidden; }
.pp-art-enroll-ic { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#6D34D6,#2A6BE6); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 10px -3px rgba(86,56,222,0.5); }
.pp-art-enroll::after { content: ""; position: absolute; top: 0; left: -45%; width: 42%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); transform: skewX(-18deg); animation: pp-shine 4.8s ease-in-out 1.6s infinite; }
.pp-art-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid rgba(20,20,50,0.06); border-radius: 14px; padding: 10px 14px; box-shadow: 0 24px 48px -20px rgba(24,17,64,0.4); font-family: var(--font-body); font-size: 13.5px; color: var(--text-body); font-weight: 600; }
.pp-art-chip b { color: var(--text-heading); font-weight: 800; }
.pp-art-chip-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pp-art-chip-tr { top: -8px; right: -14px; animation: pp-flt-a 5.5s var(--ease-in-out) infinite; }
.pp-art-chip-br { right: -16px; bottom: 40px; animation: pp-flt-b 6.5s var(--ease-in-out) infinite; }
.pp-art-chip-tx { display: flex; flex-direction: column; line-height: 1.28; }
.pp-art-chip-tx em { font-style: normal; font-size: 11px; color: var(--text-muted); font-weight: 500; }
.pp-art-ring { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.pp-art-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#6D34D6, #2A6BE6 calc(var(--pp-p) * 1turn), rgba(20,20,50,0.1) calc(var(--pp-p) * 1turn)); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%); mask: radial-gradient(closest-side, transparent 62%, #000 64%); animation: pp-ringfill 1.8s var(--ease-out) 0.7s forwards; }
.pp-art-ring i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 800; color: var(--text-heading); }

/* AI Mentor — floating capability toggles, scanning highlight + activating switches */
.pp-art-mentor { display: flex; align-items: center; justify-content: center; min-height: 500px; overflow: visible; }
.pp-art-mwaves { position: absolute; z-index: 0; top: 0; left: 50%; width: 100%; height: 100%; transform: translate(-50%,0); opacity: 0.42; pointer-events: none; animation: pp-mwv-sway 26s var(--ease-in-out) infinite alternate; }
.pp-art-feed { position: relative; z-index: 1; width: 100%; max-width: 452px; margin: 0 auto; overflow: visible; -webkit-mask: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%) center / 260% 100% no-repeat; mask: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%) center / 260% 100% no-repeat; }
.pp-tcard { position: absolute; left: 50%; width: 86%; display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.97); border: 1px solid rgba(20,20,50,0.05); border-radius: 20px; padding: 17px 22px; box-shadow: 0 24px 46px -30px rgba(24,17,64,0.5); transform: translateX(calc(-50% + var(--dx,0px))) scale(var(--sc,1)); transition: top 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s cubic-bezier(0.4,0,0.2,1), box-shadow 0.6s ease; will-change: top, transform, opacity; }
.pp-tcard.focus { box-shadow: 0 42px 72px -28px rgba(24,17,64,0.58), 0 0 0 1px rgba(90,63,224,0.09); }
.pp-tcard b { flex: 1; font-family: var(--font-body); font-weight: 650; font-size: 18px; letter-spacing: -0.01em; color: var(--text-heading); white-space: nowrap; }
.pp-tsw { width: 48px; height: 27px; border-radius: 999px; background: #d4d5df; position: relative; flex-shrink: 0; }
.pp-tsw i { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28); }
.pp-tsw.on { background: linear-gradient(135deg,#4a4560,#181630); }
.pp-tsw.on i { left: 24px; }
.pp-tchip { font-family: var(--font-body); font-size: 13px; font-weight: 650; padding: 6px 14px; border-radius: 999px; flex-shrink: 0; }
.pp-tchip-on { color: #17915a; background: rgba(30,157,87,0.12); }
.pp-tchip-rdy { color: #6b6b7d; background: transparent; box-shadow: inset 0 0 0 1px rgba(20,20,50,0.14); }
.pp-tcard.focus .pp-tchip-on { color: #0e8a4f; background: rgba(30,157,87,0.16); }

@keyframes pp-flt-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pp-flt-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes pp-flt-card { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pp-hue { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pp-spin { to { transform: rotate(1turn); } }
@keyframes pp-pulsedot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: 0.45; } }
@keyframes pp-draw { to { stroke-dashoffset: 0; } }
@keyframes pp-fade { to { opacity: 1; } }
@keyframes pp-barfill { to { width: var(--w); } }
@keyframes pp-shine { 0% { left: -45%; } 55% { left: 130%; } 100% { left: 130%; } }
@keyframes pp-ringfill { from { --pp-p: 0; } to { --pp-p: 0.94; } }
@keyframes pp-cardflt { 0%,100% { transform: translateX(var(--dx)) translateY(-5px) scale(var(--sc,1)); } 50% { transform: translateX(var(--dx)) translateY(5px) scale(var(--sc,1)); } }
@keyframes pp-knob { from { left: 2.5px; } to { left: 20.5px; } }
@keyframes pp-halo { 0% { box-shadow: 0 0 0 0 rgba(109,52,214,0.4); } 70%,100% { box-shadow: 0 0 0 15px rgba(109,52,214,0); } }
@keyframes pp-scan { 0% { top: 6%; opacity: 0; } 12% { opacity: 0.9; } 84% { opacity: 0.9; } 100% { top: 82%; opacity: 0; } }
@keyframes pp-mwv-sway { from { transform: translate(-50%,0) translateX(-12px); } to { transform: translate(-50%,0) translateX(12px); } }
@property --pp-p { syntax: "<number>"; inherits: false; initial-value: 0; }

@media (max-width: 1080px) { .pp-art { max-width: 460px; } .pp-art-sublime { min-height: 400px; } .pp-art-mentor { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) {
  .pp-art-layer, .pp-art-card, .pp-art-avatar i, .pp-art-live i, .pp-art-spark-line, .pp-art-spark-area, .pp-art-spark-dot, .pp-art-bar-t i, .pp-art-enroll::after, .pp-art-ring::before, .pp-art-chip-tr, .pp-art-chip-br, .pp-art-mwaves { animation: none !important; }
  .pp-art-spark-line { stroke-dashoffset: 0 !important; }
  .pp-art-spark-area { opacity: 1 !important; }
  .pp-art-bar-t i { width: var(--w) !important; }
  .pp-art-ring::before { --pp-p: 0.94 !important; }
  .pp-tcard { transition: none !important; }
}

/* Job detail page — stack the content/sidebar and grids on small screens. */
@media (max-width: 900px) {
  .zs-jd-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .zs-jd-side { position: static !important; }
  .zs-jd-steps, .zs-jd-why { grid-template-columns: 1fr !important; }
  .zs-jd-benefits { grid-template-columns: 1fr !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .zs-jd-steps, .zs-jd-why { grid-template-columns: 1fr 1fr !important; }
}

/* ─────────────────────  Mobile navigation menu  ───────────────────── */
.zs-nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.65); color: var(--text-heading); cursor: pointer;
}
.zs-nav-burger:hover { background: var(--surface-subtle); }
@media (max-width: 960px) {
  .zs-nav-burger { display: inline-flex; }
  .zs-nav-desk { display: none !important; }
}
@media (min-width: 961px) { .zs-mobile-drawer { display: none !important; } }
.zs-mobile-drawer {
  border-top: 1px solid var(--border-default);
  background: rgba(255,255,255,0.98);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  padding: 10px 18px 24px; max-height: calc(100dvh - 68px); overflow-y: auto;
  animation: zs-mdrawer-in 0.26s var(--ease-out);
}
@keyframes zs-mdrawer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.zs-mdrawer-group { padding: 4px 0; border-bottom: 1px solid var(--border-default); }
.zs-mdrawer-label { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 8px 4px 2px; }
.zs-mobile-drawer a { display: flex; align-items: center; gap: 11px; padding: 11px 8px; font: 500 15.5px var(--font-body); color: var(--text-body); text-decoration: none; border-radius: var(--radius-md); }
.zs-mobile-drawer a:hover, .zs-mobile-drawer a:active { background: var(--surface-subtle); color: var(--brand-primary); }
.zs-mdrawer-actions { padding-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.zs-mdrawer-cta { margin-top: 10px; width: 100%; padding: 14px 18px; border: none; border-radius: var(--radius-pill); background: var(--zs-grad-ib); color: #fff; font: 700 15px var(--font-body); cursor: pointer; }

/* Tighten nav gutters on small phones so the logo + menu button always fit. */
@media (max-width: 480px) {
  .zs-navbar-spectrum ~ div, nav > div:first-of-type { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Offer campaign landing pages (pages-offers.jsx / config/offer_pages.yml)
   Ported from the approved Ascent offer designs. Appended rather than merged
   so the site-wide rules above (newsletter, job detail, mobile nav) are kept.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Offer FAQ rows reuse the .zs-tr-plus glyph but open as a "−" rather than the
   site-wide "×", per the offer design. Scoped to .ofr-qa so the shared
   accordion elsewhere on the site is untouched. */
.ofr-qa.open .zs-tr-plus { transform: rotate(180deg); border-color: var(--zs-iris-600, #545DE7); }
.ofr-qa.open .zs-tr-plus::before { background: var(--zs-iris-600, #545DE7); }
.ofr-qa.open .zs-tr-plus::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

/* Offer landing pages v2 — chapter-rail editorial system */
.ofx { position: relative; max-width: 1240px; margin: 0 auto; padding: 26px 32px 64px; }
.ofx-flow { position: relative; padding-left: 30px; }
.ofx-flow .ofx-rail { position: absolute; left: 0; top: 24px; bottom: 24px; width: 1.5px; background: linear-gradient(180deg, rgba(86,56,222,0.35), rgba(42,107,230,0.25) 55%, rgba(34,211,238,0.2)); }
.ofx-endsec { margin-top: 44px; }
.ofx-chap { display: flex; margin: 44px 0 16px; position: relative; }
.ofx-chap::before { content: ""; position: absolute; left: -30px; top: 50%; width: 30px; height: 1.5px; background: rgba(86,56,222,0.3); }
.ofx-chap-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: #fff; font: 700 13.5px var(--font-body); }
.ofx-chap-pill.c0 { color: var(--zs-iris-700, #4230B8); border: 1.5px solid rgba(86,56,222,0.4); }
.ofx-chap-pill.c1 { color: #1D4FD7; border: 1.5px solid rgba(42,107,230,0.4); }
.ofx-chap-pill.c2 { color: #0E7490; border: 1.5px solid rgba(34,211,238,0.45); }
.ofx-panel { position: relative; border-radius: 30px; padding: clamp(36px, 5vw, 68px); }
.ofx-panel[data-tone="violet"] { background: linear-gradient(180deg, #F8F5FF, #F1EBFE); }
.ofx-panel[data-tone="blue"] { background: linear-gradient(180deg, #F2F6FF, #E9F0FE); }
.ofx-panel[data-tone="cyan"] { background: linear-gradient(180deg, #F0FAFD, #E7F6FB); }
.ofx-panel[data-tone="subtle"] { background: var(--surface-subtle, #F6F8FD); }
.ofx-panel[data-tone="plain"] { background: #fff; border: 1px solid var(--border-default, #E1E7F0); }
.ofx-panel[data-tone="ink"] { background: var(--gradient-ink, linear-gradient(160deg, #101534, #0B1633 55%, #0A1A40)); }
.ofx-kicker { display: inline-block; font: 700 12px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--zs-iris-700, #4230B8); }
.ofx-kicker.ondark { color: #9FB4FF; }
.ofx-h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.3vw, 56px); line-height: 1.06; letter-spacing: -0.028em; color: var(--text-heading); text-wrap: balance; }
.ofx-h1 em, .ofx-h2 em { font-style: normal; background: var(--zs-grad-ib, linear-gradient(100deg, #5638DE, #2A6BE6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ofx-h1.ondark { color: #fff; }
.ofx-h2 { margin: 0 0 34px; font-family: var(--font-display); font-weight: 750; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.022em; line-height: 1.12; color: var(--text-heading); text-wrap: balance; }
.ofx-h2.ondark { color: #fff; }
.ofx-center { text-align: center; }
.ofx-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 54px; align-items: center; }
.ofx-hero-grid.form { grid-template-columns: 1fr 0.96fr; align-items: start; }
.ofx-hero-grid.below { grid-template-columns: 1fr; gap: 44px; }
.ofx-hero-grid.below .ofx-hero-visual { max-width: 860px; width: 100%; margin: 0 auto; }
.ofx-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.ofx-hero-grid.below .ofx-hero-copy { max-width: 62ch; }
.ofx-sub { margin: 0; font: var(--text-body-lg, 400 17.5px/1.65 var(--font-body)); color: var(--text-body); max-width: 56ch; }
.ofx-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ofx-ctas.center { justify-content: center; }
.ofx-probtitle { margin: 4px 0 24px; max-width: 26ch; }
.ofx-minirow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ofx-mini { display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid var(--border-default, #E1E7F0); overflow: hidden; height: 100%; }
.ofx-mini-top { padding: 26px 26px 20px; text-align: center; flex: 1; }
.ofx-mini-top b { display: block; font: 700 17px var(--font-body); color: var(--text-heading); margin-bottom: 9px; }
.ofx-mini-top p { margin: 0; font: 400 13.5px/1.62 var(--font-body); color: var(--text-body); }
.ofx-mini-art { display: flex; align-items: center; gap: 12px; padding: 16px 22px; }
.ofx-mini[data-tone="violet"] .ofx-mini-art { background: linear-gradient(180deg, #F5F1FF, #EDE6FD); }
.ofx-mini[data-tone="blue"] .ofx-mini-art, .ofx-mini[data-tone="cyan"] .ofx-mini-art, .ofx-mini[data-tone="subtle"] .ofx-mini-art, .ofx-mini[data-tone="plain"] .ofx-mini-art { background: linear-gradient(180deg, #F0F5FF, #E7EFFE); }
.ofx-mini-art em { font: 600 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; color: var(--text-muted); }
.ofx-deliv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 40px; }
.ofx-dcell { position: relative; background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 20px; padding: 24px; height: 100%; }
.ofx-dcell:where(.never) { }
.ofx-dn { position: absolute; top: 18px; right: 20px; font: 800 15px var(--font-display); background: var(--zs-grad-orange, linear-gradient(120deg, #E8763C, #E8A13C)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ofx-dcell b { display: block; font: 700 15.5px var(--font-body); color: var(--text-heading); margin: 14px 0 7px; }
.ofx-dcell p { margin: 0; font: 400 13.5px/1.6 var(--font-body); color: var(--text-body); }
.ofx-moment { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 44px; margin-top: 10px; }
.ofx-moment-line { width: 100%; height: 1px; background: rgba(17,17,48,0.1); margin-bottom: 26px; }
.ofx-moment p { margin: 0; font: 500 13px var(--font-body); color: var(--text-muted); text-align: center; }
.ofx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ofx-step { background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 20px; padding: 26px; }
.ofx-step-n { display: inline-block; font: 800 40px var(--font-display); line-height: 1; letter-spacing: -0.03em; background: var(--zs-grad-orange, linear-gradient(120deg, #E8763C, #E8A13C)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ofx-step b { display: block; font: 700 16.5px var(--font-body); color: var(--text-heading); margin: 12px 0 8px; }
.ofx-step p { margin: 0; font: 400 13.5px/1.62 var(--font-body); color: var(--text-body); }
.ofx-dark-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.ofx-dark-head .ofx-h2 { margin: 0; }
.ofx-dark-head p { margin: 0 0 6px; font: 400 14.5px/1.65 var(--font-body); color: rgba(231,236,248,0.7); }
.ofx-insights { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px; align-items: center; }
.ofx-findings { display: flex; flex-direction: column; gap: 14px; }
.ofx-finding { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: 16px; padding: 18px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ofx-finding b { display: block; font: 700 14.5px var(--font-body); color: #fff; margin: 10px 0 7px; }
.ofx-finding p { margin: 0; display: flex; align-items: center; gap: 7px; font: 500 13px var(--font-body); color: #B9C6F5; }
.ofx-who { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
.ofx-who .ofx-h2 { margin-bottom: 26px; }
.ofx-why-t { display: block; font: 700 12px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--zs-iris-700, #4230B8); margin-bottom: 14px; }
.ofx-whybar { margin-top: 46px; padding-top: 38px; border-top: 1px solid rgba(17,17,48,0.1); }
.ofr-why-list.two { columns: 2; column-gap: 48px; }
.ofr-why-list.two li { break-inside: avoid; }
.ofx-book { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 50px; align-items: start; }
.ofx-book-side .ofx-h2 { margin-bottom: 12px; }
.ofx-book-side > p { font: 400 15px/1.7 var(--font-body); color: var(--text-body); margin: 0 0 26px; }
.ofx-final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-top: 44px; }
.ofx-final p { margin: 0; font: var(--text-body-lg, 400 17px/1.6 var(--font-body)); color: rgba(231,236,248,0.78); max-width: 52ch; }
/* kept v1 components */
.ofr-trust { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--font-body); color: var(--text-muted); }
.ofr-tile { width: 46px; height: 46px; border-radius: 13px; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -12px rgba(84,93,231,0.5); flex-shrink: 0; }
.ofr-tile.sm { width: 40px; height: 40px; border-radius: 11px; }
.ofr-viz { background: #fff; border: 1px solid rgba(86,56,222,0.16); border-radius: 20px; padding: 22px 24px 24px; box-shadow: 0 26px 54px -32px rgba(24,17,64,0.28); }
.ofr-viz-head { display: flex; align-items: center; gap: 9px; font: 700 11.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }
.ofr-viz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--zs-grad-ib); }
.ofr-funnel, .ofr-score { display: flex; flex-direction: column; gap: 13px; }
.ofr-funnel-row { display: grid; grid-template-columns: 138px 1fr auto auto; gap: 12px; align-items: center; }
.ofr-score-row { display: grid; grid-template-columns: 168px 1fr 40px; gap: 12px; align-items: center; }
.ofr-funnel-lab, .ofr-score-lab { font: 600 13px var(--font-body); color: var(--text-heading); }
.ofr-funnel-track { height: 12px; border-radius: 999px; background: var(--surface-subtle, #F1F3FB); overflow: hidden; }
.ofr-funnel-track i { display: block; height: 100%; border-radius: 999px; background: var(--zs-grad-ib); transform-origin: left; animation: ofr-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.ofr-funnel-track i.low { background: linear-gradient(90deg, #D6336C, #E8638C); }
@keyframes ofr-grow { from { transform: scaleX(0); } }
.ofr-funnel-val { font: 700 12.5px var(--font-data, var(--font-body)); color: var(--text-muted); }
.ofr-risk-chip { font: 600 10.5px var(--font-body); color: #C22F5E; background: rgba(214,51,108,0.09); border: 1px solid rgba(214,51,108,0.26); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.ofr-grade { font: 800 15px var(--font-display); color: var(--zs-iris-600, #545DE7); text-align: right; }
.ofr-grade.low { color: #C22F5E; }
.ofr-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ofr-quad { border: 1px solid var(--border-default, #E1E7F0); border-radius: 14px; padding: 15px 16px; min-height: 108px; }
.ofr-quad.best { background: linear-gradient(135deg, rgba(86,56,222,0.06), rgba(34,211,238,0.06)); border-color: rgba(86,56,222,0.3); }
.ofr-quad.avoid { background: var(--surface-subtle, #F6F8FD); }
.ofr-quad b { display: block; font: 700 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.ofr-quad-dot { display: flex; align-items: center; gap: 8px; font: 600 13px var(--font-body); color: var(--text-heading); margin-top: 7px; animation: ofr-pop 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) backwards; }
.ofr-quad-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--zs-grad-ib); flex-shrink: 0; }
.ofr-quad.avoid .ofr-quad-dot i { background: #C9D2E4; }
@keyframes ofr-pop { from { opacity: 0; transform: scale(0.7); } }
.ofr-flow { display: flex; flex-direction: column; }
.ofr-flow-row { display: flex; align-items: center; gap: 14px; padding: 7px 0 7px 4px; position: relative; animation: ofr-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.ofr-flow-row + .ofr-flow-row::before { content: ""; position: absolute; left: 12px; top: -8px; height: 14px; width: 1.5px; background: rgba(86,56,222,0.3); }
@keyframes ofr-rise { from { opacity: 0; transform: translateY(10px); } }
.ofr-flow-node { display: inline-flex; align-items: center; gap: 10px; font: 600 13.5px var(--font-body); color: var(--text-heading); }
.ofr-flow-node i { width: 17px; height: 17px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--zs-grad-ib) border-box; flex-shrink: 0; }
.ofr-health { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ofr-check { border: 1px solid var(--border-default, #E1E7F0); border-radius: 12px; padding: 11px 12px; animation: ofr-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; background: #fff; }
.ofr-check b { display: block; font: 700 12px var(--font-body); color: var(--text-heading); margin: 7px 0 2px; }
.ofr-check em { font: 600 10.5px var(--font-body); font-style: normal; }
.ofr-check-dot { display: block; width: 9px; height: 9px; border-radius: 50%; }
.ofr-check.ok .ofr-check-dot { background: #2F9E63; }
.ofr-check.ok em { color: #2F9E63; }
.ofr-check.warn .ofr-check-dot { background: #E8A13C; }
.ofr-check.warn em { color: #B87717; }
.ofr-check.fail .ofr-check-dot { background: #D6336C; animation: zs-pulse 2s ease-in-out infinite; }
.ofr-check.fail em { color: #C22F5E; }
.ofr-riskmap { font-family: var(--font-body); }
.ofr-riskmap-row { display: grid; grid-template-columns: 0.8fr 1.1fr 1fr 1.25fr; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--border-default, #E1E7F0); font: 400 12.5px/1.45 var(--font-body); color: var(--text-body); animation: ofr-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.ofr-riskmap-row.head { border-top: none; padding-top: 0; font: 700 10.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); animation: none; }
.ofr-riskmap-stage { font-weight: 700; color: var(--text-heading); }
.ofr-riskmap-sig { color: #C22F5E; font-weight: 600; }
.ofr-riskmap-fix { color: var(--zs-iris-700, #4230B8); font-weight: 600; }
.ofr-riskmap-foot { margin-top: 12px; font: 600 11.5px var(--font-body); color: var(--text-muted); }
.ofr-impl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ofr-impl-node { font: 600 13px var(--font-body); color: var(--text-heading); background: var(--surface-subtle, #F6F8FD); border: 1px solid rgba(86,56,222,0.2); border-radius: 999px; padding: 9px 15px; animation: ofr-pop 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) backwards; }
.ofr-impl-arrow { display: inline-flex; animation: ofr-pop 0.4s ease backwards; }
.ofr-sev { font: 700 10px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; display: inline-block; }
.ofr-sev.high { background: rgba(214,51,108,0.14); color: #F17BA4; border: 1px solid rgba(214,51,108,0.4); }
.ofr-sev.medium { background: rgba(232,161,60,0.14); color: #EFB765; border: 1px solid rgba(232,161,60,0.4); }
.ofr-sev.opportunity { background: rgba(34,211,238,0.12); color: #7FDCEF; border: 1px solid rgba(34,211,238,0.36); }
.ofr-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ofr-checks li { display: flex; align-items: center; gap: 12px; font: 500 15px var(--font-body); color: var(--text-body); }
.ofr-check-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--zs-grad-ib); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ofr-notfor { background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 18px; padding: 26px 28px; }
.ofr-notfor b { font: 700 15px var(--font-body); color: var(--text-heading); }
.ofr-notfor ul { margin: 14px 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ofr-notfor li { font: 400 14px var(--font-body); color: var(--text-body); padding-left: 20px; position: relative; }
.ofr-notfor li::before { content: "\00d7"; position: absolute; left: 0; color: #C22F5E; font-weight: 700; }
.ofr-notfor p { margin: 0; font: 400 13px/1.6 var(--font-body); color: var(--text-muted); }
.ofr-why-list { list-style: none; margin: 0; padding: 0; }
.ofr-why-list li { display: flex; align-items: center; gap: 16px; padding: 13px 2px; border-top: 1px solid var(--border-default, #E1E7F0); font: 500 14.5px var(--font-body); color: var(--text-body); }
.ofr-why-list li:last-child { border-bottom: 1px solid var(--border-default, #E1E7F0); }
.ofr-why-n { font: 800 14px var(--font-display); background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; flex-shrink: 0; }
.ofr-why-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ofr-why-links a { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--font-body); color: var(--zs-iris-700, #4230B8); text-decoration: none; border: 1px solid rgba(86,56,222,0.28); border-radius: 999px; padding: 8px 15px; background: #fff; transition: background 0.2s ease, transform 0.2s ease; }
.ofr-why-links a:hover { background: rgba(86,56,222,0.06); transform: translateY(-2px); }
.ofr-after { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 16px; padding: 20px 22px; }
.ofr-after b { font: 700 13.5px var(--font-body); color: var(--text-heading); }
.ofr-after span { display: flex; align-items: center; gap: 11px; font: 400 13px var(--font-body); color: var(--text-body); }
.ofr-after i { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); color: #fff; font: 700 11px var(--font-body); font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.ofr-form { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 20px; padding: 28px; box-shadow: 0 26px 54px -32px rgba(24,17,64,0.22); }
.ofr-form h3 { margin: 0 0 2px; font: 750 22px var(--font-display); letter-spacing: -0.02em; color: var(--text-heading); }
.ofr-form.compact { padding: 24px; gap: 13px; }
.ofr-form.compact h3 { font-size: 19px; }
.ofr-done { align-items: center; text-align: center; gap: 10px; justify-content: center; min-height: 320px; }
.ofr-done h3 { font-size: 21px; }
.ofr-done p { margin: 0; font: 400 14.5px/1.65 var(--font-body); color: var(--text-body); max-width: 42ch; }
.ofr-done-alt a { font-weight: 600; color: var(--zs-iris-700, #4230B8); }
.ofr-faq { max-width: 780px; margin: 8px auto 0; }
.ofx-panel:has(.ofr-faq) { border: none; background: transparent; }
.ofr-qa { border-top: 1px solid var(--border-default, #E1E7F0); }
.ofr-qa:last-child { border-bottom: 1px solid var(--border-default, #E1E7F0); }
.ofr-qa button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; background: none; border: none; cursor: pointer; text-align: left; font: 700 16px var(--font-body); color: var(--text-heading); font-family: var(--font-body); }
.ofr-qa.open button { color: var(--zs-iris-700, #4230B8); }
.ofr-a { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.ofr-qa.open .ofr-a { max-height: 240px; }
.ofr-a p { margin: 0; padding: 0 40px 20px 4px; font: 400 14.5px/1.7 var(--font-body); color: var(--text-body); }
.ofr-sticky { position: fixed; z-index: 39; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 20px; background: rgba(255,255,255,0.82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(15,23,42,0.07); transform: translateY(-110%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.ofr-sticky.on { transform: translateY(0); }
.ofr-sticky-name { font: 700 13.5px var(--font-body); color: var(--text-heading); }
/* Bento deliverables + report mockup */
.ofx-bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(150px, auto); gap: 18px; }
.ofx-bento-hero { grid-row: span 2; display: flex; }
.ofx-bcell { position: relative; background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 20px; padding: 24px; height: 100%; }
.ofx-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ofx-bcell b { display: block; font: 700 15.5px var(--font-body); color: var(--text-heading); margin: 0 0 7px; padding-right: 34px; }
.ofx-dn { position: absolute; top: 22px; right: 22px; line-height: 1; }
.ofx-bcell p { margin: 0; font: 400 13.5px/1.6 var(--font-body); color: var(--text-body); }
.ofx-bcell.big { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 26px; background: linear-gradient(180deg, #FFFFFF, #F7F5FF); }
.ofx-report { border: 1px solid rgba(86,56,222,0.18); border-radius: 14px; background: #fff; box-shadow: 0 20px 44px -26px rgba(24,17,64,0.3); overflow: hidden; }
.ofx-report-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border-default, #E1E7F0); background: var(--surface-subtle, #F6F8FD); }
.ofx-report-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DCE2EF; }
.ofx-report-bar span { margin-left: 8px; font: 600 11px var(--font-data, var(--font-body)); color: var(--text-muted); letter-spacing: 0.02em; }
.ofx-report-body { padding: 18px 20px 20px; }
.ofx-report-body > b { display: block; font: 700 14.5px var(--font-body); color: var(--text-heading); margin-bottom: 12px; }
.ofx-report-line { display: block; height: 8px; border-radius: 999px; background: #EDF0F8; margin-bottom: 8px; }
.ofx-report-line.w80 { width: 80%; }
.ofx-report-line.w60 { width: 60%; }
.ofx-report-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ofx-report-checks span { display: inline-flex; align-items: center; gap: 9px; font: 600 12.5px var(--font-body); color: var(--text-body); }
.ofx-report-checks i { width: 18px; height: 18px; border-radius: 50%; background: var(--zs-grad-ib); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ofx-bcell-txt b { display: block; font: 700 16px var(--font-body); color: var(--text-heading); margin: 12px 0 6px; }
.ofx-bcell-txt p { margin: 0; font: 400 13.5px/1.6 var(--font-body); color: var(--text-body); }
/* Drawn process timeline */
.ofx-tl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 22px; }
.ofx-tl-line { position: absolute; top: 41px; left: 7%; right: 7%; height: 2px; background: rgba(86,56,222,0.14); border-radius: 999px; overflow: hidden; }
.ofx-tl-line i { display: block; height: 100%; background: var(--zs-grad-ib); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
.zs-reveal.is-visible .ofx-tl-line i { transform: scaleX(1); }
.ofx-tl-step { position: relative; display: flex; flex-direction: column; align-items: center; opacity: 0; translate: 0 14px; transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.zs-reveal.is-visible .ofx-tl-step { opacity: 1; translate: 0 0; }
.ofx-tl-node { width: 40px; height: 40px; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); color: #fff; font: 800 15px var(--font-display); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(255,255,255,0.9), 0 12px 26px -10px rgba(84,93,231,0.55); z-index: 1; }
.ofx-tl-card { margin-top: 18px; background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 18px; padding: 22px; text-align: center; width: 100%; }
.ofx-tl-card b { display: block; font: 700 16px var(--font-body); color: var(--text-heading); margin-bottom: 7px; }
.ofx-tl-card p { margin: 0; font: 400 13.5px/1.62 var(--font-body); color: var(--text-body); }
/* Audience chips */
.ofx-aud { display: grid; grid-template-columns: 1fr; gap: 11px; }
.ofx-aud-chip { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--border-default, #E1E7F0); font: 600 14px var(--font-body); color: var(--text-heading); }
.ofx-aud-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zs-grad-ib); flex-shrink: 0; }
.ofx-aud-chip i { width: 28px; height: 28px; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .ofx-tl-line i { transition: none; transform: scaleX(1); } .ofx-tl-step { transition: none; opacity: 1; translate: 0 0; } }
/* v4: site-theme hero, spine process, ink curved CTA */
.ofz-hero { position: relative; overflow: hidden; padding: 76px 32px 80px; background: #fff; }
.ofz-blob { display: none; }



.ofz-bgart { position: absolute; top: 0; right: 0; width: 56%; height: 76%; pointer-events: none; background: radial-gradient(78% 80% at 74% 22%, rgba(255,255,255,0) 40%, #fff 78%), linear-gradient(rgba(15,23,42,0.038) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.038) 1px, transparent 1px); background-size: 100% 100%, 46px 46px, 46px 46px; }
.ofz-hero.orbit .ofz-bgart { inset: auto; right: -150px; top: -190px; width: 580px; height: 580px; background: none; border: 1.5px dashed rgba(86,56,222,0.18); border-radius: 50%; -webkit-mask-image: none; mask-image: none; }

.ofz-hero-in { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 54px; align-items: center; }
.ofz-hero-in.form { grid-template-columns: 1fr 0.96fr; align-items: start; }
.ofz-hero-in.below { grid-template-columns: 1fr; gap: 44px; }
.ofz-hero-in.below .ofx-hero-visual { max-width: 860px; width: 100%; margin: 0 auto; }
.ofz-hero-in.below .ofx-hero-copy { max-width: 62ch; }
.ofx-kicker.thread::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 9px; border-radius: 999px; background: linear-gradient(90deg, #5638DE, #2A6BE6 55%, #22D3EE); }
.ofz-herophoto { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 34px 70px -34px rgba(24,17,64,0.45); }
.ofz-herophoto img { display: block; width: 100%; height: 460px; object-fit: cover; }
.ofz-herophoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(17,17,48,0.42)); pointer-events: none; }
.ofz-herophoto-cap { position: absolute; z-index: 1; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ofz-herophoto-cap b { font: 700 14px var(--font-body); color: var(--text-heading); white-space: nowrap; }
.ofz-proc { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: start; }
.ofz-proc-side .ofx-h2 { margin-bottom: 14px; }
.ofz-proc-lede { margin: 0 0 24px; font: 400 15px/1.7 var(--font-body); color: var(--text-body); max-width: 44ch; }
.ofz-photo { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -32px rgba(24,17,64,0.4); }
.ofz-photo img { display: block; width: 100%; height: 300px; object-fit: cover; }
.ofz-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17,17,48,0.32)); pointer-events: none; }
.ofz-photo-cap { position: absolute; z-index: 1; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(16,21,52,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.22); font: 600 12px var(--font-body); color: #fff; }
.ofz-proc-steps { display: flex; flex-direction: column; }
.ofz-step { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding-bottom: 24px; }
.ofz-step-rail { position: absolute; left: 22px; top: 52px; bottom: -2px; width: 2px; background: linear-gradient(180deg, rgba(86,56,222,0.32), rgba(34,211,238,0.14)); }
.ofz-proc-steps > .zs-reveal:last-child .ofz-step-rail { display: none; }
.ofz-proc-steps > .zs-reveal:last-child .ofz-step { padding-bottom: 0; }
.ofz-step-node { width: 46px; height: 46px; border-radius: 50%; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px rgba(255,255,255,0.85), 0 14px 30px -12px rgba(84,93,231,0.55); z-index: 1; }
.ofz-step-card { background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 18px; padding: 20px 24px; }
.ofz-step-k { display: inline-block; font: 800 11px var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; background: var(--zs-grad-orange, linear-gradient(120deg, #E8763C, #E8A13C)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 7px; }
.ofz-step-card b { display: block; font: 700 16.5px var(--font-body); color: var(--text-heading); margin-bottom: 6px; }
.ofz-step-card p { margin: 0; font: 400 13.5px/1.62 var(--font-body); color: var(--text-body); }
.ofz-cta { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 15% 0%, #141A3E 0%, #0B1633 46%, #0A1330 100%); padding: 104px 32px 112px; margin-top: 56px; }
.ofz-cta-lines { position: absolute; left: -4%; right: -4%; bottom: -8%; width: 108%; height: 66%; opacity: 0.6; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
.ofz-cta-lines path { fill: none; stroke: url(#ofzctaG); stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.ofz-cta-lg { transform-origin: 50% 50%; animation: ofz-cta-drift 26s var(--ease-in-out, ease-in-out) infinite alternate; }
@keyframes ofz-cta-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-22px,-14px,0); } }
.ofz-cta-glow { position: absolute; bottom: -34%; left: 6%; width: 46%; height: 80%; pointer-events: none; background: radial-gradient(circle at 40% 60%, rgba(124,92,224,0.26), transparent 66%); }
.ofz-cta::after { content: ""; position: absolute; right: -8%; bottom: -34%; width: 44%; height: 82%; pointer-events: none; background: radial-gradient(circle at 60% 62%, rgba(34,120,220,0.2), transparent 66%); }
@media (prefers-reduced-motion: reduce) { .ofz-cta-lg { animation: none; } }
.ofz-cta-in { position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.ofz-cta-in p { margin: 0; font: var(--text-body-lg, 400 17px/1.6 var(--font-body)); color: rgba(231,236,248,0.78); max-width: 52ch; }
.ofx-kicker.ondark.thread::after { margin-left: auto; margin-right: auto; }
/* v5: second mockups, chat conversion, per-page variants */
.ov2-heat { display: flex; flex-direction: column; gap: 8px; }
.ov2-heat-row { display: grid; grid-template-columns: 76px repeat(8, 1fr); gap: 6px; align-items: center; }
.ov2-heat-row > span { font: 600 11.5px var(--font-body); color: var(--text-muted); }
.ov2-heat-row i, .ov2-heat-leg i { display: block; height: 22px; border-radius: 6px; }
.ov2-heat-row i[data-v="0"], .ov2-heat-leg i[data-v="0"] { background: rgba(42,107,230,0.14); }
.ov2-heat-row i[data-v="1"], .ov2-heat-leg i[data-v="1"] { background: rgba(232,161,60,0.4); }
.ov2-heat-row i[data-v="2"], .ov2-heat-leg i[data-v="2"] { background: rgba(214,51,108,0.55); }
.ov2-heat-leg { display: flex; gap: 18px; margin-top: 10px; }
.ov2-heat-leg span { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px var(--font-body); color: var(--text-muted); }
.ov2-heat-leg i { width: 16px; height: 12px; }
.ov2-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ov2-ba-col { border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ov2-ba-col.old { background: var(--surface-subtle, #F6F8FD); }
.ov2-ba-col.new { background: linear-gradient(135deg, rgba(86,56,222,0.07), rgba(34,211,238,0.07)); border: 1px solid rgba(86,56,222,0.24); }
.ov2-ba-col > b { font: 700 11px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.ov2-ba-col.new > b { color: var(--zs-iris-700, #4230B8); }
.ov2-ba-col span { display: flex; align-items: center; gap: 9px; font: 500 12.5px/1.4 var(--font-body); color: var(--text-body); }
.ov2-ba-col span i { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.ov2-ba-col.old span i { background: #E5E9F2; color: #98A3B8; font: 700 11px var(--font-body); }
.ov2-ba-col.new span i { background: var(--zs-grad-ib); }
.ov2-pilot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.ov2-pilot b { display: block; font: 800 30px var(--font-display); letter-spacing: -0.02em; background: var(--zs-grad-ib); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ov2-pilot span { font: 500 11.5px/1.4 var(--font-body); color: var(--text-muted); }
.ov2-pilot-bars { display: flex; align-items: flex-end; gap: 10px; height: 88px; padding-top: 8px; border-top: 1px solid var(--border-default, #E1E7F0); }
.ov2-pilot-bars i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgba(86,56,222,0.55), rgba(42,107,230,0.25)); }
.ov2-ledger { display: flex; flex-direction: column; }
.ov2-ledger-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--border-default, #E1E7F0); }
.ov2-ledger-row:first-child { border-top: none; }
.ov2-ledger-row em { font: 600 11px var(--font-data, var(--font-body)); font-style: normal; color: var(--text-muted); }
.ov2-ledger-row span { font: 500 13px var(--font-body); color: var(--text-heading); }
.ov2-ledger-row b { font: 700 10.5px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.ov2-ledger-row.ok b { background: rgba(47,158,99,0.1); color: #2F9E63; }
.ov2-ledger-row.fail b { background: rgba(214,51,108,0.1); color: #C22F5E; }
.ov2-ledger-row.miss b { background: rgba(232,161,60,0.13); color: #B87717; }
.ov2-con { background: #0D1330; border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.ov2-con-line { display: flex; gap: 10px; font: 500 12px var(--font-data, monospace); color: rgba(231,236,248,0.75); }
.ov2-con-line b { flex-shrink: 0; font-weight: 700; }
.ov2-con-line.ok b { color: #34D399; }
.ov2-con-line.warn b { color: #FBBF24; }
.ov2-con-line.fail b { color: #F87171; }
.ov2-inbox { display: flex; flex-direction: column; gap: 10px; }
.ov2-inbox-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; border: 1px solid var(--border-default, #E1E7F0); border-radius: 13px; padding: 13px 16px; }
.ov2-inbox-card b { font: 700 13.5px var(--font-body); color: var(--text-heading); }
.ov2-owner { grid-row: span 2; align-self: center; font: 600 10.5px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--zs-iris-700, #4230B8); background: rgba(86,56,222,0.08); border: 1px solid rgba(86,56,222,0.22); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.ov2-inbox-card em { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font-body); font-style: normal; color: var(--text-muted); }
.ov2-gantt { display: flex; flex-direction: column; gap: 12px; }
.ov2-gantt-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.ov2-gantt-row > span { font: 600 12px var(--font-body); color: var(--text-heading); }
.ov2-gantt-track { position: relative; height: 18px; border-radius: 999px; background: var(--surface-subtle, #F1F3FB); }
.ov2-gantt-track i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--zs-grad-ib); opacity: 0.85; }
.ov2-gantt-track i[data-i="1"] { background: linear-gradient(90deg, #7B4FE8, #B24FB8); }
.ov2-gantt-track i[data-i="2"] { background: linear-gradient(90deg, #0FB5D8, #2A6BE6); }
.ov2-gantt-track i[data-i="3"] { background: linear-gradient(90deg, #8B5CF6, #22B8CF); }
.ov2-gantt-scale { display: flex; justify-content: space-between; margin-left: 122px; font: 500 10.5px var(--font-body); color: var(--text-muted); }
/* Chat preview + Ask ZionStar sections */
.ocp { background: #fff; border: 1px solid rgba(86,56,222,0.2); border-radius: 22px; padding: 18px; box-shadow: 0 26px 54px -32px rgba(24,17,64,0.3); display: flex; flex-direction: column; gap: 14px; }
.ocp-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default, #E1E7F0); }
.ocp-head b { font: 700 14.5px var(--font-body); color: var(--text-heading); }
.ocp-head em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-body); font-style: normal; color: #2F9E63; }
.ocp-live { width: 8px; height: 8px; border-radius: 50%; background: #2F9E63; }
.ocp-body { display: flex; flex-direction: column; gap: 10px; }
.ocp-msg { max-width: 88%; padding: 11px 15px; border-radius: 16px; font: 400 13.5px/1.55 var(--font-body); }
.ocp-msg.user { align-self: flex-end; background: var(--zs-grad-ib); color: #fff; border-bottom-right-radius: 5px; }
.ocp-msg.ai { align-self: flex-start; background: var(--surface-subtle, #F4F6FC); color: var(--text-body); border-bottom-left-radius: 5px; }
.ocp-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 3px; vertical-align: -2px; background: var(--zs-iris-600, #545DE7); animation: zs-cx-caret 1.1s steps(1) infinite; }
.ocp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ocp-chips span { font: 600 11.5px var(--font-body); color: var(--zs-iris-700, #4230B8); background: rgba(86,56,222,0.06); border: 1px solid rgba(86,56,222,0.24); border-radius: 999px; padding: 6px 12px; }
.ocp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border-strong, #C9D2E4); border-radius: 999px; background: #fff; padding: 10px 10px 10px 17px; cursor: pointer; font: 500 13px var(--font-body); color: var(--text-muted); transition: border-color 0.2s ease, transform 0.2s ease; }
.ocp-bar:hover { border-color: var(--zs-iris-600, #545DE7); transform: translateY(-2px); }
.ocp-bar i { width: 30px; height: 30px; border-radius: 50%; background: var(--zs-grad-ib); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oaz-band { background: linear-gradient(180deg, #FFFFFF 0%, #FBFAFF 38%, #F3EDFE 100%) !important; }
.oaz-head { display: flex; flex-direction: column; gap: 12px; }
.oaz-head .ofx-h2 { margin: 0; }
.oaz-lede { margin: 0; font: 400 15px/1.7 var(--font-body); color: var(--text-body); max-width: 54ch; }
.oaz-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.oaz-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 24px 0 28px; }
.oaz-caps.row { grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin: 34px auto 0; }
.oaz-cap { display: flex; gap: 11px; align-items: flex-start; }
.oaz-cap-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--zs-grad-icon, linear-gradient(135deg, #2A6BE6, #7B4FE8)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oaz-cap b { display: block; font: 700 13.5px var(--font-body); color: var(--text-heading); }
.oaz-cap em { display: block; font: 400 12px/1.5 var(--font-body); font-style: normal; color: var(--text-muted); margin-top: 2px; }
.oaz-console { display: flex; flex-direction: column; align-items: center; }
.oaz-console .zs-cx-bar { margin-top: 26px; }
.oaz-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.oaz-center .oaz-lede { max-width: 60ch; }
.oaz-band .oaz-head { align-items: center; text-align: center; margin-bottom: 30px; }
.oaz-band-grid { display: grid; grid-template-columns: auto minmax(320px, 480px) auto; gap: 26px; align-items: center; justify-content: center; margin-bottom: 28px; }
.oaz-pills { display: flex; flex-direction: column; gap: 12px; }
.oaz-pill { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--font-body); color: var(--text-heading); background: #fff; border: 1px solid rgba(86,56,222,0.24); border-radius: 999px; padding: 9px 15px; box-shadow: 0 12px 26px -18px rgba(24,17,64,0.3); }
/* Problem-row + bento variants */
.ofx-minirow.pv-rows { grid-template-columns: 1fr; }
.pv-rows .ofx-mini { flex-direction: row; }
.pv-rows .ofx-mini-top { text-align: left; padding: 22px 26px; }
.pv-rows .ofx-mini-art { width: 210px; flex-direction: column; justify-content: center; text-align: center; flex-shrink: 0; }
.ofx-minirow.pv-split { grid-template-columns: 1.15fr 1fr; }
.ofx-minirow.pv-split > .zs-reveal:first-child { grid-row: span 2; }
.pv-split > .zs-reveal:first-child .ofx-mini-top { padding: 34px 30px; }
.pv-split > .zs-reveal:first-child .ofx-mini-top b { font-size: 20px; }
.ofx-psig { margin-top: 22px; background: #fff; border: 1px solid var(--border-default, #E1E7F0); border-radius: 14px; padding: 16px 18px; box-shadow: 0 20px 44px -30px rgba(24,17,64,0.3); }
.ofx-psig-head { display: flex; align-items: center; gap: 8px; font: 700 10.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.ofx-psig-dot { width: 8px; height: 8px; border-radius: 50%; background: #D6336C; }
.ofx-psig-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-default, #EEF1F8); }
.ofx-psig-row:first-of-type { border-top: none; }
.ofx-psig-lab { font: 600 13px var(--font-body); color: var(--text-heading); }
.ofx-psig-spark { display: inline-flex; align-items: flex-end; gap: 4px; height: 26px; }
.ofx-psig-spark i { width: 8px; border-radius: 3px 3px 0 0; display: block; }
.ofx-psig-spark i.t-risk { background: linear-gradient(180deg, rgba(214,51,108,0.85), rgba(214,51,108,0.4)); }
.ofx-psig-spark i.t-warn { background: linear-gradient(180deg, rgba(232,161,60,0.85), rgba(232,161,60,0.4)); }
.ofx-psig-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-default, #EEF1F8); }
.ofx-psig-chip { font: 700 10.5px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #C22F5E; background: rgba(214,51,108,0.1); border: 1px solid rgba(214,51,108,0.28); border-radius: 999px; padding: 4px 11px; }
.ofx-psig-foot em { font: 500 12px var(--font-body); font-style: normal; color: var(--text-muted); }
.ofx-psync-cols { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 4px; }
.ofx-psync-cols span:first-child { font: 700 10.5px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--zs-iris-700, #4230B8); }
.ofx-psync-cols span:last-child { font: 700 10.5px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ofx-psync-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border-default, #EEF1F8); }
.ofx-psync-lab { font: 600 13px var(--font-body); color: var(--text-heading); }
.ofx-psync-vals { display: inline-flex; align-items: center; gap: 9px; }
.ofx-psync-vals b { font: 700 12.5px var(--font-data, var(--font-body)); color: var(--text-body); }
.ofx-psync-x { font-style: normal; color: #C22F5E; font-weight: 700; }
.ofx-pready-gauge { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ofx-pready-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--surface-subtle, #F1F3FB); overflow: hidden; }
.ofx-pready-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #D6336C, #E8A13C); }
.ofx-pready-gauge b { font: 800 18px var(--font-display); color: var(--text-heading); }
.ofx-pready-cap { font: 500 11.5px var(--font-body); color: var(--text-muted); margin-bottom: 8px; }
.ofx-pready-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-default, #EEF1F8); }
.ofx-pready-dot { width: 8px; height: 8px; border-radius: 50%; background: #D6336C; }
.ofx-pready-dot.ok { background: #2F9E63; }
.ofx-pready-lab { font: 600 13px var(--font-body); color: var(--text-heading); }
.ofx-pready-row em { font: 600 11.5px var(--font-body); font-style: normal; color: #C22F5E; }
.ofx-pready-row em.ok { color: #2F9E63; }
.ofx-bento.bv-right { grid-auto-flow: dense; }
.ofx-bento.bv-right .ofx-bento-hero { grid-column: 3; grid-row: 1 / 3; }
.ofx-bento.bv-top { grid-template-columns: repeat(4, 1fr); }
.ofx-bento.bv-top .ofx-bento-hero { grid-column: 1 / -1; grid-row: 1; }
.bv-top .ofx-bcell.big { flex-direction: row; align-items: center; gap: 30px; }
.bv-top .ofx-bcell.big .ofx-report { flex: 0 0 46%; }
/* Per-page accent voices */
[data-offer="lms-modernization-review"] .ofx-h1 em, [data-offer="lms-modernization-review"] .ofx-h2 em { background: linear-gradient(100deg, #2A6BE6, #22B8CF); -webkit-background-clip: text; background-clip: text; }
[data-offer="zoho-crm-student-portal-workflow-audit"] .ofx-h1 em, [data-offer="zoho-crm-student-portal-workflow-audit"] .ofx-h2 em { background: linear-gradient(100deg, #0FB5D8, #2A6BE6); -webkit-background-clip: text; background-clip: text; }
[data-offer="canvas-lms-integration-health-check"] .ofx-h1 em, [data-offer="canvas-lms-integration-health-check"] .ofx-h2 em { background: linear-gradient(100deg, #2447C9, #7B4FE8); -webkit-background-clip: text; background-clip: text; }
[data-offer="ai-readiness-audit-edtech"] .ofx-h1 em, [data-offer="ai-readiness-audit-edtech"] .ofx-h2 em { background: linear-gradient(100deg, #7B4FE8, #22B8CF); -webkit-background-clip: text; background-clip: text; }
[data-offer="learner-dropout-risk-mapping-session"] .ofx-h1 em, [data-offer="learner-dropout-risk-mapping-session"] .ofx-h2 em { background: linear-gradient(100deg, #6D28D9, #2A6BE6); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 900px) {
  .ofx { padding: 18px 16px 48px; }
  .ofx-rail, .ofx-chap::before { display: none; }
  .ofx-hero-grid, .ofx-hero-grid.form, .ofx-insights, .ofx-who, .ofx-book, .ofx-dark-head { grid-template-columns: 1fr; gap: 30px; }
  .ofx-minirow, .ofx-deliv, .ofx-steps, .ofx-bento, .ofx-tl { grid-template-columns: 1fr; }
  .ofz-hero-in, .ofz-hero-in.form, .ofz-proc { grid-template-columns: 1fr; gap: 30px; }
  .oaz-split, .ofx-minirow.pv-split, .oaz-band-grid, .oaz-caps.row { grid-template-columns: 1fr; }
  .ofx-bento.bv-top { grid-template-columns: 1fr; }
  .bv-top .ofx-bcell.big { flex-direction: column; }
  .pv-rows .ofx-mini { flex-direction: column; }
  .pv-rows .ofx-mini-art { width: auto; flex-direction: row; }
  .oaz-pills { flex-direction: row; flex-wrap: wrap; }
  .ofz-hero { padding: 44px 16px 52px; }
  .ofz-cta { padding: 72px 16px 80px; }
  /* The bv-* variants pin the hero with an explicit grid-column, and those
     selectors outrank the bare .ofx-bento-hero reset below. Left set, the
     hero stays in column 3 of a now single-column grid, which makes the grid
     generate the two implicit columns either side of it and pushes the panel
     ~315px past the viewport. Clear the placement, not just the row span. */
  .ofx-bento.bv-right .ofx-bento-hero,
  .ofx-bento.bv-top .ofx-bento-hero { grid-column: auto; grid-row: auto; }
  .ofx-bento-hero { grid-row: auto; }
  .ofx-tl-line { display: none; }
  .ofx-flow .ofx-rail { display: none; }
  .ofr-health { grid-template-columns: 1fr 1fr; }
  .ofr-riskmap-row { grid-template-columns: 1fr 1fr; }
  .ofr-riskmap-row.head { display: none; }
  .ofr-why-list.two { columns: 1; }
  .ofr-sticky { top: auto; bottom: 0; transform: translateY(110%); border-top: 1px solid rgba(15,23,42,0.07); border-bottom: none; justify-content: space-between; }
  .ofr-sticky-name { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ofr-funnel-track i, .ofr-quad-dot, .ofr-flow-row, .ofr-check, .ofr-riskmap-row, .ofr-impl-node, .ofr-impl-arrow { animation: none; } }


/* ── Offer pages: phone tier ──────────────────────────────────────────────
   The design ships one 900px breakpoint, which collapses the page-level grids
   for tablet. Below ~600px the remaining problems are the signature "mockup"
   visuals: they are data-table-style grids with fixed label columns, and at
   ~295px of usable width (375px viewport − page and card padding) the label
   alone eats half the row. These rules reclaim that width rather than letting
   the mockups overflow their card. */
@media (max-width: 600px) {
  /* Give content back the horizontal space the panels take. */
  .ofx-panel { padding: 26px 18px; border-radius: 22px; }
  .ofr-viz { padding: 16px 14px 18px; border-radius: 16px; }
  .ofx-h1 { font-size: clamp(28px, 8vw, 34px); }
  .ofx-h2 { font-size: clamp(22px, 6.4vw, 28px); margin-bottom: 24px; }

  /* Fixed label columns, re-proportioned for a phone. */
  .ofr-funnel-row  { grid-template-columns: 88px 1fr auto; gap: 8px; }
  .ofr-score-row   { grid-template-columns: 104px 1fr 32px; gap: 8px; }
  .ov2-heat-row    { grid-template-columns: 52px repeat(8, 1fr); gap: 4px; }
  .ov2-gantt-row   { grid-template-columns: 78px 1fr; gap: 8px; }
  .ov2-ledger-row  { grid-template-columns: 40px 1fr auto; gap: 8px; }
  .ofz-step        { grid-template-columns: 38px 1fr; gap: 14px; }

  /* The risk chip is optional per row; drop it to its own line so it can never
     widen the row it annotates (it is white-space: nowrap by design). */
  .ofr-funnel-row .ofr-risk-chip { grid-column: 1 / -1; justify-self: start; }

  /* Side-by-side comparisons stop being legible under ~140px per cell. */
  .ov2-pilot, .ov2-ba, .ofr-health, .ofr-riskmap-row { grid-template-columns: 1fr; }

  /* Long values must wrap instead of forcing horizontal scroll. */
  .ov2-owner, .ofz-herophoto-cap b { white-space: normal; }

  /* The signal/sync mockups nest three padded boxes (mini card > psig panel >
     row), which at 320px spends ~96px of the viewport on padding alone and
     leaves the label+value row unable to fit. Trim the nesting and let the
     two-column rows stack. */
  .ofx-mini-top { padding: 20px 16px 16px; }
  .pv-split > .zs-reveal:first-child .ofx-mini-top { padding: 22px 16px; }
  .ofx-psig { padding: 14px 12px; }
  .ofx-psync-row, .ofx-psig-row { grid-template-columns: 1fr; gap: 4px; }
}

/* The mobile sticky CTA (bottom: 0) and the chat launcher (bottom: 20px,
   z-index 95) both dock to the bottom of the viewport, so the launcher covers
   the sticky bar's button. Lift it while the bar is showing. */
@media (max-width: 900px) {
  body:has(.ofr-sticky.on) .zc-launch { bottom: 76px; }
}
.zc-launch { transition: transform var(--duration-standard,250ms) var(--ease-out),
                         box-shadow var(--duration-standard,250ms) var(--ease-out),
                         bottom var(--duration-standard,250ms) var(--ease-out); }

/* ── Site-wide phone tier ─────────────────────────────────────────────────
   The design's own breakpoints stop at the tablet tier (900–1080px), so the
   remaining phone problems are of two kinds: decorative bleeds sized in fixed
   px that are wider than a phone once the element they hang off has shrunk,
   and dense mock-UI grids that keep a desktop column count. */
@media (max-width: 620px) {
  /* Glow behind the stories headline: -80px of horizontal bleed is 21% of a
     375px viewport, and it sits in a section with visible overflow. */
  .zs-stories-center::before { inset: -24px -18px; }
  .zs-stmar { max-width: 100%; }

  /* Product-showcase mock UI: three KPI tiles / five schedule columns / four
     journey steps are unreadable at ~100px each. */
  .zs-px-journey { grid-template-columns: 1fr 1fr; }
  .zs-px-sched { grid-template-columns: repeat(2, 1fr); }

  /* The mock app window is overflow:hidden, so anything wider than it is cut
     off rather than scrolled. Its inner 1fr track floors at min-content
     (~298px) inside a 220px window, which is what sliced the KPI cards, the
     trend chart and the progress bars in half. Unfloor the tracks, let the
     children shrink, and stop spending 108px of a 320px screen on the three
     nested paddings (scene > window > main). */
  .zs-px-app, .zs-px-ment2, .zs-px-cols2, .zs-px-cols2p { grid-template-columns: minmax(0, 1fr); }
  .zs-px-win, .zs-px-side, .zs-px-main, .zs-px-chatp { min-width: 0; }
  .zs-px-scene { padding: 16px 14px; }
  .zs-px-main { padding: 16px 14px 18px; }
  .zs-px-side { padding: 10px 8px; }
  /* Rows with fixed trailing tracks: 1fr+108+40 needs 228px in a 224px box,
     which pushed the trailing "86%" out of the card. */
  .zs-px-prow { grid-template-columns: minmax(0, 1fr) 64px 32px; }
  .zs-px-mrow { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .zs-px-atl { grid-template-columns: 8px 32px minmax(0, 1fr) auto; }

  /* A pill button sizes to its label, so the longer CTAs ("Book the
     dropout-risk mapping session") outgrow a 320px screen. Capping the width
     alone is not enough: .zs-btn is white-space:nowrap AND overflow:hidden, so
     a capped button silently truncates its own label. Let it wrap instead. */
  .zs-btn { max-width: 100%; white-space: normal; text-align: center; }
  .zs-btn-lg { padding-left: 18px; padding-right: 18px; }

  /* Featured case-study cards are overflow:hidden + clip-path, so an oversized
     child is cut off silently. Their 1fr track floored at ~240px of min-content
     inside a 182px content box, and clamp() kept 36px of padding on each side
     of a 320px screen — together that sliced the headline, the metric tiles and
     the visual. */
  .zs-csx-card { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; border-radius: 22px; }
  .zs-csx-copy, .zs-csx-visual, .zs-csx-vwrap { min-width: 0; max-width: 100%; }
}

/* Below ~420px the two-up mock tiles stop holding a number plus its caption. */
@media (max-width: 420px) {
  .zs-px-kpis { grid-template-columns: 1fr; }
}

/* ── Phone tier: let collapsed layouts actually shrink ────────────────────
   Two related causes account for nearly all the remaining phone breakage, and
   both CUT CONTENT OFF rather than scroll it, because these blocks sit inside
   `overflow:hidden` cards.

   1. A grid that collapses to a single `1fr` track at the design's tablet
      breakpoint still floors at the item's MIN-CONTENT width (`1fr` is
      `minmax(auto, 1fr)`). For the dense mock-UIs — app frames, metric rows,
      case-study cards — that floor is 250-520px, so the track stays wider
      than a phone. minmax(0, 1fr) removes the floor.

   2. Flex and grid ITEMS default to `min-width: auto`, which is likewise
      min-content, so an item refuses to shrink and overflows its parent even
      when the track is fine. `min-width: 0` only PERMITS shrinking — it
      forces no layout change on its own, and is a no-op for block boxes. */
@media (max-width: 700px) {
  .exx, .oaz-band-grid, .oaz-caps.row, .oaz-split, .ofr-health,
  .ofr-riskmap-row, .ofx-bento, .ofx-bento.bv-top, .ofx-book,
  .ofx-dark-head, .ofx-deliv, .ofx-hero-grid, .ofx-hero-grid.form,
  .ofx-insights, .ofx-minirow, .ofx-minirow.pv-split, .ofx-psig-row,
  .ofx-psync-row, .ofx-steps, .ofx-tl, .ofx-who, .ofz-hero-in,
  .ofz-hero-in.form, .ofz-proc, .ov2-ba, .ov2-pilot, .pp-bento,
  .pp-dark-grid, .pp-hero, .pp-linkcards, .pp-mocksplit, .pp-out-card,
  .zs-ap, .zs-ap-row2, .zs-arch-grid, .zs-ascentflow, .zs-cap-band,
  .zs-capx, .zs-cat-strip, .zs-cd-recs, .zs-contact-head, .zs-csx-card,
  .zs-cx-grid, .zs-dir-grid, .zs-filmstrip, .zs-flagship-grid,
  .zs-foot-offices, .zs-foot-top, .zs-grid-2, .zs-grid-3, .zs-grid-4,
  .zs-home-hero-grid, .zs-home-hero2-grid, .zs-jd-benefits, .zs-jd-grid,
  .zs-jd-steps, .zs-jd-why, .zs-jrny, .zs-jx, .zs-ld-row, .zs-pstages,
  .zs-px-app, .zs-px-cols2, .zs-px-cols2p, .zs-px-ment2, .zs-sc4-grid,
  .zs-scrub-row, .zs-solx-body, .zs-solx-head, .zs-split, .zs-split-even,
  .zs-svc2-wrap, .zs-tc, .zs-wwd
  { grid-template-columns: minmax(0, 1fr); }

  [class*="zs-"], [class*="ofx-"], [class*="ofz-"], [class*="pp-"],
  [class*="oaz-"], [class*="ov2-"], [class*="ofr-"], [class*="sd-"],
  [class*="zs-"] > * { min-width: 0; }

  /* Labels held on one line by white-space:nowrap. On a phone the box finally
     becomes narrower than the label, and because these are plain text (not
     ellipsised) they simply render outside their own card. Only the ones that
     are real content are released here — status chips and badges keep nowrap,
     since wrapping a two-word pill looks worse than a wide one. */
  .zs-stcard-logo { white-space: normal; }
  .cnx-slab b { white-space: normal; }

  /* The tag row inside each connector slab is a non-wrapping flex line pushed
     right by margin-left:auto, so on a phone it ran straight out of the slab
     and past the panel behind it. Let it wrap under the label. */
  .cnx-slab { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .cnx-tags { margin-left: 0; flex-wrap: wrap; flex-basis: 100%; }

  /* Panels whose padding was budgeted for a desktop column: 34-38px a side is
     a fifth of a 320px screen, which is what pushed their content out. */
  .zs-solx-panel { padding: 22px 16px 28px; min-height: 0; }
  .cnx-slab { padding: 0 14px; gap: 8px; }
  .zs-csx-vwrap { padding: 10px; }

  /* Centre-anchored floating pill: translate(-50%) off a 50% offset means it
     needs its full width to fit either side of centre. */
  .zs-to-core { padding: 12px 16px; max-width: calc(100% - 20px); }

  /* The assistant prompt bar is overflow:hidden and lays its orb, prompt and
     nowrap CTA on one flex line, so the CTA lost its tail on a phone. */
  .zs-cx-in { flex-wrap: wrap; row-gap: 8px; }
  .zs-cx-go { white-space: normal; }

  /* Design-system pill tabs (case-study filters etc.) render as a nowrap flex
     row with no class of their own — the DS bundle is vendored, so target the
     ARIA role it always emits rather than editing it. */
  [role="tablist"] { flex-wrap: wrap; }

  /* Task rows put a status chip on the same nowrap line as the task title, so
     the chip ended up starting past the right edge of its own card. */
  .pp-tcard { flex-wrap: wrap; row-gap: 6px; }
  .pp-tchip { flex-shrink: 0; }

  /* The case-study and product vignettes are built from inline-styled
     `justify-content: space-between` flex rows with no classes of their own, so
     a label + status chip pair has nothing to stop it running out of the card —
     and the chip label rotates ("Intervening" -> "Monitoring recovery"), so the
     row only breaks on the longest one. flex-wrap is a no-op while the content
     still fits, which makes it safe to apply across the whole vignette. */
  .zs-csx-vwrap div, .zs-vp-in div { flex-wrap: wrap; }
}