/* VANTRIX — Page 08 INDUSTRIES ("Technology built around your world"), v14.
   Immersive real-world environments. Reuses Services tokens (services-system.css); scoped to .industries-page. */

.industries-page { --ind-acc: #6fe9fb; --ind-acc2: #8b7bff; }

/* ================================================================ HERO: one environment becoming the next */
.ind-hero { position: relative; isolation: isolate; min-height: max(720px, 100svh); max-height: 1100px; display: flex; flex-direction: column; justify-content: center; padding: 130px 0 120px; overflow: hidden; background: #020814; }
.ih-stage { position: absolute; inset: 0; z-index: -1; }
.ih-layer { position: absolute; inset: 0; clip-path: circle(0% at 70% 58%); z-index: 1; }
.ih-layer.on { clip-path: circle(150% at 70% 58%); z-index: 2; transition: clip-path 1.8s cubic-bezier(.65,.05,.25,1); }
.ih-layer.was { clip-path: circle(150% at 70% 58%); z-index: 1; }
.ih-layer > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05) brightness(.85); transform: scale(1.12); transition: transform 7s cubic-bezier(.2,.6,.2,1); }
.ih-layer.on > img { transform: scale(1.0); }
.ih-layer.photo-missing { background: radial-gradient(ellipse at 60% 50%, #12395a, #06121f 70%); }
.ih-shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, #020814f2 0%, #020814cc 34%, #02081466 62%, #02081433), linear-gradient(180deg, #02081499, transparent 30%, transparent 70%, #020814), radial-gradient(ellipse at 72% 58%, #1d1a5a33, transparent 50%); }
.ih-stream { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; }
.ih-road { fill: none; stroke: #6fe9fb22; stroke-width: 10; }
.ih-flow { fill: none; stroke: #6fe9fb; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 3 22; animation: ihFlow 2.2s linear infinite; filter: drop-shadow(0 0 6px #22d3ff); }
@keyframes ihFlow { to { stroke-dashoffset: -25; } }
.ih-halo { fill: #6fe9fb14; stroke: #6fe9fb66; stroke-width: 1.5; animation: ihHalo 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ihHalo { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.ih-dot { fill: #e8fbff; filter: drop-shadow(0 0 8px #22d3ff); }
.ih-tag { position: absolute; z-index: 5; left: 70%; top: 58%; transform: translate(26px, -50%); display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: #04101ccc; border: 1px solid #6fe9fb55; font: 700 10px/1 var(--svc-mono); letter-spacing: .16em; color: #e3f8ff; white-space: nowrap; backdrop-filter: blur(6px); }
.ih-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--svc-ok); box-shadow: 0 0 10px #3fe08e; }
.ih-tag-t { font-weight: 700; transition: opacity .4s; }
.ih-inner { position: relative; z-index: 6; }
.ind-hero h1 { max-width: 980px; font-size: clamp(38px, 4.3vw, 70px); font-weight: 600; letter-spacing: -.06em; line-height: .98; color: #f2f9fd; }
.ind-hero h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #6fe9fb 10%, #8db6ff 55%, #a99bff); -webkit-background-clip: text; background-clip: text; }
.ind-hero .svc-crumb { margin-bottom: 40px; }
.ind-hero .svc-lede { max-width: 560px; }
.ih-foot { position: absolute !important; z-index: 6; left: 0; right: 0; bottom: 34px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.ih-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(720px, 100%); }
.ih-tabs button { display: grid; gap: 9px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; color: #8fa6b8; font: 700 9.5px/1.3 var(--svc-mono); letter-spacing: .14em; }
.ih-tabs button i { display: block; height: 2px; background: #ffffff26; overflow: hidden; border-radius: 2px; }
.ih-tabs button i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6fe9fb, #8b7bff); }
.ih-tabs button[aria-pressed="true"] { color: #e8fbff; }
.ih-tabs button[aria-pressed="true"] i b { width: 100%; transition: width var(--dur, 6s) linear; }
.ih-tabs.static button[aria-pressed="true"] i b { transition: none; }
.ih-tabs button:focus-visible { outline: 2px solid #b9f6ff; outline-offset: 4px; }
.ih-note { font: 700 8.5px/1 var(--svc-mono); letter-spacing: .14em; color: #7f97aa; white-space: nowrap; }

/* ================================================================ EXPLORER */
.ind-explorer { --a1: #0b2d4a; --a2: #1d1a5a; background: radial-gradient(ellipse at 75% 40%, color-mix(in srgb, var(--a1) 70%, transparent), transparent 60%), radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--a2) 35%, transparent), transparent 55%), #020a16; transition: background .8s; }
.ind-explorer[data-ind="healthcare"] { --a1: #0b3b4a; --a2: #0b3b5a; }
.ind-explorer[data-ind="hospitality"] { --a1: #2a1f4a; --a2: #3a2a15; }
.ind-explorer[data-ind="realestate"] { --a1: #0d2a52; --a2: #1d1a5a; }
.ind-explorer[data-ind="retail"] { --a1: #251a4f; --a2: #0b2d4a; }
.ind-explorer[data-ind="education"] { --a1: #0b3a44; --a2: #1b2a5a; }
.ex-layout { position: relative; display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.ex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; z-index: 2; }
.ex-list button { --mx: 0; --my: 0; position: relative; display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid #16324a; cursor: pointer; text-align: left; color: #5f7a90; transition: color .35s; }
.ex-list button .svc-mono { font-size: 10px; color: #4f6b80; transition: color .35s; }
.ex-list button b { font-size: clamp(26px, 2.9vw, 48px); font-weight: 600; letter-spacing: -.05em; line-height: 1; transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px)); transition: transform .35s cubic-bezier(.2,.8,.2,1), color .35s; }
.ex-list button:hover { color: #b6cbd8; }
.ex-list button[aria-selected="true"] { color: #f2f9fd; }
.ex-list button[aria-selected="true"] .svc-mono { color: var(--svc-cyan); }
.ex-list button[aria-selected="true"] b { color: transparent; background: linear-gradient(100deg, #f2f9fd 30%, #8db6ff 80%, #a99bff); -webkit-background-clip: text; background-clip: text; }
.ex-list button::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: linear-gradient(90deg, #6fe9fb, #8b7bff); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.ex-list button[aria-selected="true"]::after { width: 100%; }
.ex-list button:focus { outline: none; }
.ex-list button:focus-visible { outline: none; box-shadow: inset 3px 0 0 #6fe9fb; }
.ex-main { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid #1f405a; background: #04101c; box-shadow: 0 30px 80px #0008; }
.ex-stage { --tx: 0; --ty: 0; position: relative; min-height: 500px; overflow: hidden; background: #0a1a2b; }
.ex-ph { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.ex-ph.on { opacity: 1; }
.ex-ph > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08) translate(calc(var(--tx) * -6px), calc(var(--ty) * -6px)); filter: saturate(.85) contrast(1.04); transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
.ex-ph.on > img { transform: scale(1.03) translate(calc(var(--tx) * -6px), calc(var(--ty) * -6px)); }
.ex-ph.photo-missing { background: radial-gradient(ellipse at 40% 40%, #12395a, #06121f 70%); }
.ex-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #04101c55, transparent 30%, #04101c99), linear-gradient(90deg, transparent 60%, #04101ccc); pointer-events: none; }
.ex-cap { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-size: 8.5px !important; color: #c3d4df; opacity: .8; }
.ix-ov { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; transform: translate(calc(var(--tx) * 6px), calc(var(--ty) * 6px)); }
.ix-ov.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.ix-ov svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ix-line { fill: none; stroke: #6fe9fb88; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ix-ov.on .ix-line { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.15s + var(--k) * .08s); }
.ix-flow { fill: none; stroke: #e8fbff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 28; opacity: 0; animation: ihFlow 1.8s linear infinite; filter: drop-shadow(0 0 5px #22d3ff); }
.ix-ov.on .ix-flow { opacity: .9; transition: opacity .4s 1s; }
.ix-node { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; transform: translate(-7px, -50%); opacity: 0; transition: opacity .4s; }
.ix-ov.on .ix-node { opacity: 1; transition-delay: calc(.3s + var(--k) * .08s); }
.ix-node i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #04101c; border: 2px solid #6fe9fb; box-shadow: 0 0 10px #22d3ff88; }
.ix-node b { padding: 5px 9px; border-radius: 999px; background: #04101cd9; border: 1px solid #2a5272; font: 700 9.5px/1 var(--svc-mono); letter-spacing: .1em; color: #e3f4fb; text-transform: uppercase; white-space: nowrap; }
.ix-node.hub i { width: 20px; height: 20px; background: #6fe9fb; border-color: #e8fbff; box-shadow: 0 0 0 6px #6fe9fb2a, 0 0 18px #22d3ff; }
.ix-node:nth-child(n+5) { }
.ex-infos { display: grid; padding: 24px 24px 22px; background: linear-gradient(160deg, #0b2135, #061322); }
.ex-info { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .4s cubic-bezier(.2,.8,.2,1); }
.ex-info[hidden] { display: block !important; visibility: hidden; }
.ex-info.on { opacity: 1; transform: none; }
.ex-info > .svc-mono { color: var(--svc-cyan); font-size: 9.5px; }
.ex-info h3 { margin: 12px 0 12px; font-size: clamp(20px, 1.75vw, 28px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; color: #f2f9fd; }
.ex-info h3 span { color: #8fa6b8; }
.ex-info > p { color: #a7bccb; font-size: 13.5px; line-height: 1.7; }
.ex-need-h { margin: 16px 0 8px !important; color: #7f97aa !important; font-size: 9px !important; }
.ex-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.ex-info ul li { font-size: 11.5px; color: #cfe3ee; padding: 5px 9px; border-radius: 999px; border: 1px solid #22476a; background: #06132380; }
.ex-fine { margin-top: 12px !important; font-size: 11.5px !important; color: #7d95a8 !important; line-height: 1.55 !important; }
.ex-links { display: grid; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #1d3a55; }
.ex-links a { display: inline-flex; align-items: center; gap: 8px; color: #bfe9f3; font-size: 13px; font-weight: 600; text-decoration: none; }
.ex-links a:hover { color: #fff; }
.ex-road { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.ex-road-base { fill: none; stroke: #6fe9fb1f; stroke-width: 8; stroke-linecap: round; }
.ex-road-flow { fill: none; stroke: #6fe9fb; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 16; animation: ihFlow 1.4s linear infinite; filter: drop-shadow(0 0 5px #22d3ff); }

/* ================================================================ FOUNDATIONS */
.ind-found { background: radial-gradient(ellipse at 50% 50%, #0b2d4a55, transparent 60%), #020814; }
.fd-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 0; align-items: stretch; }
.fd-svg { width: 100%; height: auto; display: block; aspect-ratio: 700 / 440; overflow: visible; }
.fd-in, .fd-out { fill: none; stroke: #1f4766; stroke-width: 1.6; }
.fd-out { stroke: #2d4f86; }
.fd-flow { fill: none; stroke: #6fe9fb; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 20; animation: ihFlow 2s linear infinite; animation-delay: calc(var(--k) * -.3s); filter: drop-shadow(0 0 4px #22d3ff); }
.fd-flow.out { stroke: #a99bff; filter: drop-shadow(0 0 4px #8b7bff); }
.fd-t { fill: #a8c4d3; font: 700 11px/1 var(--svc-mono); letter-spacing: .14em; }
.fd-dot { fill: #6fe9fb; }
.fd-halo { fill: #6fe9fb10; stroke: #6fe9fb44; animation: ihHalo 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.fd-c { fill: #04101c; stroke: #6fe9fb; stroke-width: 2; }
.fd-core text { fill: #e8fbff; font: 700 10.5px/1 var(--svc-mono); letter-spacing: .12em; }
.fd-caps { display: grid; grid-template-rows: repeat(5, 1fr); gap: 8px; padding: 0; }
.fd-cap { position: relative; display: grid; grid-template-columns: 30px 1fr auto; grid-template-areas: "n b i" "n e i"; align-items: center; column-gap: 12px; padding: 10px 16px; border-radius: 12px; border: 1px solid #1f405a; background: #06132380; text-decoration: none; transition: border-color .3s, background .3s, transform .3s; }
.fd-cap:hover, .fd-cap:focus-visible { border-color: #8b7bff; background: #0e1a3a; transform: translateX(-3px); outline: none; }
.fd-cap .svc-mono { grid-area: n; color: #a99bff; font-size: 10px; }
.fd-cap b { grid-area: b; font: 700 13px/1.2 var(--svc-mono); letter-spacing: .14em; color: #eef6fb; }
.fd-cap em { grid-area: e; font-style: normal; font-size: 12.5px; color: #8fa6b8; line-height: 1.45; }
.fd-cap i { grid-area: i; font-style: normal; font-size: 11.5px; color: #bfe9f3; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ================================================================ PLANNING (pearl) */
.ind-plan { background: radial-gradient(ellipse at 90% 0%, #dfe9f1 0%, transparent 55%), linear-gradient(#eef3f6, #e7edf1); }
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #c9d6de; border-left: 1px solid #c9d6de; }
.pf-grid li { padding: 24px 22px 22px; border-right: 1px solid #c9d6de; border-bottom: 1px solid #c9d6de; background: #ffffff40; transition: background .3s; }
.pf-grid li:hover { background: #ffffffb3; }
.pf-grid .svc-mono { color: #0f7fa3; font-size: 11px; }
.pf-grid h3 { margin: 14px 0 8px; font-size: clamp(18px, 1.4vw, 22px); font-weight: 600; letter-spacing: -.03em; color: #0d2131; }
.pf-grid p { color: #4b6172; font-size: 14px; line-height: 1.65; }
.pf-grid em { display: block; margin-top: 14px; font-style: normal; font-size: 9px !important; color: #6d8192; }
.pf-cta { margin-top: 26px !important; color: #33495a; font-size: 15px; }
.pf-cta a { display: inline-flex; align-items: center; gap: 8px; color: #0b4f6b; font-weight: 600; text-decoration: none; border-bottom: 1px solid #176b8f40; }
.ind-plan.has-entered .pf-grid li { animation: pfIn .6s both; animation-delay: calc(var(--k) * .06s); }
@keyframes pfIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ================================================================ conversion */
.industries-page .svc-conversion .device-final-photo > img { object-position: center 60% !important; }
@media (min-width: 801px) { .industries-page .svc-conversion .svc-label { white-space: nowrap; } }
.industries-page .svc-conversion .device-final-copy h2 { font-size: clamp(30px, 2.8vw, 46px) !important; }
.industries-page .svc-conversion .device-final-copy > .svc-label { font-size: 11px !important; line-height: 1.4 !important; letter-spacing: .18em !important; }
.industries-page .quote-fields label, .industries-page .device-conversion-grid > * { min-width: 0; }
.industries-page .quote-fields select { width: 100%; min-width: 0; }

/* ================================================================ responsive */
@media (max-width: 1180px) {
  .ex-main { grid-template-columns: 1fr; }
  .ex-stage { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 900px) {
  .ex-layout { grid-template-columns: 1fr; gap: 16px; }
  .ex-road { display: none; }
  .ex-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ex-list button { flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid #1f405a; border-radius: 12px; background: #06132380; }
  .ex-list button::after { display: none; }
  .ex-list button b { font-size: 17px; letter-spacing: -.03em; transform: none; }
  .ex-list button[aria-selected="true"] { border-color: #6fe9fb; background: #0b2a40; }
  .fd-layout { grid-template-columns: 1fr; gap: 18px; }
  .fd-caps { grid-template-rows: none; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ind-hero { padding: 120px 0 130px; min-height: 0; max-height: none; }
  .ind-hero h1 { font-size: clamp(31px, 8.4vw, 54px); }
  .ih-tag { left: auto; right: 18px; top: auto; bottom: 108px; transform: none; font-size: 8.5px; }
  .ih-foot { bottom: 22px; flex-direction: column; align-items: stretch; }
  .ih-tabs { gap: 8px; }
  .ih-tabs button { font-size: 7.5px; letter-spacing: .06em; }
  .ih-note { display: none; }
  .ix-node b { font-size: 8px; padding: 4px 7px; letter-spacing: .04em; }
  .ix-node i { width: 11px; height: 11px; }
  .ex-infos { padding: 18px 18px 16px; }
  .fd-svg { display: none; }
  .fd-cap { grid-template-columns: 26px 1fr; grid-template-areas: "n b" "n e" "n i"; row-gap: 3px; }
  .fd-cap i { margin-top: 4px; }
}
@media (max-width: 560px) {
  .ex-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-node b { display: none; }
  .ix-node.hub b { display: inline; }
  .pf-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ih-layer, .ih-layer.on { transition: none !important; }
  .ih-flow, .ix-flow, .ex-road-flow, .fd-flow, .ih-halo, .fd-halo { animation: none !important; }
  .ind-plan.has-entered .pf-grid li { animation: none; }
}
html[data-motion="paused"] .industries-page *, html[data-motion="paused"] .industries-page *::after { animation-play-state: paused !important; }
.ind-hero h1 { width: auto !important; max-width: min(980px, 100%) !important; overflow-wrap: break-word; }
@media (max-width: 800px) { .ind-hero h1 { font-size: clamp(27px, 7.4vw, 54px) !important; } }