/* Spatial enhancement of the original Rank First Lab visual system. */
.service-grid { perspective: none; gap: 24px; }
.service-card {
  perspective: 1000px;
  perspective-origin: center;
  overflow: visible;
  opacity: 1;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  background: radial-gradient(ellipse at 0 0, #123760 0%, #0b213e 38%, #051225 100%);
  box-shadow: 0 5px 0 #030c1b, 0 6px 0 #163151, 0 20px 35px #01071266, inset 0 1px 0 #ffffff12;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms, box-shadow 260ms;
}
.service-card::before { border-radius: inherit; pointer-events: none; }
.service-card::after {
  inset: 0; width: auto; height: auto; border: 0; border-radius: inherit;
  box-shadow: none; pointer-events: none;
  background: radial-gradient(circle at 102% 105%, transparent 0 90px, #459fff08 91px 119px, transparent 120px 149px, #459fff06 150px 151px, transparent 152px);
}
.service-card:hover, .service-card:focus-within {
  z-index: 3;
  transform: perspective(1000px) translateY(-7px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  border-color: #458acd;
  box-shadow: 0 7px 0 #040e20, 0 8px 0 #265681, 0 30px 48px #00071399, inset 0 1px 0 #ffffff21;
}
.service-card:hover::after { transform: none; }
.service-card .service-visual {
  transform: translateZ(30px) rotateX(9deg) rotateY(-12deg) rotateZ(-5deg);
  background: linear-gradient(140deg, #194875, #09203e 70%);
  box-shadow: 2px 2px 0 #153d63, 4px 4px 0 #0c2b4b, 6px 6px 0 #061930, 9px 16px 22px #01081688, inset 1px 1px 0 #7fc8ff38;
}
.service-card:hover .service-visual, .service-card:focus-within .service-visual { transform: translateZ(50px) rotateY(-7deg) rotateZ(0deg); }
.service-card h3 { transform: translateZ(22px); }
.service-card p { transform: translateZ(12px); padding-bottom: 38px; }
.service-number { transform: translateZ(16px); color: #9ab2cc; }
.service-link { transform: translateZ(25px); min-height: 44px; bottom: 19px; font-size: 12px; }
.service-link::after { bottom: 4px; }
.service-card.reveal { transition-delay: 0s; }
.motion-control {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 10px 15px; border: 1px solid #426387; border-radius: 12px;
  color: #d5e6f8; background: #061329; font: 700 11px var(--body);
  box-shadow: 0 7px 20px #0006; cursor: pointer;
}
.motion-control::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ffd34b; }
.motion-control[aria-pressed="false"]::before { background: #92a4bb; }
.motion-control:hover { border-color: #f6cf4d; }
:is(a, button):focus-visible { outline: 2px solid #ffdc65; outline-offset: 5px; }
.dialog-close { width: 44px; height: 44px; }
.dialog-close span { top: 21px; left: 14px; }
.dialog-number { right: 72px; }
.dialog-content li { font-size: 12px; }
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="off"] .reveal { opacity: 1; }
html[data-motion="off"] .service-card { transform: none !important; }
html[data-motion="off"] .cursor-glow { display: none; }
html[data-motion="off"] .chart-line { stroke-dashoffset: 0; }
html[data-motion="off"] .chart-area-fill { opacity: 1; }
@media (max-width: 900px) {
  .primary-nav:not(.open) { visibility: hidden; }
  .primary-nav.open { visibility: visible; }
}
@media (max-width: 680px) {
  .service-grid { gap: 22px; }
  .service-card { padding: 27px; }
  .service-card h3 { font-size: 21px; }
  .service-card p { font-size: 14px; }
  .motion-control { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .dialog-close { position: absolute; top: 12px; right: 12px; }
  .footer-bottom { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .service-card, .service-card:hover { transform: none !important; }
  .service-card .service-visual { transform: rotate(-5deg); }
}