:root {
  --cyan: #ff2bbd;
  --violet: #a855f7;
}

.brand img {
  display: block;
  width: 118px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px #ff2bbd88);
}

.hero-logo {
  position: absolute;
  z-index: 1;
  width: min(440px, 34vw);
  right: 8%;
  top: 27%;
  opacity: .3;
  filter: drop-shadow(0 0 35px #ff2bbdaa);
  transform: rotate(-3deg);
}

footer .brand img { width: 105px; }

.team-grid.solo {
  grid-template-columns: minmax(280px, 370px);
}

.services {
  background: radial-gradient(circle at 80% 25%, #ff2bbd12, transparent 28%), #07080c;
  border-top: 1px solid #22232c;
}

.services-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 90px;
  align-items: end;
}

.services-intro > p {
  color: #a7a8b2;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 65px;
}

.service-card {
  position: relative;
  min-height: 350px;
  padding: 34px 30px;
  overflow: hidden;
  border: 1px solid #252630;
  background: linear-gradient(145deg, #11121a, #0b0c11);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}

.service-card:hover {
  transform: translateY(-7px);
  border-color: #ff2bbd88;
  box-shadow: 0 20px 50px #0008, inset 0 -2px #ff2bbd;
}

.service-number { position: absolute; top: 25px; right: 25px; color: #555762; font: 700 10px var(--display); }
.service-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 50px; border: 1px solid #ff2bbd88; color: #ff75d8; font-size: 24px; box-shadow: inset 0 0 18px #ff2bbd1f, 0 0 16px #ff2bbd18; }
.service-card h3 { font: 600 17px var(--display); line-height: 1.4; }
.service-card p { color: #92949f; font-size: 12px; line-height: 1.75; }
.service-card > span { position: absolute; bottom: 28px; color: #ff2bbd; font-size: 8px; font-weight: 700; letter-spacing: 1.5px; }
.services-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding: 25px 28px; border: 1px solid #22232c; }
.services-cta p { margin: 0; color: #a7a8b2; font-size: 13px; }

@media (max-width: 800px) {
  .services-intro, .services-grid { grid-template-columns: 1fr; gap: 20px; }
  .services-grid { margin-top: 35px; }
  .service-card { min-height: 320px; }
  .services-cta { align-items: stretch; flex-direction: column; gap: 20px; }
}

@media (max-width: 800px) {
  .brand img { width: 90px; height: 50px; }
  .hero-logo { width: 70vw; right: -14%; top: 25%; opacity: .2; }
}

.button {
  background: linear-gradient(110deg, #ff2bbd, #ff75d8);
}

.button:hover {
  box-shadow: 0 0 30px #ff2bbd55;
}

.hero {
  background: radial-gradient(circle at 70% 42%, #431738 0, transparent 21%),
              linear-gradient(120deg, #07070b 25%, #120b15 70%, #0a0713);
}

.hero::after {
  border-color: #ff75d844;
  box-shadow: 0 0 60px #ff2bbd22, inset 0 0 50px #a855f719;
}

.hero-orb { background: #ff2bbd26; }
.vehicle-card:hover { border-color: #ff2bbd77; }
.vehicle-visual {
  background: radial-gradient(ellipse at 50% 75%, #ff2bbd35, transparent 45%),
              linear-gradient(145deg, #211623, #0b0c12);
}
.car-shape { box-shadow: 0 18px 15px #000, 0 0 24px #ff2bbd55; }
.avatar { background: radial-gradient(circle, #48203e, #11121a 60%); }
.apply { background: radial-gradient(circle at 15% 50%, #4a123c66, transparent 30%), #0b0c11; }
.cursor-glow { background: #ff2bbd12; }

.vehicle-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease, filter .45s ease;
}

.vehicle-card:hover .vehicle-image {
  transform: scale(1.035);
  filter: brightness(1.08);
}

.vehicle-visual:has(.vehicle-image) span {
  z-index: 2;
  padding: 6px 8px;
  background: #07070bcc;
  color: #ff75d8;
}

.vehicle-gallery .gallery-track,
.vehicle-gallery .gallery-track .vehicle-image {
  position: absolute;
  inset: 0;
}

.vehicle-gallery .gallery-track .vehicle-image {
  opacity: 0;
  pointer-events: none;
}

.vehicle-gallery .gallery-track .vehicle-image.active {
  opacity: 1;
  pointer-events: auto;
}

.gallery-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 38px;
  height: 48px;
  border: 1px solid #ff75d888;
  background: #07070bcc;
  color: #fff;
  font-size: 27px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s, border-color .2s;
}

.gallery-arrow:hover { background: #ff2bbdcc; border-color: #ff75d8; }
.gallery-arrow.previous { left: 14px; }
.gallery-arrow.next { right: 14px; }
.gallery-dots { position: absolute; z-index: 3; bottom: 13px; left: 50%; display: flex; gap: 7px; transform: translateX(-50%); }
.gallery-dots i { width: 19px; height: 3px; background: #ffffff55; transition: background .2s, width .2s; }
.gallery-dots i.active { width: 29px; background: #ff2bbd; box-shadow: 0 0 8px #ff2bbd; }