/* /solutions/ hero — copy on the left, interactive 3D object on the right (see js/solutions-3d.js) */
html body.system-page main .q-page-hero--banner.sol-hero { min-height: 640px; align-items: center; justify-content: center; padding: calc(var(--header-h) + 40px) 24px 40px !important; text-align: left; }
.sol-hero .q-page-hero-inner { max-width: 1250px; }
.sol-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; width: 100%; }
html body.system-page main .sol-hero .q-page-hero-copy { max-width: 560px; margin: 0; text-align: left; }
html body.system-page main .q-page-hero--banner.sol-hero h1 { margin: 0 !important; text-align: left; font-size: 60px !important; line-height: 70px !important; letter-spacing: -1px !important; }
html body.system-page main .q-page-hero--banner.sol-hero p { margin: 24px 0 0 !important; max-width: 520px; text-align: left; }
.sol-hero-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; font-size: 14px; line-height: 17px; font-weight: 600; text-transform: uppercase; color: #fff; }
.sol-hero-hint::before { content: ""; width: 8px; height: 8px; background: #06b22d; animation: sol-pulse 2s infinite; }
@keyframes sol-pulse { 70% { box-shadow: 0 0 0 10px rgba(6, 178, 45, 0); } 0% { box-shadow: 0 0 0 0 rgba(6, 178, 45, .7); } }
.sol-hero-stage { position: relative; }
.sol-hero-stage canvas { display: block; width: 100%; height: 520px; cursor: grab; touch-action: pan-y; outline: none; }
.sol-hero-stage canvas.is-dragging { cursor: grabbing; }
@media (max-width: 900px) {
  html body.system-page main .q-page-hero--banner.sol-hero { min-height: 0; padding-bottom: 24px !important; }
  .sol-hero-grid { grid-template-columns: 1fr; gap: 8px; }
  html body.system-page main .q-page-hero--banner.sol-hero h1 { font-size: 44px !important; line-height: 52px !important; }
  .sol-hero-stage canvas { height: 360px; }
}
@media (max-width: 700px) {
  html body.system-page main .q-page-hero--banner.sol-hero h1 { font-size: 36px !important; line-height: 42px !important; }
  .sol-hero-stage canvas { height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .sol-hero-hint::before { animation: none; } }

/* Plain black hero, text stacked above the 3D object and centred */
html body.system-page main .q-page-hero--banner.sol-hero { background: #000; min-height: 0; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--header-h) + 56px) 24px 24px !important; }
.sol-hero-grid { grid-template-columns: 1fr; gap: 0; justify-items: center; }
html body.system-page main .sol-hero .q-page-hero-copy { max-width: 720px; display: flex; flex-direction: column; align-items: center; text-align: center; }
html body.system-page main .q-page-hero--banner.sol-hero h1, html body.system-page main .q-page-hero--banner.sol-hero p { text-align: center; margin-inline: auto !important; }
.sol-hero-stage { width: min(100%, 760px); margin-top: 8px; }
.sol-hero-stage canvas { height: 480px; }
@media (max-width: 900px) { .sol-hero-stage canvas { height: 380px; } }
@media (max-width: 700px) { .sol-hero-stage canvas { height: 320px; } }

/* 3D wireframe sits above the heading; compact stage */
.sol-hero-stage { margin: 0 0 8px; }
.sol-hero-stage canvas { height: 360px; }
.sol-hero-hint { margin-top: 28px; }
@media (max-width: 900px) { .sol-hero-stage canvas { height: 300px; } }
@media (max-width: 700px) { .sol-hero-stage canvas { height: 240px; } }

/* Same height as the home hero (900px), content centred */
html body.system-page main .q-page-hero--banner.sol-hero { min-height: 900px; justify-content: center; align-items: center; padding: calc(var(--header-h) + 24px) 24px 60px !important; }
.sol-hero-stage { width: min(100%, 860px); }
.sol-hero-stage canvas { height: 540px; }
@media (max-width: 900px) { .sol-hero-stage canvas { height: 440px; } }
@media (max-width: 700px) { html body.system-page main .q-page-hero--banner.sol-hero { min-height: 900px; } .sol-hero-stage canvas { height: 340px; } }

/* Same black + two blurred green glows as the header menu panels */
.sol-hero::before, .sol-hero::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; background: #06b22d; filter: blur(200px); pointer-events: none; }
.sol-hero::before { left: calc(50% - 720px + 60px); bottom: -140px; }
.sol-hero::after { right: calc(50% - 720px - 60px); top: -200px; opacity: .7; }
@media (max-width: 900px) {
  .sol-hero::before { left: -160px; bottom: -160px; width: 340px; height: 340px; filter: blur(150px); }
  .sol-hero::after { right: -160px; top: -180px; width: 340px; height: 340px; filter: blur(150px); }
}

/* hero fills the viewport on every device (grows only if its content is taller) */
html body.system-page main .q-page-hero--banner.sol-hero { min-height: 100vh; min-height: 100svh; }
html body.system-page main .sol-hero .sol-hero-stage canvas { height: clamp(200px, calc(100vh - 370px), 540px); height: clamp(200px, calc(100svh - 370px), 540px); }