/* Home: a product site, not a knowledge base. Dark hero with a living illustration, tab-driven explainers, a bento of mixed tiles, a real carousel (three screens,
   one per view), an interactive stepper, colourful sector tiles. Every tile reacts to the pointer. Animation runs only on small elements and pauses off-screen. */
.hx { --ink: #0F1B2D; --ink-2: #4A586B; --ink-3: #566678; --line: #D9E6EE; --teal: #0A9C99; --teal-d: #066E6B; --mint: #7DE3D8; --blue: #3A6FE0; --navy: #07202B;
  --grad: linear-gradient(135deg, #14C8C2, #3A6FE0); color: var(--ink); font-size: 1.04rem; line-height: 1.6; }
.hx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hx h1, .hx h2, .hx h3, .hx p, .hx ul, .hx figure { margin: 0; }
.hx :where(h1, h2, h3) { color: inherit; }  /* the site's heading colour is dark; sections that are dark say so themselves */
.hx ul { padding: 0; list-style: none; }
.hx-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Type and rhythm */
.hx-sec { padding: clamp(52px, 6vw, 92px) 0; }
.hx-sec--tint { background: #EAF3F8; }
.hx-sec--dark { background: radial-gradient(900px 420px at 80% 0, rgba(20, 200, 194, .18), transparent 60%), linear-gradient(180deg, #08202C, #0A2F44); color: #fff; }
.hx-head { max-width: 760px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.hx-head--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hx-head p { margin-top: 14px; color: var(--ink-2); font-size: 1.12rem; max-width: 60ch; }
.hx-head--light h2 { color: #fff; }
.hx-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 156, 153, .1); color: var(--teal-d); font: 700 .78rem var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; }
.hx-sec--dark .hx-eyebrow, .hx-sec--dark .hx-head--light .hx-eyebrow { background: rgba(125, 227, 216, .14); color: var(--mint); }
.hx h2 { margin-top: 14px; font: 800 clamp(1.9rem, 3.5vw, 2.9rem)/1.1 var(--font-head, var(--font-body, inherit)); letter-spacing: -.025em; }
.hx h3 { font: 700 1.2rem/1.25 var(--font-body, inherit); letter-spacing: -.01em; }
.hx-more { display: inline-flex; align-items: center; gap: 6px; font: 700 .98rem var(--font-body, inherit); color: var(--teal-d); text-decoration: none; }
.hx-more .hx-ic { width: 18px; height: 18px; transition: transform .25s; }
.hx-more:hover .hx-ic { transform: translateX(4px); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 1.02rem; }
.btn-ghost-dark { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .42); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Pointer glow on every tile */
[data-glow] { position: relative; }
[data-glow]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 200, 194, .2), transparent 62%); }
[data-glow]:hover::before { opacity: 1; }

/* Hero */
.hx-hero { color: #fff; padding: clamp(44px, 6vw, 84px) 0 clamp(52px, 6vw, 92px);
  background: radial-gradient(820px 520px at 78% 38%, rgba(20, 200, 194, .26), transparent 62%), radial-gradient(700px 420px at 0 100%, rgba(58, 111, 224, .28), transparent 62%), linear-gradient(180deg, #07202B, #0A2F44); }
.hx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hx-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font: 600 .86rem var(--font-body, inherit); }
.hx-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(125, 227, 216, .25); }
.hx-hero h1 { margin: 20px 0 18px; font: 800 clamp(2.5rem, 5.4vw, 4.4rem)/1.03 var(--font-head, var(--font-body, inherit)); letter-spacing: -.035em; }
.hx-hero h1 span { background: linear-gradient(120deg, #7DE3D8, #8FB4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-lede { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: rgba(255, 255, 255, .8); max-width: 36ch; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-chips li { padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .86); font: 600 .84rem var(--font-body, inherit); }
.hx-hero__art { position: relative; max-width: 560px; justify-self: end; width: 100%; }
.hx-hub { display: block; width: 100%; height: auto; overflow: visible; }
.hx-hub .ring { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 1.5; } .hx-hub .ring--dash { stroke-dasharray: 3 9; }
.hx-hub .spokes path { stroke: rgba(125, 227, 216, .38); stroke-width: 1.5; fill: none; }
.hx-hub .node { fill: #fff; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.hx-hub .av { fill: #fff; font: 800 12px var(--font-body, inherit); }
.hx-hub .orbit { transform-origin: 280px 260px; animation: hx-spin 70s linear infinite; }
.hx-hub .orbit--rev { animation-duration: 100s; animation-direction: reverse; }
.hx-hub .cn { transform-box: fill-box; transform-origin: center; animation: hx-spin 70s linear infinite reverse; }
.hx-hub .orbit--rev .cn { animation-duration: 100s; animation-direction: normal; }
.hx-hub .pulse { fill: none; stroke: var(--mint); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: hx-pulse 3.4s ease-out infinite; }
.hx-hub .pulse--2 { animation-delay: 1.7s; }
.hx-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .55); font-size: .86rem; line-height: 1.25; animation: hx-bob 6s ease-in-out infinite; }
.hx-float .hx-ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: #E3F6F4; color: var(--teal-d); box-sizing: content-box; }
.hx-float b { display: block; font-weight: 700; } .hx-float span { color: var(--ink-3); }
.hx-float--a { top: 2%; right: -2%; } .hx-float--b { left: -3%; bottom: -3%; animation-delay: -2s; } .hx-float--c { right: -2%; bottom: 17%; animation-delay: -4s; }
@keyframes hx-spin { to { transform: rotate(360deg); } }
@keyframes hx-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Works with */
.hx-works { background: #fff; border-bottom: 1px solid var(--line); padding: 26px 0; }
.hx-works .hx-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hx-works p { font: 700 .8rem var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); max-width: 22ch; }
.hx-works ul { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.hx-works li { display: inline-flex; align-items: center; gap: 9px; font: 600 .95rem var(--font-body, inherit); color: var(--ink-3); cursor: default; transition: color .25s, transform .25s; }
.hx-works img { filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s; }
.hx-works li:hover { color: var(--ink); transform: translateY(-2px); } .hx-works li:hover img { filter: none; opacity: 1; }

/* Showcase: tabs drive big illustrations */
.hx-show { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.hx-show__tabs { display: grid; align-content: center; gap: 12px; }
.hx-tab { display: flex; align-items: center; gap: 16px; padding: 18px 20px; text-align: left; border-radius: 20px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font: inherit;
  transition: transform .3s, box-shadow .3s, border-color .3s, background .3s, color .3s; }
.hx-tab b { display: block; font: 700 1.1rem var(--font-body, inherit); } .hx-tab small { display: block; margin-top: 2px; color: var(--ink-3); font-size: .92rem; transition: color .3s; }
.hx-tab__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: #E3F6F4; color: var(--teal-d); transition: background .3s, color .3s, transform .3s; }
.hx-tab:hover { transform: translateX(6px); border-color: var(--teal); box-shadow: 0 18px 34px -22px rgba(10, 100, 110, .6); }
.hx-tab:hover .hx-tab__ic { transform: scale(1.1) rotate(-4deg); }
.hx-tab[aria-selected="true"] { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 24px 40px -22px rgba(30, 90, 200, .7); transform: translateX(10px); }
.hx-tab[aria-selected="true"] small { color: rgba(255, 255, 255, .86); } .hx-tab[aria-selected="true"] .hx-tab__ic { background: rgba(255, 255, 255, .22); color: #fff; }
.hx-show__tabs .hx-more { margin-top: 10px; padding-left: 4px; }
.hx-show__stage { position: relative; aspect-ratio: 640 / 400; border-radius: 30px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(circle at 1px 1px, #D3E3EC 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(150deg, #F6FBFD, #E6F1F7); box-shadow: 0 40px 70px -46px rgba(10, 60, 90, .55); }
.il { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity .45s, transform .6s, visibility .45s; }
.il.is-on { opacity: 1; visibility: visible; transform: none; }
.hx-show__stage:hover .il.is-on { transform: scale(1.035); }
.il-cap { font: 700 15px var(--font-body, inherit); fill: var(--ink-2); } .il-name { font: 700 15px var(--font-body, inherit); fill: var(--ink); } .il-name--l { font-size: 19px; }
.il-url { font: 500 13px var(--font-body, inherit); fill: var(--ink-3); } .il-av { font: 800 24px var(--font-body, inherit); fill: #fff; } .il-av--s { font-size: 15px; } .il-av--xs { font-size: 11px; }
.il-chip { font: 700 14px var(--font-body, inherit); fill: #0A7F7C; } .il-chip--g { fill: var(--ink-2); } .il-chip--w { fill: #fff; } .il-chip--r { fill: #B3261E; }
.il-flow { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 9; }
.il.is-on .il-flow { animation: hx-dash 1.1s linear infinite; }
@keyframes hx-dash { to { stroke-dashoffset: -15; } }
/* SSO */
.il--sso .lt rect { fill: #F6FAFD; stroke: #D5E3EC; stroke-width: 2; } .il--sso .lt text { font: 600 13px var(--font-body, inherit); fill: var(--ink-2); }
.il--sso .lt, .il--sso .lt .ok { transform-box: fill-box; transform-origin: center; } .il--sso .lt .ok { opacity: 0; }
.il--sso.is-on .lt { animation: lt-pop 9s infinite; animation-delay: calc(var(--k) * 1.5s); } .il--sso.is-on .lt rect { animation: lt-fill 9s infinite; animation-delay: calc(var(--k) * 1.5s); }
.il--sso.is-on .lt .ok { animation: lt-ok 9s infinite; animation-delay: calc(var(--k) * 1.5s); }
@keyframes lt-pop { 0%, 14% { transform: scale(1.07); } 17%, 100% { transform: scale(1); } }
@keyframes lt-fill { 0%, 14% { fill: #E3F6F4; stroke: #0A9C99; } 17%, 100% { fill: #F6FAFD; stroke: #D5E3EC; } }
@keyframes lt-ok { 0% { opacity: 0; transform: scale(.3); } 4%, 14% { opacity: 1; transform: scale(1); } 17%, 100% { opacity: 0; transform: scale(1); } }
/* IAM (opacity only on items that carry a transform attribute) */
.iam-a { opacity: 0; }
.il--iam.is-on .iam-a { animation: iam 8s infinite; animation-delay: var(--d); }
.il--iam.is-on .il-flow.iam-a { animation: iam 8s infinite, hx-dash 1.1s linear infinite; animation-delay: var(--d), 0s; }
@keyframes iam { 0% { opacity: 0; } 9%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
.iam-chip rect { fill: #fff; stroke: #D5E3EC; stroke-width: 2; }
/* PAM */
.pam-ring { stroke-dasharray: 490; stroke-dashoffset: 0; } .il--pam.is-on .pam-ring { animation: pam-drain 9s ease-in-out infinite; }
.pam-end, .pam-cap2 { opacity: 0; } .pam-end { transform-box: fill-box; transform-origin: center; }
.il--pam.is-on .pam-key { animation: pam-key 9s infinite; } .il--pam.is-on .pam-end { animation: pam-end 9s infinite; }
.il--pam.is-on .pam-cap1 { animation: pam-key 9s infinite; } .il--pam.is-on .pam-cap2 { animation: pam-end 9s infinite; }
.pam-btn { transform-box: fill-box; transform-origin: center; } .il--pam.is-on .pam-btn { animation: b-btn 2.4s ease-in-out infinite; }
@keyframes pam-drain { 0%, 8% { stroke-dashoffset: 0; } 70%, 100% { stroke-dashoffset: 490; } }
@keyframes pam-key { 0%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes pam-end { 0%, 71% { opacity: 0; transform: scale(.5); } 79%, 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* Bento */
.hx-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.hx-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line); overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s; }
.hx-tile:hover { transform: translateY(-7px); border-color: var(--teal); box-shadow: 0 34px 56px -32px rgba(10, 70, 90, .55); }
.hx-tile > * { position: relative; }
.hx-tile h3 { font-size: 1.32rem; margin-bottom: 8px; } .hx-tile p { color: var(--ink-2); font-size: .98rem; }
.hx-tile svg { display: block; width: 100%; height: auto; }
.il-zoom { transition: transform .55s cubic-bezier(.2, .8, .2, 1); } .hx-tile:hover .il-zoom { transform: scale(1.08); }
.hx-tile--w7 { grid-column: span 7; flex-direction: row; align-items: center; } .hx-tile--w5 { grid-column: span 5; } .hx-tile--w4 { grid-column: span 4; }
.hx-tile--w7 > div { flex: 1 1 0; } .hx-tile--w7 svg { flex: 0 0 230px; width: 230px; }
.hx-tile--dark { background: linear-gradient(150deg, #0B3A52, #0A7F8A); border-color: transparent; color: #fff; } .hx-tile--dark p { color: rgba(255, 255, 255, .8); } .hx-tile--dark:hover { border-color: var(--mint); }
.b-big { font: 800 34px var(--font-body, inherit); fill: var(--ink); } .b-mono { font: 600 11.5px ui-monospace, Menlo, monospace; fill: var(--ink-2); } .b-mono--w { fill: #CFEFF2; }
.b-ring { stroke-dashoffset: 150; } .hx-tile .b-ring { animation: b-drain 12s linear infinite; }
@keyframes b-drain { 0% { stroke-dashoffset: 40; } 100% { stroke-dashoffset: 528; } }
.b-pulse { transform-box: fill-box; transform-origin: center; animation: b-btn 2.4s ease-in-out infinite; }
@keyframes b-btn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.b-ping { transform-box: fill-box; transform-origin: center; animation: b-ping 3s ease-out infinite; } .b-ping--2 { animation-delay: 1.5s; }
@keyframes b-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }

.cx-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.cx-dots { display: flex; gap: 9px; } .cx-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .25s, background .25s; }
.cx-dots button[aria-current="true"] { width: 32px; background: var(--mint); } .cx-dots button:hover { background: rgba(255, 255, 255, .6); }
.cx-btns { display: flex; gap: 10px; } .cx-btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.cx-btn:hover:not([disabled]) { background: rgba(255, 255, 255, .16); transform: scale(1.08); } .cx-btn[disabled] { opacity: .3; cursor: default; }
.cx-btn:focus-visible, .cx-dots button:focus-visible, .hx-tab:focus-visible, .hx-step:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* Interactive stepper */
.hx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx-step { position: relative; display: grid; align-content: start; justify-items: center; gap: 8px; padding: 6px 12px 14px; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: center; }
.hx-step b { font: 700 1.2rem var(--font-body, inherit); } .hx-step small { color: var(--ink-3); font-size: .95rem; max-width: 20ch; }
.hx-step__ic { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 26px; background: #fff; border: 1px solid var(--line); color: var(--teal-d); box-shadow: 0 16px 28px -20px rgba(20, 60, 90, .6);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s, color .35s, box-shadow .35s; }
.hx-step__ic .hx-ic { width: 36px; height: 36px; }
.hx-step::after { content: ""; position: absolute; top: 42px; left: calc(50% + 56px); right: calc(-50% + 56px); border-top: 3px dashed #BFD2DE; transition: border-color .4s; }
.hx-step:last-child::after { display: none; } .hx-step.is-done::after { border-top-style: solid; border-color: var(--teal); }
.hx-step:hover .hx-step__ic { transform: translateY(-5px) scale(1.06); background: var(--surface-3, #E7F8F8); }
.hx-step.is-on .hx-step__ic { background: var(--grad); color: #fff; transform: scale(1.14); box-shadow: 0 26px 40px -20px rgba(30, 90, 200, .75); }
.hx-step.is-on b { color: var(--teal-d); }
.hx .hx-steps__say { margin: 26px auto 0; max-width: 62ch; min-height: 3.4em; text-align: center; font-size: 1.16rem; color: var(--ink-2); transition: opacity .25s; }

/* Sectors */
.hx-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hx-sector { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px; min-height: 196px; border-radius: 24px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s, color .35s; isolation: isolate; }
.hx-sector::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, var(--c1), var(--c2)); opacity: 0; transition: opacity .35s; }
.hx-sector > * { position: relative; z-index: 1; }
.hx-sector__ic { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 17px; background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; transition: background .35s, transform .35s; }
.hx-sector b { font: 700 1.14rem/1.25 var(--font-body, inherit); } .hx-sector small { color: var(--ink-3); font-size: .92rem; line-height: 1.45; transition: color .35s; padding-right: 50px; }
.hx-go { position: absolute !important; right: 20px; bottom: 20px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #EEF5F9; color: var(--ink); font-style: normal; transition: background .35s, color .35s, transform .35s; }
.hx-go .hx-ic { width: 18px; height: 18px; }
.hx-sector:hover { transform: translateY(-7px); box-shadow: 0 34px 50px -30px rgba(10, 50, 80, .6); border-color: transparent; color: #fff; }
.hx-sector:hover::after { opacity: 1; } .hx-sector:hover small { color: rgba(255, 255, 255, .86); } .hx-sector:hover .hx-sector__ic { background: rgba(255, 255, 255, .22); transform: scale(1.1) rotate(-5deg); }
.hx-sector:hover .hx-go { background: #fff; color: var(--c2); transform: translateX(4px); }

/* Numbers */
.hx-numbers { background: linear-gradient(120deg, #07202B, #0B3F5A); color: #fff; padding: clamp(40px, 5vw, 64px) 0; }
.hx-numbers ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; }
.hx-numbers b { display: block; font: 800 clamp(2.6rem, 5.4vw, 4rem)/1 var(--font-head, var(--font-body, inherit)); letter-spacing: -.03em; background: linear-gradient(120deg, #7DE3D8, #8FB4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-numbers small { display: block; margin-top: 8px; color: rgba(255, 255, 255, .74); font-size: .98rem; }

/* Pricing */
.hx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.hx-plan { display: grid; align-content: start; gap: 10px; padding: 32px; border-radius: 26px; background: #fff; border: 1px solid var(--line); transition: transform .35s, box-shadow .35s, border-color .35s; overflow: hidden; }
.hx-plan:hover { transform: translateY(-7px); box-shadow: 0 34px 56px -32px rgba(10, 70, 90, .55); border-color: var(--teal); }
.hx-plan > * { position: relative; }
.hx-plan small { font: 700 .8rem var(--font-body, inherit); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.hx-plan strong { font: 800 2.6rem/1.05 var(--font-head, var(--font-body, inherit)); letter-spacing: -.02em; } .hx-plan strong em { font: 500 .92rem var(--font-body, inherit); font-style: normal; color: var(--ink-3); letter-spacing: 0; }
.hx-plan p { color: var(--ink-2); min-height: 3.4em; } .hx-plan .btn { justify-self: start; margin-top: 8px; }
.hx-plan.is-main { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; box-shadow: 0 30px 56px -34px rgba(30, 90, 200, .6); }
.hx-plan__tag { position: absolute !important; top: 18px; right: 18px; padding: 5px 12px; border-radius: 99px; background: var(--grad); color: #fff; font: 700 .76rem var(--font-body, inherit); }

/* Final call */
.hx-end { text-align: center; color: #fff; padding: clamp(56px, 7vw, 104px) 0; background: radial-gradient(800px 360px at 50% 0, rgba(255, 255, 255, .18), transparent 70%), linear-gradient(120deg, #0A8F94, #2457B8); }
.hx-end h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 24ch; margin: 0 auto 14px; } .hx-end p { color: rgba(255, 255, 255, .86); font-size: 1.14rem; max-width: 48ch; margin: 0 auto; }
.hx-end .hx-cta { justify-content: center; margin-bottom: 22px; } .hx .hx-end .btn-primary { background: #fff !important; color: var(--teal-d) !important; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5); }
.hx-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hx-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font: 600 .94rem var(--font-body, inherit); text-decoration: none; transition: background .25s, transform .25s; }
.hx-links a:hover { background: rgba(255, 255, 255, .26); transform: translateY(-2px); } .hx-links .hx-ic { width: 18px; height: 18px; }

/* Off-screen: stop every animation (JS adds .is-off) */
[data-live].is-off *, [data-live].is-off *::before { animation-play-state: paused !important; }

@media (max-width: 960px) {
  .hx-hero__grid, .hx-show { grid-template-columns: minmax(0, 1fr); } .hx-hero__art { justify-self: center; max-width: 440px; }
  .hx-show__tabs { grid-auto-flow: row; } .hx-tab:hover, .hx-tab[aria-selected="true"] { transform: none; }
  .hx-tile--w7, .hx-tile--w5, .hx-tile--w4 { grid-column: span 12; } .hx-tile--w7 { flex-direction: column; align-items: stretch; } .hx-tile--w7 svg { flex: none; width: 200px; align-self: center; }
  .hx-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-numbers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .hx-plans { grid-template-columns: minmax(0, 1fr); } .hx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .hx-step::after { display: none; }
  .hx-float--a { right: 0; } .hx-float--b { left: 0; }
}
@media (max-width: 520px) { .hx-sectors { grid-template-columns: minmax(0, 1fr); } .hx-sector { min-height: 0; } .hx-float { font-size: .78rem; padding: 8px 12px 8px 10px; } .hx-float .hx-ic { width: 24px; height: 24px; } .hx-works p { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .hx *, .hx *::before { animation: none !important; transition: none !important; } .iam-a, .il--sso .lt .ok { opacity: 1; } .pam-end, .pam-cap2 { opacity: 0; } }

/* Product screens: one page in a frame. A change is one smooth move: the current screen eases out one way while the next eases in from the other. */
.bk { max-width: 1120px; margin: 0 auto; outline: none; }
.bk__frame { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 50px 80px -44px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .16); }
.bk__bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #E6EDF2; } .bk__bar i { width: 11px; height: 11px; border-radius: 50%; background: #C9D3DB; } .bk__bar span { margin-left: 10px; padding: 3px 14px; border-radius: 99px; background: #fff; color: var(--ink-3); font: 500 .8rem ui-monospace, Menlo, monospace; }
.bk__page { position: relative; aspect-ratio: 1280 / 800; overflow: hidden; background: #fff; perspective: 1600px; }
.bk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }
.bk__img.is-nxt { opacity: 0; visibility: hidden; }
.bk__page.is-go .bk__img.is-cur { animation: bk-out var(--t, .7s) cubic-bezier(.45, .05, .2, 1) both; }
.bk__page.is-go .bk__img.is-nxt { visibility: visible; animation: bk-in var(--t, .7s) cubic-bezier(.45, .05, .2, 1) both; }
.bk__page.is-back.is-go .bk__img.is-cur { animation-name: bk-out-b; } .bk__page.is-back.is-go .bk__img.is-nxt { animation-name: bk-in-b; }
@keyframes bk-out { from { transform: none; opacity: 1; } to { transform: translateX(-9%) scale(.96) rotateY(7deg); opacity: 0; } } @keyframes bk-in { from { transform: translateX(9%) scale(.96) rotateY(-7deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bk-out-b { from { transform: none; opacity: 1; } to { transform: translateX(9%) scale(.96) rotateY(-7deg); opacity: 0; } } @keyframes bk-in-b { from { transform: translateX(-9%) scale(.96) rotateY(7deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bk__m { display: none; }
.hx .bk__cap { margin-top: 22px; text-align: center; color: rgba(255, 255, 255, .82); font-size: 1.05rem; min-height: 1.7em; } .bk__cap b { color: #fff; margin-right: 8px; }
.bk:focus-visible .bk__frame { outline: 2px solid var(--mint); outline-offset: 6px; }
.cx-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.cx-dots { display: flex; gap: 9px; } .cx-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .25s, background .25s; }
.cx-dots button[aria-current="true"] { width: 32px; background: var(--mint); } .cx-dots button:hover { background: rgba(255, 255, 255, .6); }
.cx-btns { display: flex; gap: 10px; } .cx-btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.cx-btn:hover:not([disabled]) { background: rgba(255, 255, 255, .16); transform: scale(1.08); } .cx-btn[disabled] { opacity: .3; cursor: default; } .cx-btn:focus-visible, .cx-dots button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 760px) { .bk__frame { display: none; } .bk__m { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; } .bk__m::-webkit-scrollbar { display: none; } .bk__m figure { flex: 0 0 90%; scroll-snap-align: center; margin: 0; } .bk__m img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .7); }
  .bk__m figcaption { margin-top: 10px; color: rgba(255, 255, 255, .82); font-size: .95rem; } .bk__m figcaption b { color: #fff; } .bk .cx-bar, .hx .bk__cap { display: none; } }
@media (prefers-reduced-motion: reduce) { .bk__page .bk__img { animation: none !important; } }

/* AI at a glance: an overview that zooms into one feature at a time */
.hx-ai__stage { position: relative; aspect-ratio: 1000 / 600; border-radius: 30px; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 40px 70px -46px rgba(10, 60, 90, .55);
  background: radial-gradient(circle at 1px 1px, #D3E3EC 1px, transparent 0) 0 0 / 24px 24px, linear-gradient(150deg, #F6FBFD, #E6F1F7); }
.ai { display: block; width: 100%; height: 100%; }
.ai-lines path { fill: none; stroke: #9DB6C6; stroke-width: 2; stroke-dasharray: 5 9; } .hx-ai:not(.is-off) .ai-lines path { animation: hx-dash 1.4s linear infinite; }
.ai-lines, .ai-hub { transition: opacity .5s; } .ai.has-zoom .ai-lines, .ai.has-zoom .ai-hub { opacity: .2; }
.ai-guard { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 3 8; opacity: .55; } .ai-hubt { font: 800 20px var(--font-body, inherit); fill: var(--ink); }
.ai-n { cursor: pointer; transition: opacity .5s; outline: none; } .ai.has-zoom .ai-n:not(.is-zoom) { opacity: .1; pointer-events: none; }
.ai-card { transform-box: fill-box; transform-origin: center; transition: transform .3s, opacity .15s; }
.ai-card rect { fill: #fff; stroke: #D5E3EC; stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.ai-n:hover .ai-card, .ai-n:focus-visible .ai-card { transform: scale(1.07); } .ai-n:hover .ai-card rect, .ai-n:focus-visible .ai-card rect { stroke: var(--teal); fill: #F0FBFA; }
.ai-t { font: 700 17px var(--font-body, inherit); fill: var(--ink); } .ai-s { font: 500 12.5px var(--font-body, inherit); fill: var(--ink-3); }
.ai-n.is-zoom .ai-card { opacity: 0; }
.ai-detail { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; transform: scale(.94); transition: opacity .2s, transform .3s; }
.ai-n.is-zoom .ai-detail { opacity: 1; transform: none; transition: opacity .5s .55s, transform .6s .5s; }
.d-name { font: 700 10.5px var(--font-body, inherit); fill: var(--ink); } .d-name--l { font-size: 13px; } .d-url { font: 500 8.5px var(--font-body, inherit); fill: var(--ink-3); }
.d-cap { font: 700 8.5px var(--font-body, inherit); fill: var(--ink-2); letter-spacing: .07em; text-transform: uppercase; }
.d-chip { font: 700 8.5px var(--font-body, inherit); fill: #0A7F7C; } .d-chip--w { fill: #fff; } .d-chip--a { fill: #9A6A00; } .d-chip--r { fill: #B3261E; }
.d-mono { font: 600 8.5px ui-monospace, Menlo, monospace; fill: var(--ink-2); } .d-w { font: 600 9.5px var(--font-body, inherit); fill: #fff; } .d-w--s { font-size: 7.5px; letter-spacing: .09em; opacity: .88; } .d-w--l { font: 800 15px var(--font-body, inherit); }
.d-big { font: 800 18px var(--font-body, inherit); fill: #fff; } .d-av { font: 800 9px var(--font-body, inherit); fill: #fff; }
.hx-ai__ctl { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: row; gap: 8px; z-index: 2; }
.hx-ai__ctl button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 10px 20px -12px rgba(10, 60, 90, .5); transition: transform .2s, border-color .2s, color .2s; }
.hx-ai__ctl button:hover { transform: scale(1.1); border-color: var(--teal); color: var(--teal-d); } .hx-ai__ctl button:focus-visible, .ai-n:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.hx-ai__foot { display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; margin-top: 24px; }
.hx-ai__say { flex: 1 1 440px; min-height: 4.6em; } .hx-ai__say b { display: block; font: 700 1.22rem var(--font-body, inherit); } .hx-ai__say span { color: var(--ink-2); }
.hx-ai__guard { display: flex; flex-wrap: wrap; gap: 8px; } .hx-ai__guard li { padding: 7px 14px; border-radius: 999px; background: rgba(10, 156, 153, .1); color: var(--teal-d); font: 700 .86rem var(--font-body, inherit); }
@media (max-width: 700px) { .hx-ai__stage { aspect-ratio: 480 / 288; } .hx-ai__ctl { bottom: 8px; right: 8px; } .hx-ai__ctl button { width: 38px; height: 38px; } .pg { transition-duration: .7s; } }
@media (prefers-reduced-motion: reduce) { .pg { transition: none !important; } }

/* Glass gateway illustration: people and AI agents on one side, cloud, data and services on the other */
.hx-gl { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hx-gl__text h2 { margin-top: 12px; } .hx .hx-gl__text > p { margin-top: 14px; color: var(--ink-2); font-size: 1.08rem; }
.hx-gl__art { border-radius: 40px; box-shadow: 0 50px 80px -46px rgba(10, 70, 100, .6); overflow: hidden; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .hx-gl__art:hover { transform: scale(1.025); }
.gl { display: block; width: 100%; height: auto; }
.gl-f { transform-box: fill-box; transform-origin: center; animation: gl-bob 7s ease-in-out infinite; } .gl-f--2 { animation-delay: -2.3s; animation-duration: 8s; } .gl-f--3 { animation-delay: -4.6s; }
.gl-pulse { transform-box: fill-box; transform-origin: center; animation: gl-pulse 3.2s ease-out infinite; } .gl-rim { animation: gl-rim 4s ease-in-out infinite; }
@keyframes gl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes gl-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes gl-rim { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
[data-live].is-off .gl-f, [data-live].is-off .gl-pulse, [data-live].is-off .gl-rim { animation-play-state: paused; }
@media (max-width: 960px) { .hx-gl { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .gl-f, .gl-pulse, .gl-rim { animation: none; } }


/* Pour: a tile's own colour flows in from where the pointer entered, with a soft edge, and drains out where it left. Solid for the plan tiles (text turns white),
   a light wash for every other tile. Colours come from the tile (--c1/--c2) or from a rotating palette so neighbours differ. */
.hx [data-pour] { position: relative; isolation: isolate; overflow: hidden; }
.hx [data-pour]::after { content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #000 calc(var(--fill) - 30%), transparent var(--fill)); mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #000 calc(var(--fill) - 30%), transparent var(--fill));
  --fill: 0%; transition: --fill 900ms cubic-bezier(.33, .9, .4, 1); }
.hx [data-pour="soft"]::after { background: linear-gradient(135deg, color-mix(in srgb, var(--p1) 20%, transparent), color-mix(in srgb, var(--p2) 26%, transparent)); }
.hx [data-pour="solid"]::after { background: linear-gradient(135deg, var(--p1), var(--p2)); }
.hx [data-pour]:hover::after, .hx [data-pour].is-pour::after { --fill: 140%; }
.hx-tier { transition: transform .35s, box-shadow .35s, border-color .35s, color .35s; }
.hx-tier.is-main { border: 1px solid var(--p1, var(--c1)); background: #fff; box-shadow: 0 34px 60px -36px rgba(30, 90, 200, .55); }
.hx-tier :is(small, strong, .hx-tier__u, .hx-tier__t, li, p), .hx-tier .btn { transition: color .5s .1s, background .5s .1s, border-color .5s; }
.hx-tier:hover :is(small, strong, .hx-tier__u, .hx-tier__t, li), .hx-tier.is-pour :is(small, strong, .hx-tier__u, .hx-tier__t, li) { color: #fff; }
.hx-tier:hover li::before, .hx-tier.is-pour li::before { background: rgba(255, 255, 255, .95); } .hx-tier:hover li::after, .hx-tier.is-pour li::after { border-color: var(--p2); }
.hx-tier:hover .btn, .hx-tier.is-pour .btn { background: #fff; color: var(--p2); border-color: #fff; }
.hx-tier:hover .hx-plan__tag, .hx-tier.is-pour .hx-plan__tag { background: #fff; color: var(--p2); }
.hx-tier:hover { border-color: transparent; } .hx-tier.is-pour { border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .hx [data-pour]::after { transition: none; } }


/* AI at a glance: six isometric scenes. A list of capabilities on the left, a 3D stage on the right. The stage tilts a little toward the pointer and its floating layers move at different depths. */
.a3 { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); grid-template-areas: "tabs stage" "tabs say" "guard guard"; gap: 20px clamp(20px, 3vw, 44px); align-items: start; }
.a3-tabs { grid-area: tabs; display: grid; gap: 10px; } .a3-stage { grid-area: stage; } .a3-say { grid-area: say; } .a3-guard { grid-area: guard; }
.a3-tab { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform .3s, box-shadow .3s, border-color .3s, background .3s, color .3s; }
.a3-tab b { display: block; font: 700 1.02rem var(--font-body, inherit); } .a3-tab small { display: block; margin-top: 2px; color: var(--ink-3); font-size: .88rem; transition: color .3s; }
.a3-tab__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #E3F6F4; color: var(--teal-d); transition: background .3s, color .3s, transform .3s; }
.a3-tab:hover { transform: translateX(6px); border-color: var(--teal); box-shadow: 0 18px 32px -22px rgba(10, 100, 110, .6); } .a3-tab:hover .a3-tab__ic { transform: scale(1.1) rotate(-5deg); }
.a3-tab[aria-selected="true"] { background: var(--grad); border-color: transparent; color: #fff; transform: translateX(10px); box-shadow: 0 24px 40px -22px rgba(30, 90, 200, .7); } .a3-tab[aria-selected="true"] small { color: rgba(255, 255, 255, .86); } .a3-tab[aria-selected="true"] .a3-tab__ic { background: rgba(255, 255, 255, .22); color: #fff; }
.a3-tab:focus-visible, .a3-ctl button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.a3-stage { position: relative; aspect-ratio: 640 / 440; border-radius: 30px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 70px -46px rgba(10, 60, 90, .55);
  background: radial-gradient(520px 300px at 50% 0, rgba(255, 255, 255, .9), transparent 70%), linear-gradient(160deg, #EAF6FA, #D6EBF2); perspective: 1400px; }
.a3-view { position: absolute; inset: 0; transform-origin: var(--zx, 50%) var(--zy, 50%); transform: scale(var(--z, 1)) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.a3-v { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .45s, transform .6s, visibility .45s; overflow: visible; }
.a3-v.is-on { opacity: 1; visibility: visible; transform: none; }
.a3-ly { transform: translate(calc(var(--px, 0) * var(--d, 0) * 1px), calc(var(--py, 0) * var(--d, 0) * 1px)); transition: transform .35s ease-out; }
.a3-bob { animation: a3-bob 6s ease-in-out infinite; } .a3-pulse { transform-box: fill-box; transform-origin: center; animation: a3-pulse 3.4s ease-out infinite; } .a3-needle { transform-origin: 0 34px; animation: a3-needle 5s ease-in-out infinite; }
.a3-flow { fill: none; stroke: #0A9C99; stroke-width: 2.5; stroke-dasharray: 5 8; stroke-linecap: round; animation: a3-dash 1.2s linear infinite; }
.a3-card { transition: transform .35s; } .a3-card:hover { transform: translate(var(--tx, 0), calc(var(--ty, 0) - 4px)); }
@keyframes a3-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes a3-pulse { 0% { transform: scale(.92); opacity: .85; } 100% { transform: scale(1.18); opacity: 0; } } @keyframes a3-needle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } } @keyframes a3-dash { to { stroke-dashoffset: -13; } }
.a3-t { font: 700 13.5px var(--font-body, inherit); fill: #0F1B2D; } .a3-t2 { font: 600 12.5px var(--font-body, inherit); fill: #1A2B3E; } .a3-s { font: 500 11.5px var(--font-body, inherit); fill: #6B7A8D; } .a3-k { font: 700 9.5px var(--font-body, inherit); fill: #6B7A8D; letter-spacing: .1em; }
.a3-h { font: 800 17px var(--font-body, inherit); fill: #0F1B2D; } .a3-h2 { font: 800 15px var(--font-body, inherit); fill: #0F1B2D; } .a3-m { font: 600 10.5px ui-monospace, Menlo, monospace; fill: #3C4B5E; } .a3-c { font: 700 11px var(--font-body, inherit); } .a3-av { font: 800 11px var(--font-body, inherit); fill: #fff; } .a3-w { font: 700 12.5px var(--font-body, inherit); fill: #fff; } .a3-big { font: 800 17px var(--font-body, inherit); fill: #fff; }
.a3-ctl { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 3; } .a3-ctl button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; box-shadow: 0 10px 20px -12px rgba(10, 60, 90, .5); transition: transform .2s, border-color .2s, color .2s; } .a3-ctl button:hover { transform: scale(1.1); border-color: var(--teal); color: var(--teal-d); }
.a3-say { min-height: 5em; } .a3-say b { display: block; font: 700 1.2rem var(--font-body, inherit); } .a3-say span { display: block; margin-top: 4px; color: var(--ink-2); max-width: 62ch; }
.a3-guard { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .a3-guard li { padding: 7px 14px; border-radius: 999px; background: rgba(10, 156, 153, .1); color: var(--teal-d); font: 700 .86rem var(--font-body, inherit); }
[data-live].is-off .a3-bob, [data-live].is-off .a3-pulse, [data-live].is-off .a3-needle, [data-live].is-off .a3-flow { animation-play-state: paused; }
@media (max-width: 900px) { .a3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "tabs" "say" "guard"; } .a3-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a3-tab small { display: none; } .a3-tab:hover, .a3-tab[aria-selected="true"] { transform: none; } }
@media (max-width: 520px) { .a3-tabs { grid-template-columns: minmax(0, 1fr); } .a3-tab { padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .a3-bob, .a3-pulse, .a3-needle, .a3-flow, .a3-view { animation: none; transition: none; } }
@media (max-width: 700px) { .a3-ctl { display: none; } }

.hx-head--light p { color: rgba(255, 255, 255, .78); }

/* Home: every section is led by a 3D scene */
.h3d { display: block; width: 100%; height: auto; overflow: visible; }
.h3-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .h3-heroart { position: relative; } .h3-heroart .gl { display: block; width: 100%; height: auto; border-radius: 36px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); }
.hx-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
.h3rs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.h3r { position: relative; display: grid; gap: 6px; padding: 14px 14px 20px; border-radius: 26px; background: #fff; border: 1px solid var(--line); outline: none; cursor: pointer; transition: transform .35s, box-shadow .35s, border-color .35s; overflow: hidden; }
.h3r:hover, .h3r:focus-visible, .h3r.is-fixed { border-color: var(--teal); } .h3r:hover { transform: translateY(-7px); box-shadow: 0 34px 56px -32px rgba(10, 70, 90, .55); }
.h3r__v { border-radius: 18px; overflow: hidden; background: radial-gradient(400px 220px at 50% 0, #fff, transparent 70%), linear-gradient(160deg, #EAF6FA, #D6EBF2); }
.h3r h3 { margin: 10px 8px 0; font-size: 1.15rem; } .h3r__p { position: relative; margin: 0 8px; min-height: 2.8em; color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
.h3r__a, .h3r__b { display: block; transition: opacity .5s, transform .5s; } .h3r__a { color: #B3261E; } .h3r__b { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); color: #0B6E4F; font-weight: 600; }
.h3r-a, .h3r-b { transition: opacity .55s; } .h3r-b { opacity: 0; } .h3r.is-fixed .h3r-a { opacity: 0; } .h3r.is-fixed .h3r-b { opacity: 1; } .h3r.is-fixed .h3r__a { opacity: 0; transform: translateY(-6px); } .h3r.is-fixed .h3r__b { opacity: 1; transform: none; }
.h3d-ring { animation: a3-ringdrain 8s linear infinite; } @keyframes a3-ringdrain { 0% { stroke-dashoffset: 30; } 100% { stroke-dashoffset: 276; } }
.h3j, .h3t { position: relative; max-width: 960px; margin: 0 auto; border-radius: 32px; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(520px 300px at 50% 0, rgba(255, 255, 255, .9), transparent 70%), linear-gradient(160deg, #EAF6FA, #D6EBF2); box-shadow: 0 40px 70px -46px rgba(10, 60, 90, .55); padding: 10px; }
.h3j-t { cursor: pointer; outline: none; } .h3j-lift { transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .h3j-t:hover .h3j-lift, .h3j-t:focus-visible .h3j-lift { transform: translateY(-16px); }
.h3j-lab { transition: transform .3s; } .h3j-t:hover .h3j-lab, .h3j-t:focus-visible .h3j-lab { transform: translate(var(--lx, 0), -4px); }
.h3ls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.h3l { display: grid; gap: 4px; padding: 14px 14px 20px; border-radius: 26px; background: #fff; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .35s, box-shadow .35s, border-color .35s; overflow: hidden; }
.h3l:hover { transform: translateY(-7px); border-color: var(--teal); box-shadow: 0 34px 56px -32px rgba(10, 70, 90, .55); } .h3l__v { border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #EAF6FA, #D6EBF2); transition: transform .5s; } .h3l:hover .h3d { transform: scale(1.06); } .h3l .h3d { transition: transform .5s; }
.h3l h3 { margin: 10px 8px 0; font-size: 1.15rem; } .h3l p { margin: 0 8px; color: var(--ink-2); font-size: .95rem; }
.h3-hero + .hx-works { margin-top: 0; }
@media (max-width: 960px) { .h3-hero { grid-template-columns: minmax(0, 1fr); } .h3rs, .h3ls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .h3rs, .h3ls { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .h3d-ring { animation: none; } }


/* ---- Calmer palette: about 20% less colour. Muted gradients, softer glows, quieter buttons and bands. ---- */
.hx { --grad: linear-gradient(135deg, #3E9694, #4B6BA8); --teal: #17807F; --teal-d: #0C6564; --mint: #9AD3CC; }
.hx-hero { background: radial-gradient(820px 520px at 80% 30%, rgba(88, 170, 165, .16), transparent 62%), radial-gradient(700px 420px at 0 100%, rgba(72, 104, 160, .2), transparent 62%), linear-gradient(180deg, #0A1E2A, #0C2938); }
.hx-hero h1 span { background: linear-gradient(120deg, #A5D6D0, #B2C4E6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-sec--dark { background: radial-gradient(900px 420px at 80% 0, rgba(88, 170, 165, .1), transparent 60%), linear-gradient(180deg, #0A1E2A, #0C2938); }
.hx .btn-primary { background: linear-gradient(135deg, #1D8584, #2D6694) !important; box-shadow: 0 10px 22px -12px rgba(20, 90, 110, .6) !important; }
.hx-eyebrow { background: rgba(23, 128, 127, .08); }
.hx-numbers { background: linear-gradient(120deg, #0A1E2A, #0E3043); } .hx-numbers b, .hx-stat b { background: linear-gradient(120deg, #9AD3CC, #A9BDE3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-end { background: radial-gradient(800px 360px at 50% 0, rgba(255, 255, 255, .1), transparent 70%), linear-gradient(120deg, #11707A, #2F5B93); }
.hx-sec--tint { background: #EDF3F6; }
.hx-sector__ic, .hx-tab__ic { filter: saturate(.85); }

/* Hero mark: three connected circles. People and AI agents (left), apps and services (right), AuthMantra the shield (top). */
.hm { display: block; width: 100%; height: auto; overflow: visible; } .hm-lines path { fill: none; stroke: rgba(180, 220, 216, .45); stroke-width: 2; stroke-dasharray: 3 7; animation: hm-dash 2.4s linear infinite; }
.hm-dots circle { fill: #BFE6E1; filter: drop-shadow(0 0 5px rgba(160, 220, 214, .9)); } .hm-node circle[r="80"], .hm-node circle[r="60"] { stroke: rgba(200, 232, 228, .5); stroke-width: 2; }
.hm-name { font: 700 17px var(--font-body, inherit); fill: #F1FAF8; letter-spacing: .01em; } .hm-cap { font: 600 14px var(--font-body, inherit); fill: rgba(220, 238, 236, .82); }
.hm-halo { fill: none; stroke: rgba(160, 214, 208, .5); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hm-pulse 3.6s ease-out infinite; opacity: 0; } .hm-halo--2 { animation-delay: 1.8s; }
.hm-node { transition: transform .4s; transform-box: fill-box; transform-origin: center; } .hx-hero__art:hover .hm-top { transform: scale(1.03); } .hm-left:hover, .hm-right:hover { transform: scale(1.06); }
@keyframes hm-dash { to { stroke-dashoffset: -20; } } @keyframes hm-pulse { 0% { transform: scale(.82); opacity: .8; } 100% { transform: scale(1.18); opacity: 0; } }
[data-live].is-off .hm-lines path, [data-live].is-off .hm-halo { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .hm-lines path, .hm-halo { animation: none; } .hm-halo { opacity: .35; } }

/* How it connects */
.hx-gw { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .hx-gw__text h2 { margin: 14px 0 12px; } .hx .hx-gw__text > p { color: var(--ink-2); font-size: 1.06rem; }
.hx .hx-gw__steps { display: grid; gap: 14px; margin: 22px 0 22px; padding: 0; list-style: none; counter-reset: g; } .hx-gw__steps li { position: relative; padding-left: 40px; color: var(--ink-2); line-height: 1.55; counter-increment: g; } .hx-gw__steps li b { color: var(--ink); }
.hx-gw__steps li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(23, 128, 127, .12); color: var(--teal-d); font: 700 .86rem var(--font-body, inherit); }
.hx-gw__art .gl { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 40px 70px -40px rgba(10, 50, 70, .5); } .hx .hx-gw__cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; text-align: center; } .hx-gw__cap li { color: var(--ink-3); font: 600 .86rem var(--font-body, inherit); letter-spacing: .02em; }

/* Three services on real screens */
.hm-svc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(22px, 3.4vw, 52px); align-items: center; }
.hm-tabs { display: grid; gap: 10px; } .hm-tab { display: grid; gap: 2px; padding: 16px 18px; text-align: left; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font: inherit; transition: transform .25s, border-color .25s, background .25s, color .25s, box-shadow .25s; }
.hm-tab b { font: 700 1.1rem var(--font-body, inherit); } .hm-tab span { color: var(--ink-3); font-size: .93rem; line-height: 1.4; transition: color .25s; } .hm-tab:hover { border-color: var(--teal); transform: translateX(4px); }
.hm-tab[aria-selected="true"] { background: #0F3A4A; border-color: transparent; color: #fff; box-shadow: 0 22px 36px -24px rgba(10, 50, 70, .7); } .hm-tab[aria-selected="true"] span { color: rgba(255, 255, 255, .78); }
.hm-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.hm-panes { margin-top: 18px; } .hm-pane { display: none; } .hm-pane.is-on { display: block; animation: hx-pop .4s both; } .hx .hm-pane ul { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; } .hm-pane li { position: relative; padding-left: 24px; color: var(--ink-2); } .hm-pane li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.hm-svc__r { position: relative; aspect-ratio: 1280 / 880; } .hm-shot { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985); transition: opacity .45s, transform .5s, visibility .45s; } .hm-shot.is-on { opacity: 1; visibility: visible; transform: none; } .hm-shot:hover { transform: none; }
.hm-shot img { width: 100%; height: auto; }

/* Cards you can operate */
.hm-why { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .hm-card { grid-column: span 2; display: grid; align-content: start; gap: 12px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .3s, box-shadow .3s, border-color .3s; }
.hm-card--a { grid-column: span 3; } .hm-card:nth-child(2) { grid-column: span 3; } .hm-card:hover { transform: translateY(-4px); border-color: #A9C7CF; box-shadow: 0 28px 44px -32px rgba(10, 60, 80, .45); }
.hm-card h3 { font-size: 1.2rem; } .hx .hm-card > p { color: var(--ink-2); font-size: .98rem; margin: 0; } .hm-card--dark { background: linear-gradient(150deg, #0F3A4A, #12586A); border-color: transparent; color: #fff; } .hm-card--dark h3 { color: #fff; } .hx .hm-card--dark > p { color: rgba(255, 255, 255, .8); } .hm-card--dark .hx-more { color: #BFE6E1; margin-top: auto; }
.hm-btn { justify-self: start; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: #17807F; color: #fff; font: 700 .92rem var(--font-body, inherit); cursor: pointer; transition: background .2s, transform .2s; } .hm-btn:hover { background: #0F6D6C; transform: translateY(-1px); }
.hm-btn--ghost { background: #fff; color: var(--ink); border: 1px solid #BBD0D8; } .hm-btn--ghost:hover { background: #F1F6F8; border-color: var(--teal); }
.hm-ring { display: flex; align-items: center; gap: 22px; } .hm-ring svg { width: 112px; height: 112px; flex: none; transform: rotate(-90deg); } .hm-ring__bg { fill: none; stroke: #E3ECF1; stroke-width: 10; } .hm-ring__fg { fill: none; stroke: #17807F; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; transition: stroke-dashoffset .9s linear, stroke .4s; }
.hm-ring b { display: block; font: 800 2rem var(--font-head, var(--font-body, inherit)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hm-ring small { color: var(--ink-3); } .hm-card.is-ended .hm-ring__fg { stroke: #C0463F; } .hm-card.is-ended .hm-ring b { color: #C0463F; }
.hm-chat { padding: 16px; border-radius: 16px; background: #F3F7F9; border: 1px solid #E1EAEF; } .hm-chat__who { display: flex; gap: 12px; align-items: center; } .hm-chat__who i { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #6C64B8; color: #fff; font: 700 .8rem var(--font-body, inherit); font-style: normal; } .hm-chat__who b { display: block; font-size: .98rem; } .hm-chat__who small { color: var(--ink-3); }
.hm-chat__act { display: flex; gap: 10px; margin-top: 14px; } .hx .hm-chat__res { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #E5F2EC; color: #135C44; font-weight: 600; font-size: .92rem; } .hm-chat.is-denied .hm-chat__res { background: #F6E7E5; color: #8A2F28; }
.hm-arn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .hm-arn code { padding: 9px 12px; border-radius: 10px; background: #EEF3F6; font: 600 .8rem ui-monospace, Menlo, monospace; color: #33485A; } .hx .hm-says { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .hm-says li { padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: .94rem; } .hm-says .ok { background: #E5F2EC; color: #135C44; } .hm-says .no { background: #F6E7E5; color: #8A2F28; }
.hx .hm-log { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .hm-log li { padding: 9px 12px; border-radius: 10px; background: #F3F7F9; border: 1px solid #E1EAEF; font: 600 .82rem ui-monospace, Menlo, monospace; color: #33485A; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; } .hm-log.is-in li { opacity: 1; transform: none; } .hm-log.is-in li:nth-child(2) { transition-delay: .25s; } .hm-log.is-in li:nth-child(3) { transition-delay: .5s; }
.hx .hm-log__res { margin: 0; padding: 10px 12px; border-radius: 12px; background: #E5F2EC; color: #135C44; font-weight: 600; font-size: .92rem; }
@media (max-width: 960px) { .hx-gw, .hm-svc { grid-template-columns: minmax(0, 1fr); } .hm-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-card, .hm-card--a, .hm-card:nth-child(2) { grid-column: span 1; } .hm-svc__r { order: -1; } }
@media (max-width: 600px) { .hm-why { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hm-ring__fg { transition: none; } .hm-log li { opacity: 1; transform: none; transition: none; } }

/* Home: hero about 12% smaller and a shade lighter, so it sits closer to the inner pages without matching them. */
.hx-hero { padding: clamp(38px, 5.2vw, 72px) 0 clamp(44px, 5.2vw, 78px);
  background: radial-gradient(820px 520px at 80% 30%, rgba(110, 200, 192, .26), transparent 62%), radial-gradient(700px 420px at 0 100%, rgba(80, 120, 190, .26), transparent 62%), linear-gradient(180deg, #0F2E3F, #134560); }
.hx-hero h1 { font-size: clamp(2rem, 4vw, 3.3rem); margin: 16px 0 14px; } .hx-hero__art { max-width: 500px; }
.hx-hero h1 span { background: linear-gradient(120deg, #B6F1E8, #C7D6F5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-numbers { background: linear-gradient(120deg, #DDF1F3, #E6EEFC); }
/* Whole site: tighter bands, brighter ground, clearer text, quicker hovers */
.hx { --ink-2: #3E4C5F; }
.hx-sec { padding: clamp(40px, 5vw, 76px) 0; } .hx-head { margin-bottom: clamp(20px, 2.6vw, 34px); } .hx-head p { margin-top: 10px; }
.hx-sec--tint { background: #E7F4F6; }
.hx a, .hx button, .hx [data-glow] { transition-duration: .2s; }
/* Gateway render: floats over its own shadow, with a light sweep across the glass. */
.hx-gw__art { position: relative; } .hx-gw__art .gl { animation: hx-bob 8s ease-in-out infinite; box-shadow: 0 50px 70px -40px rgba(10, 50, 70, .55); }
.hx-gw__art::after { content: ""; position: absolute; inset: 0 0 52px; border-radius: 28px; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%); background-size: 250% 100%; animation: hx-sweep 6s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes hx-sweep { 0% { background-position: 130% 0; } 55%, 100% { background-position: -60% 0; } }
@keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hx-gw__art .gl, .hx-gw__art::after { animation: none; } }

/* Keyboard and reduced motion, everywhere on the marketing pages */
.hx a:focus-visible, .hx button:focus-visible, .hx summary:focus-visible, .hx [tabindex]:focus-visible { outline: 3px solid #0A9C99; outline-offset: 3px; border-radius: 6px; }
.hx-hero a:focus-visible, .hx-ph a:focus-visible, .hx-sec--dark a:focus-visible, .hx-end a:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .hx *, .hx *::before, .hx *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Access journey */
.hj { max-width: 920px; margin: 0 auto; padding: clamp(18px, 3vw, 30px); border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -50px rgba(10, 60, 90, .5); }
.hj__note { margin: 0 0 14px; font-size: .92rem; color: var(--ink-2); } .hj__note b { color: #7A4B00; background: #FFF1D6; padding: 2px 8px; border-radius: 6px; }
.hj__nav { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.hj__nav button { width: 100%; display: grid; gap: 4px; justify-items: center; padding: 8px 4px; border: 0; border-top: 3px solid var(--line); background: none; font: 600 .82rem var(--font-body, inherit); color: var(--ink-3); cursor: pointer; transition: border-color .2s, color .2s; }
.hj__nav button span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #E3EEF2; color: var(--ink-2); font-weight: 700; }
.hj__nav button.is-done { border-top-color: #2AA7A3; color: var(--ink-2); } .hj__nav button.is-on { border-top-color: #1B6FA8; color: var(--ink); } .hj__nav button.is-on span { background: #1B6FA8; color: #fff; }
.hj__stage { min-height: 250px; } .hj__panel h3 { margin: 0 0 6px; font-size: 1.4rem; } .hj__panel > p { margin: 0 0 16px; color: var(--ink-2); max-width: 60ch; }
.hj-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.hj-opt { text-align: left; display: grid; gap: 4px; padding: 16px; border-radius: 16px; border: 2px solid var(--line); background: #F6FAFB; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .2s, background .2s, transform .2s; }
.hj-opt:hover { transform: translateY(-2px); border-color: #7FBFC3; } .hj-opt.is-on { border-color: #1B6FA8; background: #E8F2FB; } .hj-opt small { color: var(--ink-2); }
.hj-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .hj-two h4 { margin: 0 0 8px; } .hj-two ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hj-ok li, .hj-no li { padding: 10px 12px 10px 38px; border-radius: 12px; position: relative; } .hj-ok li { background: #E3F6EC; color: #0B5A37; } .hj-no li { background: #FBE9E6; color: #8A2A1B; }
.hj-ok li::before, .hj-no li::before { position: absolute; left: 13px; font-weight: 800; } .hj-ok li::before { content: "✓"; } .hj-no li::before { content: "✕"; }
.hj-card { display: grid; gap: 6px; padding: 18px; border-radius: 16px; background: #F6FAFB; border: 1px solid var(--line); max-width: 520px; } .hj-card small { color: var(--ink-2); }
.hj-act { display: flex; gap: 10px; margin-top: 8px; } .hj-res { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-weight: 600; } .hj-res.approved { background: #E3F6EC; color: #0B5A37; } .hj-res.denied { background: #FBE9E6; color: #8A2A1B; }
.hj-clock { display: grid; gap: 10px; max-width: 520px; } .hj-clock b { font: 800 3rem/1 var(--font-head, inherit); color: #1B6FA8; font-variant-numeric: tabular-nums; } .hj-track { height: 12px; border-radius: 99px; background: #E3EEF2; overflow: hidden; } .hj-track i { display: block; height: 100%; background: linear-gradient(90deg, #2AA7A3, #1B6FA8); transition: width .1s linear; } .hj-clock small { color: var(--ink-2); }
.hj-log { list-style: none; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: #0F2E3F; color: #D6F1EE; font: .88rem/1.7 ui-monospace, Menlo, monospace; overflow-x: auto; }
.hj__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .hj__count { color: var(--ink-2); font-size: .92rem; } .hj__bar button[disabled] { opacity: .4; cursor: default; }
@media (max-width: 640px) { .hj__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; } .hj-two { grid-template-columns: minmax(0, 1fr); } }
.hx .hj-log { padding: 14px 18px; margin: 0 0 16px; } .hx .hj-ok, .hx .hj-no { padding: 0; margin: 0; } .hx .hj__nav { padding: 0; margin: 0 0 18px; } .hx .hj__note { margin: 0 0 14px; }

/* Type system and motion tokens (one family of curves; transform and opacity only) */
.hx { --ease: cubic-bezier(.22, 1, .36, 1); }
.hx h1, .hx h2 { text-wrap: balance; letter-spacing: -.035em; line-height: 1.07; font-optical-sizing: auto; } .hx h3 { text-wrap: balance; letter-spacing: -.02em; line-height: 1.2; }
.hx-hero h1, .hx .hx-ph h1 { letter-spacing: -.04em; line-height: 1.05; }
.hx p, .hx li { line-height: 1.6; } .hx-head p, .hx .hx-lede { max-width: 58ch; text-wrap: pretty; }
.hx a, .hx button, .hx [data-glow] { transition-timing-function: var(--ease); }
.hj-track i { width: 100%; transform-origin: left; transition: transform .1s linear; }

/* Trust: three plain facts in the open, no cards */
.hm-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); }
.hx .hm-trust > div { padding-top: 16px; border-top: 3px solid #2AA7A3; } .hx .hm-trust > div:nth-child(2) { border-top-color: #4F7BE8; } .hx .hm-trust > div:nth-child(3) { border-top-color: #F2A63B; }
.hx .hm-trust b { display: block; font-size: 1.2rem; margin-bottom: 8px; } .hx .hm-trust p { margin: 0; color: var(--ink-2); max-width: 36ch; }
.hx .hm-trust__n { margin-top: 26px; color: var(--ink-2); } @media (max-width: 760px) { .hm-trust { grid-template-columns: minmax(0, 1fr); } }
/* Gateway render: light pulses travel along the cables; a ring pulses from the shield. Image itself stays still so the overlay lines up. */
.gl-wrap { position: relative; } .hx-gw__art .gl { animation: none; display: block; }
.gl-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 28px; }
.gl-pulse { fill: none; stroke: #8FE6F5; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: gl-ring 3.4s ease-out infinite; } .gl-pulse--2 { animation-delay: -1.7s; }
@keyframes gl-ring { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gl-fx { display: none; } }
/* Tile hover: no white edge around the gradient */
.hx-sector:hover { background: linear-gradient(145deg, var(--c1), var(--c2)); background-clip: border-box; } .hx-sector:hover::after { opacity: 0; }
.hx .hx-works p { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; max-width: 30ch; line-height: 1.4; }

/* Savings estimator */
.roi { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.roi-grid { display: grid; gap: 14px; } .roi-f > span { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ink); } .roi-f > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.roi-f input[type=range] { width: 100%; accent-color: #1B6FA8; } .roi-f output { font: 700 1rem var(--font-body, inherit); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; } .roi-f em { font-style: normal; color: var(--ink-2); }
.roi-adv { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); } .roi-adv summary { cursor: pointer; font-weight: 700; margin-bottom: 12px; }
.roi-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .roi-k { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); border-top: 3px solid #2AA7A3; }
.roi-k:nth-child(2) { border-top-color: #4F7BE8; } .roi-k:nth-child(3) { border-top-color: #F2A63B; } .roi-k:nth-child(4) { border-top-color: #12A66A; }
.roi-k b { display: block; font: 800 clamp(1.4rem, 2.2vw, 1.9rem)/1.1 var(--font-head, inherit); color: #0B4F63; font-variant-numeric: tabular-nums; } .roi-k small { color: var(--ink-2); display: block; margin-top: 4px; }
.roi-card { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); margin-bottom: 14px; } .roi-card h3 { margin: 0 0 12px; font-size: 1.05rem; } .roi-s { margin: 10px 0 0; color: var(--ink-2); font-size: .95rem; }
.roi-bar { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 6rem; gap: 10px; align-items: center; margin: 8px 0; } .roi-bar span { color: var(--ink-2); font-size: .95rem; } .roi-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.roi-bar i { display: block; height: 18px; border-radius: 99px; background: #E3EEF2; position: relative; overflow: hidden; } .roi-bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 99px; transition: width .5s var(--ease, ease); }
.roi-bar.is-a i::after { background: linear-gradient(90deg, #F2A63B, #E0762B); } .roi-bar.is-b i::after { background: linear-gradient(90deg, #2AA7A3, #1B6FA8); }
.roi-fine { color: var(--ink-2); font-size: .9rem; max-width: 70ch; } .roi-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
@media (max-width: 900px) { .roi { grid-template-columns: minmax(0, 1fr); } .roi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roi-bar { grid-template-columns: 7rem minmax(0, 1fr) 5rem; } }
.roi-k { min-width: 0; } .roi-k b { font-size: clamp(1.3rem, 1.8vw, 1.7rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tiles: no movement on hover (the edge never flickers). A colour fill ripples out from where the pointer entered, slowly and smoothly. */
.hx .hx-sector { isolation: isolate; font: inherit; text-align: left; cursor: default; transform: none !important; background: #fff !important; }
.hx .hx-sector--int { cursor: pointer; }
.hx .hx-sector::after { opacity: 1 !important; transition: clip-path .9s cubic-bezier(.22, 1, .36, 1); clip-path: circle(0 at var(--mx, 50%) var(--my, 100%)); }
.hx .hx-sector:hover { background: #fff !important; transform: none !important; }
.hx .hx-sector:hover::after { clip-path: circle(160% at var(--mx, 50%) var(--my, 100%)); }
.hx .hx-sector small { transition: color .5s; } .hx .hx-sector--int small { margin-top: auto; font-weight: 600; color: var(--teal-d, #066E6B); } .hx .hx-sector--int:hover small, .hx .hx-sector--int:hover b { color: #fff; }
.hx .hx-sector:hover .hx-sector__ic { transform: none; transition: background .5s; }
@media (hover: none) { .hx .hx-sector::after { display: none; } }
/* Zoom panel */
.hx-zoom { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(6, 30, 45, 0); transition: background .35s ease; }
.hx-zoom.is-in { background: rgba(6, 30, 45, .7); }
.hx-zoom__card { position: relative; width: min(640px, 100%); max-height: 90vh; overflow: auto; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: #fff; color: #0F1B2D; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .6); border-top: 6px solid var(--c1, #0A9C99); transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s; opacity: 0; transform-origin: center; }
.hx-zoom.is-in .hx-zoom__card { opacity: 1; }
.hx-zoom__ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 4px 5px 0 -1px rgba(11, 31, 46, .35); } .hx-zoom__ic svg { width: 26px; height: 26px; }
.hx-zoom h3 { margin: 14px 0 12px; font-size: 1.5rem; } .hx-zoom ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .hx-zoom li { position: relative; padding-left: 28px; line-height: 1.5; color: #2B3A4D; }
.hx-zoom li::before { content: ""; position: absolute; left: 0; top: .38em; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(145deg, var(--c1), var(--c2)); }
.hx-zoom__f { margin: 16px 0 0; font-size: .92rem; color: #4A586B; } .hx-zoom__f a { color: #066E6B; font-weight: 600; }
.hx-zoom__x { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #E7F1F4; color: #0B4F63; font: 700 1.5rem/1 sans-serif; cursor: pointer; transition: background .2s; } .hx-zoom__x:hover { background: #CFE6EB; }
@media (prefers-reduced-motion: reduce) { .hx .hx-sector::after, .hx-zoom, .hx-zoom__card { transition: none; } }