/* Home: four service tiles. The section follows its content (no forced
   screen height); 64–96 px of breathing room top and bottom. */
.sx-tiles-band { padding-block: clamp(64px, 7vw, 96px); }
.sx-tiles-band > .v-wrap { width: min(1336px, calc(100% - 104px)); }
.sx-tiles-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: end; margin-bottom: 40px; }
.sx-tiles-head .v-kicker { grid-column: 1 / -1; margin: 0 !important; }
.sx-tiles-head h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -.04em; margin: 0; color: #f1f6ee; }
.sx-tiles-head p { margin: 0; color: #c9d8c4; max-width: 46ch; }
.sx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.sx-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 24px; border: 1px solid #2c3f31; border-radius: 14px; background: linear-gradient(180deg, #121d16, #0e1611); }
/* Hover moves the tile with the individual `translate` property, so it never fights the
   scroll reveal's `transform`. Reveal properties keep their stagger; hover ones start at once
   and use the same curve in and out. */
.sx-tile, .js-reveal .sx-tile.sybe-reveal {
    transition-property: opacity, transform, translate, border-color;
    transition-duration: .7s, .7s, .26s, .26s;
    transition-timing-function: var(--ease-out), var(--ease-out), cubic-bezier(.2, .7, .2, 1), cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
}
/* The shadow is painted once and only faded, which is cheap and smooth. */
.sx-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .75); opacity: 0; transition: opacity .26s cubic-bezier(.2, .7, .2, 1); }
.sx-tile:focus-within { border-color: #8fb08a; }
@media (hover: hover) {
    .sx-tile:hover { translate: 0 -4px; border-color: #8fb08a; }
    .sx-tile:hover::before { opacity: 1; }
    .sx-tile:hover .sx-tile-arrow { translate: 3px -3px; }
}

.sx-tile-art { display: block; height: 220px; margin: -4px -6px 14px; overflow: hidden; }
.sx-tile-art svg.tech-art { display: block; position: static !important; width: 100% !important; height: 100% !important; max-width: none; max-height: none !important; margin: 0 !important; opacity: 1 !important; aspect-ratio: auto !important; }
/* Tile drawings stay still: restarting their animation on hover reset them to the first frame. */
.sx-tile .device-art .device-motion { animation: none; }
.sx-tile .device-art .da-label, .sx-tile .device-art .da-note, .sx-tile .device-art .da-detail-label, .sx-tile .device-art .da-ui-label, .sx-tile .device-art .da-title, .sx-tile .device-art .da-component-label { display: none; }

.sx-tile h3 { font: 600 19px/1.25 Manrope, Inter, sans-serif; letter-spacing: -.02em; margin: 0 0 8px; }
.sx-tile-link { color: #f1f6ee; text-decoration: none; }
.sx-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sx-tile-link:focus-visible { outline: none; }
.sx-tile:has(.sx-tile-link:focus-visible) { outline: 3px solid #d2e7c5; outline-offset: 3px; }
.sx-tile > p { margin: 0; font-size: 14px; line-height: 1.55; color: #c4d3bf; }
.sx-tile-arrow { position: absolute; top: 14px; right: 14px; color: #c6dfb7; transition: translate .26s cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 1180px) { .sx-tiles-band > .v-wrap { width: calc(100% - 64px); } }
@media (max-width: 1100px) { .sx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-tile-art { height: 160px; } }
@media (max-width: 650px) {
    .sx-tiles-band > .v-wrap { width: calc(100% - 40px); }
    .sx-tiles-head { grid-template-columns: 1fr; margin-bottom: 20px; }
    .sx-tiles-head p { font-size: 14.5px; }
    .sx-tiles { gap: 10px; }
    .sx-tile { padding: 12px 12px 14px; border-radius: 12px; }
    .sx-tile-art { height: 92px; margin: 0 0 8px; }
    .sx-tile h3 { font-size: 15.5px; margin-bottom: 6px; }
    .sx-tile > p { font-size: 12.5px; line-height: 1.45; }
    .sx-tile-arrow { top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .sx-tile, .sx-tile::before, .sx-tile-arrow, .js-reveal .sx-tile.sybe-reveal { transition: none; }
    .sx-tile:hover, .sx-tile:hover .sx-tile-arrow { translate: none; }
}