/* ============================================================
   ADVANTAGES 3D — Cinematic, perspective-tilted cards
   ============================================================ */
.adv3d {
  position: relative;
  background: #0a0a0a;
  color: #fff;
  padding: 96px 0 110px;
  overflow: hidden;
  isolation: isolate;
}
.adv3d::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(240,125,7,.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* atmospheric backdrop */
.adv3d-bg {
  position: absolute; inset: 0;
  z-index: 0;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}
/* Subtle showroom photo painted at the back of the stack so the place
   itself glimpses through behind the perspective grid + glows. Heavy
   desaturation + low opacity keeps the orange palette dominant. */
.adv3d-showroom-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/showroom/GP-270326-3917.jpg');
  background-size: cover;
  background-position: center 50%;
  opacity: .14;
  filter: saturate(.35) contrast(1.05) brightness(.9);
}
.adv3d-showroom-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, #0a0a0a 80%);
}
.adv3d-grid-floor {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -40%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(240,125,7,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,125,7,.18) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: adv3dFloorPan 30s linear infinite;
}
@keyframes adv3dFloorPan {
  from { background-position: 0 0; }
  to { background-position: 0 80px; }
}
.adv3d-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
}
.adv3d-glow-1 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, #f07d07, transparent 70%);
  top: -120px; left: -160px;
}
.adv3d-glow-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #b55a00, transparent 70%);
  bottom: -180px; right: -120px;
  opacity: .35;
}

.adv3d .container { position: relative; z-index: 2; }

/* HEAD */
.adv3d-head {
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
  align-items: center;
}
.adv3d-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body, system-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
}
.adv3d-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f07d07;
  box-shadow: 0 0 10px #f07d07;
  animation: adv3dPulse 2s ease-in-out infinite;
}
@keyframes adv3dPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}
.adv3d-title {
  font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
  font-size: clamp(56px, 8vw, 132px);
  line-height: .85;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adv3d-title-row {
  display: block;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 40px rgba(240,125,7,.15);
}
.adv3d-title-em em {
  font-style: normal;
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.adv3d-kicker {
  color: rgba(255,255,255,.5);
  font-size: 14px;
  letter-spacing: .04em;
}

/* STAGE — perspective container */
.adv3d-stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  perspective: 1800px;
  perspective-origin: 50% 30%;
}

/* CARD */
.adv3d-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.adv3d-card:nth-child(1) { transform: rotateY(8deg) rotateX(2deg) translateZ(0); }
.adv3d-card:nth-child(2) { transform: rotateX(2deg) translateZ(40px); z-index: 2; }
.adv3d-card:nth-child(3) { transform: rotateY(-8deg) rotateX(2deg) translateZ(0); }
.adv3d-card:hover { transform: rotateY(0deg) rotateX(0deg) translateZ(60px); z-index: 3; }

.adv3d-card-inner {
  position: relative;
  padding: 32px 28px 36px;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 60%, rgba(0,0,0,.4) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color 400ms ease, box-shadow 400ms ease;
}
.adv3d-card:hover .adv3d-card-inner {
  border-color: rgba(240,125,7,.5);
  box-shadow:
    0 50px 120px rgba(240,125,7,.18),
    0 30px 80px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.adv3d-card-feat .adv3d-card-inner {
  background:
    linear-gradient(160deg, rgba(240,125,7,.18) 0%, rgba(181,90,0,.06) 50%, rgba(0,0,0,.5) 100%);
  border-color: rgba(240,125,7,.4);
}
.adv3d-card-feat .adv3d-card-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(255,180,80,.6), transparent 40%, transparent 60%, rgba(240,125,7,.6)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.adv3d-card-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,125,7,.12), transparent 60%);
  pointer-events: none;
}
.adv3d-card-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  pointer-events: none;
}

/* corner registration marks */
.adv3d-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(240,125,7,.5);
  pointer-events: none;
  transition: all 400ms ease;
}
.adv3d-corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.adv3d-corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.adv3d-corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.adv3d-corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.adv3d-card:hover .adv3d-corner { width: 22px; height: 22px; border-color: #f07d07; }

.adv3d-step {
  position: relative;
  font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
  font-size: 14px;
  letter-spacing: .25em;
  color: #f07d07;
  align-self: flex-start;
  z-index: 2;
}
.adv3d-step-label {
  position: relative;
  font-family: var(--font-body, system-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: 6px;
  margin-bottom: 6px;
  z-index: 2;
}

/* SCENES — 3D illustrations */
.adv3d-scene {
  position: relative;
  height: 200px;
  margin: 4px -10px 12px;
  display: grid;
  place-items: center;
  perspective: 800px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  z-index: 2;
}

/* SCENE 1 (VEDI) and SCENE 2 (CAPISCI) replaced with photo frames —
   the iso-boxes and clock3d scenes were removed. Photo frame styles
   live below as `.adv3d-photo`. */

/* SCENE 3 — 3D phone with chat */
.phone3d {
  position: relative;
  width: 110px; height: 180px;
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(8deg) rotateZ(-4deg);
  animation: phone3dFloat 4s ease-in-out infinite;
}
@keyframes phone3dFloat {
  0%,100% { transform: rotateY(-22deg) rotateX(8deg) rotateZ(-4deg) translateY(0); }
  50% { transform: rotateY(-22deg) rotateX(8deg) rotateZ(-4deg) translateY(-8px); }
}
.phone3d-frame {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 30px 50px rgba(0,0,0,.6),
    -10px 0 30px rgba(0,0,0,.3);
  padding: 18px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phone3d-notch {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 5px;
  background: #000;
  border-radius: 4px;
}
.phone3d-bubble {
  height: 14px;
  border-radius: 4px;
  opacity: 0;
  transform: translateX(-10px);
  animation: phone3dBubble 4s ease-in-out infinite;
}
.phone3d-b1 { width: 60%; background: rgba(255,255,255,.12); animation-delay: .2s; }
.phone3d-b2 { width: 80%; background: rgba(255,255,255,.18); align-self: flex-end; transform: translateX(10px); animation-delay: .8s; animation-name: phone3dBubbleR; }
.phone3d-b3 { width: 50%; background: rgba(240,125,7,.55); animation-delay: 1.4s; }
@keyframes phone3dBubble {
  0%,15% { opacity: 0; transform: translateX(-10px); }
  25%,85% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; }
}
@keyframes phone3dBubbleR {
  0%,15% { opacity: 0; transform: translateX(10px); }
  25%,85% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; }
}
.phone3d-check {
  margin-top: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f07d07;
  color: #0a0a0a;
  display: grid;
  place-items: center;
  align-self: center;
  margin-bottom: 8px;
  box-shadow: 0 0 24px rgba(240,125,7,.7);
  animation: phone3dCheck 4s ease-in-out infinite;
}
.phone3d-check svg { width: 16px; height: 16px; }
@keyframes phone3dCheck {
  0%,70% { transform: scale(0); opacity: 0; }
  80%,100% { transform: scale(1); opacity: 1; }
}
.phone3d-shadow {
  position: absolute;
  bottom: -30px; left: 10%; right: 10%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%);
  filter: blur(10px);
  transform: translateZ(-1px);
}

/* big counter */
.adv3d-counter {
  position: absolute;
  bottom: 18px;
  right: 24px;
  font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
  font-size: clamp(72px, 7vw, 110px);
  line-height: .8;
  letter-spacing: .01em;
  color: rgba(255,255,255,.04);
  pointer-events: none;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
}
.adv3d-card-feat .adv3d-counter { color: rgba(240,125,7,.12); }
.adv3d-counter .num { display: inline-block; }
.adv3d-counter .plus { font-size: .5em; color: rgba(240,125,7,.5); margin-left: 4px; }

/* BODY */
.adv3d-body {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.adv3d-body h3 {
  font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: .92;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.adv3d-card-feat .adv3d-body h3 {
  background: linear-gradient(180deg, #fff 0%, #ffae54 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.adv3d-body p {
  color: rgba(255,255,255,.7);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}
.adv3d-checks {
  list-style: none;
  margin: 8px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adv3d-checks li {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .01em;
}
.adv3d-checks li::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffae54, #f07d07 70%);
  box-shadow: 0 0 8px rgba(240,125,7,.5), inset 0 -2px 4px rgba(0,0,0,.2);
  flex-shrink: 0;
  position: relative;
}
.adv3d-checks li::after {
  content: "";
  width: 8px; height: 4px;
  border-left: 1.5px solid #0a0a0a;
  border-bottom: 1.5px solid #0a0a0a;
  position: absolute;
  margin-left: 4px;
  transform: rotate(-45deg) translateY(-2px);
}

/* SCENE 1 — VEDI · "Showroom shelf" carousel
   A horizontal track of packaging silhouettes (bag, pizza box, cup,
   tray) scrolling left on infinite loop. The pizza box is the
   "personalized" one (orange + G mark) — the visual punchline of
   "vedi prima di decidere" + "il tuo nome sopra". */
.adv3d-scene-shelf {
  height: 180px;
  display: block;            /* override base .adv3d-scene grid */
  perspective: none;          /* 2D side-view, no perspective */
  transform-style: flat;
  margin: 8px -16px 12px;
  overflow: hidden;
  position: relative;
}
.shelf-line {
  position: absolute;
  bottom: 32px;
  left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13,13,13,.18) 18%, rgba(13,13,13,.18) 82%, transparent);
  z-index: 0;
}
.shelf-track {
  position: absolute;
  bottom: 33px;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 30px;
  padding: 0 16px;
  width: max-content;
  animation: shelfScroll 16s linear infinite;
  z-index: 1;
}
@keyframes shelfScroll {
  to { transform: translateX(calc(-50% - 15px)); }
}
.adv3d-card:hover .shelf-track { animation-duration: 9s; }

.shelf-item {
  position: relative;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(13,13,13,.06));
}

/* All shelf items share the dark phone3d aesthetic so the card visually
   rhymes with CONFERMA's phone3d (sleek black + orange accents). */
.shelf-item:not(.is-brand) {
  background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 18px rgba(0,0,0,.18);
}

/* Bag (shopper) — tall rounded rect with two arch handles */
.shelf-bag {
  width: 46px; height: 70px;
  border-radius: 3px 3px 4px 4px;
  margin-top: 12px;     /* leave room above for handles */
}
.shelf-bag::before, .shelf-bag::after {
  content: '';
  position: absolute;
  width: 14px; height: 12px;
  border: 1.5px solid rgba(255,255,255,.35);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  top: -10px;
}
.shelf-bag::before { left: 6px; }
.shelf-bag::after { right: 6px; }

/* Pizza box — square with dashed inset suggesting a closure flap */
.shelf-box {
  width: 70px; height: 56px;
  border-radius: 3px;
  margin-top: 26px;
}
.shelf-box::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 2px;
}

/* Coffee cup — trapezoidal via clip-path, with a rim line */
.shelf-cup {
  width: 50px; height: 70px;
  clip-path: polygon(12% 0, 88% 0, 96% 100%, 4% 100%);
  margin-top: 12px;
  /* clip-path strips the box-shadow; rebuild via inner highlight */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.shelf-cup::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 14%; right: 14%;
  height: 2px;
  background: rgba(255,255,255,.18);
}

/* Takeaway tray — wide, low, slight rounded bottom */
.shelf-tray {
  width: 80px; height: 36px;
  border-radius: 4px 4px 10px 10px;
  margin-top: 46px;
}

/* "Personalized" item — orange brand color + G mark.
   The pizza box is the flagship customizable item, hence is-brand on it. */
.shelf-item.is-brand {
  background: linear-gradient(170deg, #ff9a3a 0%, #f07d07 100%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 20px rgba(240,125,7,.35);
  animation: shelfBrandPulse 2.4s ease-in-out infinite;
}
.shelf-item.is-brand::before {
  border-color: rgba(255,255,255,.32);
}
@keyframes shelfBrandPulse {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(240,125,7,.32); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(240,125,7,.55); }
}
.shelf-item .brand-g {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
  font-size: 26px;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  z-index: 1;
}

/* SCENE 2 — CAPISCI · "Box folding + brand stamp"
   A flat box template folds itself into a 3D box, then the Gima brand
   stamp drops onto the front. Loop. Visual punchline: from generic
   raw → branded packaging in 60 minuti. */
.adv3d-scene-fold {
  height: 180px;
  display: grid;
  place-items: center;
  perspective: 700px;
  perspective-origin: 50% 60%;
  transform-style: preserve-3d;
  margin: 8px -10px 12px;
  position: relative;
}
.fold-box {
  position: relative;
  width: 70px; height: 70px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-28deg);
}
.fold-face {
  position: absolute;
  width: 70px; height: 70px;
  background: linear-gradient(140deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1.5px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 6px 14px rgba(0,0,0,.22);
  backface-visibility: visible;
}
.fold-bottom {
  background: linear-gradient(140deg, #0a0a0a 0%, #050505 100%);
  /* darker = ground; sits flat at z=0 */
}
.fold-front {
  bottom: 0; left: 0;
  transform-origin: 50% 100%;
  animation: foldFront 6s cubic-bezier(.4,.05,.2,.95) infinite;
}
@keyframes foldFront {
  0%, 10%   { transform: rotateX(0deg); }     /* flat: extends below bottom */
  35%, 90%  { transform: rotateX(-90deg); }   /* folded up: front wall */
  100%      { transform: rotateX(0deg); }
}
.fold-back {
  top: 0; left: 0;
  transform-origin: 50% 0%;
  animation: foldBack 6s cubic-bezier(.4,.05,.2,.95) infinite;
}
@keyframes foldBack {
  0%, 10%   { transform: rotateX(0deg); }
  35%, 90%  { transform: rotateX(90deg); }
  100%      { transform: rotateX(0deg); }
}
.fold-left {
  top: 0; right: 100%;
  transform-origin: 100% 50%;
  animation: foldLeft 6s cubic-bezier(.4,.05,.2,.95) infinite;
}
@keyframes foldLeft {
  0%, 18%   { transform: rotateY(0deg); }
  42%, 90%  { transform: rotateY(90deg); }
  100%      { transform: rotateY(0deg); }
}
.fold-right {
  top: 0; left: 100%;
  transform-origin: 0% 50%;
  animation: foldRight 6s cubic-bezier(.4,.05,.2,.95) infinite;
}
@keyframes foldRight {
  0%, 18%   { transform: rotateY(0deg); }
  42%, 90%  { transform: rotateY(-90deg); }
  100%      { transform: rotateY(0deg); }
}

/* Brand stamp — drops from above and lands on the assembled box. */
.fold-stamp {
  position: absolute;
  top: 38%; left: 50%;
  width: 38px; height: 38px;
  background: var(--orange, #f07d07);
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 0 24px rgba(240,125,7,.55);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: foldStamp 6s cubic-bezier(.4,.05,.2,.95) infinite;
  z-index: 3;
}
@keyframes foldStamp {
  0%, 50%   { opacity: 0; transform: translate(-50%, -160%) scale(.4); }
  55%       { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  62%, 82%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .adv3d-stage { grid-template-columns: 1fr; gap: 28px; perspective: none; }
  .adv3d-card,
  .adv3d-card:nth-child(1),
  .adv3d-card:nth-child(2),
  .adv3d-card:nth-child(3) { transform: none; }
  .adv3d-card:hover { transform: translateY(-6px); }
  .adv3d-card-inner { min-height: 0; }
}
@media (max-width: 640px) {
  .adv3d { padding: 56px 0 60px; }
  .adv3d-head { margin-bottom: 56px; }
  .adv3d-card-inner { padding: 26px 22px 30px; }
  .adv3d-scene { height: 170px; }
  .adv3d-counter { font-size: 72px; bottom: 12px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .adv3d-grid-floor,
  .clock3d, .clock3d-hand-m,
  .phone3d, .phone3d-bubble, .phone3d-check,
  .iso-b4 { animation: none !important; }
}