/* Photographic solution gallery and interactive application art direction. */
:root { --demo-paper:#fff; --demo-surface:#f4f6fa; --demo-ink:#132039; --demo-muted:#53627b; --demo-line:#d9e1ec; --demo-accent:#1454ed; --demo-night:#091526; --demo-success:#166950; --demo-warm:#efe8dd; }
.visual-disclosure { font-size:14px; color:var(--demo-muted); margin:0 0 24px; max-width:80ch; }
.service-range-grid,.capability-directory-grid { gap:28px; }
.service-range-card.visual-service-card,.capability-directory-card.visual-service-card { padding:0; overflow:hidden; border-radius:18px; display:flex; align-items:stretch; border:1px solid var(--demo-line); background:var(--demo-paper); box-shadow:0 4px 8px #12254005,0 16px 36px #12254008; }
.service-visual { position:relative; min-height:240px; overflow:hidden; background:var(--demo-night); isolation:isolate; width:100%; }
.service-visual > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.service-visual::after { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(0deg,#071426b3,transparent 75%); pointer-events:none; }
.visual-caption { position:absolute; left:20px; top:20px; z-index:2; background:#fff; color:var(--demo-ink); font-size:12px; line-height:1.5; padding:6px 10px; border-radius:5px; box-shadow:0 3px 12px #07142620; }
.visual-tag { position:absolute; bottom:20px; left:20px; z-index:2; color:#fff; font-size:11px; font-weight:700; letter-spacing:1.2px; }
.preview-mini { position:absolute; top:58px; right:20px; width:138px; padding:16px; background:#fff; color:var(--demo-ink); border-radius:10px; z-index:1; box-shadow:0 16px 32px #061c4c30; transform:rotate(-5deg); }
.preview-mini > small { display:block; font-size:10px; line-height:1.5; color:var(--demo-muted); }
.preview-mini > b { display:block; font-size:25px; line-height:1.4; margin:4px 0; }
.preview-mini > span { font-size:10px; }
.preview-bars { height:42px; display:flex; align-items:end; gap:5px; margin-top:8px; }
.preview-bars i { background:#bed0f9; height:var(--bar); flex:1; border-radius:3px 3px 0 0; }
.preview-bars i:nth-child(3n) { background:var(--demo-accent); }
.preview-lines i { display:block; height:5px; margin-top:8px; background:#dce5f6; border-radius:4px; }
.preview-lines i:nth-child(2) { width:65%; background:#80a6f4; }
.preview-seats { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:10px; }
.preview-seats i { height:10px; border-radius:3px 3px 1px 1px; background:#dce5f6; }
.preview-seats .is-on { background:#658bff; }
.visual-cinema .preview-mini,.visual-cloud .preview-mini,.visual-motion .preview-mini { background:#112238; color:#fff; }
.visual-cinema .preview-mini small,.visual-cloud .preview-mini small,.visual-motion .preview-mini small { color:#c2d3ed; }
.visual-store .preview-mini,.visual-home .preview-mini { transform:rotate(4deg); background:#fbf7ef; }
.visual-chat .preview-mini { width:162px; transform:rotate(-3deg); }
.visual-mobile .preview-mini { border:5px solid #15243c; border-radius:18px; width:110px; min-height:155px; top:44px; }
.service-card-copy { padding:28px; display:flex; flex-direction:column; align-items:start; flex:1; }
.service-card-copy > span { font-size:11px; font-weight:700; color:var(--demo-muted); letter-spacing:1.2px; }
.service-card-copy h3 { font-size:24px; line-height:1.45; margin:14px 0 0; text-wrap:balance; }
.service-card-copy p { font-size:16px; line-height:1.75; color:var(--demo-muted); margin:14px 0 24px; }
.service-card-copy > .text-link { margin-top:auto; font-size:15px; min-height:44px; padding:10px 0; }
.service-card-copy > .solution-demo-link { margin-top:12px; padding:12px 18px; border-radius:8px; background:var(--demo-night); color:#fff; min-height:48px; font-size:15px; }
.detail-blueprint { padding:0; overflow:hidden; border-color:#344a66; background:#10263f; }
.detail-blueprint .service-visual { min-height:270px; }
.detail-blueprint .blueprint-top { padding:24px 24px 0; }
.detail-blueprint ol { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 24px; margin:20px 0; }
.detail-blueprint li { margin:0; padding:14px; font-size:15px; line-height:1.6; gap:12px; background:#1b3553; color:#fff; border:1px solid #39516e; }
.detail-blueprint .blueprint-number { color:#9dc7ff; }
.detail-blueprint li i { display:none; }
.detail-blueprint > p { margin:0; padding:0 24px 24px; color:#c0d1e7; font-size:14px; }
.localized-service-preview { max-width:760px; margin:32px 0; border-radius:16px; overflow:hidden; }
.localized-service-preview .service-visual { min-height:300px; }
/* Four systems share controls, with deliberately different application layouts. */
.solution-studio .system-stage { max-width:1280px; padding:20px; background:#10233f; }
.solution-studio .console-panel { padding:0; min-height:0; }
.solution-studio .system-console { border-radius:12px; }
.solution-studio .console-tabs { background:#f2f5fa; padding:8px; gap:6px; }
.solution-studio .console-tabs button { border-radius:8px; border:0; min-height:52px; color:var(--demo-muted); font-size:15px; }
.solution-studio .console-tabs button[aria-selected=true] { background:var(--demo-night); color:#fff; box-shadow:0 4px 12px #12254015; }
.app-shell { display:grid; grid-template-columns:240px minmax(0,1fr); background:var(--demo-paper); }
.app-context { padding:28px; background:#f2f5fa; display:flex; flex-direction:column; align-items:start; gap:20px; border-right:1px solid var(--demo-line); color:var(--demo-ink); }
.app-context > b { font-size:22px; }
.app-context > p { font-size:14px; margin:0; color:var(--demo-muted); }
.app-workspace { padding:32px; min-width:0; }
.workspace-mark { width:48px; height:48px; border-radius:14px; display:grid; place-content:center; background:var(--demo-accent); color:#fff; font-size:24px; font-weight:800; position:relative; }
.workspace-mark span { position:absolute; right:8px; top:6px; font-size:15px; }
.context-nav { width:100%; padding:12px; font-size:14px; color:var(--demo-muted); }
.context-nav.is-active { color:var(--demo-accent); background:#e2eafb; border-radius:8px; font-weight:700; }
.context-summary { margin-top:28px; display:grid; gap:8px; padding:20px 0; border-top:1px solid var(--demo-line); }
.context-summary > span,.context-summary > small { color:var(--demo-muted); font-size:13px; }
.live-dot { font-size:12px; display:flex; align-items:center; gap:8px; line-height:1.6; }
.live-dot::before { content:''; width:7px; height:7px; border-radius:50%; background:#359778; box-shadow:0 0 0 4px #35977818; flex:none; }
.finance-chart { display:grid; grid-template-columns:1fr 1.4fr; align-items:center; gap:24px; border:1px solid var(--demo-line); padding:24px; border-radius:12px; margin-bottom:28px; background:linear-gradient(120deg,#f4f7fc,#fff); }
.finance-chart > div:first-child { display:grid; gap:12px; }
.finance-chart span { font-size:14px; color:var(--demo-muted); }
.finance-chart strong { font-size:32px; font-variant-numeric:tabular-nums; }
.finance-bars { height:100px; display:flex; gap:8px; align-items:stretch; }
.finance-bars > div { flex:1; display:flex; flex-direction:column; justify-content:end; align-items:stretch; }
.finance-bars i { display:block; height:var(--bar); background:#a8c0f1; border-radius:5px 5px 0 0; }
.finance-bars > div:last-child i { background:var(--demo-accent); }
.finance-bars span { font-size:10px; text-align:center; margin-top:8px; }
.source-file { display:flex; align-items:center; gap:12px; width:100%; font-size:12px; }
.source-file > span { background:#fff; border:1px solid var(--demo-line); padding:12px 8px; border-radius:6px; color:var(--demo-accent); font-size:10px; font-weight:700; }
.source-file small { display:block; margin-top:5px; color:var(--demo-muted); font-size:11px; }
.source-photo { border-radius:8px; aspect-ratio:4/3; object-fit:cover; width:100%; }
.app-ai .studio-answer { background:#edf3ff; border:1px solid #cbdafa; border-radius:12px; padding:24px; margin-top:24px; }
.app-ai .studio-answer::before { content:'T+'; display:grid; place-content:center; width:40px; height:40px; color:#fff; background:var(--demo-accent); border-radius:12px; margin-bottom:16px; font-weight:700; }
.app-ai .answer-label { color:#426092; }
.app-cinema { background:#0c182a; color:#edf3ff; grid-template-columns:300px minmax(0,1fr); }
.app-cinema .app-context { padding:0; background:#111f34; border-color:#263954; gap:0; }
.movie-poster { position:relative; width:100%; min-height:430px; isolation:isolate; overflow:hidden; }
.movie-poster > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% center; }
.movie-poster::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#091526,transparent 90%); }
.movie-poster > div { position:absolute; bottom:32px; left:24px; right:20px; z-index:1; color:#fff; }
.movie-poster span { font-size:10px; letter-spacing:2px; }
.movie-poster b { display:block; font-size:52px; font-weight:500; letter-spacing:7px; margin:12px 0; }
.movie-poster p { font-size:12px; letter-spacing:2px; color:#e9d6bf; }
.movie-info { padding:28px; display:grid; gap:12px; color:#b7cce8; font-size:14px; }
.movie-info b { color:#fff; font-size:22px; }
.app-cinema .console-heading h2,.app-cinema .console-heading > div > span,.app-cinema .studio-hint { color:#e8f1ff; }
.app-cinema .sample-badge { color:#c2d9ff; background:#172b48; border-color:#344e75; }
.app-cinema select { background:#172b48; color:#eef5ff; border-color:#395172; }
.app-cinema .cinema-screen { border-color:#759de1; background:linear-gradient(#a3c4ff1f,transparent); box-shadow:0 -12px 28px #6e98ff12; }
.app-cinema .cinema-screen span { color:#b5ccee; }
.app-cinema .cinema-seat { background:#263d5c; color:#dae6f9; border-color:#456181; box-shadow:0 3px 0 #112237; border-radius:8px 8px 3px 3px; }
.app-cinema .cinema-seat[aria-pressed=true] { background:#85adff; color:#071526; border-color:#c6daff; box-shadow:0 0 0 3px #77a5ff25; }
.app-cinema .cinema-seat:disabled { background:#142438; border-color:#233a57; color:#7890ae; }
.app-cinema .seat-result { background:#192d49; color:#fff; border:1px solid #2d4567; border-radius:8px; }
.app-cinema .seat-map-hint { color:#b7cce8; }
.app-cinema .demo-service { color:#a7c8ff; }
.app-cinema .seat-legend { color:#bcd0ec; }
.app-cinema .seat-legend span:nth-child(1) i { background:#263d5c; border-color:#456181; }
.app-cinema .seat-legend span:nth-child(2) i { background:#85adff; }
.app-cinema .seat-legend span:nth-child(3) i { background:#142438; border-color:#7890ae; }
.app-commerce { grid-template-columns:280px minmax(0,1fr); }
.app-commerce .app-context { padding:0; background:var(--demo-warm); }
.store-editorial { width:100%; }
.store-editorial img { width:100%; height:300px; object-fit:cover; }
.store-editorial > div { padding:28px; }
.store-editorial span { color:#68563e; font-size:11px; letter-spacing:2px; }
.store-editorial b { font-size:30px; line-height:1.5; display:block; margin:16px 0; }
.store-editorial p { font-size:14px; color:#685d4e; }
.solution-studio .demo-product { display:grid; grid-template-columns:110px minmax(0,1fr) auto; align-items:center; gap:18px; }
.product-photo { width:110px; height:120px; object-fit:cover; border-radius:10px; background:var(--demo-warm); }
.app-commerce .seat-result { border-radius:8px; background:#f1ece4; }
.app-commerce .demo-controls .button:first-child { background:var(--demo-night); }
/* App lab: photographic context, dashboard and live event list. */
.lab-app { border-radius:18px; }
.app-photo-header { position:relative; height:210px; overflow:hidden; background:var(--demo-night); }
.app-photo-header > img { width:100%; height:100%; object-fit:cover; }
.app-photo-header::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#071526d9,#07152610); pointer-events:none; }
.app-photo-header > div { position:absolute; z-index:1; left:28px; bottom:28px; display:grid; gap:12px; color:#fff; }
.app-photo-header > div > span:first-child { font-size:11px; letter-spacing:1.4px; }
.app-photo-header b { font-size:30px; }
.lab-app-content { padding:28px; }
.lab-app-heading h3 { font-size:25px; }
.lab-view-switch { display:inline-flex; gap:4px; padding:4px; border-radius:8px; background:#edf2f8; margin-top:20px; }
.lab-view-switch button { border:0; padding:10px 16px; border-radius:6px; font:inherit; font-size:14px; min-height:44px; color:var(--demo-muted); background:transparent; cursor:pointer; }
.lab-view-switch [aria-pressed=true] { background:#fff; color:var(--demo-ink); box-shadow:0 2px 7px #11264b12; }
.lab-dashboard { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(180px,1fr); gap:20px; margin-block:20px; }
.lab-dashboard .lab-visual { margin:0; min-width:0; padding:16px; min-height:240px; border:1px solid var(--demo-line); background:#f1f5fc; }
.lab-dashboard .lab-visual svg { height:auto; min-height:220px; }
.lab-insights { border:1px solid var(--demo-line); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.lab-insights > span { font-size:12px; color:var(--demo-muted); }
.lab-insights > strong { font-size:18px; line-height:1.6; }
.insight-row { display:flex; gap:10px; align-items:start; font-size:13px; line-height:1.6; color:var(--demo-muted); }
.insight-row i { font-style:normal; color:#90a1ba; }
.insight-row.is-current { color:var(--demo-accent); font-weight:700; }
.insight-row.is-current i { color:var(--demo-accent); }
.insight-row.is-complete i { color:var(--demo-success); }
.lab-insight-foot { margin-top:auto; padding-top:16px; border-top:1px solid var(--demo-line); }
.lab-app[data-view=detail] .lab-dashboard { grid-template-columns:1fr; }
.lab-app[data-view=detail] .lab-insights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.lab-app[data-view=detail] .lab-insights > strong { grid-column:1 / -1; }
.lab-app[data-view=detail] .lab-visual { min-height:300px; }
.lab-app[data-view=detail] .lab-visual > svg { max-width:620px; }
.lab-phone-device { width:214px; padding:18px; min-height:350px; }
.phone-cover { height:75px; width:100%; object-fit:cover; border-radius:8px; margin:12px 0; }
.lab-phone-card { padding:8px; font-size:10px; }
.lab-phone-card > span { width:auto; height:auto; background:none; font-size:10px; color:var(--demo-success); }
.lab-phone-action { font-size:10px; line-height:1.5; padding:10px; }
.lab-home .lab-visual { background:#f6f1e7; }
.lab-home .lab-room { fill:#decfb9; }
.lab-home .lab-floor { stroke:#9e8766; }
.lab-network .lab-visual { background:#0e2139; }
.lab-network .lab-node { fill:#183651; stroke:#6f9cc4; }
.lab-network .lab-wires { stroke:#668ba9; }
.lab-network .lab-packet { fill:#65d4c0; }
.cloud-monitor { width:100%; color:#e4f0ff; padding:8px; }
.cloud-monitor-title { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12px; margin-bottom:20px; }
.cloud-monitor-title > span { color:#a9c2df; }
.cloud-resources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cloud-resources > div { display:grid; gap:10px; padding:12px; border:1px solid #36536e; border-radius:8px; background:#19334f; }
.cloud-resources span { font-size:11px; color:#b8d0e9; }
.cloud-resources strong { font-size:18px; white-space:nowrap; }
.cloud-resources i { height:4px; width:var(--resource); background:#65d4c0; border-radius:3px; }
.cloud-hosts { display:grid; margin-top:20px; }
.cloud-hosts > div { display:flex; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid #2c4661; font-size:12px; }
.host-led { width:6px; height:6px; border-radius:50%; background:#65d4c0; }
.cloud-hosts small { margin-left:auto; color:#b8d0e9; font-size:11px; }
.cloud-job { display:grid; gap:12px; margin-top:20px; font-size:13px; }
.cloud-job > span { color:#b8d0e9; font-size:11px; }
.cloud-job > div { height:4px; background:#294966; }
.cloud-job i { display:block; height:100%; background:#65d4c0; transform-origin:left; transform:scaleX(calc((var(--lab-step) + 1) / 4)); transition:transform 260ms var(--ease-out); }
.lab-home .app-photo-header > img { opacity:calc(.7 + var(--lab-step) * .1); transition:opacity 250ms var(--ease-out); }
.lab-map .lab-visual { background:#eef2ed; }
.lab-map .lab-route { stroke:#6c9677; }
.lab-map .lab-agent { fill:#1c7151; }
.lab-chart .lab-visual { background:#f3f6fc; }
.lab-metrics > span { font-size:12px; line-height:1.7; border:1px solid var(--demo-line); background:#fff; }
.lab-progress { height:3px; }
.lab-tabs button { background:#f0f3f8; border-radius:10px; }
.lab-tabs button[aria-selected=true] { box-shadow:0 8px 18px #1027461c; }
.lab-window { padding:16px 22px; }
.lab-motion-art { background-image:linear-gradient(#0a1c3533,#0a1c3511),url('images/demo-creative.webp'); background-size:cover; background-position:center; }
.lab-motion-art > i { opacity:.5; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html[data-motion=on] .service-visual > img { transition:transform 450ms var(--ease-out); }
  html[data-motion=on] .visual-service-card:hover .service-visual > img { transform:scale(1.045); }
  html[data-motion=on] .preview-mini { transition:transform 350ms var(--ease-out); }
  html[data-motion=on] .visual-service-card:hover .preview-mini { transform:translateY(-5px) rotate(0); }
  html[data-motion=on] .product-photo { transition:transform 250ms var(--ease-out); }
  html[data-motion=on] .demo-product:hover .product-photo { transform:scale(1.035); }
}
@media(max-width:1100px) {
  .app-shell,.app-cinema,.app-commerce { grid-template-columns:220px minmax(0,1fr); }
  .app-context,.app-workspace { padding:24px; }
  .app-cinema .app-context,.app-commerce .app-context { padding:0; }
  .lab-dashboard { grid-template-columns:minmax(0,1.4fr) minmax(180px,1fr); }
}
@media(max-width:760px) {
  .service-range-grid,.capability-directory-grid { grid-template-columns:1fr; }
  .service-card-copy { padding:24px; }
  .service-card-copy h3 { font-size:25px; }
  .service-visual { min-height:250px; }
  .solution-studio .system-stage { padding:10px; }
  .app-shell,.app-cinema,.app-commerce { grid-template-columns:1fr; }
  .app-context { border-right:0; border-bottom:1px solid var(--demo-line); }
  .app-erp .app-context,.app-ai .app-context { display:none; }
  .app-workspace { padding:22px; }
  .movie-poster { min-height:240px; }
  .movie-poster > img { object-position:center 55%; }
  .movie-poster > div { bottom:20px; }
  .movie-poster b { font-size:40px; margin:8px 0; }
  .movie-info { padding:16px 22px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
  .movie-info b { font-size:16px; }
  .store-editorial { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
  .store-editorial img { height:210px; }
  .store-editorial > div { padding:20px; }
  .store-editorial b { font-size:22px; }
  .store-editorial p { font-size:12px; }
  .solution-studio .demo-product { grid-template-columns:82px minmax(0,1fr); }
  .solution-studio .demo-product > span:last-child { grid-column:2; display:flex; align-items:center; gap:12px; }
  .product-photo { width:82px; height:96px; }
  .lab-dashboard { grid-template-columns:1fr; }
  .lab-insights { gap:12px; }
  .lab-app-content { padding:20px; }
  .lab-dashboard .lab-visual svg { min-height:160px; }
  .app-photo-header { height:200px; }
  .app-photo-header > div { left:20px; bottom:20px; }
  .lab-app[data-view=detail] .lab-insights { display:flex; }
}
@media(max-width:400px) {
  .service-card-copy { padding:20px; }
  .service-card-copy h3 { font-size:23px; }
  .app-workspace { padding:16px; }
  .finance-chart { padding:16px; gap:12px; grid-template-columns:1fr; }
  .finance-bars { height:70px; }
  .store-editorial { grid-template-columns:1fr; }
  .store-editorial img { height:170px; }
  .store-editorial > div { padding:16px; }
  .store-editorial b { margin:8px 0; }
  .store-editorial p { display:none; }
  .lab-app-content { padding:14px; }
  .lab-view-switch button { padding:10px 12px; }
  .lab-dashboard .lab-visual { padding:8px; }
  .lab-phone-device { width:195px; padding:14px; }
  .cloud-monitor { padding:0; }
  .cloud-resources { gap:5px; }
  .cloud-resources > div { padding:8px; }
  .cloud-resources strong { font-size:14px; }
  .detail-blueprint ol { grid-template-columns:1fr; }
}
html[data-motion=off] .visual-service-card *,html[data-motion=off] .app-shell * { transition:none !important; animation:none !important; }
@media(prefers-reduced-motion:reduce) { .visual-service-card *,.app-shell * { transition:none !important; animation:none !important; } }