/* 360 eMarket - home services: 12 cards in a 4-column grid, 3D tilt, spotlight, floating icon tiles */
.what { padding-bottom: 118px; }
.sv { margin-top: 64px; text-align: left; padding-inline: var(--P, 24px); }
.sv__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sv-item { perspective: 1200px; }

.sv-card { --rx: 0deg; --ry: 0deg; --lift: 0px; --mx: 50%; --my: 20%; position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; min-height: 468px; padding: 24px 24px 24px; border-radius: 28px; color: #fff; transform-style: preserve-3d; transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; will-change: transform; }
.sv-card--dark { background: radial-gradient(120% 90% at 100% 0%, rgba(247, 132, 30, .16), transparent 55%), linear-gradient(160deg, #1a2030 0%, #0f131b 62%, #141a27 100%); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 34px 50px -28px rgba(10, 14, 22, .7), 0 2px 0 rgba(255, 255, 255, .05) inset; }
.sv-card--or { color: #17110a; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .38), transparent 52%), linear-gradient(155deg, #ffa13d 0%, #f7841e 48%, #ec6c08 100%); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 34px 50px -26px rgba(247, 132, 30, .75), 0 2px 0 rgba(255, 255, 255, .4) inset; }
.sv-card.is-hot { transition: transform .1s linear, box-shadow .4s; --lift: -10px; }
.sv-card--dark.is-hot { box-shadow: 0 48px 64px -28px rgba(10, 14, 22, .85), 0 0 0 1px rgba(247, 132, 30, .5), 0 2px 0 rgba(255, 255, 255, .05) inset; }
.sv-card--or.is-hot { box-shadow: 0 48px 64px -26px rgba(247, 132, 30, .85), 0 2px 0 rgba(255, 255, 255, .4) inset; }
.sv-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* light + sheen (clipped to the card) */
.sv-card__shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.sv-card__shine::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s; background: radial-gradient(340px circle at var(--mx) var(--my), rgba(255, 255, 255, .17), transparent 62%); }
.sv-card--or .sv-card__shine::before { background: radial-gradient(340px circle at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 62%); }
.sv-card.is-hot .sv-card__shine::before { opacity: 1; }
.sv-card__shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); transform: skewX(-18deg); }
.sv-card:hover .sv-card__shine::after { animation: svSheen .9s ease; }
@keyframes svSheen { to { left: 130%; } }

/* big outline number behind everything */
.sv-card__wm { position: absolute; right: 16px; top: 74px; z-index: 0; font-size: 124px; line-height: 1; font-weight: 800; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, .1); pointer-events: none; user-select: none; transform: translateZ(8px); transition: transform .5s cubic-bezier(.2, .8, .2, 1), -webkit-text-stroke-color .3s; }
.sv-card--or .sv-card__wm { -webkit-text-stroke-color: rgba(23, 17, 10, .14); }
.sv-card.is-hot .sv-card__wm { transform: translateZ(8px) translate(-8px, 6px) scale(1.05); -webkit-text-stroke-color: rgba(247, 132, 30, .6); }
.sv-card--or.is-hot .sv-card__wm { -webkit-text-stroke-color: rgba(23, 17, 10, .4); }

.sv-card > * { position: relative; z-index: 1; }
.sv-card > .sv-card__shine, .sv-card > .sv-card__wm { position: absolute; }
.sv-card__top { display: flex; align-items: center; justify-content: space-between; transform: translateZ(26px); }
.sv-card__num { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 11px; border-radius: 999px; background: #fff; color: #12151c; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.sv-card--or .sv-card__num { background: #14110d; color: #fff; }
.sv-card__cat { font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--orange); }
.sv-card--or .sv-card__cat { color: #14110d; }

/* floating glass tile that carries the icon */
.sv-card__ic { display: block; width: 78px; height: 78px; margin-top: 24px; transform: translateZ(64px); animation: svFloat 5.5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -.7s); }
.sv-card__ic i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 24px; background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 22px 30px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25); backdrop-filter: blur(6px); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.sv-card--or .sv-card__ic i { background: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18)); border-color: rgba(255, 255, 255, .6); box-shadow: 0 22px 30px -12px rgba(150, 60, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .7); }
.sv-card__ic svg { display: block; width: 44px; height: 44px; color: var(--orange); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.sv-card--or .sv-card__ic svg { color: #14110d; }
.sv-card:hover .sv-card__ic i { transform: scale(1.1) rotate(-6deg); }
.sv-card:hover .sv-card__ic svg { transform: scale(1.06); }
@keyframes svFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

.sv-card h3 { margin-top: 22px; font-size: clamp(22px, 1.7vw, 27px); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; transform: translateZ(34px); }
.sv-card ul { margin-top: 14px; display: grid; gap: 8px; transform: translateZ(18px); }
.sv-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.2px; line-height: 1.35; color: #c3cad6; }
.sv-card--or li { color: #2a1b0b; }
.sv-card li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--orange); }
.sv-card--or li svg { color: #14110d; }

.sv-card__more { margin-top: auto; padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15.5px; font-weight: 700; color: var(--orange); transform: translateZ(30px); }
.sv-card--or .sv-card__more { color: #14110d; }
.sv-card__more i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; transition: background .3s, color .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.sv-card__more svg { width: 17px; height: 11px; }
.sv-card:hover .sv-card__more i { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateX(4px) scale(1.08); }
.sv-card--or:hover .sv-card__more i { background: #14110d; border-color: #14110d; color: #fff; }

/* closing banner */
.sv__end { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 40px; border-radius: 28px; color: #fff; background: radial-gradient(90% 160% at 100% 50%, rgba(247, 132, 30, .28), transparent 60%), linear-gradient(120deg, #141a27, #0d1119); box-shadow: 0 30px 50px -30px rgba(10, 14, 22, .6); }
.sv__end h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.sv__end p { margin-top: 10px; max-width: 640px; font-size: 17px; line-height: 1.55; color: #aab4c3; }
.sv__end .btn { flex: none; }

@media (max-width: 1199px) { .sv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .sv-card { min-height: 430px; } }
@media (max-width: 759px) {
    .sv { margin-top: 36px; }
    .sv__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .sv-item { perspective: none; }
    .sv-card { min-height: 0; padding: 22px 22px 22px; border-radius: 24px; transform: none !important; }
    .sv-card > * { transform: none !important; }
    .sv-card__ic { width: 66px; height: 66px; margin-top: 20px; animation: none; }
    .sv-card__ic svg { width: 38px; height: 38px; }
    .sv-card__wm { top: 56px; font-size: 104px; }
    .sv-card:active { transform: scale(.985) !important; }
    .sv__end { flex-direction: column; align-items: flex-start; padding: 28px 24px; border-radius: 24px; }
    .sv__end .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sv-card, .sv-card__ic, .sv-card__wm { animation: none; transition: none; transform: none !important; } .sv-card > * { transform: none !important; } }