/* XWEB signature composition */
main {
  display: flex;
  flex-direction: column;
}

.hero {
  order: 1;
  isolation: isolate;
  color: #f5f7fa;
  background: #080b12;
}
.marquee { order: 2; }
.services { order: 3; }
.work { order: 4; }
.process { order: 5; }
.cta-section { order: 6; }

/* Straight, seamless ticker: no exposed corners and no item collisions. */
.marquee {
  width: 100%;
  margin-left: 0;
  transform: none;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.marquee-track {
  gap: 0;
  padding: 19px 0;
  animation-name: marquee-clean;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(32px, 3vw, 58px);
  padding-right: clamp(32px, 3vw, 58px);
  white-space: nowrap;
}

.marquee-group > * { flex: none; }
.marquee-group b { display: inline-grid; place-items: center; min-width: 1em; }

@keyframes marquee-clean {
  to { transform: translateX(-50%); }
}

.hero::before {
  content: "";
  position: absolute;
  width: clamp(280px, 38vw, 580px);
  aspect-ratio: 1;
  border-radius: 50%;
  right: -8%;
  top: 19%;
  z-index: -2;
  background: radial-gradient(circle at 34% 30%, #4b83ed 0 8%, #3369d2 9% 37%, #253652 38% 69%, #05070b 70%);
  opacity: .22;
  filter: saturate(.75);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 96px var(--pad) 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black 28%, transparent 92%);
}

.hero h1 { max-width: 1100px; }
.hero h1 em { color: #4b83ed; text-shadow: none; }
.hero-bottom { max-width: 1050px; }
.hero-kicker { color: #aebbd0; }
.hero .round-link { color: #f5f7fa; border-color: rgba(245,247,250,.55); }
.hero .round-link:hover { color: #080b12; background: #f5f7fa; }
.hero-orbit { right: 7%; top: auto; bottom: 12%; color: #f5f7fa; opacity: .28; }
.hero-orbit i { background: #f5f7fa; }
.nav { border-color: rgba(255,255,255,.13); }
.nav .logo { color: #f5f7fa; }
.nav .logo span { color: #4b83ed; }
.nav-links { color: #f5f7fa; }
.nav-cta { color: #080b12; background: #f5f7fa; }
.services { position: relative; }

.services::before {
  content: "XWEB / DIGITALNI STUDIO";
  position: absolute;
  right: var(--pad);
  top: 48px;
  color: #ffffff33;
  font: 600 10px Manrope, sans-serif;
  letter-spacing: .18em;
}

.service-card { transition: transform .35s ease, filter .35s ease; }
.service-card:hover { transform: translateY(-6px); filter: brightness(1.04); }
.project .visual { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.project:hover .visual { transform: scale(.985); }

@media (max-width: 800px) {
  .hero::before { width: 360px; right: -220px; top: 150px; opacity: .16; }
  .hero::after { inset: 74px 20px 0; background-size: 40px 40px; }
  .hero h1 { font-size: clamp(58px, 17vw, 92px); }
  .hero-bottom { margin-top: 90px; }
  .services::before { display: none; }
  .menu-btn span:not(.sr-only) { background: #f5f7fa; }
  .nav-links { color: #080b12; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card, .project .visual { transition: none; }
}