/* A restrained technical grid system, with localized pointer and scroll motion. */
.story, .systems, .closing, .holding { position: relative; isolation: isolate; }
.story::before, .systems::before, .holding::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#4d927715 1px, transparent 1px), linear-gradient(90deg, #4d927715 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: 0 var(--grid-shift, 0px);
  mask-image: linear-gradient(145deg, #000b, transparent 70%);
}
.systems::before { background-size: 48px 48px; mask-image: linear-gradient(25deg, transparent 25%, #000b); }
.holding::before { inset: -20px -8%; background-size: 56px 56px; }
.workspace { background: #eaf2ed; }
.modules { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 20px; border: 0; perspective: 1400px; }
.module { grid-column: span 5; position: relative; isolation: isolate; min-height: 336px; padding: 28px 32px; border: 1px solid #c4d8ce !important; border-radius: 16px; background: #fbfdf9; overflow: hidden; transform: none; }
.module:first-child, .module:last-child { grid-column: span 7; }
.module::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(360px circle at var(--pointer-x, 65%) var(--pointer-y, 35%), #68cfac25, transparent 70%), linear-gradient(#5a9c7d0a 1px, transparent 1px), linear-gradient(90deg, #5a9c7d0a 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  opacity: .65; transition: opacity .3s ease;
}
.module:nth-child(2)::before, .module:nth-child(3)::before { background-image: radial-gradient(320px circle at var(--pointer-x,65%) var(--pointer-y,35%), #f3a47e1d, transparent 70%), linear-gradient(#5a9c7d0a 1px, transparent 1px), linear-gradient(90deg, #5a9c7d0a 1px, transparent 1px); }
.module-top { margin-bottom: 40px; }
.module h3 { width: fit-content; max-width: 65%; font-size: 29px; letter-spacing: -.035em; }
.module h4 { min-height: 0; margin-top: 22px; font-size: 17px; max-width: 72%; }
.module p { max-width: 58ch; font-size: 14px; margin-bottom: 28px; }
.module-foot { padding-top: 17px; border-color: #c7ddd2; }
.module-preview { position: absolute; inset-inline-end: 30px; top: 58px; width: clamp(110px, 12vw, 180px); color: #a9c1b6; transform: rotate(-5deg); transition: transform .45s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.module-preview svg { width: 100%; height: auto; overflow: visible; }
.mini-accent { stroke: #389e7b; stroke-dasharray: 4 4; }
.mini-device { fill: #389e7b; stroke: #fff; }
.systems-grid { gap: 16px; }
.system { border: 1px solid #d6e3db; border-radius: 12px; padding: 25px; background: #ffffffa8; position: relative; overflow: hidden; }
.system .technical { color: #2a8265; padding-top: 1px; }
.system h3 { font-size: 17px; }
.system::after { content: ''; position: absolute; width: 22px; height: 22px; inset-block-end: 12px; inset-inline-end: 12px; border-inline-end: 1px solid #83b89e; border-block-end: 1px solid #83b89e; opacity: .45; transition: width .3s, height .3s; }
.closing { overflow: hidden; background: radial-gradient(ellipse at var(--pointer-x, 50%) var(--pointer-y, 50%), #e0f1dc, #eaf2e8 65%); }
.closing::before { content: ''; position: absolute; inset: -35% -10%; z-index: -1; pointer-events: none; background-image: linear-gradient(#4c927b18 1px, transparent 1px), linear-gradient(90deg, #4c927b18 1px, transparent 1px); background-size: 64px 64px; transform: perspective(700px) rotateX(42deg) translateY(var(--grid-shift,0px)); mask-image: radial-gradient(ellipse, #000a, transparent 65%); }
.account-options a { position: relative; isolation: isolate; background: radial-gradient(220px circle at var(--pointer-x,50%) var(--pointer-y,50%), #cce7d744, transparent), #fffdf9; }
.engineering-stage { background: radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,50%), #c8ead950, transparent), #fff; }
.stage-canvas { background: radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,45%), #d1e9dc 0, #edf4ef 53%, #f7faf6 85%); }
.banner-hero .slide-artwork { touch-action: pan-y; }
.grid-surface { --grid-shift: 0px; }
@media (hover:hover) and (pointer:fine) {
  .module { transition: transform .22s ease-out, box-shadow .3s ease, border-color .3s ease; }
  .module:hover { transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px); box-shadow: 0 18px 40px #34664b12; border-color: #78ad91 !important; background: #fbfdf9; }
  .module:hover::before { opacity: 1; }
  .module:hover .module-preview { transform: rotate(0deg) translateY(-4px); }
  .module:hover .mini-accent { animation: mini-route 2.5s linear infinite; }
  .system { transition: transform .25s ease, background-color .25s ease, border-color .25s ease; }
  .system:hover { background: #f0f7ef; border-color: #9ec4ad; transform: translateY(-3px); }
  .system:hover::after { width: 32px; height: 32px; }
}
[dir=rtl] .module-preview { transform: rotate(5deg); }
[dir=rtl] .module h4 { max-width: 78%; }
@keyframes mini-route { to { stroke-dashoffset: -32; } }
@media (max-width:1120px) {
  .module { padding: 26px; min-height: 340px; }
  .module-preview { width: 130px; inset-inline-end: 24px; }
  .module h3 { font-size: 26px; }
  .module h4 { max-width: 82%; }
  .systems-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px) {
  .modules { gap: 16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .module, .module:first-child, .module:last-child { grid-column: span 1; min-height: 350px; padding: 24px; }
  .module-top { margin-bottom: 44px; }
  .module h3 { font-size: 24px; max-width: 100%; }
  .module h4, [dir=rtl] .module h4 { max-width: 100%; font-size: 16px; }
  .module p { font-size: 13px; }
  .module-preview { width: 96px; top: 54px; opacity: .6; }
  .system { padding: 22px 20px; }
}
@media (min-width:541px) and (max-width:1120px) {
  .module-top { margin-bottom: 110px; }
  .module-preview { top: 67px; width: 120px; }
  .module h3 { max-width: 100%; }
}
@media (max-width:540px) {
  .modules, .systems-grid { grid-template-columns: 1fr; }
  .module, .module:first-child, .module:last-child { min-height: 330px; }
  .module-preview { width: 124px; top: 57px; opacity: .75; }
  .module h3 { max-width: 66%; }
  .system { min-height: 135px; }
}
@media (max-width:360px) {
  .module { padding: 22px !important; }
  .module h3 { font-size: 23px; }
  .module-preview { width: 96px; }
}
@media (prefers-reduced-motion:reduce) {
  .module, .module-preview, .system, .system::after { transition: none !important; animation: none !important; transform: none !important; }
  .story::before, .systems::before, .holding::before { background-position: 0 0 !important; }
  .closing::before { transform: none !important; }
}