/* ==========================================================================
   E17 — PLATFORM STARFIELD GALAXY MAP (M8 family · evolved from E07)
   Six platform clusters in one wide starfield; scroll flies a camera along a
   glowing route cluster to cluster. Default = stacked chapters (mobile,
   reduced motion, no JS); `.is-pin` (added by e17.js) = pinned galaxy flight.
   ========================================================================== */
.hx-e17 { display: block; min-height: 0; overflow: clip; background: #FFFFFF; --e17c: #00A3D9; }
.hx-e17 .e17-stage { position: relative; }
.hx-e17 .e17-pin { position: relative; display: flex; flex-direction: column; isolation: isolate; }

/* ---------- brand lockup (M8) ---------- */
.hx-e17 .hx-m__logo { position: relative; background: rgba(255,255,255,.8); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 18px 40px -24px rgba(8,34,56,.35), inset 0 1px 0 #fff; }
.hx-e17 .hx-m__logo::before { content: ""; position: absolute; inset: -14px; border-radius: 28px; z-index: -1; background: conic-gradient(from var(--e17a, 0deg), #1D3F8F, #00A3D9, #00B2A9, #3FB97A, #1D3F8F); filter: blur(18px); opacity: .3; animation: e17-spin 9s linear infinite; }
@property --e17a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes e17-spin { to { --e17a: 360deg; } }

/* ---------- sky layers ---------- */
.e17-bg { position: absolute; inset: 0; z-index: -5; overflow: hidden; pointer-events: none; }
.e17-bg i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .22; animation: drift 34s ease-in-out infinite; transition: background 1.2s; }
.e17-bg i:nth-child(1) { width: 620px; height: 620px; left: -200px; top: -60px; background: #9DB9F2; }
.e17-bg i:nth-child(2) { width: 540px; height: 540px; right: -160px; top: 6%; background: var(--e17-glow, #8FD8F5); animation-delay: -10s; }
.e17-bg i:nth-child(3) { width: 520px; height: 520px; left: 30%; bottom: -160px; background: #9BE3C9; animation-delay: -18s; }
.e17-bg i:nth-child(4) { width: 380px; height: 380px; right: 18%; bottom: -40px; background: #B9E7A6; animation-delay: -4s; }
.e17-canvas { position: absolute; left: 0; top: 0; z-index: -4; width: 100%; height: min(100%, 980px); display: block; pointer-events: none; }
.e17-cursor { position: absolute; left: 0; top: 0; z-index: -3; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s; will-change: transform;
  background: radial-gradient(circle, color-mix(in srgb, var(--e17c) 15%, transparent) 0%, rgba(0,178,169,.06) 40%, rgba(63,185,122,0) 68%); }
.hx-e17.is-ptr .e17-cursor { opacity: 1; }
.e17-haze { position: absolute; z-index: -2; left: 50%; top: 0; width: min(1000px, 110%); height: min(100%, 900px); transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.94) 0%, rgba(255,255,255,.8) 55%, rgba(255,255,255,0) 100%); }
.e17-core, .e17-labels, .e17-mini, .e17-rocket, .e17-agent { display: none; }

/* ---------- intro ---------- */
.hx-e17 .e17-intro { gap: 18px; padding-block: 10px 30px; z-index: 6; }
.e17-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 -4px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid #E2E8F0;
  font: 600 12px/1.25 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #334155; }
.e17-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #00B2A9; box-shadow: 0 0 0 0 rgba(0,178,169,.5); animation: e17-ping 2.2s infinite; }
@keyframes e17-ping { 70% { box-shadow: 0 0 0 9px rgba(0,178,169,0); } 100% { box-shadow: 0 0 0 0 rgba(0,178,169,0); } }
.hx-e17 .hx-title { font-size: clamp(36px, 1rem + 3.1vw, 60px); max-width: 20ch; }
.hx-e17 .hx-lede { max-width: 60ch; color: #334155; }
.hx-e17 .hx-ctas .btn { will-change: translate; }

/* split headline */
.hx-e17 .hx-title .mw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; padding-right: .04em; margin-right: -.04em; }
.hx-e17 .hx-title .mw > span { display: inline-block; transform: translateY(108%) rotate(5deg); transform-origin: 0 100%; transition: transform 1s cubic-bezier(.16,.84,.2,1) calc(var(--i, 0) * 60ms + 120ms); }
.hx-e17 .hx-title.is-in .mw > span { transform: none; }
.hx-e17 .hx-title.is-split .grad { background: none; color: inherit; }
.hx-e17 .hx-title .grad .mw > span { background: var(--grad-d); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- chapters (stacked default) ---------- */
.e17-chapters { position: relative; z-index: 5; width: min(1240px, calc(100% - 32px)); margin: 8px auto 0; display: grid; gap: 18px; }
.e17-ch { position: relative; display: grid; gap: 14px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.9); border: 1px solid #E2E8F0;
  box-shadow: 0 30px 60px -40px rgba(8,34,56,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.e17-panel { position: relative; display: grid; gap: 10px; align-content: start; }
.e17-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.e17-panel__logo { display: grid; place-items: center; height: 50px; min-width: 50px; padding: 0 14px; border-radius: 13px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 10px 22px -16px rgba(8,34,56,.45); }
.e17-panel__logo img { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
.e17-panel__logo img[src*="zoho-2025"] { height: 40px; max-width: 100px; }
.e17-panel__no { font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.e17-panel__no i { font-style: normal; color: #64748B; }
.e17-panel h3, .e17-panel .e17-panel__name { font: 800 30px/1.05 var(--f-display); letter-spacing: -.025em; color: #082238; margin: 2px 0 0; }
.e17-badge { display: inline-flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; padding: 6px 11px 6px 9px; border-radius: 999px; font: 600 12px/1.3 var(--f-body); color: #082238;
  background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); }
.e17-badge .ico { width: 15px; height: 15px; flex: none; color: var(--c); stroke-width: 2; }
.e17-panel__lead { font: 500 15px/1.5 var(--f-body); color: #334155; margin: 0; }
.e17-panel__list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.e17-panel__list li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; font: 500 14px/1.45 var(--f-body); color: #1E293B; }
.e17-panel__list .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: #fff; background: var(--c); stroke-width: 3; margin-top: 1px; }
.e17-get { margin: 2px 0 0; padding: 10px 12px 10px 14px; border-radius: 12px; background: #F3F7F9; border-left: 3px solid var(--c); font: 600 14px/1.5 var(--f-body); color: #1E293B; }
.e17-panel__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.e17-panel__cta .btn { min-height: 46px; padding: 12px 18px; font-size: 14.5px; }
.e17-next { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--f-body); color: #082238; text-decoration: none; }
.e17-next .ico { width: 16px; height: 16px; transition: transform .3s; }
.e17-next:hover .ico { transform: translateY(3px); }

/* chips */
.e17-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.e17-chips li { position: relative; }
.e17-chip { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 15px; cursor: pointer;
  background: rgba(255,255,255,.94); border: 1px solid #E2E8F0; box-shadow: 0 14px 30px -20px rgba(8,34,56,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 13px/1.15 var(--f-body); color: #082238; white-space: nowrap; text-align: left; transition: box-shadow .35s, border-color .35s, transform .35s cubic-bezier(.2,.8,.2,1); }
.e17-chip > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 11%, #fff); border: 1px solid color-mix(in srgb, var(--c) 24%, #fff); }
.e17-chip > i .ico { width: 19px; height: 19px; stroke-width: 1.8; }
.e17-chip > i.is-logo { width: 62px; background: #fff; border-color: #E2E8F0; }
.e17-chip > i.is-logo img { max-width: 52px; max-height: 20px; object-fit: contain; }
.e17-chip > i.is-mark, .e17-chip > i.is-glyph, .e17-chip > i.is-pair { background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 1px 2px rgba(8,34,56,.06), inset 0 0 0 1px #fff; }
.e17-chip > i.is-mark { padding: 5px; }
.e17-chip > i.is-mark img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.e17-chip > i.is-pair { width: 66px; gap: 4px; padding: 5px 6px; display: flex; align-items: center; justify-content: center; }
.e17-chip > i.is-pair img { height: 22px; width: auto; max-width: 22px; object-fit: contain; } .e17-chip > i.is-pair img + img { max-width: 30px; }
.e17-chip__n small { display: block; font: 500 11px/1.2 var(--f-body); color: #64748B; margin-top: 1px; }
.e17-chip::after { content: ""; position: absolute; inset: -5px; border-radius: 19px; border: 1.5px solid var(--c); opacity: 0; transition: opacity .3s; pointer-events: none; }
.e17-chip:hover, .e17-chip:focus-visible, .e17-chip.is-open { outline: none; border-color: transparent; transform: scale(1.05); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 9%, transparent), 0 22px 40px -18px color-mix(in srgb, var(--c) 70%, transparent); }
.e17-chip:hover::after, .e17-chip:focus-visible::after, .e17-chip.is-open::after { opacity: 1; }
.e17-chips li:has(.e17-chip:hover, .e17-chip:focus-visible, .e17-chip.is-open) { z-index: 8; }

/* quick-tag (stacked default: below the chip) */
.e17-tag { position: absolute; left: 50%; top: calc(100% + 10px); width: min(284px, calc(100vw - 32px)); translate: calc(-50% + var(--nx, 0px)) 0; display: grid; gap: 6px; padding: 15px 18px 16px; border-radius: 16px; white-space: normal; text-align: left;
  background: rgba(255,255,255,.98); border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -28px rgba(8,34,56,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transition: opacity .25s, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s .32s; pointer-events: none; z-index: 4; }
.e17-tag::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--c), var(--c2, #00B2A9)); }
.e17-tag b { font: 800 15.5px/1.3 var(--f-display); color: color-mix(in srgb, var(--c) 70%, #082238); letter-spacing: -.01em; }
.e17-tag > span { font: 500 14.5px/1.55 var(--f-body); color: #1E293B; }
.e17-chip:hover .e17-tag, .e17-chip:focus-visible .e17-tag, .e17-chip.is-open .e17-tag { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }

/* finale (stacked) */
.e17-finale { position: relative; z-index: 5; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 34px 16px 10px; }
.e17-finale h2 { font: 800 clamp(28px, 1rem + 2vw, 44px)/1.05 var(--f-display); letter-spacing: -.025em; color: #082238; max-width: 22ch; margin: 0; }
.e17-finale .grad { background: var(--grad-d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.e17-finale__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* route (stacked: jump nav) */
.e17-route { position: relative; z-index: 7; order: 2; width: min(980px, calc(100% - 32px)); margin: 0 auto 6px; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.86); border: 1px solid #E2E8F0;
  box-shadow: 0 24px 50px -32px rgba(8,34,56,.4), inset 0 1px 0 #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.e17-route__track { position: absolute; left: calc(10px + (100% - 20px) / 12); right: calc(10px + (100% - 20px) / 12); top: 24px; height: 2px; border-radius: 2px; background: #E2E8F0; overflow: hidden; }
.e17-route__track i { position: absolute; inset: 0; background: linear-gradient(90deg, #226DB4, #FF9900, #95BF47, #21759B, #635BFF, #7C3AED); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.e17-route__tabs { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.e17-tab { display: grid; justify-items: center; gap: 11px; padding: 6px 2px 4px; border: 0; background: none; cursor: pointer; border-radius: 14px; font: inherit; color: inherit; min-width: 0; }
.e17-tab > i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #CBD5E1; box-shadow: 0 0 0 4px #fff; transition: background .4s, border-color .4s, box-shadow .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.e17-tab > span { display: grid; justify-items: center; gap: 3px; font: 700 13px/1.15 var(--f-display); color: #475569; letter-spacing: -.01em; text-align: center; transition: color .3s; }
.e17-tab small { font: 700 10px/1 var(--f-body); letter-spacing: .12em; color: #64748B; }
.e17-tab.is-past > i { border-color: var(--c); }
.e17-tab.is-on > i { background: var(--c); border-color: var(--c); transform: scale(1.25); box-shadow: 0 0 0 4px #fff, 0 0 0 8px color-mix(in srgb, var(--c) 22%, transparent), 0 6px 16px -4px var(--c); }
.e17-tab.is-on > span { color: #082238; }
.e17-tab.is-on small { color: var(--c); }
.e17-tab:hover > i { transform: scale(1.18); border-color: var(--c); }
.e17-tab:focus-visible { outline: 2px solid #00A3D9; outline-offset: 2px; }

/* trust bar */
.hx-e17 .trustbar { margin: 30px auto 28px; z-index: 6; }
.hx-e17 .trustbar strong { font-variant-numeric: tabular-nums; }
.hx-e17 .trustbar strong span { font: inherit; color: inherit; letter-spacing: inherit; }
.hx-e17 .trustbar > div:not(.tb-logos) strong { background: linear-gradient(100deg, #082238 30%, #1A3A86); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* stacked order */
.hx-e17 .e17-pin > .hx-nav { order: 0; }
.hx-e17 .e17-intro { order: 1; }
.hx-e17 .e17-chapters { order: 3; }
.hx-e17 .e17-finale { order: 4; }
@media (min-width: 900px) {
  .hx-e17:not(.is-pin) .e17-chapters { grid-template-columns: 1fr 1fr; }
  .hx-e17:not(.is-pin) .e17-route { position: sticky; top: 10px; }
}

/* ==========================================================================
   PINNED GALAXY FLIGHT (desktop / tablet, motion allowed)
   ========================================================================== */
.hx-e17.is-pin .e17-stage { height: calc(100vh + var(--e17-len, 4200px)); }
.hx-e17.is-pin .e17-pin { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; display: block; }
.hx-e17.is-pin .e17-canvas { height: 100%; -webkit-mask-image: linear-gradient(transparent 40px, #000 130px); mask-image: linear-gradient(transparent 40px, #000 130px); }
.e17-transit { display: none; }
.hx-e17.is-pin .e17-transit { display: inline-flex; position: absolute; left: 0; top: 0; z-index: 4; align-items: center; gap: 8px; padding: 7px 13px 7px 9px; border-radius: 999px; pointer-events: none; white-space: nowrap; opacity: 0;
  background: rgba(255,255,255,.92); border: 1px solid #E2E8F0; box-shadow: 0 14px 30px -18px rgba(8,34,56,.5); font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; will-change: transform, opacity; }
.e17-transit i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, #00A3D9); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc, #00A3D9) 20%, transparent); }
.e17-transit b { font: 700 13px/1 var(--f-display); letter-spacing: -.01em; text-transform: none; color: #082238; }
.hx-e17.is-pin .e17-haze { top: 46%; height: 80%; transform: translate(-50%, -50%); opacity: var(--e17-iv, 1); }
.hx-e17.is-pin .hx-nav { position: relative; z-index: 20; }

.hx-e17.is-pin .e17-intro { position: absolute; left: 0; right: 0; top: 84px; bottom: 112px; padding-block: 0; align-content: center;
  opacity: var(--e17-iv, 1); transform: translateY(calc((1 - var(--e17-iv, 1)) * -60px)) scale(calc(.94 + var(--e17-iv, 1) * .06)); filter: blur(calc((1 - var(--e17-iv, 1)) * 6px)); }
.hx-e17.is-pin.is-flying .e17-intro { pointer-events: none; }

.hx-e17.is-pin .e17-core { display: grid; place-items: center; position: absolute; left: 0; top: 0; z-index: 3; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.92); box-shadow: 0 18px 40px -16px rgba(8,34,56,.45), 0 0 0 8px rgba(255,255,255,.5); will-change: transform, opacity; }
.hx-e17.is-pin .e17-core::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; z-index: -1; background: conic-gradient(from var(--e17a, 0deg), #226DB4, #FF9900, #95BF47, #21759B, #635BFF, #00B2A9, #226DB4); filter: blur(14px); opacity: .45; animation: e17-spin 8s linear infinite; }
.hx-e17.is-pin .e17-core img { width: 68px; height: 68px; }
.e17-core b { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid #E2E8F0; font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #082238; white-space: nowrap; }
.e17-transit img { width: auto; max-width: 44px; height: 18px; object-fit: contain; }

.hx-e17.is-pin .e17-labels { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.e17-label { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.e17-em { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; transition: box-shadow .35s, width .45s cubic-bezier(.2,.8,.2,1), border-radius .45s;
  background: #fff; border: 1px solid #fff; isolation: auto;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 12%, transparent), 0 0 46px 6px color-mix(in srgb, var(--c) 38%, transparent), 0 22px 40px -18px rgba(8,34,56,.45), inset 0 1px 0 #fff;
}
.e17-em::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent); animation: e17-rot 26s linear infinite; }
.e17-em::after { content: ""; position: absolute; inset: -20px; border-radius: 50%; z-index: -1; background: conic-gradient(from var(--e17a, 0deg), var(--c), var(--c2), var(--c)); filter: blur(18px); opacity: .32; animation: e17-spin 10s linear infinite; }
@keyframes e17-rot { to { rotate: 360deg; } }
.e17-em__main { width: 56px; height: 56px; object-fit: contain; }
.e17-em__wm { display: none; height: 40px; width: auto; max-width: 150px; object-fit: contain; }
.e17-label[data-k="shop"].is-act .e17-em { width: 184px; border-radius: 48px; }
.e17-label[data-k="shop"].is-act .e17-em__main { display: none; }
.e17-label[data-k="shop"].is-act .e17-em__wm { display: block; }
.e17-label[data-k="zoho"] .e17-em, .e17-label[data-k="aws"] .e17-em { width: 150px; border-radius: 48px; }
.hx-e17 .e17-label[data-k="zoho"] .e17-em { width: 184px; }
.e17-label[data-k="zoho"] .e17-em__main { width: 146px; height: 66px; }
.e17-label[data-k="aws"] .e17-em__main { width: 84px; height: 50px; }
/* AI & Agentic AI emblem: pulsing neural orb */
.e17-label[data-k="ai"] .e17-em { width: 112px; height: 112px; background: radial-gradient(circle at 38% 30%, #fff 0%, #F3EEFF 46%, #E3F7FB 100%);
  box-shadow: 0 0 0 7px rgba(124,58,237,.14), 0 0 0 16px rgba(6,182,212,.08), 0 0 60px 14px rgba(124,58,237,.38), 0 0 90px 30px rgba(6,182,212,.18), 0 22px 40px -18px rgba(8,34,56,.45), inset 0 1px 0 #fff; }
.e17-orb { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin-top: -14px; color: #7C3AED; }
.e17-orb .e17-aig { position: relative; z-index: 2; width: 44px; height: 44px; animation: e17-neural 4.5s ease-in-out infinite; }
.e17-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(124,58,237,.55); animation: e17-pulse 2.7s cubic-bezier(.2,.6,.3,1) infinite; }
.e17-orb i:nth-child(2) { border-color: rgba(6,182,212,.6); animation-delay: -.9s; }
.e17-orb i:nth-child(3) { animation-delay: -1.8s; }
@keyframes e17-pulse { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes e17-neural { 50% { transform: scale(1.08) rotate(22deg); color: #06B6D4; filter: drop-shadow(0 0 6px rgba(6,182,212,.7)); } }
.e17-orb .e17-aig { filter: drop-shadow(0 0 5px rgba(124,58,237,.55)); }
.e17-em__ai { position: absolute; left: 50%; bottom: 13px; translate: -50% 0; white-space: nowrap; font: 800 11px/1 var(--f-display); letter-spacing: .02em;
  background: linear-gradient(90deg, #7C3AED, #06B6D4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.e17-panel__logo .e17-aig { width: 30px; height: 30px; color: #7C3AED; }
/* ETG rocket */
.hx-e17.is-pin .e17-rocket { display: block; position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.e17-rocket__body { position: absolute; left: -60px; top: -28px; width: 120px; height: 56px; filter: drop-shadow(0 10px 14px rgba(8,34,56,.28)) drop-shadow(0 0 16px rgba(0,163,217,.35)); }
.e17-rocket__body svg { position: relative; display: block; width: 120px; height: 56px; }
.e17-rocket.is-dock .e17-rocket__body { animation: e17-hover 2.6s ease-in-out infinite; }
@keyframes e17-hover { 50% { translate: 0 -5px; } }
.e17-rocket__flame { position: absolute; right: calc(100% - 10px); top: 50%; width: 70px; height: 20px; margin-top: -10px; transform-origin: 100% 50%; transform: scaleX(var(--thr, .4)); }
.e17-rocket__flame i { position: absolute; right: 0; top: 0; width: 100%; height: 100%; border-radius: 50% 6px 6px 50%; background: linear-gradient(270deg, #fff 0%, #FFE08A 18%, #FF9A3D 45%, rgba(255,184,28,.6) 70%, rgba(255,184,28,0) 100%); filter: blur(1.5px); animation: e17-flick .12s steps(2) infinite alternate; }
.e17-rocket__flame i + i { top: 4px; height: 12px; width: 70%; background: linear-gradient(270deg, #fff 0%, #BFF3FF 30%, rgba(0,163,217,.7) 65%, rgba(0,163,217,0) 100%); animation-duration: .09s; }
@keyframes e17-flick { to { transform: scaleX(.86) scaleY(1.12); } }
/* agent at work (AI galaxy) */
.hx-e17.is-pin .e17-agent { display: inline-flex; position: absolute; left: 0; top: 0; z-index: 6; align-items: center; gap: 7px; margin: -50px 0 0 -14px; padding: 5px 11px 5px 5px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: linear-gradient(100deg, #7C3AED, #4F46E5 55%, #06B6D4); box-shadow: 0 0 0 4px rgba(124,58,237,.16), 0 12px 26px -10px rgba(124,58,237,.75); color: #fff; will-change: transform; }
.e17-agent i { width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='8' width='14' height='11' rx='3'/%3E%3Cpath d='M12 4v4M9.5 13h.01M14.5 13h.01'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: e17-ping 1.6s infinite; }
.e17-agent b { font: 700 12px/1 var(--f-display); white-space: nowrap; letter-spacing: -.005em; }
/* agent-run strip (stacked layout) */
.e17-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 600 12px/1.2 var(--f-body); color: #4C1D95; }
.e17-flow span { padding: 6px 10px; border-radius: 999px; background: #F3EEFF; border: 1px solid #DDD0FB; animation: e17-step 3.6s calc(var(--k) * 1.2s) infinite; }
.e17-flow i { font-style: normal; color: #7C3AED; }
@keyframes e17-step { 0%, 30% { background: linear-gradient(100deg, #7C3AED, #06B6D4); color: #fff; border-color: transparent; } 34%, 100% { background: #F3EEFF; color: #4C1D95; } }
.hx-e17.is-pin .e17-flow { display: none; }
#e17-ch-6 .e17-chip { box-shadow: 0 14px 30px -20px rgba(124,58,237,.6), 0 0 0 1px rgba(124,58,237,.08); }
.hx-e17.is-pin #e17-ch-6 .e17-chip__n small { display: none; }
.hx-e17.is-pin #e17-ch-6 .e17-chip { padding-right: 12px; }
.e17-em__sat { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 6px 14px -6px rgba(8,34,56,.4);
  transform: rotate(var(--a)) translateX(52px) rotate(calc(-1 * var(--a))); }
.e17-em__sat img { width: 17px; height: 17px; object-fit: contain; }
.e17-em__main { display: block; }
.e17-label > b { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid color-mix(in srgb, var(--c) 28%, #E2E8F0); box-shadow: 0 10px 22px -14px rgba(8,34,56,.5); font: 700 13px/1 var(--f-display); color: #082238; white-space: nowrap; transition: opacity .3s; }
.e17-label.is-act > b { opacity: 0; }
.e17-label:hover .e17-em { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 18%, transparent), 0 0 56px 10px color-mix(in srgb, var(--c) 45%, transparent), 0 22px 40px -18px rgba(8,34,56,.45); }

.hx-e17.is-pin .e17-chapters { position: absolute; inset: 0; z-index: 5; width: auto; margin: 0; display: block; pointer-events: none; }
.hx-e17.is-pin .e17-ch { position: absolute; inset: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; visibility: hidden; }
.hx-e17.is-pin .e17-ch.is-vis { visibility: visible; }
.hx-e17.is-pin .e17-panel { position: absolute; left: max(28px, calc((100% - 1320px) / 2)); top: calc(50% - 6px); width: min(400px, 34vw); padding: 22px 22px 20px; border-radius: 26px; gap: 11px;
  background: rgba(255,255,255,.9); border: 1px solid #E2E8F0; box-shadow: 0 40px 80px -46px rgba(8,34,56,.55), inset 0 1px 0 #fff; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: var(--pv, 0); transform: translate(calc((1 - var(--pv, 0)) * -48px), -50%); pointer-events: none; }
.hx-e17.is-pin .e17-panel::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--c), var(--c2)); }
.hx-e17.is-pin .e17-ch.is-on .e17-panel { pointer-events: auto; }
.hx-e17.is-pin .e17-chips { position: absolute; inset: 0; display: block; }
.hx-e17.is-pin .e17-chips li { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.hx-e17.is-pin .e17-ch.is-on .e17-chips li.is-live { pointer-events: auto; }
.hx-e17.is-pin .e17-chip { animation: e17-float var(--f, 7s) ease-in-out infinite; }
@keyframes e17-float { 50% { translate: 0 -5px; } }
/* side quick-tags in pinned mode */
.hx-e17.is-pin .e17-tag { left: calc(100% + 14px); top: 50%; translate: 0 -50%; transform: translateX(-8px) scale(.97); }
.hx-e17.is-pin li[data-side="l"] .e17-tag { left: auto; right: calc(100% + 14px); transform: translateX(8px) scale(.97); }
.hx-e17.is-pin .e17-chip:hover .e17-tag, .hx-e17.is-pin .e17-chip:focus-visible .e17-tag, .hx-e17.is-pin .e17-chip.is-open .e17-tag { transform: none; }

.hx-e17.is-pin .e17-finale { position: absolute; left: 0; right: 0; top: 92px; z-index: 6; padding: 0 16px; gap: 12px; opacity: var(--fv, 0); transform: translateY(calc((1 - var(--fv, 0)) * 30px)); pointer-events: none; }
.hx-e17.is-pin.is-final .e17-finale { pointer-events: auto; }
.hx-e17.is-pin .e17-finale h2 { font-size: clamp(28px, 1rem + 1.7vw, 42px); max-width: none; }
.hx-e17.is-pin .e17-finale__cta .btn { min-height: 48px; padding: 13px 22px; font-size: 15px; }

.hx-e17.is-pin .e17-mini { display: block; position: absolute; right: max(24px, calc((100% - 1360px) / 2)); bottom: 22px; z-index: 7; width: 214px; padding: 9px 9px 8px; border-radius: 18px; cursor: pointer; pointer-events: auto;
  background: rgba(255,255,255,.88); border: 1px solid #E2E8F0; box-shadow: 0 24px 50px -32px rgba(8,34,56,.45), inset 0 1px 0 #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.e17-mini canvas { display: block; width: 196px; height: 112px; border-radius: 11px; background: linear-gradient(160deg, #F3F7F9, #EEF6FB); }
.e17-mini p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 7px 3px 0; }
.e17-mini p span { flex: none; white-space: nowrap; font: 700 9.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.e17-mini p b { font: 700 12px/1 var(--f-display); color: #082238; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hx-e17.is-pin .e17-route { position: absolute; left: 50%; bottom: 22px; z-index: 7; width: min(760px, calc(100% - 520px)); margin: 0; transform: translateX(-50%); }
.hx-e17.is-pin .trustbar { margin-top: -10px; }

@media (max-width: 1240px) {
  .hx-e17.is-pin .e17-route { left: 24px; transform: none; width: calc(100% - 286px); }
}
@media (max-width: 1100px) {
  .hx-e17.is-pin .e17-panel { width: 340px; padding: 18px; }
  .hx-e17.is-pin .e17-panel h3, .hx-e17.is-pin .e17-panel .e17-panel__name { font-size: 26px; }
  .hx-e17.is-pin .e17-panel__lead { display: none; }
  .hx-e17.is-pin .e17-chip__n small { display: none; }
}
@media (max-height: 820px) {
  .hx-e17.is-pin .e17-panel__lead { display: none; }
  .hx-e17.is-pin .e17-panel { gap: 9px; padding-block: 18px 16px; }
  .hx-e17.is-pin .hx-m__logo .mk { width: 46px; height: 46px; } .hx-e17.is-pin .hx-m__logo .wm { height: 36px; }
  .hx-e17.is-pin .hx-title { font-size: clamp(34px, 1rem + 2.6vw, 52px); }
}

/* ---------- small screens (stacked) ---------- */
@media (max-width: 760px) {
  .hx-e17 .hx-title { font-size: 33px; }
  .e17-eyebrow { font-size: 10.5px; letter-spacing: .05em; text-align: left; }
  .hx-e17 .hx-m__logo .mk { width: 46px; height: 46px; } .hx-e17 .hx-m__logo .wm { height: 36px; }
  .e17-route { padding: 8px 6px; }
  .e17-route__track { display: none; }
  .e17-route__tabs { grid-template-columns: repeat(3, 1fr); row-gap: 8px; }
  .e17-ch { padding: 16px 14px; }
  .e17-panel h3, .e17-panel .e17-panel__name { font-size: 26px; }
  .e17-chip { padding-right: 11px; font-size: 12.5px; }
  .e17-chip__n small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .e17-em::before, .e17-em::after, .e17-orb i, .e17-orb .e17-aig, .e17-flow span, .e17-rocket__flame i, .e17-agent i, .e17-bg i, .e17-chip, .e17-live, .hx-e17 .hx-m__logo::before, .hx-e17 .e17-core::before { animation: none; }
  .hx-e17 .hx-title .mw > span { transition: none; transform: none; }
}

/* ---------- AI galaxy: Zoho MCP (prominent, inner ring), Zia, Zoho Agents ---------- */
.e17-chip > i.is-logo img[src*="zoho-agents"] { max-width: 54px; }
.e17-chips li.is-mcp .e17-chip { gap: 11px; padding: 7px 15px 7px 7px; font-size: 14px; border-color: color-mix(in srgb, #7C3AED 30%, #E2E8F0);
  box-shadow: 0 0 0 4px rgba(124,58,237,.1), 0 0 30px 4px rgba(124,58,237,.22), 0 0 46px 10px rgba(6,182,212,.12), 0 16px 32px -18px rgba(8,34,56,.55); }
.e17-chips li.is-mcp .e17-chip > i.is-logo { width: 92px; height: 40px; border-color: color-mix(in srgb, #7C3AED 22%, #E2E8F0); }
.e17-chips li.is-mcp .e17-chip > i.is-logo img { max-width: 80px; max-height: 31px; }
.hx-e17.is-pin .e17-chips li.is-mcp .e17-chip { animation: e17-float var(--f, 7s) ease-in-out infinite, e17-mcp 3.2s ease-in-out infinite; }
@keyframes e17-mcp { 50% { box-shadow: 0 0 0 6px rgba(124,58,237,.14), 0 0 40px 8px rgba(124,58,237,.3), 0 0 60px 16px rgba(6,182,212,.16), 0 16px 32px -18px rgba(8,34,56,.55); } }
.e17-chips li.is-mcp .e17-chip:hover, .e17-chips li.is-mcp .e17-chip:focus-visible, .e17-chips li.is-mcp .e17-chip.is-open { animation-play-state: paused; }
@keyframes e17-step { 0%, 22% { background: linear-gradient(100deg, #7C3AED, #06B6D4); color: #fff; border-color: transparent; } 25%, 100% { background: #F3EEFF; color: #4C1D95; } }
.e17-flow span { animation-duration: 4.8s; }

/* ---------- landing at the ETG core ---------- */
.e17-land { position: absolute; inset: 0; pointer-events: none; }
.e17-land i { position: absolute; inset: 0; border-radius: 50%; opacity: 0; border: 2px solid rgba(0,163,217,.6); }
.e17-land i:nth-child(2) { border-color: rgba(0,178,169,.55); }
.e17-land i:nth-child(3) { border: 0; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(0,163,217,.25) 55%, rgba(0,163,217,0)); }
.e17-core.is-landed .e17-land i { animation: e17-land 1.2s cubic-bezier(.2,.7,.3,1) forwards; }
.e17-core.is-landed .e17-land i:nth-child(2) { animation-delay: .14s; }
.e17-core.is-landed .e17-land i:nth-child(3) { animation: e17-landglow 1s ease-out forwards; }
@keyframes e17-land { 0% { opacity: .9; transform: scale(.9, .6); } 100% { opacity: 0; transform: scale(2.6, 1.7); } }
@keyframes e17-landglow { 0% { opacity: 0; transform: scale(.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }

/* touchdown message (mission control) */
.e17-td { display: none; }
.hx-e17.is-pin .e17-td:not(.e17-td--static) { display: flex; position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.e17-td { align-items: center; gap: 13px; width: max-content; max-width: min(400px, calc(100vw - 32px)); padding: 13px 18px 13px 13px; border-radius: 20px; text-align: left;
  background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)) padding-box, linear-gradient(100deg, #1D3F8F, #00A3D9 40%, #00B2A9 70%, #3FB97A) border-box; border: 1.5px solid transparent;
  box-shadow: 0 26px 50px -26px rgba(8,34,56,.55), 0 0 34px -6px rgba(0,163,217,.3); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.e17-td::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: #fff; border-right: 1.5px solid #00B2A9; border-bottom: 1.5px solid #00A3D9; transition: opacity .3s; }
.e17-td__ping { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #00A3D9, #00B2A9 60%, #3FB97A); box-shadow: 0 8px 18px -8px rgba(0,163,217,.8); }
.e17-td__ping svg { position: relative; z-index: 1; width: 19px; height: 19px; }
.e17-td__ping i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0,178,169,.55); animation: e17-pulse 2.2s cubic-bezier(.2,.6,.3,1) infinite; }
.e17-td__ping i + i { animation-delay: -1.1s; border-color: rgba(0,163,217,.5); }
.e17-td__txt { display: grid; gap: 3px; min-width: 0; }
.e17-td em { font: 700 10px/1.2 var(--f-body); font-style: normal; letter-spacing: .13em; text-transform: uppercase; color: #00A3D9; }
.e17-td b { font: 800 17px/1.2 var(--f-display); letter-spacing: -.015em; color: #082238; min-height: 1.2em; }
.e17-td__txt > span { font: 500 13px/1.4 var(--f-body); color: #475569; }
/* pinned: pop in, type the title, then the line */
.hx-e17.is-pin .e17-td:not(.e17-td--static) .e17-td__ping, .hx-e17.is-pin .e17-td:not(.e17-td--static) em, .hx-e17.is-pin .e17-td:not(.e17-td--static) .e17-td__txt > span { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.hx-e17.is-pin .e17-td.is-on .e17-td__ping { opacity: 1; transform: none; animation: e17-tdpop .55s cubic-bezier(.3,1.6,.5,1); }
.hx-e17.is-pin .e17-td.is-on em { opacity: 1; transform: none; transition-delay: .12s; }
.hx-e17.is-pin .e17-td.is-typed .e17-td__txt > span { opacity: 1; transform: none; }
.hx-e17.is-pin .e17-td.is-on:not(.is-typed) b::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -2px; background: #00A3D9; animation: e17-caret .6s steps(2) infinite; }
@keyframes e17-caret { 50% { opacity: 0; } }
@keyframes e17-tdpop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
.hx-e17.is-pin .e17-td:not(.e17-td--static) { transition: padding .45s cubic-bezier(.2,.8,.2,1), gap .45s, border-radius .45s; }
/* compact pill after the connect prompt opens */
.hx-e17.is-pin .e17-td.is-compact { gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; }
.hx-e17.is-pin .e17-td.is-compact::after, .hx-e17.is-pin .e17-td.is-compact em, .hx-e17.is-pin .e17-td.is-compact .e17-td__txt > span { display: none; }
.hx-e17.is-pin .e17-td.is-compact .e17-td__ping { width: 22px; height: 22px; animation: none; }
.hx-e17.is-pin .e17-td.is-compact .e17-td__ping svg { width: 12px; height: 12px; }
.hx-e17.is-pin .e17-td.is-compact .e17-td__ping i { display: none; }
.hx-e17.is-pin .e17-td.is-compact b { font-size: 12.5px; }
/* stacked (mobile / reduced motion): static card on the final universe card */
.hx-e17:not(.is-pin) .e17-td--static { display: flex; position: relative; margin: 4px auto 6px; }
@media (prefers-reduced-motion: reduce) { .e17-td__ping i, .e17-chips li.is-mcp .e17-chip, .e17-core.is-landed .e17-land i { animation: none; } }
.hx-e17:not(.is-pin) .e17-td--static::after { display: none; }

/* hero lede: platform words are links but keep the text look */
.hx-e17 .hx-lede .hx-inlink { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,163,217,.35); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.hx-e17 .hx-lede .hx-inlink:hover { color: #0A6FA8; text-decoration-color: currentColor; }

/* ---- phone menu (homepage nav) ---- */
.hx-burger { display: none; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.85); box-shadow: 0 6px 16px -10px rgba(8,34,56,.5); cursor: pointer; }
.hx-burger span { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: #082238; transition: transform 250ms, opacity 250ms; }
.hx-nav.is-open .hx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hx-nav.is-open .hx-burger span:nth-child(2) { opacity: 0; }
.hx-nav.is-open .hx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hx-mnav { position: absolute; left: 12px; right: 12px; top: calc(100% - 6px); z-index: 40; padding: 10px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -30px rgba(8,34,56,.55); animation: hx-mnav-in 260ms cubic-bezier(.2,.7,.1,1); }
.hx-mnav[hidden] { display: none; }
@keyframes hx-mnav-in { from { opacity: 0; transform: translateY(-8px); } }
.hx-mnav ul { display: grid !important; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hx-mnav li a { display: block; padding: 14px 16px; border-radius: 12px; font: 600 17px/1.2 var(--f-display); color: #082238 !important; text-decoration: none; }
.hx-mnav li a:hover, .hx-mnav li a:focus-visible { background: #F3F7F9; }
.hx-mnav .btn { display: flex; justify-content: center; margin: 8px 6px 6px; color: #082238; }
@media (max-width: 1080px) {
  .hx-burger { display: block; margin-left: 10px; }
  .hx-nav ul.hx-nav__links { display: none; }
}
@media (max-width: 560px) { .hx-nav__in > .btn { display: none; } .hx-burger { margin-left: auto; } }
html.hx-locked { overflow: hidden; }
.hx-burger { flex: none; box-sizing: border-box; }
a.e17-chip { text-decoration: none; }
a.e17-chip:hover, a.e17-chip:focus-visible { border-color: #9BD3EA; box-shadow: 0 18px 34px -18px rgba(0,163,217,.55); }
.e17-tag__go { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font: 700 12.5px/1 var(--f-body); font-style: normal; color: #0A6FA8; }
.e17-tag__go span { transition: transform .25s; }
a.e17-chip:hover .e17-tag__go span { transform: translate(2px, -2px); }