/* Reference-inspired case studies; all editorial content remains in the PHP page. */
.case { background: #f5f7fa; padding: 64px 24px; }
.case .container { max-width: 1280px; }
.case .case-section {
  display: grid; grid-template-columns: 1fr 1fr 0.85fr; gap: 22px;
  padding: 32px; margin-bottom: 36px; overflow: hidden; position: relative;
  border: 1px solid #e0e6ee; border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(23, 42, 70, 0.045);
}
.case .header-tag { grid-column: 1 / 3; align-self: start; justify-self: start; margin: 0; padding: 5px 10px; border-radius: 5px; border: 1px solid #e3eaf3; background: #f4f7fb; color: #536b87; font-size: 10px; letter-spacing: 1.4px; }
.case .header-tag::before { display: none; }
.case .case-section h2 { grid-column: 1 / 3; margin: 0 0 4px; padding-left: 0; border-left: 0; color: #142d50; font-size: clamp(23px, 2.2vw, 30px) !important; line-height: 1.25; }
.case .content-grid { display: contents; }
.case .info-card { padding: 20px; border: 1px solid #e5ebf2; border-radius: 10px; background: #fafbfd; box-shadow: none; min-width: 0; }
.case .info-card:hover { transform: none; border-color: #a9cdf0; box-shadow: 0 4px 14px #1c6cbc0a; }
.case .info-card:nth-child(3) { grid-column: 1 / -1 !important; background: #fff; padding: 24px 0 4px; border: 0; border-top: 1px solid #e8edf3; border-radius: 0; }
.case .info-card h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #203b5f; font-size: 16px; line-height: 1.35; }
.case .info-card h3 i { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; margin: 0; border-radius: 8px; color: #cd4050; background: #fceef0; font-size: 14px; }
.case .info-card:nth-child(2) h3 i { color: #376eac; background: #eaf1f9; }
.case .case-section p, .case .case-section li { font-size: 14px; line-height: 1.8; color: #566579; text-align: left !important; }
.case .case-section p { margin: 0; }
.case .case-section ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; padding: 0; margin: 0; list-style: none; }
.case .case-section li { position: relative; padding-left: 17px; margin: 0; }
.case .case-section li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #1788ff; box-shadow: 0 0 0 1px #1788ff; }
.case .case-section li strong { color: #173f71; }
.case .results-strip { grid-column: 1 / -1; padding: 24px 28px; border-radius: 10px; border: 1px solid #203b5e; background: linear-gradient(110deg, #183858, #10253f); color: #edf6ff; font-size: 14px; line-height: 1.8; text-align: left !important; box-shadow: 0 5px 12px #13579820; }
.case .results-strip strong { color: #fff; }
.case .results-strip div > strong:first-child { color: #adcdec; display: block; margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; }
.case-visual { grid-column: 3; grid-row: 1 / 4; min-height: 260px; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid #dbe5ef; background: radial-gradient(ellipse at 50% 40%, #e0ecf7, transparent 75%), linear-gradient(140deg, #f0f5fa, #d7e4f1); box-shadow: none; }
.case-visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#59baff16 1px, transparent 1px), linear-gradient(90deg, #59baff16 1px, transparent 1px); background-size: 28px 28px; transform: skewY(-12deg) scale(1.2); }
.visual-orbit { position: absolute; width: 230px; height: 230px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #93afcd55; border-radius: 50%; box-shadow: 0 0 0 22px #31a8ff0a, 0 0 0 44px #31a8ff08; }
.visual-device { position: absolute; width: 43%; height: 65%; left: 34%; top: 23%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; border: 2px solid #7b9dbf; border-radius: 16px; background: linear-gradient(140deg, #244b73, #153657); transform: rotate(-5deg); box-shadow: 8px 12px 24px #24476d26; }
.visual-device > i { font-size: 60px; color: #c3efff; filter: none; }
.device-top { position: absolute; top: 9px; width: 25%; height: 4px; border-radius: 9px; background: #88cfff; }
.device-lines { width: 65%; display: grid; gap: 6px; }
.device-lines b { height: 3px; background: #69c4f7; border-radius: 3px; }
.device-lines b:last-child { width: 60%; }
.visual-cloud { position: absolute; top: 8%; left: 28%; color: #729abd; font-size: 36px; filter: none; }
.visual-server { position: absolute; left: 7%; bottom: 14%; display: grid; gap: 7px; color: #729abd; font-size: 32px; transform: skewY(8deg); }
.visual-node { position: absolute; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #c4d5e7; border-radius: 9px; color: #476b91; background: #f6f9fd; box-shadow: 0 4px 10px #24476d0d; }
.node-one { right: 8%; top: 14%; }.node-two { right: 5%; top: 44%; }.node-three { left: 8%; top: 30%; }
/* Color-coded icons retain the restrained card layout. */
.case .info-card:nth-child(1) h3 i { color: #e44262; background: #ffe9ef; }
.case .info-card:nth-child(2) h3 i { color: #147bea; background: #e5f2ff; }
.case .info-card:nth-child(3) h3 i { color: #8950d6; background: #f1e9ff; }
.case .case-section:nth-child(2) .info-card:nth-child(1) h3 i { color: #dd850b; background: #fff2dc; }
.case .case-section:nth-child(3) .info-card:nth-child(1) h3 i { color: #099b85; background: #ddf7ef; }
.case .case-section:nth-child(4) .info-card:nth-child(1) h3 i { color: #a64bca; background: #f7e9fc; }
.case .visual-cloud { color: #159fe4; }
.case .visual-server i:nth-child(1) { color: #2780e3; }
.case .visual-server i:nth-child(2) { color: #8561d5; }
.case .visual-server i:nth-child(3) { color: #16a69a; }
.case .node-one { color: #8750d4; background: #f2eaff; border-color: #ddc9fa; }
.case .node-two { color: #e59015; background: #fff3dc; border-color: #f2d8a6; }
.case .node-three { color: #0caa7a; background: #e3f9ef; border-color: #b8e9d4; }
.case .case-section:nth-child(1) .visual-device > i { color: #47e0bc; }
.case .case-section:nth-child(2) .visual-device > i { color: #ffce65; }
.case .case-section:nth-child(3) .visual-device > i { color: #bdabff; }
.case .case-section:nth-child(4) .visual-device > i { color: #72d5ff; }

/* Color-coded icons retain the restrained card layout. */
.case .info-card:nth-child(1) h3 i { color: #e44262; background: #ffe9ef; }
.case .info-card:nth-child(2) h3 i { color: #147bea; background: #e5f2ff; }
.case .info-card:nth-child(3) h3 i { color: #8950d6; background: #f1e9ff; }
.case .case-section:nth-child(2) .info-card:nth-child(1) h3 i { color: #dd850b; background: #fff2dc; }
.case .case-section:nth-child(3) .info-card:nth-child(1) h3 i { color: #099b85; background: #ddf7ef; }
.case .case-section:nth-child(4) .info-card:nth-child(1) h3 i { color: #a64bca; background: #f7e9fc; }
.case .visual-cloud { color: #159fe4; }
.case .visual-server i:nth-child(1) { color: #2780e3; }
.case .visual-server i:nth-child(2) { color: #8561d5; }
.case .visual-server i:nth-child(3) { color: #16a69a; }
.case .node-one { color: #8750d4; background: #f2eaff; border-color: #ddc9fa; }
.case .node-two { color: #e59015; background: #fff3dc; border-color: #f2d8a6; }
.case .node-three { color: #0caa7a; background: #e3f9ef; border-color: #b8e9d4; }
.case .case-section:nth-child(1) .visual-device > i { color: #47e0bc; }
.case .case-section:nth-child(2) .visual-device > i { color: #ffce65; }
.case .case-section:nth-child(3) .visual-device > i { color: #bdabff; }
.case .case-section:nth-child(4) .visual-device > i { color: #72d5ff; }

@media (max-width: 991px) {
  .case .case-section { grid-template-columns: 1fr 1fr; padding: 20px; }
  .case-visual { grid-column: 1 / -1; grid-row: 3; min-height: 240px; }
  .visual-device { width: 130px; left: calc(50% - 55px); }
  .visual-server { left: 23%; }.visual-cloud { left: 36%; }.node-one { right: 25%; }.node-two { right: 20%; }.node-three { left: 20%; }
}
@media (max-width: 575px) {
  .case { padding: 28px 12px; }
  .case .case-section { padding: 16px; gap: 12px; border-radius: 16px; }
  .case .info-card { grid-column: 1 / -1; }
  .case .case-section ul { grid-template-columns: 1fr; }
  .case .results-strip { padding: 16px; }
  .visual-server { left: 10%; }.node-one { right: 10%; }.node-two { right: 7%; }.node-three { left: 8%; }
}