/* 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; } }

/* ── 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; }
.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 { 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; }
.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%); }
  .zs-stories-center { position: relative; transform: none; top: auto; left: auto; width: auto; max-width: 560px; 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; }
  .zs-px-wrap { grid-template-columns: 1fr; gap: 40px; }
  .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; }
}
@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; }
}