/* DZP — a continuous, interactive digital showroom. */
:root{--bg:#080b10;--surface:#10151e;--ink:#edf2f5;--muted:#a2adb9;--line:#29333f;--accent:#d7f89d;--beam:#8bc9ff;--flow:#8bc9ff}
body{background:var(--bg)}
.site-header{height:90px;background:#080b10e8;border-color:#ffffff12}
.brand-dot{color:var(--accent)}
.header-cta{border-color:#51606b;border-radius:999px}
.button{border-radius:999px;overflow:hidden;isolation:isolate}
.button.light{background:var(--accent);color:#182218}
.button.light:before{content:"";position:absolute;inset:-100%;background:linear-gradient(110deg,transparent 43%,#fff9 50%,transparent 57%);transform:translateX(-70%);transition:transform .8s;z-index:-1}
.button.light:hover:before{transform:translateX(70%)}
.button.light:hover{background:#e5ffc2;box-shadow:0 0 36px #d7f89d26;transform:translateY(-2px)}
.button>span,.text-link>span{transition:transform .25s}.button:hover>span,.text-link:hover>span{transform:translate(3px,-3px)}
.button:active{transform:translateY(1px) scale(.985)}
.showcase{position:relative;background:radial-gradient(ellipse at 77% 37%,#13335655,transparent 43%),linear-gradient(#080b10,#0a101b);overflow:clip;--journey:0}
.hero{padding-top:48px;min-height:790px;grid-template-columns:1fr 1.1fr;column-gap:0}
.hero-copy{padding-top:66px;padding-bottom:70px;align-self:start;min-width:0}
.hero-copy .eyebrow{color:#aabacb;letter-spacing:.15em;font-size:12px}
.hero h1{font-size:clamp(66px,6.5vw,99px);line-height:1.22;font-weight:560;letter-spacing:-.06em;margin-top:32px}
.hero-line{display:inline-block;animation:title-arrive 1s cubic-bezier(.2,.7,.2,1) both}.hero-line:nth-of-type(2){animation-delay:.15s}
@keyframes title-arrive{from{opacity:0;transform:translateY(22px);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero h1 .accent-word{color:var(--ink);background:linear-gradient(110deg,#fff 10%,#c2daf1 58%,#87c8ff);background-clip:text;-webkit-text-fill-color:transparent}
.hero-description{font-size:17px;color:#aebbc8;line-height:1.95;max-width:460px}
.hero-actions{gap:24px;flex-wrap:wrap}.hero-note{font-size:13px;color:#8398ab;margin-top:32px}
.hero-visual{height:650px;align-self:start;overflow:visible;margin:0 -32px 0 -58px;position:relative;z-index:1}
.hero-visual:before{display:none}
.scene-aura{position:absolute;inset:10% 5% 26%;border-radius:50%;background:radial-gradient(ellipse,#2368af20,transparent 65%);pointer-events:none}
.hero-visual #architecture{inset:0;top:0;width:100%;height:510px;transform:translate(calc(var(--journey)*-65px),calc(var(--journey)*10px)) scale(calc(1 - var(--journey)*.18));transform-origin:55% 70%;transition:filter .4s;cursor:crosshair}
.hero-visual .scene-coordinate{left:48px;right:26px;top:18px;display:flex;justify-content:space-between;gap:12px;text-align:left;color:#7e97ad;font-size:11px;letter-spacing:.08em}
.hero-visual .scene-coordinate span{color:#b1c8db}
.hero-visual .scene-caption{left:48px;right:26px;bottom:159px;gap:16px;pointer-events:none}
.scene-meaning{max-width:340px;gap:3px}.scene-meaning strong{font-size:16px;color:#e1edf8}.scene-meaning>span{font-size:13px;color:#94a9bb}
.motion-toggle{pointer-events:auto;border:1px solid #354b60;background:#0b1523b3;color:#b9cbdc;min-height:44px;border-radius:999px;padding:8px 14px;white-space:nowrap;font-size:12px}
.scene-console{position:absolute;left:48px;right:26px;bottom:8px;min-height:125px;padding:18px 20px 16px;border:1px solid #6f9fce38;border-radius:12px;background:linear-gradient(120deg,#122438b3,#0c131fd9);box-shadow:inset 0 1px 0 #c9e6ff0a,0 16px 48px #0002;display:grid;grid-template-columns:1fr auto;gap:8px 12px;backdrop-filter:blur(12px)}
.console-label{font-size:13px;color:#a6bed3;align-self:center}.console-options{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.console-options button{border:1px solid #3d5367;border-radius:6px;padding:7px 11px;min-height:40px;background:#101e2c;color:#a6bdd0;font-size:13px}
.console-options button[aria-pressed=true]{background:#c6e6ff;color:#112d43;border-color:#c6e6ff}.console-options button:hover{border-color:#9fcceb}
#console-response{grid-column:1/-1;font-size:14px;color:#d3e2ee;line-height:1.75;min-height:25px;white-space:pre-line}
.console-disclaimer{position:absolute;right:0;bottom:-23px;color:#7992a9;font-size:11px}
.hero-service-selector{position:relative;z-index:3;align-self:end;margin-top:30px;border:1px solid #3e526447;border-radius:12px;background:#0e1720c4;overflow:hidden;grid-column:1/-1;backdrop-filter:blur(14px)}
.hero-service-selector button{padding:23px 24px;gap:16px;min-height:78px;font-size:16px;color:#91a4b7;border:0}
.hero-service-selector button+button{border-color:#30425366}
.hero-service-selector button:before{height:2px;top:auto;bottom:0;background:linear-gradient(90deg,transparent,#b8ddff,transparent)}
.hero-service-selector button[aria-pressed=true]{background:linear-gradient(120deg,#1d3449,#132331);color:#f0f7fd}
.hero-service-selector button[aria-pressed=true] .mono{color:var(--accent)}.hero-service-selector button:hover{background:#203145}
.hero-service-selector .selector-plus{margin-left:auto;transition:transform .4s}.hero-service-selector button[aria-pressed=true] .selector-plus{transform:rotate(45deg);color:#acd6f8}
.hero-service-selector .mono{color:#66849f;font-size:12px}
.connection-bridge{height:150px;position:relative;display:flex;align-items:center;justify-content:space-between}
.connection-bridge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bridge-track{fill:none;stroke:#4b83b04f;stroke-width:1}.bridge-pulse{fill:none;stroke:#b1e2ff;stroke-width:2;stroke-dasharray:35 1050;animation:bridge-travel 5s linear infinite;filter:drop-shadow(0 0 5px #8bc9ff)}
@keyframes bridge-travel{to{stroke-dashoffset:-1085}}
.bridge-word{font:11px var(--mono);letter-spacing:.15em;color:#6b879f}.bridge-caption{font-size:13px;color:#7893a9;padding-right:50px}
.fallback-word{font:italic 800 110px Arial,sans-serif;letter-spacing:-12px;color:#c6e5ff;text-shadow:0 0 35px #489aff80}
.scene-fallback{inset:80px 0 160px;align-items:center;justify-content:center;flex-direction:column;display:flex}
/* The flow is a single stage, with the selected step as its focal point. */
.experience-v2{--flow:#9bd4ff;--flow-ink:#e6f0fa;background:#0a101b;padding-top:68px;border-top:0;border-bottom:1px solid #243343;overflow:clip}
.experience-v2:before{background:radial-gradient(ellipse at 28% 45%,#255e9724,transparent 60%)}
.experience-v2 .section-heading{margin-bottom:38px}.experience-v2 .section-heading h2{font-size:clamp(40px,4.2vw,62px)}
.experience-v2 .eyebrow,.experience-heading-note .mono{color:#87a7c2}.experience-heading-note p{color:#93a9bb}
.experience-shell{border:1px solid #3c536880;border-radius:16px;background:#0d1723;box-shadow:0 20px 100px #0003}
.experience-tabs{background:#111e2b;border-color:#38506866}.experience-tabs button{border-color:#38506866;color:#99aec1;min-height:72px}
.experience-tabs button[aria-selected=true]{background:linear-gradient(120deg,#1c3247,#142433);color:#e6f2ff}.experience-tabs button:hover{background:#1a2d40}.experience-tabs button>.mono{color:#7da4c4}
.experience-v2 .lab-panel-top{padding:20px 28px;border-color:#30485e66}.experience-v2 .lab-panel-top>.mono{font-size:12px;color:#88a8c4}
.experience-v2 .segmented{background:#080f18;border-color:#334b60;border-radius:999px}.experience-v2 .segmented button{border-radius:999px;font-size:14px;min-height:40px;color:#a2b7c9}
.experience-v2 .segmented button[aria-pressed=true]{background:#c2e5ff;color:#14344b}
.experience-v2 .experience-body{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.experience-v2 .flow-map{min-height:560px;background:radial-gradient(ellipse at 50% 46%,#2457813d,transparent 65%);border-color:#30485e66}
.map-grid{background-image:linear-gradient(#7d9ec90a 1px,transparent 1px),linear-gradient(90deg,#7d9ec90a 1px,transparent 1px);background-size:36px 36px;transform:perspective(800px) rotateX(15deg) scale(1.08);mask-image:radial-gradient(ellipse,#000,transparent 72%)}
.map-axis{color:#7698b6;font-size:11px;top:26px}.map-footer{color:#829cb3;font-size:12px}.map-footer>span:first-child{color:#a0bdd4;font-size:11px}
.experience-v2 .node-disc{background:linear-gradient(145deg,#253e55,#0e1d2d);border-color:#577a99;color:#b9d9f2;box-shadow:0 12px 32px #0006,inset 0 1px 0 #d4eaff26;border-radius:18px}
.experience-v2 .workflow-node strong{color:#d6e4f0;font-size:15px}.experience-v2 .workflow-node .node-tag{color:#7c9ab3;font-size:11px}
.experience-v2 .is-core .node-disc{background:radial-gradient(circle at 35% 20%,#466f94,#142d47 70%);border-color:#94c7ef;box-shadow:0 0 65px #599aff26,inset 0 0 24px #90ceff1a;border-radius:26px}
.experience-v2 .node-orbit{border-color:#78b6e43d;border-radius:32px;transform:translateX(-50%) rotate(12deg)}.experience-v2 .node-orbit:after{border-color:#78b6e438;border-radius:26px}
.experience-v2 .workflow-node.current .node-disc,.experience-v2 .workflow-node:hover .node-disc{background:#244c70;border-color:#b5e1ff;box-shadow:0 0 48px #63b2f245;color:#f1f9ff}
.experience-v2 .workflow-node.done .node-disc{border-color:#79b598;color:#c4e8ce}
.flow-inspector{background:linear-gradient(145deg,#162a3dc0,#0d1926);padding:40px 30px 28px}.experience-v2 .flow-inspector .eyebrow{color:#96b6d0;font-size:12px}
.experience-v2 .flow-inspector h3{font-size:28px;line-height:1.65;min-height:94px}.experience-v2 .workflow-description p{font-size:16px;color:#a8bbc9}
.inspector-detail{border-color:#47617a66}.inspector-detail-top .mono{font-size:12px;color:#a1bdd3}.inspector-detail p{font-size:15px;color:#d4e2ee}
.workflow-progress i{background:#31495e;height:3px}.workflow-progress i.active{box-shadow:0 0 12px #76c7ff55}
.experience-v2 .lab-panel-bottom{font-size:13px;color:#90aac0}.experience-v2 .play-button{border-radius:999px;background:var(--accent);border-color:var(--accent);font-size:14px;color:#1a2b17;padding:11px 19px}
.experience-v2 .lab-detail{border-color:#47617a66;color:#b6d3e9;font-size:14px}.experience-footnote{color:#849bad}.experience-footnote>span:last-child{font-size:12px}
.experience-v2 .route-base{stroke:#5f92bd;opacity:.6}.experience-v2 .route-glow{stroke:#88cbff}.experience-v2 [data-running=true] .route-signal{opacity:0;animation:none}.experience-v2 [data-running=true] .flow-route.active .route-signal{opacity:1;animation:route-signal 2.8s linear infinite}
/* All pages share the same tactile surfaces. */
.intro{padding-block:105px 90px}.intro h2{color:#d8e3ed}.service-grid{gap:18px;border:0}
.service-card{padding:28px;border:1px solid #34495d66;border-radius:14px;background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),#35618b24,transparent 75%),#101821;overflow:hidden;transition:border-color .25s,background .25s,transform .35s}
.service-card:hover{background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),#3b78ad38,transparent 75%),#101b28;border-color:#749dc37a}
.service-top{margin-bottom:20px}.service-card h3{font-size:26px;margin-bottom:12px}.service-card p{font-size:16px}.service-bottom{border-color:#33485c66;margin-top:26px;font-size:12px}
.service-preview{height:150px;border:1px solid #47647d33;border-radius:8px;background:#0b121c;position:relative;overflow:hidden;margin-bottom:26px;display:flex;align-items:center;padding:24px}
.preview-symbol{font:300 86px var(--mono);letter-spacing:-.08em;color:#a9cce333;position:relative;z-index:1;transition:color .4s,transform .6s}
.preview-name{position:absolute;bottom:17px;right:18px;font:11px var(--mono);letter-spacing:.1em;color:#8caac1}
.preview-trace{position:absolute;width:68%;height:1px;right:0;top:42%;background:linear-gradient(90deg,transparent,#69b6f8);box-shadow:0 0 18px #7ec7ff66;transform:rotate(-20deg);transition:transform .6s}
.preview-systems .preview-trace{height:45px;background:repeating-linear-gradient(0deg,transparent 0 13px,#76b8e755 14px 15px);box-shadow:none;transform:skewY(-13deg)}
.preview-ai .preview-trace{height:110px;width:110px;right:22%;top:7%;border:1px solid #90cdff66;border-radius:50%;background:radial-gradient(circle,#73c2ff44,transparent 65%);transform:scaleX(1.7);box-shadow:0 0 35px #579fea22}
.preview-automation .preview-trace{height:50px;border:1px solid #8acaf366;border-radius:40px;background:none;transform:rotate(-15deg)}
.service-card:hover .preview-symbol{color:#c2e5ff88;transform:translateX(8px)}.service-card:hover .preview-trace{transform:rotate(0) scale(1.08)}
.process-grid article,.values article{border-color:#354759}.process-index{color:#a7c5df}.closing{overflow:clip}.closing-orbit{border-color:#6e97b233}.closing .button{background:var(--accent)}
.contact-options button{border-radius:8px;background:#101b27;border-color:#344b60;min-height:50px}.contact-options button[aria-pressed=true]{background:#223d54;border-color:#90c9f2;color:#edf6ff}
.brief-field{margin:28px 0 24px}.brief-field label{display:flex;justify-content:space-between;font-size:15px;color:#d5e4f0;margin-bottom:10px}.brief-field label span{color:#8fa3b6;font-size:13px}
.brief-field textarea{font:16px/1.8 var(--font);color:var(--ink);background:#0c1520;width:100%;padding:17px 18px;border:1px solid #415a71;border-radius:10px;resize:vertical;min-height:145px;transition:border-color .25s,box-shadow .25s;outline:none}
.brief-field textarea:focus{border-color:#acd6ff;box-shadow:0 0 0 3px #8bc9ff18,0 0 35px #599cff0e}.brief-field textarea::placeholder{color:#8195a7}.brief-field p{font-size:13px;color:#93a8ba;margin-top:8px}
.contact-guide{background:#101d2a;border-color:#334b62;border-radius:14px}.site-footer{border-color:#273a4a;background:#080d14}.footer-mail:hover{color:var(--accent)}
@media(min-width:1500px){.hero-visual{height:700px}.hero-visual #architecture{height:560px}.hero{min-height:835px}}
@media(max-width:1100px){.hero{grid-template-columns:.95fr 1.1fr;min-height:760px}.hero h1{font-size:70px}.hero-copy{padding-top:72px}.hero-visual{margin-left:-40px;margin-right:-22px;height:620px}.hero-visual #architecture{height:460px}.hero-visual .scene-coordinate{left:26px;right:12px;font-size:10px}.hero-visual .scene-caption{left:26px;right:12px;bottom:175px}.scene-meaning{max-width:260px}.scene-meaning strong{font-size:14px}.scene-meaning>span{font-size:12px}.hero-visual .motion-toggle{font-size:12px}.scene-console{left:26px;right:12px;bottom:16px;grid-template-columns:1fr}.console-options{justify-content:flex-start}.console-label{font-size:12px}.console-options button{font-size:12px;min-height:38px}#console-response{font-size:13px}.hero-service-selector button{padding:22px 18px}.hero-actions{gap:16px}.hero-actions .button{font-size:14px;padding:15px 20px;gap:20px}.hero-actions .text-link{font-size:13px}.experience-v2 .flow-inspector h3{font-size:24px}.flow-inspector{padding:32px 24px 24px}.experience-v2 .lab-panel-bottom{flex-wrap:wrap}.experience-tabs button{padding:18px 16px}.experience-v2 .workflow-node strong{font-size:14px}}
@media(max-width:850px){.experience-v2 .experience-body{grid-template-columns:1fr}.experience-v2 .flow-map{min-height:480px}.flow-inspector{display:grid;grid-template-columns:1fr 1fr;padding:32px;gap:0 32px}.experience-v2 .flow-inspector h3{min-height:0;font-size:28px}.experience-v2 .workflow-description{padding-bottom:0}.hero h1{font-size:60px}.hero-copy .eyebrow{font-size:10px}.hero-description{font-size:16px}.hero-visual .scene-caption{flex-wrap:wrap;bottom:175px;gap:6px}.hero-visual .scene-caption .motion-toggle{margin-left:0}.hero-visual #architecture{height:420px}.hero{min-height:780px}}
@media(max-width:760px){
 .site-header{height:76px;padding-inline:20px}.wrap{width:calc(100% - 40px)}.showcase{background:radial-gradient(ellipse at 50% 65%,#12335955,transparent 55%),#080b10}
 .hero{display:flex;flex-direction:column;padding-top:38px;min-height:0}.hero-copy{padding:0;align-self:stretch}.hero-copy .eyebrow{font-size:11px;margin-bottom:20px}.hero h1{font-size:clamp(54px,12.5vw,83px);margin-top:0;line-height:1.22}.hero-description{margin-top:22px;font-size:16px}.hero-actions{margin-top:26px;gap:20px}.hero-actions .button{font-size:14px;gap:20px;min-height:52px}.hero-actions .text-link{font-size:13px}.hero-note{margin-top:22px;font-size:12px}
 .hero-visual{width:calc(100% + 40px);height:575px;margin:20px -20px 0;align-self:auto}.hero-visual #architecture{top:0;height:395px;transform:none}.hero-visual .scene-coordinate{left:24px;right:24px;top:15px;font-size:10px}.hero-visual .scene-caption{left:24px;right:24px;bottom:148px;flex-wrap:nowrap;gap:12px;align-items:center}.scene-meaning{max-width:calc(100% - 110px)}.scene-meaning strong{font-size:14px}.scene-meaning>span{font-size:12px}.hero-visual .scene-caption .motion-toggle{margin-left:auto;padding-inline:10px;font-size:12px}
 .scene-console{left:20px;right:20px;bottom:5px;padding:15px 17px;min-height:116px;grid-template-columns:1fr auto;gap:8px}.console-label{font-size:12px}.console-options{justify-content:flex-end}.console-options button{padding:7px 9px;font-size:12px;min-height:40px}#console-response{font-size:13px;min-height:24px}.console-disclaimer{font-size:11px;bottom:-24px}
 .hero-service-selector{display:grid;width:100%;grid-template-columns:1fr 1fr;margin-top:42px;border-radius:10px}.hero-service-selector button{min-height:65px;padding:17px 16px;font-size:15px}.hero-service-selector button:nth-child(3),.hero-service-selector button:nth-child(4){border-top:1px solid #30425366}.hero-service-selector .mono{font-size:12px}
 .connection-bridge{height:115px}.bridge-caption{font-size:12px;padding:0}.bridge-word{font-size:10px}.connection-bridge svg{opacity:.65}
 .experience-v2{padding:30px 0 35px}.experience-v2 .section-heading h2{font-size:40px}.experience-v2 .section-heading{gap:22px;margin-bottom:28px}.experience-heading-note p{font-size:15px}.experience-tabs button{font-size:13px;padding:15px 12px;gap:8px;min-height:64px}.experience-tabs button>.mono{font-size:12px}.experience-v2 .lab-panel-top{padding:16px;gap:13px}.experience-v2 .lab-panel-top>.mono{font-size:11px}.experience-v2 .segmented button{font-size:13px;padding:7px 12px}.experience-v2 .flow-map{min-height:390px}.experience-v2 .workflow-node strong{font-size:13px}.map-axis{font-size:10px}.map-footer{font-size:12px}.experience-v2 .node-disc{border-radius:12px}.experience-v2 .is-core .node-disc{border-radius:21px}.experience-v2 .node-orbit{border-radius:27px}.experience-v2 .node-orbit:after{border-radius:23px}
 .flow-inspector{display:flex;padding:26px 22px;gap:0}.experience-v2 .flow-inspector h3{font-size:26px}.experience-v2 .flow-inspector .eyebrow{font-size:12px}.experience-v2 .workflow-description{padding:18px 0 25px}.inspector-detail{padding-top:18px;border-top:1px solid #47617a66}.experience-v2 .workflow-description p{font-size:16px}.inspector-detail p{font-size:15px}.experience-v2 .lab-panel-bottom{flex-wrap:nowrap;font-size:12px}.experience-v2 .play-button{font-size:13px;padding:10px 15px}.experience-footnote>span:last-child{font-size:12px}
 .intro{padding-block:65px}.service-card{padding:24px}.service-card h3{font-size:23px}.service-preview{height:130px;margin-bottom:22px}.preview-symbol{font-size:72px}.service-bottom{gap:14px}.contact-options button{font-size:14px}.scene-fallback{inset:60px 0 190px}.fallback-word{font-size:95px}
}
@media(max-width:380px){.hero-actions{gap:12px}.hero-actions .button{padding-inline:15px;gap:12px;font-size:13px}.hero-actions .text-link{font-size:12px;gap:8px}.hero-copy .eyebrow{font-size:10px}.hero-visual{height:595px}.hero-visual .scene-caption{bottom:172px}.scene-console{grid-template-columns:1fr;bottom:4px}.console-options{justify-content:flex-start}.scene-meaning strong{font-size:13px}.hero-service-selector button{font-size:14px;padding:16px 13px;gap:12px}.experience-v2 .lab-panel-bottom{flex-wrap:wrap}.experience-tabs button{font-size:12px}.experience-v2 .workflow-node strong{font-size:12px}.experience-v2 .flow-map{min-height:365px}.flow-inspector{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){.hero-line{animation:none}.hero-visual #architecture{transform:none}.bridge-pulse{animation:none;stroke-dasharray:none;opacity:.35}.service-card,.preview-symbol,.preview-trace{transition:none}.button.light:before{display:none}.experience-v2 [data-running=true] .flow-route.active .route-signal{animation:none}}

/* Reserve space for the three-line knowledge result at every size. */
.hero-visual:has(.scene-console[data-mode="2"]){height:685px}
.hero-visual:has(.scene-console[data-mode="2"]) .scene-caption{bottom:196px}
@media(max-width:1100px){.hero-visual:has(.scene-console[data-mode="2"]){height:665px}.hero-visual:has(.scene-console[data-mode="2"]) .scene-caption{bottom:219px}}
@media(max-width:760px){.hero-visual:has(.scene-console[data-mode="2"]){height:635px}.hero-visual:has(.scene-console[data-mode="2"]) .scene-caption{bottom:208px}}
@media(max-width:380px){.hero-visual:has(.scene-console[data-mode="2"]){height:670px}.hero-visual:has(.scene-console[data-mode="2"]) .scene-caption{bottom:245px}}