/* Hero: exploded 3D view of the platform stack */
.hero-visual { padding: 0; }
.stack-wrap { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; container-type: size; }
.scene {
  position: absolute; left: 44%; top: 67%;
  width: 44cqw; height: 44cqw; margin: -22cqw 0 0 -22cqw;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(calc(-38deg + var(--mx, 0deg)));
  transition: transform .35s ease-out;
}
.layer {
  position: absolute; inset: 0; border-radius: 3.5cqw;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--z) * 1cqw));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  background: linear-gradient(145deg, rgba(91,147,255,.34), rgba(20,41,74,.7));
  border: 1.5px solid rgba(160,200,255,.5);
  box-shadow: inset 0 0 30px rgba(91,147,255,.18), 0 0 30px rgba(47,109,246,.16);
}
.layer::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(rgba(160,200,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(160,200,255,.12) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}
.stack-wrap:hover .layer { transform: translateZ(calc(var(--z) * 1.22cqw)); }
.stack-wrap:hover .layer { box-shadow: inset 0 0 30px rgba(91,147,255,.25), 0 0 46px rgba(47,109,246,.35); }

/* label billboard: stays upright and facing the viewer */
.lt {
  position: absolute; left: 100%; top: 100%; white-space: nowrap;
  transform-origin: 0 50%;
  transform: rotateZ(calc(38deg - var(--mx, 0deg))) rotateX(-58deg) translate(20px, -50%);
  font-family: var(--fdisp); font-weight: 600; font-size: max(11px, 2.4cqw); color: #dbe8ff; letter-spacing: .01em;
  padding: .45em .95em; border-radius: 999px; background: rgba(10,22,40,.9); border: 1px solid rgba(127,169,255,.5);
}
.lt::before { content: ""; position: absolute; right: 100%; top: 50%; width: 20px; height: 1px; background: rgba(127,169,255,.7); }
/* layer contents */
.layer i { position: absolute; display: block; }
.ub { border-radius: 1.2cqw; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); }
.ub.acc { background: linear-gradient(135deg, #5b93ff, #2f6df6); border-color: rgba(255,255,255,.4); box-shadow: 0 0 18px rgba(47,109,246,.6); }
.cell { width: 24%; height: 20%; border-radius: 1.2cqw; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.cell.hot { background: rgba(95,208,138,.35); border-color: rgba(126,230,166,.7); box-shadow: 0 0 16px rgba(95,208,138,.5); }
.nd { width: 9%; height: 9%; border-radius: 50%; background: rgba(255,255,255,.2); border: 2px solid rgba(160,200,255,.8); }
.nd.big { width: 15%; height: 15%; background: linear-gradient(135deg, #5b93ff, #2f6df6); box-shadow: 0 0 22px rgba(47,109,246,.8); }
.wire { height: 2px; background: linear-gradient(90deg, rgba(160,200,255,.9), rgba(160,200,255,.3)); transform-origin: 0 50%; }
.db { left: 14%; width: 62%; height: 13%; border-radius: 2cqw; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
.db::after { content: ""; position: absolute; right: 8%; top: 50%; width: 1.8cqw; height: 1.8cqw; margin-top: -.9cqw; border-radius: 50%; background: #7ee6a6; box-shadow: 0 0 10px #5fd08a; }

/* vertical beams + data packets travelling up through the layers */
.beam { position: absolute; width: 2px; height: 44cqw; margin-left: -1px; background: linear-gradient(to top, rgba(127,192,255,.9), rgba(127,192,255,0)); transform-origin: 50% 0; transform: rotateX(90deg); }
.pk { position: absolute; width: 2.4cqw; height: 2.4cqw; margin: -1.2cqw 0 0 -1.2cqw; border-radius: 50%; background: #cfe6ff; box-shadow: 0 0 14px 3px rgba(91,147,255,.9); opacity: 0; animation: rise 4.4s linear infinite; animation-delay: var(--d, 0s); }
@keyframes rise {
  0% { transform: translateZ(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateZ(44cqw); opacity: 0; }
}

.hero-visual .f1 { left: -6px; bottom: -22px; }
.hero-visual .f2 { right: -6px; top: 10px; }

@media (max-width: 600px) {
  .hero-visual .f1 { left: -4px; bottom: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk { animation: none; opacity: 0; }
  .scene, .layer { transition: none; }
}

/* Work cards without a logo: icon tile */
.work-icon { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 22px; min-width: 132px; }
.work-icon svg { width: 30px; height: 30px; }
.work-icon b { font-family: var(--fdisp); font-size: .72rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.work-logo.work-icon { height: 76px; }

/* WhatsApp contact panel */
.btn-wa { background: linear-gradient(120deg, #2fd66b, #1ea952); color: #fff; box-shadow: 0 12px 30px -10px rgba(30,169,82,.75); gap: 12px; }
.btn-wa:hover { box-shadow: 0 18px 36px -10px rgba(30,169,82,.9); }
.btn-wa svg { width: 22px; height: 22px; flex-shrink: 0; }
.wa-card { background: #fff; border-radius: 24px; padding: 36px 32px; display: grid; gap: 18px; justify-items: center; text-align: center; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.wa-badge { width: 68px; height: 68px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #2fd66b, #1ea952); box-shadow: 0 14px 30px -10px rgba(30,169,82,.7); }
.wa-badge svg { width: 36px; height: 36px; }
.wa-card h3 { font-size: 1.5rem; }
.wa-card > p { color: var(--muted); max-width: 380px; }
.wa-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wa-topics a { font-size: .82rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); color: var(--navy); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.wa-topics a:hover { background: #e7f8ee; border-color: #8fdcae; color: #137a3b; }
.wa-card .btn-wa { margin-top: 6px; }
.wa-card .wa-num { font-family: var(--fdisp); font-weight: 600; color: var(--navy); font-size: .95rem; }

/* "Many more to come" card */
.work-more { grid-column: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 32px; border-radius: var(--r-lg); border: 2px dashed #b9c8e4; background: linear-gradient(160deg, rgba(47,109,246,.05), rgba(47,109,246,.01)); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.work-more:hover { transform: translateY(-6px); border-color: var(--blue); background: rgba(47,109,246,.07); }
.more-plus { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 300 2rem/1 var(--fdisp); color: #fff; background: linear-gradient(135deg, #3b82f6, #1f57d6); box-shadow: 0 12px 26px -8px rgba(47,109,246,.7); }
.work-more h3 { font-size: 1.3rem; }
.work-more p { color: var(--muted); max-width: 360px; font-size: .95rem; }
@media (max-width: 1080px) { .work-more { grid-column: 1 / -1; } }
.work-more .link-arrow { color: var(--blue); font-family: var(--fdisp); font-weight: 600; font-size: .95rem; margin-top: 4px; }
.work-more:hover .link-arrow { text-decoration: underline; }

.footer-links address { font-style: normal; line-height: 1.6; }